@fluentui/react-image 9.3.4 → 9.3.6
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 +32 -5
- package/dist/index.d.ts +2 -1
- package/lib/components/Image/Image.js +1 -0
- package/lib/components/Image/Image.js.map +1 -1
- package/lib/components/Image/renderImage.js.map +1 -1
- package/lib/components/Image/useImageStyles.styles.js +17 -12
- package/lib/components/Image/useImageStyles.styles.js.map +1 -1
- package/lib/components/Image/useImageStyles.styles.raw.js +14 -11
- package/lib/components/Image/useImageStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/Image/Image.js +1 -0
- package/lib-commonjs/components/Image/Image.js.map +1 -1
- package/lib-commonjs/components/Image/renderImage.js.map +1 -1
- package/lib-commonjs/components/Image/useImageStyles.styles.js +15 -14
- package/lib-commonjs/components/Image/useImageStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Image/useImageStyles.styles.raw.js +14 -11
- package/lib-commonjs/components/Image/useImageStyles.styles.raw.js.map +1 -1
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,19 +1,46 @@
|
|
|
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, 02 Oct 2025 15:07:10 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.3.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.3.6)
|
|
8
|
+
|
|
9
|
+
Thu, 02 Oct 2025 15:07:10 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.3.5..@fluentui/react-image_v9.3.6)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: apply fit fill styles only if height and width are not provided ([PR #35161](https://github.com/microsoft/fluentui/pull/35161) by vgenaev@gmail.com)
|
|
15
|
+
- feat: enforce usage of use client directive for files with client-only features ([PR #35173](https://github.com/microsoft/fluentui/pull/35173) by dmytrokirpa@microsoft.com)
|
|
16
|
+
- Bump @fluentui/react-shared-contexts to v9.25.2 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
|
|
17
|
+
- Bump @fluentui/react-utilities to v9.25.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
|
|
18
|
+
- Bump @fluentui/react-jsx-runtime to v9.2.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
|
|
19
|
+
|
|
20
|
+
## [9.3.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.3.5)
|
|
21
|
+
|
|
22
|
+
Mon, 08 Sep 2025 12:50:58 GMT
|
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.3.4..@fluentui/react-image_v9.3.5)
|
|
24
|
+
|
|
25
|
+
### Patches
|
|
26
|
+
|
|
27
|
+
- chore: enforce explicit module boundary types ([PR #35080](https://github.com/microsoft/fluentui/pull/35080) by dmytrokirpa@microsoft.com)
|
|
28
|
+
- fix: react 19 type issues ([PR #34864](https://github.com/microsoft/fluentui/pull/34864) by dmytrokirpa@microsoft.com)
|
|
29
|
+
- chore: extend peer dependencies versions to support React 19 ([PR #35145](https://github.com/microsoft/fluentui/pull/35145) by dmytrokirpa@microsoft.com)
|
|
30
|
+
- Bump @fluentui/react-shared-contexts to v9.25.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
|
|
31
|
+
- Bump @fluentui/react-utilities to v9.24.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
|
|
32
|
+
- Bump @fluentui/react-jsx-runtime to v9.2.0 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
|
|
33
|
+
|
|
7
34
|
## [9.3.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.3.4)
|
|
8
35
|
|
|
9
|
-
Thu, 21 Aug 2025 12:
|
|
36
|
+
Thu, 21 Aug 2025 12:25:39 GMT
|
|
10
37
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.3.3..@fluentui/react-image_v9.3.4)
|
|
11
38
|
|
|
12
39
|
### Patches
|
|
13
40
|
|
|
14
|
-
- Bump @fluentui/react-shared-contexts to v9.25.0 ([
|
|
15
|
-
- Bump @fluentui/react-utilities to v9.24.0 ([
|
|
16
|
-
- Bump @fluentui/react-jsx-runtime to v9.1.6 ([
|
|
41
|
+
- Bump @fluentui/react-shared-contexts to v9.25.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
|
|
42
|
+
- Bump @fluentui/react-utilities to v9.24.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
|
|
43
|
+
- Bump @fluentui/react-jsx-runtime to v9.1.6 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
|
|
17
44
|
|
|
18
45
|
## [9.3.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.3.3)
|
|
19
46
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
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
|
+
import type { JSXElement } from '@fluentui/react-utilities';
|
|
4
5
|
import * as React_2 from 'react';
|
|
5
6
|
import type { Slot } from '@fluentui/react-utilities';
|
|
6
7
|
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
@@ -56,7 +57,7 @@ export declare type ImageState = ComponentState<ImageSlots> & Required<Pick<Imag
|
|
|
56
57
|
* Define the render function.
|
|
57
58
|
* Given the state of an image, renders it.
|
|
58
59
|
*/
|
|
59
|
-
export declare const renderImage_unstable: (state: ImageState) =>
|
|
60
|
+
export declare const renderImage_unstable: (state: ImageState) => JSXElement;
|
|
60
61
|
|
|
61
62
|
/**
|
|
62
63
|
* Given user props, returns state and render function for an Image.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Image/Image.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderImage_unstable } from './renderImage';\nimport { useImage_unstable } from './useImage';\nimport { useImageStyles_unstable } from './useImageStyles.styles';\nimport type { ImageProps } from './Image.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The Image component ensures the consistent styling of images.\n */\nexport const Image: ForwardRefComponent<ImageProps> = React.forwardRef((props, ref) => {\n const state = useImage_unstable(props, ref);\n\n useImageStyles_unstable(state);\n\n useCustomStyleHook_unstable('useImageStyles_unstable')(state);\n\n return renderImage_unstable(state);\n});\n\nImage.displayName = 'Image';\n"],"names":["React","renderImage_unstable","useImage_unstable","useImageStyles_unstable","useCustomStyleHook_unstable","Image","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,uBAAuB,QAAQ,0BAA0B;AAGlE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,sBAAyCL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,QAAQP,kBAAkBK,OAAOC;IAEvCL,wBAAwBM;IAExBL,4BAA4B,2BAA2BK;IAEvD,OAAOR,qBAAqBQ;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}
|
|
@@ -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 { ImageSlots, ImageState } 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: ImageState) => {\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;
|
|
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, ImageState } 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: ImageState): 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,3 +1,5 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
1
3
|
import { shorthands, mergeClasses, __styles } from '@griffel/react';
|
|
2
4
|
import { tokens } from '@fluentui/react-theme';
|
|
3
5
|
export const imageClassNames = {
|
|
@@ -47,26 +49,22 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
47
49
|
},
|
|
48
50
|
center: {
|
|
49
51
|
st4lth: "f1plgu50",
|
|
50
|
-
Ermj5k: "f14xojzb"
|
|
51
|
-
Bqenvij: "f1l02sjl",
|
|
52
|
-
a9b677: "fly5x3f"
|
|
52
|
+
Ermj5k: "f14xojzb"
|
|
53
53
|
},
|
|
54
54
|
contain: {
|
|
55
55
|
st4lth: "f1kle4es",
|
|
56
|
-
Ermj5k: "f14xojzb"
|
|
57
|
-
Bqenvij: "f1l02sjl",
|
|
58
|
-
a9b677: "fly5x3f"
|
|
56
|
+
Ermj5k: "f14xojzb"
|
|
59
57
|
},
|
|
60
58
|
"default": {},
|
|
61
59
|
cover: {
|
|
62
60
|
st4lth: "f1ps3kmd",
|
|
63
|
-
Ermj5k: "f14xojzb"
|
|
64
|
-
Bqenvij: "f1l02sjl",
|
|
65
|
-
a9b677: "fly5x3f"
|
|
61
|
+
Ermj5k: "f14xojzb"
|
|
66
62
|
},
|
|
67
63
|
none: {
|
|
68
64
|
st4lth: "f1plgu50",
|
|
69
|
-
Ermj5k: ["f13uwng7", "fjmyj0p"]
|
|
65
|
+
Ermj5k: ["f13uwng7", "fjmyj0p"]
|
|
66
|
+
},
|
|
67
|
+
fitFill: {
|
|
70
68
|
Bqenvij: "f1l02sjl",
|
|
71
69
|
a9b677: "fly5x3f"
|
|
72
70
|
},
|
|
@@ -80,12 +78,19 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
80
78
|
p: -1
|
|
81
79
|
}], [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
|
|
82
80
|
p: -1
|
|
83
|
-
}], ".f1whvlc6{box-shadow:var(--shadow4);}", ".f1plgu50{object-fit:none;}", ".f14xojzb{object-position:center;}", ".
|
|
81
|
+
}], ".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
82
|
});
|
|
85
83
|
export const useImageStyles_unstable = state => {
|
|
86
84
|
'use no memo';
|
|
87
85
|
|
|
88
86
|
const styles = useStyles();
|
|
89
|
-
|
|
87
|
+
const {
|
|
88
|
+
height,
|
|
89
|
+
width
|
|
90
|
+
} = state.root;
|
|
91
|
+
// eslint-disable-next-line eqeqeq
|
|
92
|
+
const hasExplicitSize = height != null || width != null;
|
|
93
|
+
const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;
|
|
94
|
+
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
95
|
return state;
|
|
91
96
|
};
|
|
@@ -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","
|
|
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":["'use client';\nimport { 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,YAAY;;AACZ,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":[]}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
|
|
2
3
|
import { tokens } from '@fluentui/react-theme';
|
|
3
4
|
export const imageClassNames = {
|
|
@@ -32,27 +33,25 @@ const useStyles = makeStyles({
|
|
|
32
33
|
// Fit variations
|
|
33
34
|
center: {
|
|
34
35
|
objectFit: 'none',
|
|
35
|
-
objectPosition: 'center'
|
|
36
|
-
height: '100%',
|
|
37
|
-
width: '100%'
|
|
36
|
+
objectPosition: 'center'
|
|
38
37
|
},
|
|
39
38
|
contain: {
|
|
40
39
|
objectFit: 'contain',
|
|
41
|
-
objectPosition: 'center'
|
|
42
|
-
height: '100%',
|
|
43
|
-
width: '100%'
|
|
40
|
+
objectPosition: 'center'
|
|
44
41
|
},
|
|
45
42
|
default: {
|
|
46
43
|
},
|
|
47
44
|
cover: {
|
|
48
45
|
objectFit: 'cover',
|
|
49
|
-
objectPosition: 'center'
|
|
50
|
-
height: '100%',
|
|
51
|
-
width: '100%'
|
|
46
|
+
objectPosition: 'center'
|
|
52
47
|
},
|
|
53
48
|
none: {
|
|
54
49
|
objectFit: 'none',
|
|
55
|
-
objectPosition: 'left top'
|
|
50
|
+
objectPosition: 'left top'
|
|
51
|
+
},
|
|
52
|
+
// When no explicit height/width props are provided, apply full-size
|
|
53
|
+
// sizing so fit modes behave as intended (object-fit fills the element).
|
|
54
|
+
fitFill: {
|
|
56
55
|
height: '100%',
|
|
57
56
|
width: '100%'
|
|
58
57
|
},
|
|
@@ -64,6 +63,10 @@ const useStyles = makeStyles({
|
|
|
64
63
|
export const useImageStyles_unstable = (state)=>{
|
|
65
64
|
'use no memo';
|
|
66
65
|
const styles = useStyles();
|
|
67
|
-
|
|
66
|
+
const { height, width } = state.root;
|
|
67
|
+
// eslint-disable-next-line eqeqeq
|
|
68
|
+
const hasExplicitSize = height != null || width != null;
|
|
69
|
+
const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;
|
|
70
|
+
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
71
|
return state;
|
|
69
72
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Image/useImageStyles.styles.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/Image/useImageStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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;AAEA,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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Image/Image.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderImage_unstable } from './renderImage';\nimport { useImage_unstable } from './useImage';\nimport { useImageStyles_unstable } from './useImageStyles.styles';\nimport type { ImageProps } from './Image.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The Image component ensures the consistent styling of images.\n */\nexport const Image: ForwardRefComponent<ImageProps> = React.forwardRef((props, ref) => {\n const state = useImage_unstable(props, ref);\n\n useImageStyles_unstable(state);\n\n useCustomStyleHook_unstable('useImageStyles_unstable')(state);\n\n return renderImage_unstable(state);\n});\n\nImage.displayName = 'Image';\n"],"names":["React","renderImage_unstable","useImage_unstable","useImageStyles_unstable","useCustomStyleHook_unstable","Image","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BACM,gBAAgB;0BACnB,aAAa;sCACP,0BAA0B;qCAGtB,kCAAkC;AAKvE,MAAMK,QAAAA,WAAAA,GAAyCL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,YAAQP,2BAAAA,EAAkBK,OAAOC;QAEvCL,6CAAAA,EAAwBM;QAExBL,gDAAAA,EAA4B,2BAA2BK;IAEvD,WAAOR,iCAAAA,EAAqBQ;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}
|
|
@@ -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 { ImageSlots, ImageState } 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: ImageState) => {\n assertSlots<ImageSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderImage_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;
|
|
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, ImageState } 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: ImageState): 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,3 +1,4 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
"use strict";
|
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
|
3
4
|
value: true
|
|
@@ -82,29 +83,25 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
82
83
|
},
|
|
83
84
|
center: {
|
|
84
85
|
st4lth: "f1plgu50",
|
|
85
|
-
Ermj5k: "f14xojzb"
|
|
86
|
-
Bqenvij: "f1l02sjl",
|
|
87
|
-
a9b677: "fly5x3f"
|
|
86
|
+
Ermj5k: "f14xojzb"
|
|
88
87
|
},
|
|
89
88
|
contain: {
|
|
90
89
|
st4lth: "f1kle4es",
|
|
91
|
-
Ermj5k: "f14xojzb"
|
|
92
|
-
Bqenvij: "f1l02sjl",
|
|
93
|
-
a9b677: "fly5x3f"
|
|
90
|
+
Ermj5k: "f14xojzb"
|
|
94
91
|
},
|
|
95
92
|
"default": {},
|
|
96
93
|
cover: {
|
|
97
94
|
st4lth: "f1ps3kmd",
|
|
98
|
-
Ermj5k: "f14xojzb"
|
|
99
|
-
Bqenvij: "f1l02sjl",
|
|
100
|
-
a9b677: "fly5x3f"
|
|
95
|
+
Ermj5k: "f14xojzb"
|
|
101
96
|
},
|
|
102
97
|
none: {
|
|
103
98
|
st4lth: "f1plgu50",
|
|
104
99
|
Ermj5k: [
|
|
105
100
|
"f13uwng7",
|
|
106
101
|
"fjmyj0p"
|
|
107
|
-
]
|
|
102
|
+
]
|
|
103
|
+
},
|
|
104
|
+
fitFill: {
|
|
108
105
|
Bqenvij: "f1l02sjl",
|
|
109
106
|
a9b677: "fly5x3f"
|
|
110
107
|
},
|
|
@@ -148,17 +145,21 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
148
145
|
".f1whvlc6{box-shadow:var(--shadow4);}",
|
|
149
146
|
".f1plgu50{object-fit:none;}",
|
|
150
147
|
".f14xojzb{object-position:center;}",
|
|
151
|
-
".f1l02sjl{height:100%;}",
|
|
152
|
-
".fly5x3f{width:100%;}",
|
|
153
148
|
".f1kle4es{object-fit:contain;}",
|
|
154
149
|
".f1ps3kmd{object-fit:cover;}",
|
|
155
150
|
".f13uwng7{object-position:left top;}",
|
|
156
|
-
".fjmyj0p{object-position:right top;}"
|
|
151
|
+
".fjmyj0p{object-position:right top;}",
|
|
152
|
+
".f1l02sjl{height:100%;}",
|
|
153
|
+
".fly5x3f{width:100%;}"
|
|
157
154
|
]
|
|
158
155
|
});
|
|
159
156
|
const useImageStyles_unstable = (state)=>{
|
|
160
157
|
'use no memo';
|
|
161
158
|
const styles = useStyles();
|
|
162
|
-
|
|
159
|
+
const { height, width } = state.root;
|
|
160
|
+
// eslint-disable-next-line eqeqeq
|
|
161
|
+
const hasExplicitSize = height != null || width != null;
|
|
162
|
+
const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;
|
|
163
|
+
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
164
|
return state;
|
|
164
165
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useImageStyles.styles.js"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["useImageStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
"use strict";
|
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
|
3
4
|
value: true
|
|
@@ -49,26 +50,24 @@ const useStyles = (0, _react.makeStyles)({
|
|
|
49
50
|
// Fit variations
|
|
50
51
|
center: {
|
|
51
52
|
objectFit: 'none',
|
|
52
|
-
objectPosition: 'center'
|
|
53
|
-
height: '100%',
|
|
54
|
-
width: '100%'
|
|
53
|
+
objectPosition: 'center'
|
|
55
54
|
},
|
|
56
55
|
contain: {
|
|
57
56
|
objectFit: 'contain',
|
|
58
|
-
objectPosition: 'center'
|
|
59
|
-
height: '100%',
|
|
60
|
-
width: '100%'
|
|
57
|
+
objectPosition: 'center'
|
|
61
58
|
},
|
|
62
59
|
default: {},
|
|
63
60
|
cover: {
|
|
64
61
|
objectFit: 'cover',
|
|
65
|
-
objectPosition: 'center'
|
|
66
|
-
height: '100%',
|
|
67
|
-
width: '100%'
|
|
62
|
+
objectPosition: 'center'
|
|
68
63
|
},
|
|
69
64
|
none: {
|
|
70
65
|
objectFit: 'none',
|
|
71
|
-
objectPosition: 'left top'
|
|
66
|
+
objectPosition: 'left top'
|
|
67
|
+
},
|
|
68
|
+
// When no explicit height/width props are provided, apply full-size
|
|
69
|
+
// sizing so fit modes behave as intended (object-fit fills the element).
|
|
70
|
+
fitFill: {
|
|
72
71
|
height: '100%',
|
|
73
72
|
width: '100%'
|
|
74
73
|
},
|
|
@@ -80,6 +79,10 @@ const useStyles = (0, _react.makeStyles)({
|
|
|
80
79
|
const useImageStyles_unstable = (state)=>{
|
|
81
80
|
'use no memo';
|
|
82
81
|
const styles = useStyles();
|
|
83
|
-
|
|
82
|
+
const { height, width } = state.root;
|
|
83
|
+
// eslint-disable-next-line eqeqeq
|
|
84
|
+
const hasExplicitSize = height != null || width != null;
|
|
85
|
+
const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;
|
|
86
|
+
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
87
|
return state;
|
|
85
88
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Image/useImageStyles.styles.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/Image/useImageStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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;;;;;;;;;;;;IAOaI,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": "9.3.
|
|
3
|
+
"version": "9.3.6",
|
|
4
4
|
"description": "Fluent UI React Image component.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -18,18 +18,18 @@
|
|
|
18
18
|
"@fluentui/scripts-api-extractor": "*"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@fluentui/react-shared-contexts": "^9.25.
|
|
22
|
-
"@fluentui/react-utilities": "^9.
|
|
23
|
-
"@fluentui/react-jsx-runtime": "^9.1
|
|
21
|
+
"@fluentui/react-shared-contexts": "^9.25.2",
|
|
22
|
+
"@fluentui/react-utilities": "^9.25.0",
|
|
23
|
+
"@fluentui/react-jsx-runtime": "^9.2.1",
|
|
24
24
|
"@fluentui/react-theme": "^9.2.0",
|
|
25
25
|
"@griffel/react": "^1.5.22",
|
|
26
26
|
"@swc/helpers": "^0.5.1"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
|
-
"@types/react": ">=16.14.0 <
|
|
30
|
-
"@types/react-dom": ">=16.9.0 <
|
|
31
|
-
"react": ">=16.14.0 <
|
|
32
|
-
"react-dom": ">=16.14.0 <
|
|
29
|
+
"@types/react": ">=16.14.0 <20.0.0",
|
|
30
|
+
"@types/react-dom": ">=16.9.0 <20.0.0",
|
|
31
|
+
"react": ">=16.14.0 <20.0.0",
|
|
32
|
+
"react-dom": ">=16.14.0 <20.0.0"
|
|
33
33
|
},
|
|
34
34
|
"beachball": {
|
|
35
35
|
"disallowedChangeTypes": [
|