@fluentui/react-image 0.0.0-nightlydd0f007b3f20220119.1 → 0.0.0-nightlye0b8e1fa6920220128.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.json +29 -23
- package/CHANGELOG.md +10 -10
- package/MIGRATION.md +3 -3
- package/dist/react-image.d.ts +5 -5
- package/lib/components/Image/Image.js +6 -6
- package/lib/components/Image/Image.js.map +1 -1
- package/lib/components/Image/Image.types.d.ts +2 -2
- package/lib/components/Image/renderImage.d.ts +1 -1
- package/lib/components/Image/renderImage.js +1 -1
- package/lib/components/Image/renderImage.js.map +1 -1
- package/lib/components/Image/useImage.d.ts +1 -1
- package/lib/components/Image/useImage.js +1 -1
- package/lib/components/Image/useImage.js.map +1 -1
- package/lib/components/Image/useImageStyles.d.ts +1 -1
- package/lib/components/Image/useImageStyles.js +2 -2
- package/lib/components/Image/useImageStyles.js.map +1 -1
- package/lib-commonjs/components/Image/Image.js +3 -3
- package/lib-commonjs/components/Image/Image.js.map +1 -1
- package/lib-commonjs/components/Image/Image.types.d.ts +2 -2
- package/lib-commonjs/components/Image/renderImage.d.ts +1 -1
- package/lib-commonjs/components/Image/renderImage.js +3 -3
- package/lib-commonjs/components/Image/renderImage.js.map +1 -1
- package/lib-commonjs/components/Image/useImage.d.ts +1 -1
- package/lib-commonjs/components/Image/useImage.js +3 -3
- package/lib-commonjs/components/Image/useImage.js.map +1 -1
- package/lib-commonjs/components/Image/useImageStyles.d.ts +1 -1
- package/lib-commonjs/components/Image/useImageStyles.js +6 -6
- package/lib-commonjs/components/Image/useImageStyles.js.map +1 -1
- package/package.json +4 -6
package/CHANGELOG.json
CHANGED
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
"name": "@fluentui/react-image",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-image_v0.0.0-
|
|
7
|
-
"version": "0.0.0-
|
|
5
|
+
"date": "Fri, 28 Jan 2022 04:13:20 GMT",
|
|
6
|
+
"tag": "@fluentui/react-image_v0.0.0-nightlye0b8e1fa6920220128.1",
|
|
7
|
+
"version": "0.0.0-nightlye0b8e1fa6920220128.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
11
11
|
"author": "email not defined",
|
|
12
12
|
"package": "@fluentui/react-image",
|
|
13
|
-
"commit": "
|
|
13
|
+
"commit": "90d10ec8c2d159575962c4d3d913317633b44a7a",
|
|
14
14
|
"comment": "Release nightly v9"
|
|
15
15
|
},
|
|
16
16
|
{
|
|
@@ -20,46 +20,46 @@
|
|
|
20
20
|
"comment": "react-image: Replacing use of functions in makeStyles with direct use of tokens."
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
|
-
"author": "
|
|
23
|
+
"author": "olfedias@microsoft.com",
|
|
24
24
|
"package": "@fluentui/react-image",
|
|
25
|
-
"commit": "
|
|
26
|
-
"comment": "
|
|
25
|
+
"commit": "2ce465c8034747199be56ab5ebce3272b6d3a4f9",
|
|
26
|
+
"comment": "use Griffel packages"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
|
-
"author": "
|
|
29
|
+
"author": "behowell@microsoft.com",
|
|
30
30
|
"package": "@fluentui/react-image",
|
|
31
|
-
"commit": "
|
|
32
|
-
"comment": "
|
|
31
|
+
"commit": "7cc28ed8320b00f42d91c63882f10316db2205c5",
|
|
32
|
+
"comment": "Remove component's shorthandProps array"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
|
-
"author": "
|
|
35
|
+
"author": "behowell@microsoft.com",
|
|
36
36
|
"package": "@fluentui/react-image",
|
|
37
|
-
"
|
|
38
|
-
"
|
|
37
|
+
"commit": "317209bb5cd57c40f35bc42060acb7e3cce5ec95",
|
|
38
|
+
"comment": "BREAKING: Rename component hooks add the suffix _unstable, as their API has not been finalized yet"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
|
-
"author": "
|
|
41
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
42
42
|
"package": "@fluentui/react-image",
|
|
43
|
-
"
|
|
44
|
-
"
|
|
43
|
+
"commit": "e0b8e1fa6980077e7b311fd1c72c28d3e4305db0",
|
|
44
|
+
"comment": "Updating based on changes to composition types."
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
|
-
"author": "
|
|
47
|
+
"author": "olfedias@microsoft.com",
|
|
48
48
|
"package": "@fluentui/react-image",
|
|
49
|
-
"
|
|
50
|
-
"
|
|
49
|
+
"commit": "ffe595b06f256f25e6224a0069972e1474893758",
|
|
50
|
+
"comment": "update styles to not use CSS shorthands"
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
53
|
"author": "beachball",
|
|
54
54
|
"package": "@fluentui/react-image",
|
|
55
|
-
"comment": "Bump @fluentui/
|
|
56
|
-
"commit": "
|
|
55
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightlye0b8e1fa6920220128.1",
|
|
56
|
+
"commit": "90d10ec8c2d159575962c4d3d913317633b44a7a"
|
|
57
57
|
},
|
|
58
58
|
{
|
|
59
59
|
"author": "beachball",
|
|
60
60
|
"package": "@fluentui/react-image",
|
|
61
|
-
"comment": "Bump @fluentui/react-conformance-
|
|
62
|
-
"commit": "
|
|
61
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightlye0b8e1fa6920220128.1",
|
|
62
|
+
"commit": "90d10ec8c2d159575962c4d3d913317633b44a7a"
|
|
63
63
|
}
|
|
64
64
|
],
|
|
65
65
|
"none": [
|
|
@@ -68,6 +68,12 @@
|
|
|
68
68
|
"package": "@fluentui/react-image",
|
|
69
69
|
"commit": "8dfa712156b70414205b87b5b6d099367b0c297d",
|
|
70
70
|
"comment": "chore: use storybook runner for all vNext packages"
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"author": "olfedias@microsoft.com",
|
|
74
|
+
"package": "@fluentui/react-image",
|
|
75
|
+
"commit": "c061e98be4b4a718c72a144a1f60bb5515824612",
|
|
76
|
+
"comment": "remove inline-style-expand-shorthand from tsconfigs"
|
|
71
77
|
}
|
|
72
78
|
]
|
|
73
79
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-image
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 28 Jan 2022 04:13:20 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-
|
|
7
|
+
## [0.0.0-nightlye0b8e1fa6920220128.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v0.0.0-nightlye0b8e1fa6920220128.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.0.0-beta.4..@fluentui/react-image_v0.0.0-
|
|
9
|
+
Fri, 28 Jan 2022 04:13:20 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.0.0-beta.4..@fluentui/react-image_v0.0.0-nightlye0b8e1fa6920220128.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
|
-
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/
|
|
14
|
+
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/90d10ec8c2d159575962c4d3d913317633b44a7a) by email not defined)
|
|
15
15
|
- react-image: Replacing use of functions in makeStyles with direct use of tokens. ([PR #21044](https://github.com/microsoft/fluentui/pull/21044) by Humberto.Morimoto@microsoft.com)
|
|
16
|
+
- use Griffel packages ([PR #21432](https://github.com/microsoft/fluentui/pull/21432) by olfedias@microsoft.com)
|
|
16
17
|
- Remove component's shorthandProps array ([PR #21134](https://github.com/microsoft/fluentui/pull/21134) by behowell@microsoft.com)
|
|
18
|
+
- BREAKING: Rename component hooks add the suffix _unstable, as their API has not been finalized yet ([PR #21365](https://github.com/microsoft/fluentui/pull/21365) by behowell@microsoft.com)
|
|
19
|
+
- Updating based on changes to composition types. ([PR #20891](https://github.com/microsoft/fluentui/pull/20891) by Humberto.Morimoto@microsoft.com)
|
|
17
20
|
- update styles to not use CSS shorthands ([PR #20818](https://github.com/microsoft/fluentui/pull/20818) by olfedias@microsoft.com)
|
|
18
|
-
- Bump @fluentui/react-
|
|
19
|
-
- Bump @fluentui/react-
|
|
20
|
-
- Bump @fluentui/babel-make-styles to v0.0.0-nightlydd0f007b3f20220119.1 ([commit](https://github.com/microsoft/fluentui/commit/6044506cc626a9a155e0df40645426ddcc080c55) by beachball)
|
|
21
|
-
- Bump @fluentui/jest-serializer-make-styles to v0.0.0-nightlydd0f007b3f20220119.1 ([commit](https://github.com/microsoft/fluentui/commit/6044506cc626a9a155e0df40645426ddcc080c55) by beachball)
|
|
22
|
-
- Bump @fluentui/react-conformance-make-styles to v0.0.0-nightlydd0f007b3f20220119.1 ([commit](https://github.com/microsoft/fluentui/commit/6044506cc626a9a155e0df40645426ddcc080c55) by beachball)
|
|
21
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightlye0b8e1fa6920220128.1 ([commit](https://github.com/microsoft/fluentui/commit/90d10ec8c2d159575962c4d3d913317633b44a7a) by beachball)
|
|
22
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightlye0b8e1fa6920220128.1 ([commit](https://github.com/microsoft/fluentui/commit/90d10ec8c2d159575962c4d3d913317633b44a7a) by beachball)
|
|
23
23
|
|
|
24
24
|
## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.0.0-beta.4)
|
|
25
25
|
|
package/MIGRATION.md
CHANGED
|
@@ -68,7 +68,7 @@ For v9, this feature is no longer supported. The alternative is to apply the ani
|
|
|
68
68
|
```jsx
|
|
69
69
|
import { useState } from 'react';
|
|
70
70
|
import { Image } from '@fluentui/react-image';
|
|
71
|
-
import { makeStyles } from '@
|
|
71
|
+
import { makeStyles } from '@griffel/react';
|
|
72
72
|
|
|
73
73
|
const useStyles = makeStyles(theme => ({
|
|
74
74
|
fadeIn400: {
|
|
@@ -99,7 +99,7 @@ For v9, this feature is no longer supported. The alternative would be to use the
|
|
|
99
99
|
|
|
100
100
|
```jsx
|
|
101
101
|
import { useState } from 'react';
|
|
102
|
-
import { makeStyles } from '@
|
|
102
|
+
import { makeStyles } from '@griffel/react';
|
|
103
103
|
import { Image } from '@fluentui/react-image';
|
|
104
104
|
|
|
105
105
|
const useStyles = makeStyles({
|
|
@@ -219,7 +219,7 @@ const MyComponent = () => {
|
|
|
219
219
|
|
|
220
220
|
```jsx
|
|
221
221
|
import { Image } from '@fluentui/react-image';
|
|
222
|
-
import { makeStyles } from '@
|
|
222
|
+
import { makeStyles } from '@griffel/react';
|
|
223
223
|
|
|
224
224
|
const useStyles = makeStyles(theme => ({
|
|
225
225
|
width100: {
|
package/dist/react-image.d.ts
CHANGED
|
@@ -1,7 +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 {
|
|
4
|
+
import type { IntrinsicSlotProps } from '@fluentui/react-utilities';
|
|
5
5
|
import * as React_2 from 'react';
|
|
6
6
|
|
|
7
7
|
/**
|
|
@@ -39,7 +39,7 @@ export declare type ImageCommons = {
|
|
|
39
39
|
export declare type ImageProps = ComponentProps<ImageSlots> & Partial<ImageCommons>;
|
|
40
40
|
|
|
41
41
|
export declare type ImageSlots = {
|
|
42
|
-
root:
|
|
42
|
+
root: IntrinsicSlotProps<'img'>;
|
|
43
43
|
};
|
|
44
44
|
|
|
45
45
|
export declare type ImageState = ComponentState<ImageSlots> & ImageCommons;
|
|
@@ -48,13 +48,13 @@ export declare type ImageState = ComponentState<ImageSlots> & ImageCommons;
|
|
|
48
48
|
* Define the render function.
|
|
49
49
|
* Given the state of an image, renders it.
|
|
50
50
|
*/
|
|
51
|
-
export declare const
|
|
51
|
+
export declare const renderImage_unstable: (state: ImageState) => JSX.Element;
|
|
52
52
|
|
|
53
53
|
/**
|
|
54
54
|
* Given user props, returns state and render function for an Image.
|
|
55
55
|
*/
|
|
56
|
-
export declare const
|
|
56
|
+
export declare const useImage_unstable: (props: ImageProps, ref: React_2.Ref<HTMLImageElement>) => ImageState;
|
|
57
57
|
|
|
58
|
-
export declare const
|
|
58
|
+
export declare const useImageStyles_unstable: (state: ImageState) => void;
|
|
59
59
|
|
|
60
60
|
export { }
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
2
|
+
import { renderImage_unstable } from './renderImage';
|
|
3
|
+
import { useImage_unstable } from './useImage';
|
|
4
|
+
import { useImageStyles_unstable } from './useImageStyles';
|
|
5
5
|
/**
|
|
6
6
|
* The Image component ensures the consistent styling of images.
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
export const Image = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
10
|
-
const state =
|
|
11
|
-
|
|
12
|
-
return
|
|
10
|
+
const state = useImage_unstable(props, ref);
|
|
11
|
+
useImageStyles_unstable(state);
|
|
12
|
+
return renderImage_unstable(state);
|
|
13
13
|
});
|
|
14
14
|
Image.displayName = 'Image';
|
|
15
15
|
//# sourceMappingURL=Image.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AAIA;;AAEG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpF,QAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;AACA,EAAA,uBAAuB,CAAC,KAAD,CAAvB;AAEA,SAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourceRoot":""}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type { ComponentState, ComponentProps,
|
|
1
|
+
import type { ComponentState, ComponentProps, IntrinsicSlotProps } from '@fluentui/react-utilities';
|
|
2
2
|
export declare type ImageSlots = {
|
|
3
|
-
root:
|
|
3
|
+
root: IntrinsicSlotProps<'img'>;
|
|
4
4
|
};
|
|
5
5
|
export declare type ImageCommons = {
|
|
6
6
|
/**
|
|
@@ -3,4 +3,4 @@ import { ImageState } from './Image.types';
|
|
|
3
3
|
* Define the render function.
|
|
4
4
|
* Given the state of an image, renders it.
|
|
5
5
|
*/
|
|
6
|
-
export declare const
|
|
6
|
+
export declare const renderImage_unstable: (state: ImageState) => JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Image/renderImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;;AAGG;;AACH,OAAO,MAAM,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/renderImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;;AAGG;;AACH,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;AACxD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAa,KAAb,CAArC;AAEA,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM","sourceRoot":""}
|
|
@@ -3,4 +3,4 @@ import type { ImageProps, ImageState } from './Image.types';
|
|
|
3
3
|
/**
|
|
4
4
|
* Given user props, returns state and render function for an Image.
|
|
5
5
|
*/
|
|
6
|
-
export declare const
|
|
6
|
+
export declare const useImage_unstable: (props: ImageProps, ref: React.Ref<HTMLImageElement>) => ImageState;
|
|
@@ -3,7 +3,7 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
|
|
|
3
3
|
* Given user props, returns state and render function for an Image.
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
export const
|
|
6
|
+
export const useImage_unstable = (props, ref) => {
|
|
7
7
|
const {
|
|
8
8
|
bordered,
|
|
9
9
|
fit,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Image/useImage.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAGA;;AAEG;;AACH,OAAO,MAAM,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/useImage.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAGA;;AAEG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;AACnG,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA,GAAZ;AAAiB,IAAA,KAAjB;AAAwB,IAAA,KAAK,GAAG,QAAhC;AAA0C,IAAA;AAA1C,MAAqD,KAA3D;AAEA,QAAM,KAAK,GAAe;AACxB,IAAA,QADwB;AAExB,IAAA,GAFwB;AAGxB,IAAA,KAHwB;AAIxB,IAAA,KAJwB;AAKxB,IAAA,MALwB;AAMxB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KANY;AASxB,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAAR;AATH,GAA1B;AAeA,SAAO,KAAP;AACD,CAnBM","sourceRoot":""}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { shorthands, mergeClasses, __styles } from '@
|
|
1
|
+
import { shorthands, mergeClasses, __styles } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
3
|
export const imageClassName = 'fui-Image';
|
|
4
4
|
|
|
@@ -71,7 +71,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
71
71
|
"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;}", ".f13uwng7{object-position:left top;}", ".fjmyj0p{object-position:right top;}", ".f1l02sjl{height:100%;}", ".fly5x3f{width:100%;}", ".f14xojzb{object-position:center;}", ".f1ps3kmd{object-fit:cover;}", ".f1kle4es{object-fit:contain;}"]
|
|
72
72
|
});
|
|
73
73
|
|
|
74
|
-
export const
|
|
74
|
+
export const useImageStyles_unstable = state => {
|
|
75
75
|
const styles = useStyles();
|
|
76
76
|
state.root.className = mergeClasses(imageClassName, styles.root, state.bordered && styles.rootBordered, state.shape === 'circular' && styles.rootCircular, state.shape === 'rounded' && styles.rootRounded, state.shadow && styles.rootShadow, state.fit === 'none' && styles.rootFitNone, state.fit === 'center' && styles.rootFitCenter, state.fit === 'cover' && styles.rootFitCover, state.fit === 'contain' && styles.rootFitContain, state.block && styles.rootBlock, state.root.className);
|
|
77
77
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Image/useImageStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/useImageStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,OAAO,MAAM,cAAc,GAAG,WAAvB;;AAEP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AAkDA,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAsB;AAC3D,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,cADiC,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,YAHQ,EAIjC,KAAK,CAAC,KAAN,KAAgB,UAAhB,IAA8B,MAAM,CAAC,YAJJ,EAKjC,KAAK,CAAC,KAAN,KAAgB,SAAhB,IAA6B,MAAM,CAAC,WALH,EAMjC,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,UANU,EAOjC,KAAK,CAAC,GAAN,KAAc,MAAd,IAAwB,MAAM,CAAC,WAPE,EAQjC,KAAK,CAAC,GAAN,KAAc,QAAd,IAA0B,MAAM,CAAC,aARA,EASjC,KAAK,CAAC,GAAN,KAAc,OAAd,IAAyB,MAAM,CAAC,YATC,EAUjC,KAAK,CAAC,GAAN,KAAc,SAAd,IAA2B,MAAM,CAAC,cAVD,EAWjC,KAAK,CAAC,KAAN,IAAe,MAAM,CAAC,SAXW,EAYjC,KAAK,CAAC,IAAN,CAAW,SAZsB,CAAnC;AAcD,CAhBM","sourceRoot":""}
|
|
@@ -18,9 +18,9 @@ const useImageStyles_1 = /*#__PURE__*/require("./useImageStyles");
|
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
exports.Image = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
21
|
-
const state = useImage_1.
|
|
22
|
-
useImageStyles_1.
|
|
23
|
-
return renderImage_1.
|
|
21
|
+
const state = useImage_1.useImage_unstable(props, ref);
|
|
22
|
+
useImageStyles_1.useImageStyles_unstable(state);
|
|
23
|
+
return renderImage_1.renderImage_unstable(state);
|
|
24
24
|
});
|
|
25
25
|
exports.Image.displayName = 'Image';
|
|
26
26
|
//# sourceMappingURL=Image.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpF,QAAM,KAAK,GAAG,UAAA,CAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpF,QAAM,KAAK,GAAG,UAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;AACA,EAAA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;AAEA,SAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourceRoot":""}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type { ComponentState, ComponentProps,
|
|
1
|
+
import type { ComponentState, ComponentProps, IntrinsicSlotProps } from '@fluentui/react-utilities';
|
|
2
2
|
export declare type ImageSlots = {
|
|
3
|
-
root:
|
|
3
|
+
root: IntrinsicSlotProps<'img'>;
|
|
4
4
|
};
|
|
5
5
|
export declare type ImageCommons = {
|
|
6
6
|
/**
|
|
@@ -3,4 +3,4 @@ import { ImageState } from './Image.types';
|
|
|
3
3
|
* Define the render function.
|
|
4
4
|
* Given the state of an image, renders it.
|
|
5
5
|
*/
|
|
6
|
-
export declare const
|
|
6
|
+
export declare const renderImage_unstable: (state: ImageState) => JSX.Element;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.renderImage_unstable = void 0;
|
|
7
7
|
|
|
8
8
|
const React = /*#__PURE__*/require("react");
|
|
9
9
|
|
|
@@ -14,7 +14,7 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
|
14
14
|
*/
|
|
15
15
|
|
|
16
16
|
|
|
17
|
-
const
|
|
17
|
+
const renderImage_unstable = state => {
|
|
18
18
|
const {
|
|
19
19
|
slots,
|
|
20
20
|
slotProps
|
|
@@ -23,5 +23,5 @@ const renderImage = state => {
|
|
|
23
23
|
});
|
|
24
24
|
};
|
|
25
25
|
|
|
26
|
-
exports.
|
|
26
|
+
exports.renderImage_unstable = renderImage_unstable;
|
|
27
27
|
//# sourceMappingURL=renderImage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Image/renderImage.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;AAGG;;;AACI,MAAM,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/renderImage.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;AAGG;;;AACI,MAAM,oBAAoB,GAAI,KAAD,IAAsB;AACxD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;AAEA,SAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourceRoot":""}
|
|
@@ -3,4 +3,4 @@ import type { ImageProps, ImageState } from './Image.types';
|
|
|
3
3
|
/**
|
|
4
4
|
* Given user props, returns state and render function for an Image.
|
|
5
5
|
*/
|
|
6
|
-
export declare const
|
|
6
|
+
export declare const useImage_unstable: (props: ImageProps, ref: React.Ref<HTMLImageElement>) => ImageState;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.useImage_unstable = void 0;
|
|
7
7
|
|
|
8
8
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
9
9
|
/**
|
|
@@ -11,7 +11,7 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
|
|
14
|
-
const
|
|
14
|
+
const useImage_unstable = (props, ref) => {
|
|
15
15
|
const {
|
|
16
16
|
bordered,
|
|
17
17
|
fit,
|
|
@@ -36,5 +36,5 @@ const useImage = (props, ref) => {
|
|
|
36
36
|
return state;
|
|
37
37
|
};
|
|
38
38
|
|
|
39
|
-
exports.
|
|
39
|
+
exports.useImage_unstable = useImage_unstable;
|
|
40
40
|
//# sourceMappingURL=useImage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Image/useImage.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/useImage.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;AACnG,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA,GAAZ;AAAiB,IAAA,KAAjB;AAAwB,IAAA,KAAK,GAAG,QAAhC;AAA0C,IAAA;AAA1C,MAAqD,KAA3D;AAEA,QAAM,KAAK,GAAe;AACxB,IAAA,QADwB;AAExB,IAAA,GAFwB;AAGxB,IAAA,KAHwB;AAIxB,IAAA,KAJwB;AAKxB,IAAA,MALwB;AAMxB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KANY;AASxB,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAA7B;AATkB,GAA1B;AAeA,SAAO,KAAP;AACD,CAnBM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourceRoot":""}
|
|
@@ -3,15 +3,15 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.useImageStyles_unstable = exports.imageClassName = void 0;
|
|
7
7
|
|
|
8
|
-
const
|
|
8
|
+
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
9
|
|
|
10
10
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
11
11
|
|
|
12
12
|
exports.imageClassName = 'fui-Image';
|
|
13
13
|
|
|
14
|
-
const useStyles = /*#__PURE__*/
|
|
14
|
+
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
15
15
|
"root": {
|
|
16
16
|
"g2u3we": "fj3muxo",
|
|
17
17
|
"h3c5rm": ["f1akhkt", "f1lxtadh"],
|
|
@@ -80,10 +80,10 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
|
80
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;}", ".f13uwng7{object-position:left top;}", ".fjmyj0p{object-position:right top;}", ".f1l02sjl{height:100%;}", ".fly5x3f{width:100%;}", ".f14xojzb{object-position:center;}", ".f1ps3kmd{object-fit:cover;}", ".f1kle4es{object-fit:contain;}"]
|
|
81
81
|
});
|
|
82
82
|
|
|
83
|
-
const
|
|
83
|
+
const useImageStyles_unstable = state => {
|
|
84
84
|
const styles = useStyles();
|
|
85
|
-
state.root.className =
|
|
85
|
+
state.root.className = react_1.mergeClasses(exports.imageClassName, styles.root, state.bordered && styles.rootBordered, state.shape === 'circular' && styles.rootCircular, state.shape === 'rounded' && styles.rootRounded, state.shadow && styles.rootShadow, state.fit === 'none' && styles.rootFitNone, state.fit === 'center' && styles.rootFitCenter, state.fit === 'cover' && styles.rootFitCover, state.fit === 'contain' && styles.rootFitContain, state.block && styles.rootBlock, state.root.className);
|
|
86
86
|
};
|
|
87
87
|
|
|
88
|
-
exports.
|
|
88
|
+
exports.useImageStyles_unstable = useImageStyles_unstable;
|
|
89
89
|
//# sourceMappingURL=useImageStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Image/useImageStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/useImageStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAGa,OAAA,CAAA,cAAA,GAAiB,WAAjB;;AAEb,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AAkDO,MAAM,uBAAuB,GAAI,KAAD,IAAsB;AAC3D,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,cADqB,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,YAHJ,EAIrB,KAAK,CAAC,KAAN,KAAgB,UAAhB,IAA8B,MAAM,CAAC,YAJhB,EAKrB,KAAK,CAAC,KAAN,KAAgB,SAAhB,IAA6B,MAAM,CAAC,WALf,EAMrB,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,UANF,EAOrB,KAAK,CAAC,GAAN,KAAc,MAAd,IAAwB,MAAM,CAAC,WAPV,EAQrB,KAAK,CAAC,GAAN,KAAc,QAAd,IAA0B,MAAM,CAAC,aARZ,EASrB,KAAK,CAAC,GAAN,KAAc,OAAd,IAAyB,MAAM,CAAC,YATX,EAUrB,KAAK,CAAC,GAAN,KAAc,SAAd,IAA2B,MAAM,CAAC,cAVb,EAWrB,KAAK,CAAC,KAAN,IAAe,MAAM,CAAC,SAXD,EAYrB,KAAK,CAAC,IAAN,CAAW,SAZU,CAAvB;AAcD,CAhBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourceRoot":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-image",
|
|
3
|
-
"version": "0.0.0-
|
|
3
|
+
"version": "0.0.0-nightlye0b8e1fa6920220128.1",
|
|
4
4
|
"description": "Fluent UI React Image component.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -26,11 +26,9 @@
|
|
|
26
26
|
"type-check": "tsc -b tsconfig.json"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@fluentui/babel-make-styles": "0.0.0-nightlydd0f007b3f20220119.1",
|
|
30
29
|
"@fluentui/eslint-plugin": "*",
|
|
31
|
-
"@fluentui/jest-serializer-make-styles": "0.0.0-nightlydd0f007b3f20220119.1",
|
|
32
30
|
"@fluentui/react-conformance": "*",
|
|
33
|
-
"@fluentui/react-conformance-
|
|
31
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightlye0b8e1fa6920220128.1",
|
|
34
32
|
"@fluentui/scripts": "^1.0.0",
|
|
35
33
|
"@types/enzyme": "3.10.3",
|
|
36
34
|
"@types/enzyme-adapter-react-16": "1.0.3",
|
|
@@ -45,8 +43,8 @@
|
|
|
45
43
|
"react-test-renderer": "^16.3.0"
|
|
46
44
|
},
|
|
47
45
|
"dependencies": {
|
|
48
|
-
"@
|
|
49
|
-
"@fluentui/react-utilities": "0.0.0-
|
|
46
|
+
"@griffel/react": "1.0.0",
|
|
47
|
+
"@fluentui/react-utilities": "0.0.0-nightlye0b8e1fa6920220128.1",
|
|
50
48
|
"tslib": "^2.1.0"
|
|
51
49
|
},
|
|
52
50
|
"peerDependencies": {
|