@fluentui/react-image 0.0.0-nightly-20230526-0415.1 → 0.0.0-nightly-20230530-0415.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 +13 -13
- package/CHANGELOG.md +9 -9
- package/lib/Image.js +1 -0
- package/lib/Image.js.map +1 -1
- package/lib/components/Image/Image.js +6 -6
- package/lib/components/Image/Image.js.map +1 -1
- package/lib/components/Image/Image.types.js +2 -1
- package/lib/components/Image/Image.types.js.map +1 -1
- package/lib/components/Image/index.js +1 -0
- package/lib/components/Image/index.js.map +1 -1
- package/lib/components/Image/renderImage.js +5 -8
- package/lib/components/Image/renderImage.js.map +1 -1
- package/lib/components/Image/useImage.js +18 -24
- package/lib/components/Image/useImage.js.map +1 -1
- package/lib/components/Image/useImageStyles.styles.js.map +1 -1
- package/lib/index.js +1 -0
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Image.js.map +1 -1
- 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.map +1 -1
- package/lib-commonjs/components/Image/renderImage.js.map +1 -1
- package/lib-commonjs/components/Image/useImage.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-image",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-image_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Tue, 30 May 2023 04:21:11 GMT",
|
|
6
|
+
"tag": "@fluentui/react-image_v0.0.0-nightly-20230530-0415.1",
|
|
7
|
+
"version": "0.0.0-nightly-20230530-0415.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,32 +16,32 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-image",
|
|
19
|
-
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230530-0415.1",
|
|
20
|
+
"commit": "808fbe4052231d4cccf478348a770df18232f4f9"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-image",
|
|
25
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230530-0415.1",
|
|
26
|
+
"commit": "808fbe4052231d4cccf478348a770df18232f4f9"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-image",
|
|
31
|
-
"comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230530-0415.1",
|
|
32
|
+
"commit": "808fbe4052231d4cccf478348a770df18232f4f9"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-image",
|
|
37
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230530-0415.1",
|
|
38
|
+
"commit": "808fbe4052231d4cccf478348a770df18232f4f9"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-image",
|
|
43
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230530-0415.1",
|
|
44
|
+
"commit": "808fbe4052231d4cccf478348a770df18232f4f9"
|
|
45
45
|
}
|
|
46
46
|
]
|
|
47
47
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-image
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 30 May 2023 04:21:11 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20230530-0415.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v0.0.0-nightly-20230530-0415.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.1.11..@fluentui/react-image_v0.0.0-nightly-
|
|
9
|
+
Tue, 30 May 2023 04:21:11 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.1.11..@fluentui/react-image_v0.0.0-nightly-20230530-0415.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230530-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/808fbe4052231d4cccf478348a770df18232f4f9) by beachball)
|
|
16
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20230530-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/808fbe4052231d4cccf478348a770df18232f4f9) by beachball)
|
|
17
|
+
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230530-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/808fbe4052231d4cccf478348a770df18232f4f9) by beachball)
|
|
18
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20230530-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/808fbe4052231d4cccf478348a770df18232f4f9) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230530-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/808fbe4052231d4cccf478348a770df18232f4f9) by beachball)
|
|
20
20
|
|
|
21
21
|
## [9.1.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.1.11)
|
|
22
22
|
|
package/lib/Image.js
CHANGED
package/lib/Image.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../src/Image.ts"],"sourcesContent":["export * from './components/Image/index';\n"],"names":[],"mappings":"AAAA,cAAc,2BAA2B"}
|
|
@@ -5,12 +5,12 @@ import { useImageStyles_unstable } from './useImageStyles.styles';
|
|
|
5
5
|
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
|
|
6
6
|
/**
|
|
7
7
|
* The Image component ensures the consistent styling of images.
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
return renderImage_unstable(state);
|
|
8
|
+
*/ export const Image = /*#__PURE__*/ React.forwardRef((props, ref)=>{
|
|
9
|
+
const state = useImage_unstable(props, ref);
|
|
10
|
+
useImageStyles_unstable(state);
|
|
11
|
+
useCustomStyleHook_unstable('useImageStyles_unstable')(state);
|
|
12
|
+
return renderImage_unstable(state);
|
|
14
13
|
});
|
|
15
14
|
Image.displayName = 'Image';
|
|
15
|
+
|
|
16
16
|
//# sourceMappingURL=Image.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../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.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,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,MAAQ;IACrF,MAAMC,QAAQP,kBAAkBK,OAAOC;IAEvCL,wBAAwBM;IAExBL,4BAA4B,2BAA2BK;IAEvD,OAAOR,qBAAqBQ;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/Image.types.ts"],"sourcesContent":["import type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';\n\nexport type ImageSlots = {\n root: Slot<'img'>;\n};\n\nexport type ImageProps = ComponentProps<ImageSlots> & {\n /**\n * An image can take up the width of its container.\n *\n * @default false\n */\n block?: boolean;\n\n /**\n * An image can appear with a rectangular border.\n *\n * @default false\n */\n bordered?: boolean;\n\n /**\n * An image can set how it should be resized to fit its container.\n *\n * @default 'default'\n */\n fit?: 'none' | 'center' | 'contain' | 'cover' | 'default';\n\n /**\n * An image can appear elevated with shadow.\n *\n * @default false\n */\n shadow?: boolean;\n\n /**\n * An image can appear square, circular, or rounded.\n *\n * @default 'square'\n */\n shape?: 'square' | 'circular' | 'rounded';\n};\n\nexport type ImageState = ComponentState<ImageSlots> &\n Required<Pick<ImageProps, 'block' | 'bordered' | 'fit' | 'shadow' | 'shape'>>;\n"],"names":[],"mappings":"AAAA,WA4CgF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/index.ts"],"sourcesContent":["export * from './Image.types';\nexport * from './Image';\nexport * from './renderImage';\nexport * from './useImage';\nexport * from './useImageStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,UAAU;AACxB,cAAc,gBAAgB;AAC9B,cAAc,aAAa;AAC3B,cAAc,0BAA0B"}
|
|
@@ -1,14 +1,11 @@
|
|
|
1
|
-
/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
|
|
1
|
+
/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
|
|
2
2
|
import { getSlotsNext } from '@fluentui/react-utilities';
|
|
3
3
|
/**
|
|
4
4
|
* Define the render function.
|
|
5
5
|
* Given the state of an image, renders it.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
slots,
|
|
10
|
-
slotProps
|
|
11
|
-
} = getSlotsNext(state);
|
|
12
|
-
return /*#__PURE__*/createElement(slots.root, slotProps.root);
|
|
6
|
+
*/ export const renderImage_unstable = (state)=>{
|
|
7
|
+
const { slots , slotProps } = getSlotsNext(state);
|
|
8
|
+
return /*#__PURE__*/ createElement(slots.root, slotProps.root);
|
|
13
9
|
};
|
|
10
|
+
|
|
14
11
|
//# sourceMappingURL=renderImage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/renderImage.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } 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 } = getSlotsNext<ImageSlots>(state);\n\n return <slots.root {...slotProps.root} />;\n};\n"],"names":["createElement","getSlotsNext","renderImage_unstable","state","slots","slotProps","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;;CAGC,GACD,OAAO,MAAMC,uBAAuB,CAACC,QAAsB;IACzD,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAAyBE;IAEtD,qBAAO,AAdT,cAcUC,MAAME,IAAI,EAAKD,UAAUC,IAAI;AACvC,EAAE"}
|
|
@@ -2,29 +2,23 @@ import * as React from 'react';
|
|
|
2
2
|
import { getNativeElementProps } from '@fluentui/react-utilities';
|
|
3
3
|
/**
|
|
4
4
|
* Given user props, returns state and render function for an Image.
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
},
|
|
23
|
-
root: getNativeElementProps('img', {
|
|
24
|
-
ref,
|
|
25
|
-
...props
|
|
26
|
-
})
|
|
27
|
-
};
|
|
28
|
-
return state;
|
|
5
|
+
*/ export const useImage_unstable = (props, ref)=>{
|
|
6
|
+
const { bordered =false , fit ='default' , block =false , shape ='square' , shadow =false } = props;
|
|
7
|
+
const state = {
|
|
8
|
+
bordered,
|
|
9
|
+
fit,
|
|
10
|
+
block,
|
|
11
|
+
shape,
|
|
12
|
+
shadow,
|
|
13
|
+
components: {
|
|
14
|
+
root: 'img'
|
|
15
|
+
},
|
|
16
|
+
root: getNativeElementProps('img', {
|
|
17
|
+
ref,
|
|
18
|
+
...props
|
|
19
|
+
})
|
|
20
|
+
};
|
|
21
|
+
return state;
|
|
29
22
|
};
|
|
23
|
+
|
|
30
24
|
//# sourceMappingURL=useImage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../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"],"names":["React","getNativeElementProps","useImage_unstable","props","ref","bordered","fit","block","shape","shadow","state","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAGlE;;CAEC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC,MAAiD;IACpG,MAAM,EAAEC,UAAW,KAAK,CAAA,EAAEC,KAAM,UAAS,EAAEC,OAAQ,KAAK,CAAA,EAAEC,OAAQ,SAAQ,EAAEC,QAAS,KAAK,CAAA,EAAE,GAAGN;IAE/F,MAAMO,QAAoB;QACxBL;QACAC;QACAC;QACAC;QACAC;QACAE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMX,sBAAsB,OAAO;YACjCG;YACA,GAAGD,KAAK;QACV;IACF;IAEA,OAAOO;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["shorthands","mergeClasses","__styles","tokens","imageClassNames","root","useStyles","base","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B7ck84d","mc9l5x","bordered","icvyot","vrafjx","oivjwe","wvpqe5","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","circular","rounded","square","shadow","E5pizo","center","st4lth","Ermj5k","Bqenvij","a9b677","contain","cover","none","block","d","useImageStyles_unstable","state","styles","className","fit","shape"],"sources":["../../../src/components/Image/useImageStyles.styles.ts"],"sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ImageSlots, ImageState } from './Image.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const imageClassNames: SlotClassNames<ImageSlots> = {\n root: 'fui-Image',\n};\n\nconst useStyles = makeStyles({\n // Base styles\n base: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...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"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAAC,QAAA,QAAoB;AACrD,SAASC,MAAM,QAAQ;AAIvB,OAAO,MAAMC,eAAA,GAA8C;EACzDC,IAAA,EAAM;AACR;AAEA,MAAMC,SAAA,gBAAYJ,QAAA;EAAAK,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;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;IAAAf,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAa,OAAA;IAAAhB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAc,MAAA;EAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAJ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA;EAAAE,KAAA;IAAAL,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAG,IAAA;IAAAN,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAI,KAAA;IAAAJ,MAAA;EAAA;AAAA;EAAAK,CAAA;AAAA,
|
|
1
|
+
{"version":3,"names":["shorthands","mergeClasses","__styles","tokens","imageClassNames","root","useStyles","base","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B7ck84d","mc9l5x","bordered","icvyot","vrafjx","oivjwe","wvpqe5","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","circular","rounded","square","shadow","E5pizo","center","st4lth","Ermj5k","Bqenvij","a9b677","contain","cover","none","block","d","useImageStyles_unstable","state","styles","className","fit","shape"],"sources":["../../../src/components/Image/useImageStyles.styles.ts"],"sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ImageSlots, ImageState } from './Image.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const imageClassNames: SlotClassNames<ImageSlots> = {\n root: 'fui-Image',\n};\n\nconst useStyles = makeStyles({\n // Base styles\n base: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...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"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAAC,QAAA,QAAoB;AACrD,SAASC,MAAM,QAAQ;AAIvB,OAAO,MAAMC,eAAA,GAA8C;EACzDC,IAAA,EAAM;AACR;AAEA,MAAMC,SAAA,gBAAYJ,QAAA;EAAAK,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;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;IAAAf,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAa,OAAA;IAAAhB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAc,MAAA;EAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAJ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA;EAAAE,KAAA;IAAAL,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAG,IAAA;IAAAN,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAI,KAAA;IAAAJ,MAAA;EAAA;AAAA;EAAAK,CAAA;AAAA,CAiElB;AAEA,OAAO,MAAMC,uBAAA,GAA2BC,KAAA,IAAsB;EAC5D,MAAMC,MAAA,GAAStC,SAAA;EACfqC,KAAA,CAAMtC,IAAI,CAACwC,SAAS,GAAG5C,YAAA,CACrBG,eAAA,CAAgBC,IAAI,EACpBuC,MAAA,CAAOrC,IAAI,EACXoC,KAAA,CAAMH,KAAK,IAAII,MAAA,CAAOJ,KAAK,EAC3BG,KAAA,CAAMzB,QAAQ,IAAI0B,MAAA,CAAO1B,QAAQ,EACjCyB,KAAA,CAAMb,MAAM,IAAIc,MAAA,CAAOd,MAAM,EAC7Bc,MAAM,CAACD,KAAA,CAAMG,GAAG,CAAC,EACjBF,MAAM,CAACD,KAAA,CAAMI,KAAK,CAAC,EACnBJ,KAAA,CAAMtC,IAAI,CAACwC,SAAS;AAExB"}
|
package/lib/index.js
CHANGED
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Image, imageClassNames, renderImage_unstable, useImageStyles_unstable, useImage_unstable } from './Image';\nexport type { ImageProps, ImageSlots, ImageState } from './Image';\n"],"names":["Image","imageClassNames","renderImage_unstable","useImageStyles_unstable","useImage_unstable"],"mappings":"AAAA,SAASA,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ,UAAU"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../lib/Image.js"],"sourcesContent":["export * from './components/Image/index';\n//# sourceMappingURL=Image.js.map"],"names":[],"mappings":";;;;;oBAAc;
|
|
1
|
+
{"version":3,"sources":["../lib/Image.js"],"sourcesContent":["export * from './components/Image/index';\n\n//# sourceMappingURL=Image.js.map"],"names":[],"mappings":";;;;;oBAAc;CAEd,iCAAiC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Image/Image.js"],"sourcesContent":["import * as React from 'react';\nimport { renderImage_unstable } from './renderImage';\nimport { useImage_unstable } from './useImage';\nimport { useImageStyles_unstable } from './useImageStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * The Image component ensures the consistent styling of images.\n
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Image/Image.js"],"sourcesContent":["import * as React from 'react';\nimport { renderImage_unstable } from './renderImage';\nimport { useImage_unstable } from './useImage';\nimport { useImageStyles_unstable } from './useImageStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * The Image component ensures the consistent styling of images.\n */ export const Image = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const state = useImage_unstable(props, ref);\n useImageStyles_unstable(state);\n useCustomStyleHook_unstable('useImageStyles_unstable')(state);\n return renderImage_unstable(state);\n});\nImage.displayName = 'Image';\n\n//# sourceMappingURL=Image.js.map"],"names":["Image","React","forwardRef","props","ref","state","useImage_unstable","useImageStyles_unstable","useCustomStyleHook_unstable","renderImage_unstable","displayName"],"mappings":";;;;+BAOiBA;;aAAAA;;;6DAPM;6BACc;0BACH;sCACM;qCACI;AAGjC,MAAMA,QAAQ,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAM;IAClE,MAAMC,QAAQC,IAAAA,2BAAiB,EAACH,OAAOC;IACvCG,IAAAA,6CAAuB,EAACF;IACxBG,IAAAA,gDAA2B,EAAC,2BAA2BH;IACvD,OAAOI,IAAAA,iCAAoB,EAACJ;AAChC;AACAL,MAAMU,WAAW,GAAG,SAEpB,iCAAiC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Image/Image.types.js"],"sourcesContent":["export {};\n//# sourceMappingURL=Image.types.js.map"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Image/Image.types.js"],"sourcesContent":["export { };\n\n//# sourceMappingURL=Image.types.js.map"],"names":[],"mappings":";;;;CAEA,uCAAuC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Image/index.js"],"sourcesContent":["export * from './Image.types';\nexport * from './Image';\nexport * from './renderImage';\nexport * from './useImage';\nexport * from './useImageStyles.styles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Image/index.js"],"sourcesContent":["export * from './Image.types';\nexport * from './Image';\nexport * from './renderImage';\nexport * from './useImage';\nexport * from './useImageStyles.styles';\n\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CAEd,iCAAiC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Image/renderImage.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\n/**\n * Define the render function.\n * Given the state of an image, renders it.\n
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Image/renderImage.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\n/**\n * Define the render function.\n * Given the state of an image, renders it.\n */ export const renderImage_unstable = (state)=>{\n const { slots , slotProps } = getSlotsNext(state);\n return /*#__PURE__*/ createElement(slots.root, slotProps.root);\n};\n\n//# sourceMappingURL=renderImage.js.map"],"names":["renderImage_unstable","state","slots","slotProps","getSlotsNext","createElement","root"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACtD;AAIlB,MAAMA,uBAAuB,CAACC,QAAQ;IAC7C,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACH;IAC5C,OAAO,WAAW,GAAGI,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI;AACjE,GAEA,uCAAuC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Image/useImage.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\n/**\n * Given user props, returns state and render function for an Image.\n
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Image/useImage.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\n/**\n * Given user props, returns state and render function for an Image.\n */ export const useImage_unstable = (props, ref)=>{\n const { bordered =false , fit ='default' , block =false , shape ='square' , shadow =false } = props;\n const state = {\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 return state;\n};\n\n//# sourceMappingURL=useImage.js.map"],"names":["useImage_unstable","props","ref","bordered","fit","block","shape","shadow","state","components","root","getNativeElementProps"],"mappings":";;;;+BAIiBA;;aAAAA;;;6DAJM;gCACe;AAG3B,MAAMA,oBAAoB,CAACC,OAAOC,MAAM;IAC/C,MAAM,EAAEC,UAAU,KAAK,CAAA,EAAGC,KAAK,UAAS,EAAGC,OAAO,KAAK,CAAA,EAAGC,OAAO,SAAQ,EAAGC,QAAQ,KAAK,CAAA,EAAG,GAAGN;IAC/F,MAAMO,QAAQ;QACVL;QACAC;QACAC;QACAC;QACAC;QACAE,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,IAAAA,qCAAqB,EAAC,OAAO;YAC/BT;YACA,GAAGD,KAAK;QACZ;IACJ;IACA,OAAOO;AACX,GAEA,oCAAoC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../lib/index.js"],"sourcesContent":["export { Image, imageClassNames, renderImage_unstable, useImageStyles_unstable, useImage_unstable } from './Image';\n//# sourceMappingURL=index.js.map"],"names":["Image","imageClassNames","renderImage_unstable","useImageStyles_unstable","useImage_unstable"],"mappings":";;;;;;;;;;;IAASA,KAAK,MAALA,YAAK;IAAEC,eAAe,MAAfA,sBAAe;IAAEC,oBAAoB,MAApBA,2BAAoB;IAAEC,uBAAuB,MAAvBA,8BAAuB;IAAEC,iBAAiB,MAAjBA,wBAAiB;;uBAAQ;
|
|
1
|
+
{"version":3,"sources":["../lib/index.js"],"sourcesContent":["export { Image, imageClassNames, renderImage_unstable, useImageStyles_unstable, useImage_unstable } from './Image';\n\n//# sourceMappingURL=index.js.map"],"names":["Image","imageClassNames","renderImage_unstable","useImageStyles_unstable","useImage_unstable"],"mappings":";;;;;;;;;;;IAASA,KAAK,MAALA,YAAK;IAAEC,eAAe,MAAfA,sBAAe;IAAEC,oBAAoB,MAApBA,2BAAoB;IAAEC,uBAAuB,MAAvBA,8BAAuB;IAAEC,iBAAiB,MAAjBA,wBAAiB;;uBAAQ;CAEzG,iCAAiC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-image",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20230530-0415.1",
|
|
4
4
|
"description": "Fluent UI React Image component.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -28,16 +28,16 @@
|
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
30
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
31
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20230530-0415.1",
|
|
32
32
|
"@fluentui/scripts-api-extractor": "*",
|
|
33
33
|
"@fluentui/scripts-tasks": "*"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@griffel/react": "^1.5.2",
|
|
37
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
|
38
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
39
|
-
"@fluentui/react-jsx-runtime": "0.0.0-nightly-
|
|
40
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
37
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20230530-0415.1",
|
|
38
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20230530-0415.1",
|
|
39
|
+
"@fluentui/react-jsx-runtime": "0.0.0-nightly-20230530-0415.1",
|
|
40
|
+
"@fluentui/react-theme": "0.0.0-nightly-20230530-0415.1",
|
|
41
41
|
"@swc/helpers": "^0.4.14"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|