@fluentui/react-image 9.4.0 → 9.4.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,12 +1,22 @@
1
1
  # Change Log - @fluentui/react-image
2
2
 
3
- This log was last generated on Thu, 26 Mar 2026 08:10:40 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 23 Apr 2026 11:59:22 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.4.1)
8
+
9
+ Thu, 23 Apr 2026 11:59:22 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.4.0..@fluentui/react-image_v9.4.1)
11
+
12
+ ### Patches
13
+
14
+ - Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
15
+ - Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
16
+
7
17
  ## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.4.0)
8
18
 
9
- Thu, 26 Mar 2026 08:10:40 GMT
19
+ Thu, 26 Mar 2026 08:12:49 GMT
10
20
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.3.15..@fluentui/react-image_v9.4.0)
11
21
 
12
22
  ### Minor changes
package/dist/index.d.ts CHANGED
@@ -2,7 +2,7 @@ import type { ComponentProps } from '@fluentui/react-utilities';
2
2
  import type { ComponentState } from '@fluentui/react-utilities';
3
3
  import type { ForwardRefComponent } from '@fluentui/react-utilities';
4
4
  import type { JSXElement } from '@fluentui/react-utilities';
5
- import * as React_2 from 'react';
5
+ import type * as React_2 from 'react';
6
6
  import type { Slot } from '@fluentui/react-utilities';
7
7
  import type { SlotClassNames } from '@fluentui/react-utilities';
