@fluentui/react-image 9.74.7-experimental.cli-api.20261006-ccaa611d58.0 → 9.75.0-experimental.css-modules.20261031-810ab07afb.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +29 -9
- package/lib/components/Image/Image.js.map +1 -1
- package/lib/components/Image/Image.module.css +54 -0
- package/lib/components/Image/Image.types.js.map +1 -1
- package/lib/components/Image/index.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.map +1 -1
- package/lib/components/Image/useImageStyles.styles.css.js +13 -0
- package/lib/components/Image/useImageStyles.styles.css.js.map +1 -0
- package/lib/components/Image/useImageStyles.styles.raw.css.js +13 -0
- package/lib/components/Image/useImageStyles.styles.raw.css.js.map +1 -0
- package/lib/components/Image/useImageStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/Image.cjs +7 -7
- package/lib-commonjs/components/Image/Image.cjs.map +1 -1
- package/lib-commonjs/components/Image/Image.module.css +54 -0
- package/lib-commonjs/components/Image/Image.types.cjs.map +1 -1
- package/lib-commonjs/components/Image/index.cjs +7 -7
- package/lib-commonjs/components/Image/index.cjs.map +1 -1
- package/lib-commonjs/components/Image/renderImage.cjs.map +1 -1
- package/lib-commonjs/components/Image/useImage.cjs +3 -3
- package/lib-commonjs/components/Image/useImage.cjs.map +1 -1
- package/lib-commonjs/components/Image/useImageStyles.styles.cjs +3 -3
- package/lib-commonjs/components/Image/useImageStyles.styles.cjs.map +1 -1
- package/lib-commonjs/components/Image/useImageStyles.styles.css.cjs +32 -0
- package/lib-commonjs/components/Image/useImageStyles.styles.css.cjs.map +1 -0
- package/lib-commonjs/components/Image/useImageStyles.styles.raw.cjs +3 -3
- package/lib-commonjs/components/Image/useImageStyles.styles.raw.cjs.map +1 -1
- package/lib-commonjs/components/Image/useImageStyles.styles.raw.css.cjs +32 -0
- package/lib-commonjs/components/Image/useImageStyles.styles.raw.css.cjs.map +1 -0
- package/lib-commonjs/index.cjs +7 -7
- package/package.json +12 -12
- package/dist/metadata/api/api-root.json +0 -1
- package/dist/metadata/index.json +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,21 +1,41 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-image
|
|
2
2
|
|
|
3
|
-
<!-- This log was last generated on
|
|
3
|
+
<!-- This log was last generated on Sat, 31 Oct 2026 11:08:45 GMT and should not be manually modified. -->
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [9.
|
|
7
|
+
## [9.75.0-experimental.css-modules.20261031-810ab07afb.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.75.0-experimental.css-modules.20261031-810ab07afb.0)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.4.4..@fluentui/react-image_v9.74.7-experimental.cli-api.20261006-ccaa611d58.0)
|
|
9
|
+
Sat, 31 Oct 2026 11:08:45 GMT
|
|
11
10
|
|
|
12
11
|
### Changes
|
|
13
12
|
|
|
14
|
-
- Release 9.
|
|
15
|
-
- Bump @fluentui/react-jsx-runtime to v9.
|
|
16
|
-
- Bump @fluentui/react-shared-contexts to v9.
|
|
17
|
-
- Bump @fluentui/react-theme to v9.
|
|
18
|
-
- Bump @fluentui/react-utilities to v9.
|
|
13
|
+
- Release 9.75.0-experimental.css-modules.20261031-810ab07afb ([commit](https://github.com/microsoft/fluentui/commit/undefined) by 257645319+office-ogx-auth-helper[bot]@users.noreply.github.com)
|
|
14
|
+
- Bump @fluentui/react-jsx-runtime to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
15
|
+
- Bump @fluentui/react-shared-contexts to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
16
|
+
- Bump @fluentui/react-theme to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
17
|
+
- Bump @fluentui/react-utilities to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
18
|
+
|
|
19
|
+
## [9.4.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.4.6)
|
|
20
|
+
|
|
21
|
+
Mon, 19 Oct 2026 16:49:01 GMT
|
|
22
|
+
|
|
23
|
+
### Patches
|
|
24
|
+
|
|
25
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.7 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
26
|
+
- Bump @fluentui/react-utilities to v9.27.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
27
|
+
|
|
28
|
+
## [9.4.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.4.5)
|
|
29
|
+
|
|
30
|
+
Tue, 22 Sep 2026 11:25:39 GMT
|
|
31
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.4.4..@fluentui/react-image_v9.4.5)
|
|
32
|
+
|
|
33
|
+
### Patches
|
|
34
|
+
|
|
35
|
+
- fix: remove unused react-dom and @types/react-dom peer dependencies, mark @types/react as optional ([PR #36559](https://github.com/microsoft/fluentui/pull/36559) by martinhochel@microsoft.com)
|
|
36
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.6 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
37
|
+
- Bump @fluentui/react-shared-contexts to v9.26.4 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
38
|
+
- Bump @fluentui/react-utilities to v9.26.7 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
19
39
|
|
|
20
40
|
## [9.4.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.4.4)
|
|
21
41
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderImage_unstable } from './renderImage';\nimport { useImage_unstable } from './useImage';\nimport { useImageStyles_unstable } from './useImageStyles.styles';\nimport type { ImageProps } from './Image.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The Image component ensures the consistent styling of images.\n */\nexport const Image: ForwardRefComponent<ImageProps> = React.forwardRef((props, ref) => {\n const state = useImage_unstable(props, ref);\n\n useImageStyles_unstable(state);\n\n useCustomStyleHook_unstable('useImageStyles_unstable')(state);\n\n return renderImage_unstable(state);\n});\n\nImage.displayName = 'Image';\n"],"names":["React","renderImage_unstable","useImage_unstable","useImageStyles_unstable","useCustomStyleHook_unstable","Image","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,mBAAgB;AACrD,SAASC,iBAAiB,QAAQ,gBAAa;AAC/C,SAASC,uBAAuB,QAAQ,6BAA0B;AAGlE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,sBAAyCL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,QAAQP,kBAAkBK,OAAOC;IAEvCL,wBAAwBM;IAExBL,4BAA4B,2BAA2BK;IAEvD,OAAOR,qBAAqBQ;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
@layer fluentui {
|
|
2
|
+
.base {
|
|
3
|
+
border-color: var(--colorNeutralStroke1);
|
|
4
|
+
border-radius: var(--borderRadiusNone);
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
display: inline-block;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.bordered {
|
|
10
|
+
border-style: solid;
|
|
11
|
+
border-width: var(--strokeWidthThin);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.circular {
|
|
15
|
+
border-radius: var(--borderRadiusCircular);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.rounded {
|
|
19
|
+
border-radius: var(--borderRadiusMedium);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.shadow {
|
|
23
|
+
box-shadow: var(--shadow4);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.center {
|
|
27
|
+
object-fit: none;
|
|
28
|
+
object-position: center;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.contain {
|
|
32
|
+
object-fit: contain;
|
|
33
|
+
object-position: center;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.cover {
|
|
37
|
+
object-fit: cover;
|
|
38
|
+
object-position: center;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.none {
|
|
42
|
+
object-fit: none;
|
|
43
|
+
object-position: left top;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.fitFill {
|
|
47
|
+
height: 100%;
|
|
48
|
+
width: 100%;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.block {
|
|
52
|
+
width: 100%;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
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\n/**\n * Image props without design-specific props (shape, shadow, bordered, fit).\n * Use this when building a base image that is unstyled or uses a custom design system.\n */\nexport type ImageBaseProps = ComponentProps<ImageSlots>;\n\nexport type ImageState = ComponentState<ImageSlots> &\n Required<Pick<ImageProps, 'block' | 'bordered' | 'fit' | 'shadow' | 'shape'>>;\n\n/**\n * Image state without design-specific state (shape, shadow, bordered, fit).\n */\nexport type ImageBaseState = ComponentState<ImageSlots>;\n"],"names":[],"mappings":"AAoDA;;CAEC,GACD,WAAwD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/index.ts"],"sourcesContent":["export type { ImageBaseProps, ImageBaseState, ImageProps, ImageSlots, ImageState } from './Image.types';\nexport { Image } from './Image';\nexport { renderImage_unstable } from './renderImage';\nexport { useImage_unstable, useImageBase_unstable } from './useImage';\nexport { imageClassNames, useImageStyles_unstable } from './useImageStyles.styles';\n"],"names":["Image","renderImage_unstable","useImage_unstable","useImageBase_unstable","imageClassNames","useImageStyles_unstable"],"mappings":"AACA,SAASA,KAAK,QAAQ,aAAU;AAChC,SAASC,oBAAoB,QAAQ,mBAAgB;AACrD,SAASC,iBAAiB,EAAEC,qBAAqB,QAAQ,gBAAa;AACtE,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,6BAA0B"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
import { assertSlots } from "@fluentui/react-utilities";
|
|
1
|
+
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
2
|
+
import { assertSlots } from "@fluentui/react-utilities";
|
|
3
3
|
/**
|
|
4
4
|
* Define the render function.
|
|
5
5
|
* Given the state of an image, renders it.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/renderImage.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ImageSlots, ImageBaseState } from './Image.types';\n\n/**\n * Define the render function.\n * Given the state of an image, renders it.\n */\nexport const renderImage_unstable = (state: ImageBaseState): JSXElement => {\n assertSlots<ImageSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderImage_unstable","state","root"],"mappings":";AAAA,0BAA0B,GAC1B,iDAAiD,GAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;;CAGC,GACD,OAAO,MAAMC,uBAAuB,CAACC;IACnCF,YAAwBE;IAExB,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/useImage.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { ImageBaseProps, ImageBaseState, ImageProps, ImageState } from './Image.types';\n\n/**\n * Given user props, returns state and render function for an Image.\n */\nexport const useImage_unstable = (props: ImageProps, ref: React.Ref<HTMLImageElement>): ImageState => {\n const { bordered = false, block = false, fit = 'default', shadow = false, shape = 'square', ...imageProps } = props;\n const state = useImageBase_unstable(imageProps, ref);\n\n return {\n bordered,\n block,\n fit,\n shadow,\n shape,\n ...state,\n };\n};\n\n/**\n * Base hook for Image component, which manages state related to slot structure.\n * This hook excludes design props (shape, shadow, bordered, fit).\n *\n * @param props - User provided props to the Image component.\n * @param ref - User provided ref to be passed to the Image component.\n */\nexport const useImageBase_unstable = (props: ImageBaseProps, ref: React.Ref<HTMLImageElement>): ImageBaseState => {\n return {\n components: {\n root: 'img',\n },\n root: slot.always(\n getIntrinsicElementProps('img', {\n ref,\n ...props,\n }),\n { elementType: 'img' },\n ),\n };\n};\n"],"names":["getIntrinsicElementProps","slot","useImage_unstable","props","ref","bordered","block","fit","shadow","shape","imageProps","state","useImageBase_unstable","components","root","always","elementType"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;CAEC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,WAAW,KAAK,EAAEC,QAAQ,KAAK,EAAEC,MAAM,SAAS,EAAEC,SAAS,KAAK,EAAEC,QAAQ,QAAQ,EAAE,GAAGC,YAAY,GAAGP;IAC9G,MAAMQ,QAAQC,sBAAsBF,YAAYN;IAEhD,OAAO;QACLC;QACAC;QACAC;QACAC;QACAC;QACA,GAAGE,KAAK;IACV;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,wBAAwB,CAACT,OAAuBC;IAC3D,OAAO;QACLS,YAAY;YACVC,MAAM;QACR;QACAA,MAAMb,KAAKc,MAAM,CACff,yBAAyB,OAAO;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEa,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { clsx } from "clsx";
|
|
2
|
+
import styles from "./Image.module.css";
|
|
3
|
+
export const imageClassNames = {
|
|
4
|
+
root: 'fui-Image'
|
|
5
|
+
};
|
|
6
|
+
export const useImageStyles_unstable = (state)=>{
|
|
7
|
+
const { height, width } = state.root;
|
|
8
|
+
// eslint-disable-next-line eqeqeq
|
|
9
|
+
const hasExplicitSize = height != null || width != null;
|
|
10
|
+
const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;
|
|
11
|
+
state.root.className = clsx(imageClassNames.root, styles.base, state.block && styles.block, state.bordered && styles.bordered, state.shadow && styles.shadow, state.fit !== 'default' && styles[state.fit], shouldApplyFitFill && styles.fitFill, state.shape !== 'square' && styles[state.shape], state.root.className);
|
|
12
|
+
return state;
|
|
13
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/useImageStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport styles from './Image.module.css';\nimport type { ImageSlots, ImageState } from './Image.types';\n\nexport const imageClassNames: SlotClassNames<ImageSlots> = {\n root: 'fui-Image',\n};\n\nexport const useImageStyles_unstable = (state: ImageState): ImageState => {\n const { height, width } = state.root;\n // eslint-disable-next-line eqeqeq\n const hasExplicitSize = height != null || width != null;\n const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;\n\n state.root.className = clsx(\n imageClassNames.root,\n styles.base,\n state.block && styles.block,\n state.bordered && styles.bordered,\n state.shadow && styles.shadow,\n state.fit !== 'default' && styles[state.fit],\n shouldApplyFitFill && styles.fitFill,\n state.shape !== 'square' && styles[state.shape],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["clsx","styles","imageClassNames","root","useImageStyles_unstable","state","height","width","hasExplicitSize","shouldApplyFitFill","fit","className","base","block","bordered","shadow","fitFill","shape"],"mappings":"AAAA,SAASA,IAAI,QAAQ,OAAO;AAE5B,OAAOC,YAAY,qBAAqB;AAGxC,OAAO,MAAMC,kBAA8C;IACzDC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,0BAA0B,CAACC;IACtC,MAAM,EAAEC,MAAM,EAAEC,KAAK,EAAE,GAAGF,MAAMF,IAAI;IACpC,kCAAkC;IAClC,MAAMK,kBAAkBF,UAAU,QAAQC,SAAS;IACnD,MAAME,qBAAqBJ,MAAMK,GAAG,KAAK,aAAa,CAACF;IAEvDH,MAAMF,IAAI,CAACQ,SAAS,GAAGX,KACrBE,gBAAgBC,IAAI,EACpBF,OAAOW,IAAI,EACXP,MAAMQ,KAAK,IAAIZ,OAAOY,KAAK,EAC3BR,MAAMS,QAAQ,IAAIb,OAAOa,QAAQ,EACjCT,MAAMU,MAAM,IAAId,OAAOc,MAAM,EAC7BV,MAAMK,GAAG,KAAK,aAAaT,MAAM,CAACI,MAAMK,GAAG,CAAC,EAC5CD,sBAAsBR,OAAOe,OAAO,EACpCX,MAAMY,KAAK,KAAK,YAAYhB,MAAM,CAACI,MAAMY,KAAK,CAAC,EAC/CZ,MAAMF,IAAI,CAACQ,SAAS;IAGtB,OAAON;AACT,EAAE"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { clsx } from "clsx";
|
|
2
|
+
import styles from "./Image.module.css";
|
|
3
|
+
export const imageClassNames = {
|
|
4
|
+
root: 'fui-Image'
|
|
5
|
+
};
|
|
6
|
+
export const useImageStyles_unstable = (state)=>{
|
|
7
|
+
const { height, width } = state.root;
|
|
8
|
+
// eslint-disable-next-line eqeqeq
|
|
9
|
+
const hasExplicitSize = height != null || width != null;
|
|
10
|
+
const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;
|
|
11
|
+
state.root.className = clsx(imageClassNames.root, styles.base, state.block && styles.block, state.bordered && styles.bordered, state.shadow && styles.shadow, state.fit !== 'default' && styles[state.fit], shouldApplyFitFill && styles.fitFill, state.shape !== 'square' && styles[state.shape], state.root.className);
|
|
12
|
+
return state;
|
|
13
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/useImageStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport styles from './Image.module.css';\nimport type { ImageSlots, ImageState } from './Image.types';\n\nexport const imageClassNames: SlotClassNames<ImageSlots> = {\n root: 'fui-Image',\n};\n\nexport const useImageStyles_unstable = (state: ImageState): ImageState => {\n const { height, width } = state.root;\n // eslint-disable-next-line eqeqeq\n const hasExplicitSize = height != null || width != null;\n const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;\n\n state.root.className = clsx(\n imageClassNames.root,\n styles.base,\n state.block && styles.block,\n state.bordered && styles.bordered,\n state.shadow && styles.shadow,\n state.fit !== 'default' && styles[state.fit],\n shouldApplyFitFill && styles.fitFill,\n state.shape !== 'square' && styles[state.shape],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["clsx","styles","imageClassNames","root","useImageStyles_unstable","state","height","width","hasExplicitSize","shouldApplyFitFill","fit","className","base","block","bordered","shadow","fitFill","shape"],"mappings":"AAAA,SAASA,IAAI,QAAQ,OAAO;AAE5B,OAAOC,YAAY,qBAAqB;AAGxC,OAAO,MAAMC,kBAA8C;IACzDC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,0BAA0B,CAACC;IACtC,MAAM,EAAEC,MAAM,EAAEC,KAAK,EAAE,GAAGF,MAAMF,IAAI;IACpC,kCAAkC;IAClC,MAAMK,kBAAkBF,UAAU,QAAQC,SAAS;IACnD,MAAME,qBAAqBJ,MAAMK,GAAG,KAAK,aAAa,CAACF;IAEvDH,MAAMF,IAAI,CAACQ,SAAS,GAAGX,KACrBE,gBAAgBC,IAAI,EACpBF,OAAOW,IAAI,EACXP,MAAMQ,KAAK,IAAIZ,OAAOY,KAAK,EAC3BR,MAAMS,QAAQ,IAAIb,OAAOa,QAAQ,EACjCT,MAAMU,MAAM,IAAId,OAAOc,MAAM,EAC7BV,MAAMK,GAAG,KAAK,aAAaT,MAAM,CAACI,MAAMK,GAAG,CAAC,EAC5CD,sBAAsBR,OAAOe,OAAO,EACpCX,MAAMY,KAAK,KAAK,YAAYhB,MAAM,CAACI,MAAMY,KAAK,CAAC,EAC/CZ,MAAMF,IAAI,CAACQ,SAAS;IAGtB,OAAON;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/useImageStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ImageSlots, ImageState } from './Image.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const imageClassNames: SlotClassNames<ImageSlots> = {\n root: 'fui-Image',\n};\n\nconst useStyles = makeStyles({\n // Base styles\n base: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n borderRadius: tokens.borderRadiusNone,\n\n boxSizing: 'border-box',\n display: 'inline-block',\n },\n\n // Bordered styles\n bordered: {\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n },\n\n // Shape variations\n circular: { borderRadius: tokens.borderRadiusCircular },\n rounded: { borderRadius: tokens.borderRadiusMedium },\n square: {\n /* The square styles are exactly the same as the base styles. */\n },\n\n // Shadow styles\n shadow: {\n boxShadow: tokens.shadow4,\n },\n\n // Fit variations\n center: {\n objectFit: 'none',\n objectPosition: 'center',\n },\n contain: {\n objectFit: 'contain',\n objectPosition: 'center',\n },\n default: {\n /* The default styles are exactly the same as the base styles. */\n },\n cover: {\n objectFit: 'cover',\n objectPosition: 'center',\n },\n none: {\n objectFit: 'none',\n objectPosition: 'left top',\n },\n\n // When no explicit height/width props are provided, apply full-size\n // sizing so fit modes behave as intended (object-fit fills the element).\n fitFill: {\n height: '100%',\n width: '100%',\n },\n\n // Block styles\n block: {\n width: '100%',\n },\n});\n\nexport const useImageStyles_unstable = (state: ImageState): ImageState => {\n const styles = useStyles();\n\n const { height, width } = state.root;\n // eslint-disable-next-line eqeqeq\n const hasExplicitSize = height != null || width != null;\n const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n imageClassNames.root,\n styles.base,\n state.block && styles.block,\n state.bordered && styles.bordered,\n state.shadow && styles.shadow,\n styles[state.fit],\n shouldApplyFitFill && styles.fitFill,\n styles[state.shape],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["shorthands","mergeClasses","makeStyles","tokens","imageClassNames","root","useStyles","base","borderColor","colorNeutralStroke1","borderRadius","borderRadiusNone","boxSizing","display","bordered","borderStyle","borderWidth","strokeWidthThin","circular","borderRadiusCircular","rounded","borderRadiusMedium","square","shadow","boxShadow","shadow4","center","objectFit","objectPosition","contain","default","cover","none","fitFill","height","width","block","useImageStyles_unstable","state","styles","hasExplicitSize","shouldApplyFitFill","fit","className","shape"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AACtE,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,kBAA8C;IACzDC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3B,cAAc;IACdK,MAAM;QACJ,GAAGP,WAAWQ,WAAW,CAACL,OAAOM,mBAAmB,CAAC;QACrDC,cAAcP,OAAOQ,gBAAgB;QAErCC,WAAW;QACXC,SAAS;IACX;IAEA,kBAAkB;IAClBC,UAAU;QACR,GAAGd,WAAWe,WAAW,CAAC,QAAQ;QAClC,GAAGf,WAAWgB,WAAW,CAACb,OAAOc,eAAe,CAAC;IACnD;IAEA,mBAAmB;IACnBC,UAAU;QAAER,cAAcP,OAAOgB,oBAAoB;IAAC;IACtDC,SAAS;QAAEV,cAAcP,OAAOkB,kBAAkB;IAAC;IACnDC,QAAQ;IAER;IAEA,gBAAgB;IAChBC,QAAQ;QACNC,WAAWrB,OAAOsB,OAAO;IAC3B;IAEA,iBAAiB;IACjBC,QAAQ;QACNC,WAAW;QACXC,gBAAgB;IAClB;IACAC,SAAS;QACPF,WAAW;QACXC,gBAAgB;IAClB;IACAE,SAAS;IAET;IACAC,OAAO;QACLJ,WAAW;QACXC,gBAAgB;IAClB;IACAI,MAAM;QACJL,WAAW;QACXC,gBAAgB;IAClB;IAEA,oEAAoE;IACpE,yEAAyE;IACzEK,SAAS;QACPC,QAAQ;QACRC,OAAO;IACT;IAEA,eAAe;IACfC,OAAO;QACLD,OAAO;IACT;AACF;AAEA,OAAO,MAAME,0BAA0B,CAACC;IACtC,MAAMC,SAASjC;IAEf,MAAM,EAAE4B,MAAM,EAAEC,KAAK,EAAE,GAAGG,MAAMjC,IAAI;IACpC,kCAAkC;IAClC,MAAMmC,kBAAkBN,UAAU,QAAQC,SAAS;IACnD,MAAMM,qBAAqBH,MAAMI,GAAG,KAAK,aAAa,CAACF;IAEvD,oDAAoD;IACpDF,MAAMjC,IAAI,CAACsC,SAAS,GAAG1C,aACrBG,gBAAgBC,IAAI,EACpBkC,OAAOhC,IAAI,EACX+B,MAAMF,KAAK,IAAIG,OAAOH,KAAK,EAC3BE,MAAMxB,QAAQ,IAAIyB,OAAOzB,QAAQ,EACjCwB,MAAMf,MAAM,IAAIgB,OAAOhB,MAAM,EAC7BgB,MAAM,CAACD,MAAMI,GAAG,CAAC,EACjBD,sBAAsBF,OAAON,OAAO,EACpCM,MAAM,CAACD,MAAMM,KAAK,CAAC,EACnBN,MAAMjC,IAAI,CAACsC,SAAS;IAGtB,OAAOL;AACT,EAAE"}
|
package/lib-commonjs/Image.cjs
CHANGED
|
@@ -5,26 +5,26 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
function _export(target, all) {
|
|
6
6
|
for(var name in all)Object.defineProperty(target, name, {
|
|
7
7
|
enumerable: true,
|
|
8
|
-
get: all
|
|
8
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
9
9
|
});
|
|
10
10
|
}
|
|
11
11
|
_export(exports, {
|
|
12
|
-
Image
|
|
12
|
+
get Image () {
|
|
13
13
|
return _index.Image;
|
|
14
14
|
},
|
|
15
|
-
imageClassNames
|
|
15
|
+
get imageClassNames () {
|
|
16
16
|
return _index.imageClassNames;
|
|
17
17
|
},
|
|
18
|
-
renderImage_unstable
|
|
18
|
+
get renderImage_unstable () {
|
|
19
19
|
return _index.renderImage_unstable;
|
|
20
20
|
},
|
|
21
|
-
useImageBase_unstable
|
|
21
|
+
get useImageBase_unstable () {
|
|
22
22
|
return _index.useImageBase_unstable;
|
|
23
23
|
},
|
|
24
|
-
useImageStyles_unstable
|
|
24
|
+
get useImageStyles_unstable () {
|
|
25
25
|
return _index.useImageStyles_unstable;
|
|
26
26
|
},
|
|
27
|
-
useImage_unstable
|
|
27
|
+
get useImage_unstable () {
|
|
28
28
|
return _index.useImage_unstable;
|
|
29
29
|
}
|
|
30
30
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderImage_unstable } from './renderImage';\nimport { useImage_unstable } from './useImage';\nimport { useImageStyles_unstable } from './useImageStyles.styles';\nimport type { ImageProps } from './Image.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The Image component ensures the consistent styling of images.\n */\nexport const Image: ForwardRefComponent<ImageProps> = React.forwardRef((props, ref) => {\n const state = useImage_unstable(props, ref);\n\n useImageStyles_unstable(state);\n\n useCustomStyleHook_unstable('useImageStyles_unstable')(state);\n\n return renderImage_unstable(state);\n});\n\nImage.displayName = 'Image';\n"],"names":["React","renderImage_unstable","useImage_unstable","useImageStyles_unstable","useCustomStyleHook_unstable","Image","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BACM,mBAAgB;0BACnB,gBAAa;sCACP,6BAA0B;qCAGtB,kCAAkC;AAKvE,MAAMK,QAAAA,WAAAA,GAAyCL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,YAAQP,2BAAAA,EAAkBK,OAAOC;QAEvCL,6CAAAA,EAAwBM;QAExBL,gDAAAA,EAA4B,2BAA2BK;IAEvD,WAAOR,iCAAAA,EAAqBQ;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
@layer fluentui {
|
|
2
|
+
.base {
|
|
3
|
+
border-color: var(--colorNeutralStroke1);
|
|
4
|
+
border-radius: var(--borderRadiusNone);
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
display: inline-block;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.bordered {
|
|
10
|
+
border-style: solid;
|
|
11
|
+
border-width: var(--strokeWidthThin);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.circular {
|
|
15
|
+
border-radius: var(--borderRadiusCircular);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.rounded {
|
|
19
|
+
border-radius: var(--borderRadiusMedium);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.shadow {
|
|
23
|
+
box-shadow: var(--shadow4);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.center {
|
|
27
|
+
object-fit: none;
|
|
28
|
+
object-position: center;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.contain {
|
|
32
|
+
object-fit: contain;
|
|
33
|
+
object-position: center;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.cover {
|
|
37
|
+
object-fit: cover;
|
|
38
|
+
object-position: center;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.none {
|
|
42
|
+
object-fit: none;
|
|
43
|
+
object-position: left top;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.fitFill {
|
|
47
|
+
height: 100%;
|
|
48
|
+
width: 100%;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.block {
|
|
52
|
+
width: 100%;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
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\n/**\n * Image props without design-specific props (shape, shadow, bordered, fit).\n * Use this when building a base image that is unstyled or uses a custom design system.\n */\nexport type ImageBaseProps = ComponentProps<ImageSlots>;\n\nexport type ImageState = ComponentState<ImageSlots> &\n Required<Pick<ImageProps, 'block' | 'bordered' | 'fit' | 'shadow' | 'shape'>>;\n\n/**\n * Image state without design-specific state (shape, shadow, bordered, fit).\n */\nexport type ImageBaseState = ComponentState<ImageSlots>;\n"],"names":[],"mappings":"AAoDA;;CAEC,GACD,WAAwD"}
|
|
@@ -5,26 +5,26 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
function _export(target, all) {
|
|
6
6
|
for(var name in all)Object.defineProperty(target, name, {
|
|
7
7
|
enumerable: true,
|
|
8
|
-
get: all
|
|
8
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
9
9
|
});
|
|
10
10
|
}
|
|
11
11
|
_export(exports, {
|
|
12
|
-
Image
|
|
12
|
+
get Image () {
|
|
13
13
|
return _Image.Image;
|
|
14
14
|
},
|
|
15
|
-
imageClassNames
|
|
15
|
+
get imageClassNames () {
|
|
16
16
|
return _useImageStylesstyles.imageClassNames;
|
|
17
17
|
},
|
|
18
|
-
renderImage_unstable
|
|
18
|
+
get renderImage_unstable () {
|
|
19
19
|
return _renderImage.renderImage_unstable;
|
|
20
20
|
},
|
|
21
|
-
useImageBase_unstable
|
|
21
|
+
get useImageBase_unstable () {
|
|
22
22
|
return _useImage.useImageBase_unstable;
|
|
23
23
|
},
|
|
24
|
-
useImageStyles_unstable
|
|
24
|
+
get useImageStyles_unstable () {
|
|
25
25
|
return _useImageStylesstyles.useImageStyles_unstable;
|
|
26
26
|
},
|
|
27
|
-
useImage_unstable
|
|
27
|
+
get useImage_unstable () {
|
|
28
28
|
return _useImage.useImage_unstable;
|
|
29
29
|
}
|
|
30
30
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/index.ts"],"sourcesContent":["export type { ImageBaseProps, ImageBaseState, ImageProps, ImageSlots, ImageState } from './Image.types';\nexport { Image } from './Image';\nexport { renderImage_unstable } from './renderImage';\nexport { useImage_unstable, useImageBase_unstable } from './useImage';\nexport { imageClassNames, useImageStyles_unstable } from './useImageStyles.styles';\n"],"names":["Image","renderImage_unstable","useImage_unstable","useImageBase_unstable","imageClassNames","useImageStyles_unstable"],"mappings":";;;;;;;;;;;;eACSA,YAAK;;;eAGLI,qCAAe;;;eAFfH,iCAAoB;;;eACDE,+BAAqB;;;eACvBE,6CAAuB;;;eADxCH,2BAAiB;;;uBAFJ,aAAU;6BACK,mBAAgB;0BACI,gBAAa;sCACb,6BAA0B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/renderImage.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ImageSlots, ImageBaseState } from './Image.types';\n\n/**\n * Define the render function.\n * Given the state of an image, renders it.\n */\nexport const renderImage_unstable = (state: ImageBaseState): JSXElement => {\n assertSlots<ImageSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderImage_unstable","state","root"],"mappings":";;;;;;;;;;;gCACA,gDAAiD,GAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAQjD,MAAMC,uBAAuB,CAACC;QACnCF,2BAAAA,EAAwBE;IAExB,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}
|
|
@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
function _export(target, all) {
|
|
7
7
|
for(var name in all)Object.defineProperty(target, name, {
|
|
8
8
|
enumerable: true,
|
|
9
|
-
get: all
|
|
9
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
10
10
|
});
|
|
11
11
|
}
|
|
12
12
|
_export(exports, {
|
|
13
|
-
useImageBase_unstable
|
|
13
|
+
get useImageBase_unstable () {
|
|
14
14
|
return useImageBase_unstable;
|
|
15
15
|
},
|
|
16
|
-
useImage_unstable
|
|
16
|
+
get useImage_unstable () {
|
|
17
17
|
return useImage_unstable;
|
|
18
18
|
}
|
|
19
19
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/useImage.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { ImageBaseProps, ImageBaseState, ImageProps, ImageState } from './Image.types';\n\n/**\n * Given user props, returns state and render function for an Image.\n */\nexport const useImage_unstable = (props: ImageProps, ref: React.Ref<HTMLImageElement>): ImageState => {\n const { bordered = false, block = false, fit = 'default', shadow = false, shape = 'square', ...imageProps } = props;\n const state = useImageBase_unstable(imageProps, ref);\n\n return {\n bordered,\n block,\n fit,\n shadow,\n shape,\n ...state,\n };\n};\n\n/**\n * Base hook for Image component, which manages state related to slot structure.\n * This hook excludes design props (shape, shadow, bordered, fit).\n *\n * @param props - User provided props to the Image component.\n * @param ref - User provided ref to be passed to the Image component.\n */\nexport const useImageBase_unstable = (props: ImageBaseProps, ref: React.Ref<HTMLImageElement>): ImageBaseState => {\n return {\n components: {\n root: 'img',\n },\n root: slot.always(\n getIntrinsicElementProps('img', {\n ref,\n ...props,\n }),\n { elementType: 'img' },\n ),\n };\n};\n"],"names":["getIntrinsicElementProps","slot","useImage_unstable","props","ref","bordered","block","fit","shadow","shape","imageProps","state","useImageBase_unstable","components","root","always","elementType"],"mappings":"AAAA;;;;;;;;;;;;QA8BaY;;;;;;;gCA3BkC,4BAA4B;AAMpE,MAAMV,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,WAAW,KAAK,EAAEC,QAAQ,KAAK,EAAEC,MAAM,SAAS,EAAEC,SAAS,KAAK,EAAEC,QAAQ,QAAQ,EAAE,GAAGC,YAAY,GAAGP;IAC9G,MAAMQ,QAAQC,sBAAsBF,YAAYN;IAEhD,OAAO;QACLC;QACAC;QACAC;QACAC;QACAC;QACA,GAAGE,KAAK;IACV;AACF,EAAE;AASK,8BAA8B,CAACR,OAAuBC;IAC3D,OAAO;QACLS,YAAY;YACVC,MAAM;QACR;QACAA,MAAMb,oBAAAA,CAAKc,MAAM,KACff,wCAAAA,EAAyB,OAAO;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEa,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
|
@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
function _export(target, all) {
|
|
7
7
|
for(var name in all)Object.defineProperty(target, name, {
|
|
8
8
|
enumerable: true,
|
|
9
|
-
get: all
|
|
9
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
10
10
|
});
|
|
11
11
|
}
|
|
12
12
|
_export(exports, {
|
|
13
|
-
imageClassNames
|
|
13
|
+
get imageClassNames () {
|
|
14
14
|
return imageClassNames;
|
|
15
15
|
},
|
|
16
|
-
useImageStyles_unstable
|
|
16
|
+
get useImageStyles_unstable () {
|
|
17
17
|
return useImageStyles_unstable;
|
|
18
18
|
}
|
|
19
19
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useImageStyles.styles.js"],"sourcesContent":["'use client';\nimport { shorthands, mergeClasses, makeStyles } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nexport const imageClassNames = {\n root: 'fui-Image'\n};\nconst useStyles = makeStyles({\n // Base styles\n base: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n borderRadius: tokens.borderRadiusNone,\n boxSizing: 'border-box',\n display: 'inline-block'\n },\n // Bordered styles\n bordered: {\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin)\n },\n // Shape variations\n circular: {\n borderRadius: tokens.borderRadiusCircular\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n },\n // Shadow styles\n shadow: {\n boxShadow: tokens.shadow4\n },\n // Fit variations\n center: {\n objectFit: 'none',\n objectPosition: 'center'\n },\n contain: {\n objectFit: 'contain',\n objectPosition: 'center'\n },\n default: {\n },\n cover: {\n objectFit: 'cover',\n objectPosition: 'center'\n },\n none: {\n objectFit: 'none',\n objectPosition: 'left top'\n },\n // When no explicit height/width props are provided, apply full-size\n // sizing so fit modes behave as intended (object-fit fills the element).\n fitFill: {\n height: '100%',\n width: '100%'\n },\n // Block styles\n block: {\n width: '100%'\n }\n});\nexport const useImageStyles_unstable = (state)=>{\n const styles = useStyles();\n const { height, width } = state.root;\n // eslint-disable-next-line eqeqeq\n const hasExplicitSize = height != null || width != null;\n const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(imageClassNames.root, styles.base, state.block && styles.block, state.bordered && styles.bordered, state.shadow && styles.shadow, styles[state.fit], shouldApplyFitFill && styles.fitFill, styles[state.shape], state.root.className);\n return state;\n};\n"],"names":["shorthands","mergeClasses","__styles","tokens","imageClassNames","root","useStyles","base","g2u3we","h3c5rm","B9xav0g","zhjwy3","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","mc9l5x","bordered","icvyot","vrafjx","oivjwe","wvpqe5","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","circular","rounded","square","shadow","E5pizo","center","st4lth","Ermj5k","contain","cover","none","fitFill","Bqenvij","a9b677","block","d","p","useImageStyles_unstable","state","styles","height","width","hasExplicitSize","shouldApplyFitFill","fit","className","shape"],"mappings":"AAAA,YAAY;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["useImageStyles.styles.js"],"sourcesContent":["'use client';\nimport { shorthands, mergeClasses, makeStyles } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nexport const imageClassNames = {\n root: 'fui-Image'\n};\nconst useStyles = makeStyles({\n // Base styles\n base: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n borderRadius: tokens.borderRadiusNone,\n boxSizing: 'border-box',\n display: 'inline-block'\n },\n // Bordered styles\n bordered: {\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin)\n },\n // Shape variations\n circular: {\n borderRadius: tokens.borderRadiusCircular\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n },\n // Shadow styles\n shadow: {\n boxShadow: tokens.shadow4\n },\n // Fit variations\n center: {\n objectFit: 'none',\n objectPosition: 'center'\n },\n contain: {\n objectFit: 'contain',\n objectPosition: 'center'\n },\n default: {\n },\n cover: {\n objectFit: 'cover',\n objectPosition: 'center'\n },\n none: {\n objectFit: 'none',\n objectPosition: 'left top'\n },\n // When no explicit height/width props are provided, apply full-size\n // sizing so fit modes behave as intended (object-fit fills the element).\n fitFill: {\n height: '100%',\n width: '100%'\n },\n // Block styles\n block: {\n width: '100%'\n }\n});\nexport const useImageStyles_unstable = (state)=>{\n const styles = useStyles();\n const { height, width } = state.root;\n // eslint-disable-next-line eqeqeq\n const hasExplicitSize = height != null || width != null;\n const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(imageClassNames.root, styles.base, state.block && styles.block, state.bordered && styles.bordered, state.shadow && styles.shadow, styles[state.fit], shouldApplyFitFill && styles.fitFill, styles[state.shape], state.root.className);\n return state;\n};\n"],"names":["shorthands","mergeClasses","__styles","tokens","imageClassNames","root","useStyles","base","g2u3we","h3c5rm","B9xav0g","zhjwy3","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","mc9l5x","bordered","icvyot","vrafjx","oivjwe","wvpqe5","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","circular","rounded","square","shadow","E5pizo","center","st4lth","Ermj5k","contain","cover","none","fitFill","Bqenvij","a9b677","block","d","p","useImageStyles_unstable","state","styles","height","width","hasExplicitSize","shouldApplyFitFill","fit","className","shape"],"mappings":"AAAA,YAAY;;;;;;;;;;;;QAGCI,eAAe;;;QA2DfyC,uBAAuB;;;;uBA7DiB,gBAAgB;AAE9D,wBAAwB;IAC3BxC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAK,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,QAAA,EAAA;QAAAhB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAa,OAAA,EAAA;QAAAjB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAc,MAAA,EAAA,CAAA;IAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,OAAA,EAAA;QAAAF,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAA,WAAA,CAAA;IAAAE,KAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAG,IAAA,EAAA;QAAAJ,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAI,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAD,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAuDjB,CAAC;AACK,iCAAiCE,KAAK,IAAG;IAC5C,MAAMC,MAAM,GAAGzC,SAAS,CAAC,CAAC;IAC1B,MAAM,EAAE0C,MAAM,EAAEC,KAAAA,EAAO,GAAGH,KAAK,CAACzC,IAAI;IACpC,kCAAA;IACA,MAAM6C,eAAe,GAAGF,MAAM,IAAI,IAAI,IAAIC,KAAK,IAAI,IAAI;IACvD,MAAME,kBAAkB,GAAGL,KAAK,CAACM,GAAG,KAAK,SAAS,IAAI,CAACF,eAAe;IACtE,oDAAA;IACAJ,KAAK,CAACzC,IAAI,CAACgD,SAAS,OAAGpD,mBAAY,EAACG,eAAe,CAACC,IAAI,EAAE0C,MAAM,CAACxC,IAAI,EAAEuC,KAAK,CAACJ,KAAK,IAAIK,MAAM,CAACL,KAAK,EAAEI,KAAK,CAAC3B,QAAQ,IAAI4B,MAAM,CAAC5B,QAAQ,EAAE2B,KAAK,CAACf,MAAM,IAAIgB,MAAM,CAAChB,MAAM,EAAEgB,MAAM,CAACD,KAAK,CAACM,GAAG,CAAC,EAAED,kBAAkB,IAAIJ,MAAM,CAACR,OAAO,EAAEQ,MAAM,CAACD,KAAK,CAACQ,KAAK,CAAC,EAAER,KAAK,CAACzC,IAAI,CAACgD,SAAS,CAAC;IACzQ,OAAOP,KAAK;AAChB,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
get imageClassNames () {
|
|
13
|
+
return imageClassNames;
|
|
14
|
+
},
|
|
15
|
+
get useImageStyles_unstable () {
|
|
16
|
+
return useImageStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
|
|
20
|
+
const _clsx = require("clsx");
|
|
21
|
+
const _Imagemodulecss = /*#__PURE__*/ _interop_require_default._(require("./Image.module.css"));
|
|
22
|
+
const imageClassNames = {
|
|
23
|
+
root: 'fui-Image'
|
|
24
|
+
};
|
|
25
|
+
const useImageStyles_unstable = (state)=>{
|
|
26
|
+
const { height, width } = state.root;
|
|
27
|
+
// eslint-disable-next-line eqeqeq
|
|
28
|
+
const hasExplicitSize = height != null || width != null;
|
|
29
|
+
const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;
|
|
30
|
+
state.root.className = (0, _clsx.clsx)(imageClassNames.root, _Imagemodulecss.default.base, state.block && _Imagemodulecss.default.block, state.bordered && _Imagemodulecss.default.bordered, state.shadow && _Imagemodulecss.default.shadow, state.fit !== 'default' && _Imagemodulecss.default[state.fit], shouldApplyFitFill && _Imagemodulecss.default.fitFill, state.shape !== 'square' && _Imagemodulecss.default[state.shape], state.root.className);
|
|
31
|
+
return state;
|
|
32
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/useImageStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport styles from './Image.module.css';\nimport type { ImageSlots, ImageState } from './Image.types';\n\nexport const imageClassNames: SlotClassNames<ImageSlots> = {\n root: 'fui-Image',\n};\n\nexport const useImageStyles_unstable = (state: ImageState): ImageState => {\n const { height, width } = state.root;\n // eslint-disable-next-line eqeqeq\n const hasExplicitSize = height != null || width != null;\n const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;\n\n state.root.className = clsx(\n imageClassNames.root,\n styles.base,\n state.block && styles.block,\n state.bordered && styles.bordered,\n state.shadow && styles.shadow,\n state.fit !== 'default' && styles[state.fit],\n shouldApplyFitFill && styles.fitFill,\n state.shape !== 'square' && styles[state.shape],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["clsx","styles","imageClassNames","root","useImageStyles_unstable","state","height","width","hasExplicitSize","shouldApplyFitFill","fit","className","base","block","bordered","shadow","fitFill","shape"],"mappings":";;;;;;;;;;;QAKaE;;;;;;;;sBALQ,OAAO;yEAET,qBAAqB;AAGjC,wBAAoD;IACzDC,MAAM;AACR,EAAE;AAEK,MAAMC,0BAA0B,CAACC;IACtC,MAAM,EAAEC,MAAM,EAAEC,KAAK,EAAE,GAAGF,MAAMF,IAAI;IACpC,kCAAkC;IAClC,MAAMK,kBAAkBF,UAAU,QAAQC,SAAS;IACnD,MAAME,qBAAqBJ,MAAMK,GAAG,KAAK,aAAa,CAACF;IAEvDH,MAAMF,IAAI,CAACQ,SAAS,OAAGX,UAAAA,EACrBE,gBAAgBC,IAAI,EACpBF,uBAAAA,CAAOW,IAAI,EACXP,MAAMQ,KAAK,IAAIZ,uBAAAA,CAAOY,KAAK,EAC3BR,MAAMS,QAAQ,IAAIb,uBAAAA,CAAOa,QAAQ,EACjCT,MAAMU,MAAM,IAAId,uBAAAA,CAAOc,MAAM,EAC7BV,MAAMK,GAAG,KAAK,aAAaT,uBAAM,CAACI,MAAMK,GAAG,CAAC,EAC5CD,sBAAsBR,uBAAAA,CAAOe,OAAO,EACpCX,MAAMY,KAAK,KAAK,YAAYhB,uBAAM,CAACI,MAAMY,KAAK,CAAC,EAC/CZ,MAAMF,IAAI,CAACQ,SAAS;IAGtB,OAAON;AACT,EAAE"}
|
|
@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
function _export(target, all) {
|
|
7
7
|
for(var name in all)Object.defineProperty(target, name, {
|
|
8
8
|
enumerable: true,
|
|
9
|
-
get: all
|
|
9
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
10
10
|
});
|
|
11
11
|
}
|
|
12
12
|
_export(exports, {
|
|
13
|
-
imageClassNames
|
|
13
|
+
get imageClassNames () {
|
|
14
14
|
return imageClassNames;
|
|
15
15
|
},
|
|
16
|
-
useImageStyles_unstable
|
|
16
|
+
get useImageStyles_unstable () {
|
|
17
17
|
return useImageStyles_unstable;
|
|
18
18
|
}
|
|
19
19
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/useImageStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ImageSlots, ImageState } from './Image.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const imageClassNames: SlotClassNames<ImageSlots> = {\n root: 'fui-Image',\n};\n\nconst useStyles = makeStyles({\n // Base styles\n base: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n borderRadius: tokens.borderRadiusNone,\n\n boxSizing: 'border-box',\n display: 'inline-block',\n },\n\n // Bordered styles\n bordered: {\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n },\n\n // Shape variations\n circular: { borderRadius: tokens.borderRadiusCircular },\n rounded: { borderRadius: tokens.borderRadiusMedium },\n square: {\n /* The square styles are exactly the same as the base styles. */\n },\n\n // Shadow styles\n shadow: {\n boxShadow: tokens.shadow4,\n },\n\n // Fit variations\n center: {\n objectFit: 'none',\n objectPosition: 'center',\n },\n contain: {\n objectFit: 'contain',\n objectPosition: 'center',\n },\n default: {\n /* The default styles are exactly the same as the base styles. */\n },\n cover: {\n objectFit: 'cover',\n objectPosition: 'center',\n },\n none: {\n objectFit: 'none',\n objectPosition: 'left top',\n },\n\n // When no explicit height/width props are provided, apply full-size\n // sizing so fit modes behave as intended (object-fit fills the element).\n fitFill: {\n height: '100%',\n width: '100%',\n },\n\n // Block styles\n block: {\n width: '100%',\n },\n});\n\nexport const useImageStyles_unstable = (state: ImageState): ImageState => {\n const styles = useStyles();\n\n const { height, width } = state.root;\n // eslint-disable-next-line eqeqeq\n const hasExplicitSize = height != null || width != null;\n const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n imageClassNames.root,\n styles.base,\n state.block && styles.block,\n state.bordered && styles.bordered,\n state.shadow && styles.shadow,\n styles[state.fit],\n shouldApplyFitFill && styles.fitFill,\n styles[state.shape],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["shorthands","mergeClasses","makeStyles","tokens","imageClassNames","root","useStyles","base","borderColor","colorNeutralStroke1","borderRadius","borderRadiusNone","boxSizing","display","bordered","borderStyle","borderWidth","strokeWidthThin","circular","borderRadiusCircular","rounded","borderRadiusMedium","square","shadow","boxShadow","shadow4","center","objectFit","objectPosition","contain","default","cover","none","fitFill","height","width","block","useImageStyles_unstable","state","styles","hasExplicitSize","shouldApplyFitFill","fit","className","shape"],"mappings":"AAAA;;;;;;;;;;;;QAOaI;;;QAkEAiC;;;;uBAvEwC,iBAAiB;4BAC/C,wBAAwB;AAIxC,wBAAoD;IACzDhC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3B,cAAc;IACdK,MAAM;QACJ,GAAGP,iBAAAA,CAAWQ,WAAW,CAACL,kBAAAA,CAAOM,mBAAmB,CAAC;QACrDC,cAAcP,kBAAAA,CAAOQ,gBAAgB;QAErCC,WAAW;QACXC,SAAS;IACX;IAEA,kBAAkB;IAClBC,UAAU;QACR,GAAGd,iBAAAA,CAAWe,WAAW,CAAC,QAAQ;QAClC,GAAGf,iBAAAA,CAAWgB,WAAW,CAACb,kBAAAA,CAAOc,eAAe,CAAC;IACnD;IAEA,mBAAmB;IACnBC,UAAU;QAAER,cAAcP,kBAAAA,CAAOgB,oBAAoB;IAAC;IACtDC,SAAS;QAAEV,cAAcP,kBAAAA,CAAOkB,kBAAkB;IAAC;IACnDC,QAAQ,CAER;IAEA,gBAAgB;IAChBC,QAAQ;QACNC,WAAWrB,kBAAAA,CAAOsB,OAAO;IAC3B;IAEA,iBAAiB;IACjBC,QAAQ;QACNC,WAAW;QACXC,gBAAgB;IAClB;IACAC,SAAS;QACPF,WAAW;QACXC,gBAAgB;IAClB;IACAE,SAAS,CAET;IACAC,OAAO;QACLJ,WAAW;QACXC,gBAAgB;IAClB;IACAI,MAAM;QACJL,WAAW;QACXC,gBAAgB;IAClB;IAEA,oEAAoE;IACpE,yEAAyE;IACzEK,SAAS;QACPC,QAAQ;QACRC,OAAO;IACT;IAEA,eAAe;IACfC,OAAO;QACLD,OAAO;IACT;AACF;AAEO,gCAAgC,CAACG;IACtC,MAAMC,SAASjC;IAEf,MAAM,EAAE4B,MAAM,EAAEC,KAAK,EAAE,GAAGG,MAAMjC,IAAI;IACpC,kCAAkC;IAClC,MAAMmC,kBAAkBN,UAAU,QAAQC,SAAS;IACnD,MAAMM,qBAAqBH,MAAMI,GAAG,KAAK,aAAa,CAACF;IAEvD,oDAAoD;IACpDF,MAAMjC,IAAI,CAACsC,SAAS,GAAG1C,uBAAAA,EACrBG,gBAAgBC,IAAI,EACpBkC,OAAOhC,IAAI,EACX+B,MAAMF,KAAK,IAAIG,OAAOH,KAAK,EAC3BE,MAAMxB,QAAQ,IAAIyB,OAAOzB,QAAQ,EACjCwB,MAAMf,MAAM,IAAIgB,OAAOhB,MAAM,EAC7BgB,MAAM,CAACD,MAAMI,GAAG,CAAC,EACjBD,sBAAsBF,OAAON,OAAO,EACpCM,MAAM,CAACD,MAAMM,KAAK,CAAC,EACnBN,MAAMjC,IAAI,CAACsC,SAAS;IAGtB,OAAOL;AACT,EAAE"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
get imageClassNames () {
|
|
13
|
+
return imageClassNames;
|
|
14
|
+
},
|
|
15
|
+
get useImageStyles_unstable () {
|
|
16
|
+
return useImageStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
|
|
20
|
+
const _clsx = require("clsx");
|
|
21
|
+
const _Imagemodulecss = /*#__PURE__*/ _interop_require_default._(require("./Image.module.css"));
|
|
22
|
+
const imageClassNames = {
|
|
23
|
+
root: 'fui-Image'
|
|
24
|
+
};
|
|
25
|
+
const useImageStyles_unstable = (state)=>{
|
|
26
|
+
const { height, width } = state.root;
|
|
27
|
+
// eslint-disable-next-line eqeqeq
|
|
28
|
+
const hasExplicitSize = height != null || width != null;
|
|
29
|
+
const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;
|
|
30
|
+
state.root.className = (0, _clsx.clsx)(imageClassNames.root, _Imagemodulecss.default.base, state.block && _Imagemodulecss.default.block, state.bordered && _Imagemodulecss.default.bordered, state.shadow && _Imagemodulecss.default.shadow, state.fit !== 'default' && _Imagemodulecss.default[state.fit], shouldApplyFitFill && _Imagemodulecss.default.fitFill, state.shape !== 'square' && _Imagemodulecss.default[state.shape], state.root.className);
|
|
31
|
+
return state;
|
|
32
|
+
};
|