@fluentui/react-image 9.0.15 → 9.0.16
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.json +42 -1
- package/CHANGELOG.md +13 -2
- package/lib/components/Image/Image.js +0 -1
- package/lib/components/Image/Image.js.map +1 -1
- package/lib/components/Image/renderImage.js +2 -2
- package/lib/components/Image/renderImage.js.map +1 -1
- package/lib/components/Image/useImage.js +0 -1
- package/lib/components/Image/useImage.js.map +1 -1
- package/lib/components/Image/useImageStyles.js +56 -58
- package/lib/components/Image/useImageStyles.js.map +1 -1
- package/lib-commonjs/Image.js +0 -2
- package/lib-commonjs/Image.js.map +1 -1
- package/lib-commonjs/components/Image/Image.js +0 -6
- package/lib-commonjs/components/Image/Image.js.map +1 -1
- package/lib-commonjs/components/Image/Image.types.js.map +1 -1
- package/lib-commonjs/components/Image/index.js +0 -6
- package/lib-commonjs/components/Image/index.js.map +1 -1
- package/lib-commonjs/components/Image/renderImage.js +2 -6
- package/lib-commonjs/components/Image/renderImage.js.map +1 -1
- package/lib-commonjs/components/Image/useImage.js +0 -4
- package/lib-commonjs/components/Image/useImage.js.map +1 -1
- package/lib-commonjs/components/Image/useImageStyles.js +56 -62
- package/lib-commonjs/components/Image/useImageStyles.js.map +1 -1
- package/lib-commonjs/index.js +0 -2
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,48 @@
|
|
|
2
2
|
"name": "@fluentui/react-image",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Wed,
|
|
5
|
+
"date": "Wed, 04 Jan 2023 01:35:28 GMT",
|
|
6
|
+
"tag": "@fluentui/react-image_v9.0.16",
|
|
7
|
+
"version": "9.0.16",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "olfedias@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-image",
|
|
13
|
+
"commit": "2c38f1e4ae07b2b60df596efe11015a68f166dbf",
|
|
14
|
+
"comment": "chore: Update Griffel to latest version"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-image",
|
|
19
|
+
"comment": "Bump @fluentui/react-utilities to v9.3.1",
|
|
20
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-image",
|
|
25
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19",
|
|
26
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
27
|
+
}
|
|
28
|
+
],
|
|
29
|
+
"none": [
|
|
30
|
+
{
|
|
31
|
+
"author": "martinhochel@microsoft.com",
|
|
32
|
+
"package": "@fluentui/react-image",
|
|
33
|
+
"commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105",
|
|
34
|
+
"comment": "chore(scripts): move index.ts to to follow sub-folder domain packaging"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"author": "martinhochel@microsoft.com",
|
|
38
|
+
"package": "@fluentui/react-image",
|
|
39
|
+
"commit": "194b0cf0cc27c1c1233aa945f09b3ad29778d8ca",
|
|
40
|
+
"comment": "chore(scripts): use for @fluentui/scripts version within all package.json"
|
|
41
|
+
}
|
|
42
|
+
]
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"date": "Wed, 21 Dec 2022 10:20:33 GMT",
|
|
6
47
|
"tag": "@fluentui/react-image_v9.0.15",
|
|
7
48
|
"version": "9.0.15",
|
|
8
49
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,23 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-image
|
|
2
2
|
|
|
3
|
-
This log was last generated on Wed,
|
|
3
|
+
This log was last generated on Wed, 04 Jan 2023 01:35:28 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.0.16)
|
|
8
|
+
|
|
9
|
+
Wed, 04 Jan 2023 01:35:28 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.0.15..@fluentui/react-image_v9.0.16)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-utilities to v9.3.1 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
16
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
17
|
+
|
|
7
18
|
## [9.0.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.0.15)
|
|
8
19
|
|
|
9
|
-
Wed, 21 Dec 2022 10:
|
|
20
|
+
Wed, 21 Dec 2022 10:20:33 GMT
|
|
10
21
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.0.14..@fluentui/react-image_v9.0.15)
|
|
11
22
|
|
|
12
23
|
### Patches
|
|
@@ -5,7 +5,6 @@ import { useImageStyles_unstable } from './useImageStyles';
|
|
|
5
5
|
/**
|
|
6
6
|
* The Image component ensures the consistent styling of images.
|
|
7
7
|
*/
|
|
8
|
-
|
|
9
8
|
export const Image = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
10
9
|
const state = useImage_unstable(props, ref);
|
|
11
10
|
useImageStyles_unstable(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,iBAAiB,QAAQ,YAAY;AAC9C,SAASC,uBAAuB,QAAQ,kBAAkB;AAI1D;;;AAGA,OAAO,MAAMC,KAAK,gBAAoCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGN,iBAAiB,CAACI,KAAK,EAAEC,GAAG,CAAC;EAC3CJ,uBAAuB,CAACK,KAAK,CAAC;EAE9B,OAAOP,oBAAoB,CAACO,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFJ,KAAK,CAACK,WAAW,GAAG,OAAO","names":["React","renderImage_unstable","useImage_unstable","useImageStyles_unstable","Image","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-image/src/components/Image/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderImage_unstable } from './renderImage';\nimport { useImage_unstable } from './useImage';\nimport { useImageStyles_unstable } from './useImageStyles';\nimport type { ImageProps } from './Image.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\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 useImageStyles_unstable(state);\n\n return renderImage_unstable(state);\n});\n\nImage.displayName = 'Image';\n"]}
|
|
@@ -4,13 +4,13 @@ import { getSlots } from '@fluentui/react-utilities';
|
|
|
4
4
|
* Define the render function.
|
|
5
5
|
* Given the state of an image, renders it.
|
|
6
6
|
*/
|
|
7
|
-
|
|
8
7
|
export const renderImage_unstable = state => {
|
|
9
8
|
const {
|
|
10
9
|
slots,
|
|
11
10
|
slotProps
|
|
12
11
|
} = getSlots(state);
|
|
13
|
-
return /*#__PURE__*/React.createElement(slots.root, {
|
|
12
|
+
return /*#__PURE__*/React.createElement(slots.root, {
|
|
13
|
+
...slotProps.root
|
|
14
14
|
});
|
|
15
15
|
};
|
|
16
16
|
//# sourceMappingURL=renderImage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;;AAIA,OAAO,MAAMC,oBAAoB,GAAIC,KAAiB,IAAI;EACxD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAaE,KAAK,CAAC;EAExD,oBAAOH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,EAAI;AAC3C,CAAC","names":["React","getSlots","renderImage_unstable","state","slots","slotProps","root"],"sourceRoot":"../src/","sources":["packages/react-components/react-image/src/components/Image/renderImage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 const { slots, slotProps } = getSlots<ImageSlots>(state);\n\n return <slots.root {...slotProps.root} />;\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"AACA,SAASA,qBAAqB,QAAQ,2BAA2B;AAGjE;;;AAGA,OAAO,MAAMC,iBAAiB,GAAG,CAACC,KAAiB,EAAEC,GAAgC,KAAgB;EACnG,MAAM;IAAEC,QAAQ,GAAG,KAAK;IAAEC,GAAG,GAAG,SAAS;IAAEC,KAAK,GAAG,KAAK;IAAEC,KAAK,GAAG,QAAQ;IAAEC,MAAM,GAAG;EAAK,CAAE,GAAGN,KAAK;EAEpG,MAAMO,KAAK,GAAe;IACxBL,QAAQ;IACRC,GAAG;IACHC,KAAK;IACLC,KAAK;IACLC,MAAM;IACNE,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IACDA,IAAI,EAAEX,qBAAqB,CAAC,KAAK,EAAE;MACjCG,GAAG;MACH,GAAGD;KACJ;GACF;EAED,OAAOO,KAAK;AACd,CAAC","names":["getNativeElementProps","useImage_unstable","props","ref","bordered","fit","block","shape","shadow","state","components","root"],"sourceRoot":"../src/","sources":["packages/react-components/react-image/src/components/Image/useImage.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { 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, fit = 'default', block = false, shape = 'square', shadow = false } = props;\n\n const state: ImageState = {\n bordered,\n fit,\n block,\n shape,\n shadow,\n components: {\n root: 'img',\n },\n root: getNativeElementProps('img', {\n ref,\n ...props,\n }),\n };\n\n return state;\n};\n"]}
|
|
@@ -3,78 +3,76 @@ import { tokens } from '@fluentui/react-theme';
|
|
|
3
3
|
export const imageClassNames = {
|
|
4
4
|
root: 'fui-Image'
|
|
5
5
|
};
|
|
6
|
-
|
|
7
6
|
const useStyles = /*#__PURE__*/__styles({
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
7
|
+
base: {
|
|
8
|
+
g2u3we: "fj3muxo",
|
|
9
|
+
h3c5rm: ["f1akhkt", "f1lxtadh"],
|
|
10
|
+
B9xav0g: "f1aperda",
|
|
11
|
+
zhjwy3: ["f1lxtadh", "f1akhkt"],
|
|
12
|
+
Bbmb7ep: ["fzi6hpg", "fyowgf4"],
|
|
13
|
+
Beyfa6y: ["fyowgf4", "fzi6hpg"],
|
|
14
|
+
B7oj6ja: ["f3fg2lr", "f13av6d4"],
|
|
15
|
+
Btl43ni: ["f13av6d4", "f3fg2lr"],
|
|
16
|
+
B7ck84d: "f1ewtqcl",
|
|
17
|
+
mc9l5x: "f14t3ns0"
|
|
19
18
|
},
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
19
|
+
bordered: {
|
|
20
|
+
icvyot: "fzkkow9",
|
|
21
|
+
vrafjx: ["fcdblym", "fjik90z"],
|
|
22
|
+
oivjwe: "fg706s2",
|
|
23
|
+
wvpqe5: ["fjik90z", "fcdblym"],
|
|
24
|
+
B4j52fo: "f192inf7",
|
|
25
|
+
Bekrc4i: ["f5tn483", "f1ojsxk5"],
|
|
26
|
+
Bn0qgzm: "f1vxd6vx",
|
|
27
|
+
ibv6hh: ["f1ojsxk5", "f5tn483"]
|
|
29
28
|
},
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
29
|
+
circular: {
|
|
30
|
+
Bbmb7ep: ["f8fbkgy", "f1nfllo7"],
|
|
31
|
+
Beyfa6y: ["f1nfllo7", "f8fbkgy"],
|
|
32
|
+
B7oj6ja: ["f1djnp8u", "f1s8kh49"],
|
|
33
|
+
Btl43ni: ["f1s8kh49", "f1djnp8u"]
|
|
35
34
|
},
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
35
|
+
rounded: {
|
|
36
|
+
Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
|
|
37
|
+
Beyfa6y: ["f16jpd5f", "f1aa9q02"],
|
|
38
|
+
B7oj6ja: ["f1jar5jt", "fyu767a"],
|
|
39
|
+
Btl43ni: ["fyu767a", "f1jar5jt"]
|
|
41
40
|
},
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
41
|
+
square: {},
|
|
42
|
+
shadow: {
|
|
43
|
+
E5pizo: "f1whvlc6"
|
|
45
44
|
},
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
45
|
+
center: {
|
|
46
|
+
st4lth: "f1plgu50",
|
|
47
|
+
Ermj5k: "f14xojzb",
|
|
48
|
+
Bqenvij: "f1l02sjl",
|
|
49
|
+
a9b677: "fly5x3f"
|
|
51
50
|
},
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
51
|
+
contain: {
|
|
52
|
+
st4lth: "f1kle4es",
|
|
53
|
+
Ermj5k: "f14xojzb",
|
|
54
|
+
Bqenvij: "f1l02sjl",
|
|
55
|
+
a9b677: "fly5x3f"
|
|
57
56
|
},
|
|
58
57
|
"default": {},
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
58
|
+
cover: {
|
|
59
|
+
st4lth: "f1ps3kmd",
|
|
60
|
+
Ermj5k: "f14xojzb",
|
|
61
|
+
Bqenvij: "f1l02sjl",
|
|
62
|
+
a9b677: "fly5x3f"
|
|
64
63
|
},
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
64
|
+
none: {
|
|
65
|
+
st4lth: "f1plgu50",
|
|
66
|
+
Ermj5k: ["f13uwng7", "fjmyj0p"],
|
|
67
|
+
Bqenvij: "f1l02sjl",
|
|
68
|
+
a9b677: "fly5x3f"
|
|
70
69
|
},
|
|
71
|
-
|
|
72
|
-
|
|
70
|
+
block: {
|
|
71
|
+
a9b677: "fly5x3f"
|
|
73
72
|
}
|
|
74
73
|
}, {
|
|
75
|
-
|
|
74
|
+
d: [".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14t3ns0{display:inline-block;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".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;}"]
|
|
76
75
|
});
|
|
77
|
-
|
|
78
76
|
export const useImageStyles_unstable = state => {
|
|
79
77
|
const styles = useStyles();
|
|
80
78
|
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);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,kBAAoB,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAI9C,OAAO,MAAMC,eAAe,GAA+B;EACzDC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAiEhB;AAEF,OAAO,MAAMC,uBAAuB,GAAIC,KAAiB,IAAI;EAC3D,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CACjCE,eAAe,CAACC,IAAI,EACpBI,MAAM,CAACE,IAAI,EACXH,KAAK,CAACI,KAAK,IAAIH,MAAM,CAACG,KAAK,EAC3BJ,KAAK,CAACK,QAAQ,IAAIJ,MAAM,CAACI,QAAQ,EACjCL,KAAK,CAACM,MAAM,IAAIL,MAAM,CAACK,MAAM,EAC7BL,MAAM,CAACD,KAAK,CAACO,GAAG,CAAC,EACjBN,MAAM,CAACD,KAAK,CAACQ,KAAK,CAAC,EACnBR,KAAK,CAACH,IAAI,CAACK,SAAS,CACrB;AACH,CAAC","names":["shorthands","mergeClasses","tokens","imageClassNames","root","useStyles","useImageStyles_unstable","state","styles","className","base","block","bordered","shadow","fit","shape"],"sourceRoot":"../src/","sources":["packages/react-components/react-image/src/components/Image/useImageStyles.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 ...shorthands.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: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\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) => {\n const styles = useStyles();\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"]}
|
package/lib-commonjs/Image.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-image/src/Image.ts"],"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-image/src/Image.ts"],"sourcesContent":["export * from './components/Image/index';\n"]}
|
|
@@ -4,19 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.Image = void 0;
|
|
7
|
-
|
|
8
7
|
const React = /*#__PURE__*/require("react");
|
|
9
|
-
|
|
10
8
|
const renderImage_1 = /*#__PURE__*/require("./renderImage");
|
|
11
|
-
|
|
12
9
|
const useImage_1 = /*#__PURE__*/require("./useImage");
|
|
13
|
-
|
|
14
10
|
const useImageStyles_1 = /*#__PURE__*/require("./useImageStyles");
|
|
15
11
|
/**
|
|
16
12
|
* The Image component ensures the consistent styling of images.
|
|
17
13
|
*/
|
|
18
|
-
|
|
19
|
-
|
|
20
14
|
exports.Image = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
21
15
|
const state = useImage_1.useImage_unstable(props, ref);
|
|
22
16
|
useImageStyles_1.useImageStyles_unstable(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,aAAK,gBAAoCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGC,4BAAiB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAC3CG,wCAAuB,CAACF,KAAK,CAAC;EAE9B,OAAOG,kCAAoB,CAACH,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFL,aAAK,CAACS,WAAW,GAAG,OAAO","names":["exports","React","forwardRef","props","ref","state","useImage_1","useImageStyles_1","renderImage_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-image/src/components/Image/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderImage_unstable } from './renderImage';\nimport { useImage_unstable } from './useImage';\nimport { useImageStyles_unstable } from './useImageStyles';\nimport type { ImageProps } from './Image.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\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 useImageStyles_unstable(state);\n\n return renderImage_unstable(state);\n});\n\nImage.displayName = 'Image';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
|
|
@@ -3,16 +3,10 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
7
6
|
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
8
|
-
|
|
9
7
|
tslib_1.__exportStar(require("./Image.types"), exports);
|
|
10
|
-
|
|
11
8
|
tslib_1.__exportStar(require("./Image"), exports);
|
|
12
|
-
|
|
13
9
|
tslib_1.__exportStar(require("./renderImage"), exports);
|
|
14
|
-
|
|
15
10
|
tslib_1.__exportStar(require("./useImage"), exports);
|
|
16
|
-
|
|
17
11
|
tslib_1.__exportStar(require("./useImageStyles"), exports);
|
|
18
12
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-image/src/components/Image/index.ts"],"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-image/src/components/Image/index.ts"],"sourcesContent":["export * from './Image.types';\nexport * from './Image';\nexport * from './renderImage';\nexport * from './useImage';\nexport * from './useImageStyles';\n"]}
|
|
@@ -4,24 +4,20 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.renderImage_unstable = void 0;
|
|
7
|
-
|
|
8
7
|
const React = /*#__PURE__*/require("react");
|
|
9
|
-
|
|
10
8
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
11
9
|
/**
|
|
12
10
|
* Define the render function.
|
|
13
11
|
* Given the state of an image, renders it.
|
|
14
12
|
*/
|
|
15
|
-
|
|
16
|
-
|
|
17
13
|
const renderImage_unstable = state => {
|
|
18
14
|
const {
|
|
19
15
|
slots,
|
|
20
16
|
slotProps
|
|
21
17
|
} = react_utilities_1.getSlots(state);
|
|
22
|
-
return React.createElement(slots.root, {
|
|
18
|
+
return React.createElement(slots.root, {
|
|
19
|
+
...slotProps.root
|
|
23
20
|
});
|
|
24
21
|
};
|
|
25
|
-
|
|
26
22
|
exports.renderImage_unstable = renderImage_unstable;
|
|
27
23
|
//# sourceMappingURL=renderImage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;;AAIO,MAAMA,oBAAoB,GAAIC,KAAiB,IAAI;EACxD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAaH,KAAK,CAAC;EAExD,OAAOI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,EAAI;AAC3C,CAAC;AAJYC,4BAAoB","names":["renderImage_unstable","state","slots","slotProps","react_utilities_1","React","root","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-image/src/components/Image/renderImage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 const { slots, slotProps } = getSlots<ImageSlots>(state);\n\n return <slots.root {...slotProps.root} />;\n};\n"]}
|
|
@@ -4,13 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useImage_unstable = void 0;
|
|
7
|
-
|
|
8
7
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
9
8
|
/**
|
|
10
9
|
* Given user props, returns state and render function for an Image.
|
|
11
10
|
*/
|
|
12
|
-
|
|
13
|
-
|
|
14
11
|
const useImage_unstable = (props, ref) => {
|
|
15
12
|
const {
|
|
16
13
|
bordered = false,
|
|
@@ -35,6 +32,5 @@ const useImage_unstable = (props, ref) => {
|
|
|
35
32
|
};
|
|
36
33
|
return state;
|
|
37
34
|
};
|
|
38
|
-
|
|
39
35
|
exports.useImage_unstable = useImage_unstable;
|
|
40
36
|
//# sourceMappingURL=useImage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AACA;AAGA;;;AAGO,MAAMA,iBAAiB,GAAG,CAACC,KAAiB,EAAEC,GAAgC,KAAgB;EACnG,MAAM;IAAEC,QAAQ,GAAG,KAAK;IAAEC,GAAG,GAAG,SAAS;IAAEC,KAAK,GAAG,KAAK;IAAEC,KAAK,GAAG,QAAQ;IAAEC,MAAM,GAAG;EAAK,CAAE,GAAGN,KAAK;EAEpG,MAAMO,KAAK,GAAe;IACxBL,QAAQ;IACRC,GAAG;IACHC,KAAK;IACLC,KAAK;IACLC,MAAM;IACNE,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IACDA,IAAI,EAAEC,uCAAqB,CAAC,KAAK,EAAE;MACjCT,GAAG;MACH,GAAGD;KACJ;GACF;EAED,OAAOO,KAAK;AACd,CAAC;AAnBYI,yBAAiB","names":["useImage_unstable","props","ref","bordered","fit","block","shape","shadow","state","components","root","react_utilities_1","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-image/src/components/Image/useImage.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { 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, fit = 'default', block = false, shape = 'square', shadow = false } = props;\n\n const state: ImageState = {\n bordered,\n fit,\n block,\n shape,\n shadow,\n components: {\n root: 'img',\n },\n root: getNativeElementProps('img', {\n ref,\n ...props,\n }),\n };\n\n return state;\n};\n"]}
|
|
@@ -4,90 +4,84 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useImageStyles_unstable = exports.imageClassNames = void 0;
|
|
7
|
-
|
|
8
7
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
|
-
|
|
10
8
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
11
|
-
|
|
12
9
|
exports.imageClassNames = {
|
|
13
10
|
root: 'fui-Image'
|
|
14
11
|
};
|
|
15
|
-
|
|
16
12
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
13
|
+
base: {
|
|
14
|
+
g2u3we: "fj3muxo",
|
|
15
|
+
h3c5rm: ["f1akhkt", "f1lxtadh"],
|
|
16
|
+
B9xav0g: "f1aperda",
|
|
17
|
+
zhjwy3: ["f1lxtadh", "f1akhkt"],
|
|
18
|
+
Bbmb7ep: ["fzi6hpg", "fyowgf4"],
|
|
19
|
+
Beyfa6y: ["fyowgf4", "fzi6hpg"],
|
|
20
|
+
B7oj6ja: ["f3fg2lr", "f13av6d4"],
|
|
21
|
+
Btl43ni: ["f13av6d4", "f3fg2lr"],
|
|
22
|
+
B7ck84d: "f1ewtqcl",
|
|
23
|
+
mc9l5x: "f14t3ns0"
|
|
28
24
|
},
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
25
|
+
bordered: {
|
|
26
|
+
icvyot: "fzkkow9",
|
|
27
|
+
vrafjx: ["fcdblym", "fjik90z"],
|
|
28
|
+
oivjwe: "fg706s2",
|
|
29
|
+
wvpqe5: ["fjik90z", "fcdblym"],
|
|
30
|
+
B4j52fo: "f192inf7",
|
|
31
|
+
Bekrc4i: ["f5tn483", "f1ojsxk5"],
|
|
32
|
+
Bn0qgzm: "f1vxd6vx",
|
|
33
|
+
ibv6hh: ["f1ojsxk5", "f5tn483"]
|
|
38
34
|
},
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
35
|
+
circular: {
|
|
36
|
+
Bbmb7ep: ["f8fbkgy", "f1nfllo7"],
|
|
37
|
+
Beyfa6y: ["f1nfllo7", "f8fbkgy"],
|
|
38
|
+
B7oj6ja: ["f1djnp8u", "f1s8kh49"],
|
|
39
|
+
Btl43ni: ["f1s8kh49", "f1djnp8u"]
|
|
44
40
|
},
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
41
|
+
rounded: {
|
|
42
|
+
Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
|
|
43
|
+
Beyfa6y: ["f16jpd5f", "f1aa9q02"],
|
|
44
|
+
B7oj6ja: ["f1jar5jt", "fyu767a"],
|
|
45
|
+
Btl43ni: ["fyu767a", "f1jar5jt"]
|
|
50
46
|
},
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
47
|
+
square: {},
|
|
48
|
+
shadow: {
|
|
49
|
+
E5pizo: "f1whvlc6"
|
|
54
50
|
},
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
51
|
+
center: {
|
|
52
|
+
st4lth: "f1plgu50",
|
|
53
|
+
Ermj5k: "f14xojzb",
|
|
54
|
+
Bqenvij: "f1l02sjl",
|
|
55
|
+
a9b677: "fly5x3f"
|
|
60
56
|
},
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
57
|
+
contain: {
|
|
58
|
+
st4lth: "f1kle4es",
|
|
59
|
+
Ermj5k: "f14xojzb",
|
|
60
|
+
Bqenvij: "f1l02sjl",
|
|
61
|
+
a9b677: "fly5x3f"
|
|
66
62
|
},
|
|
67
63
|
"default": {},
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
64
|
+
cover: {
|
|
65
|
+
st4lth: "f1ps3kmd",
|
|
66
|
+
Ermj5k: "f14xojzb",
|
|
67
|
+
Bqenvij: "f1l02sjl",
|
|
68
|
+
a9b677: "fly5x3f"
|
|
73
69
|
},
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
70
|
+
none: {
|
|
71
|
+
st4lth: "f1plgu50",
|
|
72
|
+
Ermj5k: ["f13uwng7", "fjmyj0p"],
|
|
73
|
+
Bqenvij: "f1l02sjl",
|
|
74
|
+
a9b677: "fly5x3f"
|
|
79
75
|
},
|
|
80
|
-
|
|
81
|
-
|
|
76
|
+
block: {
|
|
77
|
+
a9b677: "fly5x3f"
|
|
82
78
|
}
|
|
83
79
|
}, {
|
|
84
|
-
|
|
80
|
+
d: [".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14t3ns0{display:inline-block;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".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;}"]
|
|
85
81
|
});
|
|
86
|
-
|
|
87
82
|
const useImageStyles_unstable = state => {
|
|
88
83
|
const styles = useStyles();
|
|
89
84
|
state.root.className = react_1.mergeClasses(exports.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);
|
|
90
85
|
};
|
|
91
|
-
|
|
92
86
|
exports.useImageStyles_unstable = useImageStyles_unstable;
|
|
93
87
|
//# sourceMappingURL=useImageStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AAIaA,uBAAe,GAA+B;EACzDC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAiE1B;AAEK,MAAMC,uBAAuB,GAAIC,KAAiB,IAAI;EAC3D,MAAMC,MAAM,GAAGJ,SAAS,EAAE;EAC1BG,KAAK,CAACJ,IAAI,CAACM,SAAS,GAAGJ,oBAAY,CACjCH,uBAAe,CAACC,IAAI,EACpBK,MAAM,CAACE,IAAI,EACXH,KAAK,CAACI,KAAK,IAAIH,MAAM,CAACG,KAAK,EAC3BJ,KAAK,CAACK,QAAQ,IAAIJ,MAAM,CAACI,QAAQ,EACjCL,KAAK,CAACM,MAAM,IAAIL,MAAM,CAACK,MAAM,EAC7BL,MAAM,CAACD,KAAK,CAACO,GAAG,CAAC,EACjBN,MAAM,CAACD,KAAK,CAACQ,KAAK,CAAC,EACnBR,KAAK,CAACJ,IAAI,CAACM,SAAS,CACrB;AACH,CAAC;AAZYP,+BAAuB","names":["exports","root","useStyles","react_1","useImageStyles_unstable","state","styles","className","base","block","bordered","shadow","fit","shape"],"sourceRoot":"../src/","sources":["packages/react-components/react-image/src/components/Image/useImageStyles.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 ...shorthands.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: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\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) => {\n const styles = useStyles();\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"]}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useImage_unstable = exports.useImageStyles_unstable = exports.renderImage_unstable = exports.imageClassNames = exports.Image = void 0;
|
|
7
|
-
|
|
8
7
|
var Image_1 = /*#__PURE__*/require("./Image");
|
|
9
|
-
|
|
10
8
|
Object.defineProperty(exports, "Image", {
|
|
11
9
|
enumerable: true,
|
|
12
10
|
get: function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAASA;EAAAC;EAAAC;IAAA,oBAAK;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,8BAAe;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,mCAAoB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,sCAAuB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,gCAAiB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-image/src/index.ts"],"sourcesContent":["export { Image, imageClassNames, renderImage_unstable, useImageStyles_unstable, useImage_unstable } from './Image';\nexport type { ImageProps, ImageSlots, ImageState } from './Image';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-image",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.16",
|
|
4
4
|
"description": "Fluent UI React Image component.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -27,12 +27,12 @@
|
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
|
29
29
|
"@fluentui/react-conformance": "*",
|
|
30
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
31
|
-
"@fluentui/scripts": "
|
|
30
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.19",
|
|
31
|
+
"@fluentui/scripts": "*"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@griffel/react": "^1.
|
|
35
|
-
"@fluentui/react-utilities": "^9.3.
|
|
34
|
+
"@griffel/react": "^1.5.2",
|
|
35
|
+
"@fluentui/react-utilities": "^9.3.1",
|
|
36
36
|
"@fluentui/react-theme": "^9.1.5",
|
|
37
37
|
"tslib": "^2.1.0"
|
|
38
38
|
},
|