8
8
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Image/renderImage.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ImageSlots, ImageBaseState } from './Image.types';\n\n/**\n * Define the render function.\n * Given the state of an image, renders it.\n */\nexport const renderImage_unstable = (state: ImageBaseState): JSXElement => {\n assertSlots<ImageSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderImage_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;;CAGC,GACD,OAAO,MAAMC,uBAAuB,CAACC;IACnCF,YAAwBE;IAExB,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
1
+ {"version":3,"sources":["../src/components/Image/renderImage.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ImageSlots, ImageBaseState } from './Image.types';\n\n/**\n * Define the render function.\n * Given the state of an image, renders it.\n */\nexport const renderImage_unstable = (state: ImageBaseState): JSXElement => {\n assertSlots<ImageSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderImage_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;;CAGC,GACD,OAAO,MAAMC,uBAAuB,CAACC;IACnCF,YAAwBE;IAExB,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
@@ -1,5 +1,4 @@
1
1
  'use client';
2
- import * as React from 'react';
3
2
  import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
4
3
  /**
5
4
  * Given user props, returns state and render function for an Image.
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Image/useImage.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { ImageBaseProps, ImageBaseState, ImageProps, ImageState } from './Image.types';\n\n/**\n * Given user props, returns state and render function for an Image.\n */\nexport const useImage_unstable = (props: ImageProps, ref: React.Ref<HTMLImageElement>): ImageState => {\n const { bordered = false, block = false, fit = 'default', shadow = false, shape = 'square', ...imageProps } = props;\n const state = useImageBase_unstable(imageProps, ref);\n\n return {\n bordered,\n block,\n fit,\n shadow,\n shape,\n ...state,\n };\n};\n\n/**\n * Base hook for Image component, which manages state related to slot structure.\n * This hook excludes design props (shape, shadow, bordered, fit).\n *\n * @param props - User provided props to the Image component.\n * @param ref - User provided ref to be passed to the Image component.\n */\nexport const useImageBase_unstable = (props: ImageBaseProps, ref: React.Ref<HTMLImageElement>): ImageBaseState => {\n return {\n components: {\n root: 'img',\n },\n root: slot.always(\n getIntrinsicElementProps('img', {\n ref,\n ...props,\n }),\n { elementType: 'img' },\n ),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useImage_unstable","props","ref","bordered","block","fit","shadow","shape","imageProps","state","useImageBase_unstable","components","root","always","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;CAEC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,WAAW,KAAK,EAAEC,QAAQ,KAAK,EAAEC,MAAM,SAAS,EAAEC,SAAS,KAAK,EAAEC,QAAQ,QAAQ,EAAE,GAAGC,YAAY,GAAGP;IAC9G,MAAMQ,QAAQC,sBAAsBF,YAAYN;IAEhD,OAAO;QACLC;QACAC;QACAC;QACAC;QACAC;QACA,GAAGE,KAAK;IACV;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,wBAAwB,CAACT,OAAuBC;IAC3D,OAAO;QACLS,YAAY;YACVC,MAAM;QACR;QACAA,MAAMb,KAAKc,MAAM,CACff,yBAAyB,OAAO;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEa,aAAa;QAAM;IAEzB;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/Image/useImage.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { ImageBaseProps, ImageBaseState, ImageProps, ImageState } from './Image.types';\n\n/**\n * Given user props, returns state and render function for an Image.\n */\nexport const useImage_unstable = (props: ImageProps, ref: React.Ref<HTMLImageElement>): ImageState => {\n const { bordered = false, block = false, fit = 'default', shadow = false, shape = 'square', ...imageProps } = props;\n const state = useImageBase_unstable(imageProps, ref);\n\n return {\n bordered,\n block,\n fit,\n shadow,\n shape,\n ...state,\n };\n};\n\n/**\n * Base hook for Image component, which manages state related to slot structure.\n * This hook excludes design props (shape, shadow, bordered, fit).\n *\n * @param props - User provided props to the Image component.\n * @param ref - User provided ref to be passed to the Image component.\n */\nexport const useImageBase_unstable = (props: ImageBaseProps, ref: React.Ref<HTMLImageElement>): ImageBaseState => {\n return {\n components: {\n root: 'img',\n },\n root: slot.always(\n getIntrinsicElementProps('img', {\n ref,\n ...props,\n }),\n { elementType: 'img' },\n ),\n };\n};\n"],"names":["getIntrinsicElementProps","slot","useImage_unstable","props","ref","bordered","block","fit","shadow","shape","imageProps","state","useImageBase_unstable","components","root","always","elementType"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;CAEC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,WAAW,KAAK,EAAEC,QAAQ,KAAK,EAAEC,MAAM,SAAS,EAAEC,SAAS,KAAK,EAAEC,QAAQ,QAAQ,EAAE,GAAGC,YAAY,GAAGP;IAC9G,MAAMQ,QAAQC,sBAAsBF,YAAYN;IAEhD,OAAO;QACLC;QACAC;QACAC;QACAC;QACAC;QACA,GAAGE,KAAK;IACV;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,wBAAwB,CAACT,OAAuBC;IAC3D,OAAO;QACLS,YAAY;YACVC,MAAM;QACR;QACAA,MAAMb,KAAKc,MAAM,CACff,yBAAyB,OAAO;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEa,aAAa;QAAM;IAEzB;AACF,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Image/renderImage.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ImageSlots, ImageBaseState } from './Image.types';\n\n/**\n * Define the render function.\n * Given the state of an image, renders it.\n */\nexport const renderImage_unstable = (state: ImageBaseState): JSXElement => {\n assertSlots<ImageSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderImage_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAQjD,MAAMC,uBAAuB,CAACC;QACnCF,2BAAAA,EAAwBE;IAExB,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}
1
+ {"version":3,"sources":["../src/components/Image/renderImage.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ImageSlots, ImageBaseState } from './Image.types';\n\n/**\n * Define the render function.\n * Given the state of an image, renders it.\n */\nexport const renderImage_unstable = (state: ImageBaseState): JSXElement => {\n assertSlots<ImageSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderImage_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAQjD,MAAMC,uBAAuB,CAACC;QACnCF,2BAAAA,EAAwBE;IAExB,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}
@@ -17,8 +17,6 @@ _export(exports, {
17
17
  return useImage_unstable;
18
18
  }
19
19
  });
20
- const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
21
- const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
22
20
  const _reactutilities = require("@fluentui/react-utilities");
23
21
  const useImage_unstable = (props, ref)=>{
24
22
  const { bordered = false, block = false, fit = 'default', shadow = false, shape = 'square', ...imageProps } = props;
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Image/useImage.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { ImageBaseProps, ImageBaseState, ImageProps, ImageState } from './Image.types';\n\n/**\n * Given user props, returns state and render function for an Image.\n */\nexport const useImage_unstable = (props: ImageProps, ref: React.Ref<HTMLImageElement>): ImageState => {\n const { bordered = false, block = false, fit = 'default', shadow = false, shape = 'square', ...imageProps } = props;\n const state = useImageBase_unstable(imageProps, ref);\n\n return {\n bordered,\n block,\n fit,\n shadow,\n shape,\n ...state,\n };\n};\n\n/**\n * Base hook for Image component, which manages state related to slot structure.\n * This hook excludes design props (shape, shadow, bordered, fit).\n *\n * @param props - User provided props to the Image component.\n * @param ref - User provided ref to be passed to the Image component.\n */\nexport const useImageBase_unstable = (props: ImageBaseProps, ref: React.Ref<HTMLImageElement>): ImageBaseState => {\n return {\n components: {\n root: 'img',\n },\n root: slot.always(\n getIntrinsicElementProps('img', {\n ref,\n ...props,\n }),\n { elementType: 'img' },\n ),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useImage_unstable","props","ref","bordered","block","fit","shadow","shape","imageProps","state","useImageBase_unstable","components","root","always","elementType"],"mappings":"AAAA;;;;;;;;;;;;IA8Baa,qBAAAA;;;qBArBAV;;;;;iEAPU,QAAQ;gCACgB,4BAA4B;AAMpE,MAAMA,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,WAAW,KAAK,EAAEC,QAAQ,KAAK,EAAEC,MAAM,SAAS,EAAEC,SAAS,KAAK,EAAEC,QAAQ,QAAQ,EAAE,GAAGC,YAAY,GAAGP;IAC9G,MAAMQ,QAAQC,sBAAsBF,YAAYN;IAEhD,OAAO;QACLC;QACAC;QACAC;QACAC;QACAC;QACA,GAAGE,KAAK;IACV;AACF,EAAE;AASK,8BAA8B,CAACR,OAAuBC;IAC3D,OAAO;QACLS,YAAY;YACVC,MAAM;QACR;QACAA,MAAMb,oBAAAA,CAAKc,MAAM,KACff,wCAAAA,EAAyB,OAAO;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEa,aAAa;QAAM;IAEzB;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/Image/useImage.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { ImageBaseProps, ImageBaseState, ImageProps, ImageState } from './Image.types';\n\n/**\n * Given user props, returns state and render function for an Image.\n */\nexport const useImage_unstable = (props: ImageProps, ref: React.Ref<HTMLImageElement>): ImageState => {\n const { bordered = false, block = false, fit = 'default', shadow = false, shape = 'square', ...imageProps } = props;\n const state = useImageBase_unstable(imageProps, ref);\n\n return {\n bordered,\n block,\n fit,\n shadow,\n shape,\n ...state,\n };\n};\n\n/**\n * Base hook for Image component, which manages state related to slot structure.\n * This hook excludes design props (shape, shadow, bordered, fit).\n *\n * @param props - User provided props to the Image component.\n * @param ref - User provided ref to be passed to the Image component.\n */\nexport const useImageBase_unstable = (props: ImageBaseProps, ref: React.Ref<HTMLImageElement>): ImageBaseState => {\n return {\n components: {\n root: 'img',\n },\n root: slot.always(\n getIntrinsicElementProps('img', {\n ref,\n ...props,\n }),\n { elementType: 'img' },\n ),\n };\n};\n"],"names":["getIntrinsicElementProps","slot","useImage_unstable","props","ref","bordered","block","fit","shadow","shape","imageProps","state","useImageBase_unstable","components","root","always","elementType"],"mappings":"AAAA;;;;;;;;;;;;IA8BaY,qBAAAA;;;qBArBAV;;;;gCANkC,4BAA4B;AAMpE,MAAMA,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,WAAW,KAAK,EAAEC,QAAQ,KAAK,EAAEC,MAAM,SAAS,EAAEC,SAAS,KAAK,EAAEC,QAAQ,QAAQ,EAAE,GAAGC,YAAY,GAAGP;IAC9G,MAAMQ,QAAQC,sBAAsBF,YAAYN;IAEhD,OAAO;QACLC;QACAC;QACAC;QACAC;QACAC;QACA,GAAGE,KAAK;IACV;AACF,EAAE;AASK,8BAA8B,CAACR,OAAuBC;IAC3D,OAAO;QACLS,YAAY;YACVC,MAAM;QACR;QACAA,MAAMb,oBAAAA,CAAKc,MAAM,KACff,wCAAAA,EAAyB,OAAO;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEa,aAAa;QAAM;IAEzB;AACF,EAAE"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-image",
3
- "version": "9.4.0",
3
+ "version": "9.4.1",
4
4
  "description": "Fluent UI React Image component.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -13,8 +13,8 @@
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
15
  "@fluentui/react-shared-contexts": "^9.26.2",
16
- "@fluentui/react-utilities": "^9.26.2",
17
- "@fluentui/react-jsx-runtime": "^9.4.1",
16
+ "@fluentui/react-utilities": "^9.26.3",
17
+ "@fluentui/react-jsx-runtime": "^9.4.2",
18
18
  "@fluentui/react-theme": "^9.2.1",
19
19
  "@griffel/react": "^1.5.32",
20
20
  "@swc/helpers": "^0.5.1"