@fluentui/react-image 9.1.1 → 9.1.2

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.
Files changed (46) hide show
  1. package/.swcrc +30 -0
  2. package/CHANGELOG.json +46 -1
  3. package/CHANGELOG.md +16 -2
  4. package/lib/Image.js.map +1 -1
  5. package/lib/components/Image/Image.js.map +1 -1
  6. package/lib/components/Image/Image.types.js.map +1 -1
  7. package/lib/components/Image/index.js.map +1 -1
  8. package/lib/components/Image/renderImage.js +1 -3
  9. package/lib/components/Image/renderImage.js.map +1 -1
  10. package/lib/components/Image/useImage.js +1 -0
  11. package/lib/components/Image/useImage.js.map +1 -1
  12. package/lib/components/Image/useImageStyles.js.map +1 -1
  13. package/lib/index.js.map +1 -1
  14. package/lib-commonjs/Image.js +5 -4
  15. package/lib-commonjs/Image.js.map +1 -1
  16. package/lib-commonjs/components/Image/Image.js +19 -20
  17. package/lib-commonjs/components/Image/Image.js.map +1 -1
  18. package/lib-commonjs/components/Image/Image.types.js +3 -2
  19. package/lib-commonjs/components/Image/Image.types.js.map +1 -1
  20. package/lib-commonjs/components/Image/index.js +9 -8
  21. package/lib-commonjs/components/Image/index.js.map +1 -1
  22. package/lib-commonjs/components/Image/renderImage.js +13 -19
  23. package/lib-commonjs/components/Image/renderImage.js.map +1 -1
  24. package/lib-commonjs/components/Image/useImage.js +27 -32
  25. package/lib-commonjs/components/Image/useImage.js.map +1 -1
  26. package/lib-commonjs/components/Image/useImageStyles.js +180 -80
  27. package/lib-commonjs/components/Image/useImageStyles.js.map +1 -1
  28. package/lib-commonjs/index.js +16 -33
  29. package/lib-commonjs/index.js.map +1 -1
  30. package/package.json +8 -7
  31. package/lib-amd/Image.js +0 -6
  32. package/lib-amd/Image.js.map +0 -1
  33. package/lib-amd/components/Image/Image.js +0 -17
  34. package/lib-amd/components/Image/Image.js.map +0 -1
  35. package/lib-amd/components/Image/Image.types.js +0 -5
  36. package/lib-amd/components/Image/Image.types.js.map +0 -1
  37. package/lib-amd/components/Image/index.js +0 -10
  38. package/lib-amd/components/Image/index.js.map +0 -1
  39. package/lib-amd/components/Image/renderImage.js +0 -15
  40. package/lib-amd/components/Image/renderImage.js.map +0 -1
  41. package/lib-amd/components/Image/useImage.js +0 -25
  42. package/lib-amd/components/Image/useImage.js.map +0 -1
  43. package/lib-amd/components/Image/useImageStyles.js +0 -62
  44. package/lib-amd/components/Image/useImageStyles.js.map +0 -1
  45. package/lib-amd/index.js +0 -11
  46. package/lib-amd/index.js.map +0 -1
package/.swcrc ADDED
@@ -0,0 +1,30 @@
1
+ {
2
+ "$schema": "https://json.schemastore.org/swcrc",
3
+ "exclude": [
4
+ "/testing",
5
+ "/**/*.cy.ts",
6
+ "/**/*.cy.tsx",
7
+ "/**/*.spec.ts",
8
+ "/**/*.spec.tsx",
9
+ "/**/*.test.ts",
10
+ "/**/*.test.tsx"
11
+ ],
12
+ "jsc": {
13
+ "parser": {
14
+ "syntax": "typescript",
15
+ "tsx": true,
16
+ "decorators": false,
17
+ "dynamicImport": false
18
+ },
19
+ "externalHelpers": true,
20
+ "transform": {
21
+ "react": {
22
+ "runtime": "classic",
23
+ "useSpread": true
24
+ }
25
+ },
26
+ "target": "es2019"
27
+ },
28
+ "minify": false,
29
+ "sourceMaps": true
30
+ }
package/CHANGELOG.json CHANGED
@@ -2,7 +2,52 @@
2
2
  "name": "@fluentui/react-image",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 16 Mar 2023 14:33:33 GMT",
5
+ "date": "Tue, 21 Mar 2023 21:18:47 GMT",
6
+ "tag": "@fluentui/react-image_v9.1.2",
7
+ "version": "9.1.2",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "tristan.watanabe@gmail.com",
12
+ "package": "@fluentui/react-image",
13
+ "commit": "2fac1a139149bd13b76b1306207bc988dca9c72c",
14
+ "comment": "chore: migrate to swc transpilation approach."
15
+ },
16
+ {
17
+ "author": "tristan.watanabe@gmail.com",
18
+ "package": "@fluentui/react-image",
19
+ "commit": "ead1c6d4c2ac3f3596b62b8cbc07b0a03041f11f",
20
+ "comment": "fix: add node field to package.json exports map."
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-image",
25
+ "comment": "Bump @fluentui/react-shared-contexts to v9.3.2",
26
+ "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-image",
31
+ "comment": "Bump @fluentui/react-utilities to v9.7.2",
32
+ "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-image",
37
+ "comment": "Bump @fluentui/react-theme to v9.1.7",
38
+ "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
39
+ },
40
+ {
41
+ "author": "beachball",
42
+ "package": "@fluentui/react-image",
43
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20",
44
+ "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
45
+ }
46
+ ]
47
+ }
48
+ },
49
+ {
50
+ "date": "Thu, 16 Mar 2023 14:36:59 GMT",
6
51
  "tag": "@fluentui/react-image_v9.1.1",
7
52
  "version": "9.1.1",
8
53
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,26 @@
1
1
  # Change Log - @fluentui/react-image
2
2
 
3
- This log was last generated on Thu, 16 Mar 2023 14:33:33 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 21 Mar 2023 21:18:47 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.1.2)
8
+
9
+ Tue, 21 Mar 2023 21:18:47 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.1.1..@fluentui/react-image_v9.1.2)
11
+
12
+ ### Patches
13
+
14
+ - chore: migrate to swc transpilation approach. ([PR #27250](https://github.com/microsoft/fluentui/pull/27250) by tristan.watanabe@gmail.com)
15
+ - fix: add node field to package.json exports map. ([PR #27154](https://github.com/microsoft/fluentui/pull/27154) by tristan.watanabe@gmail.com)
16
+ - Bump @fluentui/react-shared-contexts to v9.3.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
17
+ - Bump @fluentui/react-utilities to v9.7.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
18
+ - Bump @fluentui/react-theme to v9.1.7 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
19
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
20
+
7
21
  ## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.1.1)
8
22
 
9
- Thu, 16 Mar 2023 14:33:33 GMT
23
+ Thu, 16 Mar 2023 14:36:59 GMT
10
24
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.1.0..@fluentui/react-image_v9.1.1)
11
25
 
12
26
  ### Patches
package/lib/Image.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Image.js","sourceRoot":"../src/","sources":["packages/react-components/react-image/src/Image.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './components/Image/index';\n"]}
1
+ {"version":3,"names":[],"sources":["../src/Image.ts"],"sourcesContent":["export * from './components/Image/index';\n"],"mappings":"AAAA,cAAc"}
@@ -1 +1 @@
1
- {"version":3,"names":["React","renderImage_unstable","useImage_unstable","useImageStyles_unstable","useCustomStyleHooks_unstable","Image","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-image/src/components/Image/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderImage_unstable } from './renderImage';\nimport { useImage_unstable } from './useImage';\nimport { useImageStyles_unstable } from './useImageStyles';\nimport type { ImageProps } from './Image.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_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 const { useImageStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderImage_unstable(state);\n});\n\nImage.displayName = 'Image';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,iBAAiB,QAAQ,YAAY;AAC9C,SAASC,uBAAuB,QAAQ,kBAAkB;AAG1D,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,KAAK,gBAAoCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGP,iBAAiB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAE3CL,uBAAuB,CAACM,KAAK,CAAC;EAE9B,MAAM;IAAEN,uBAAuB,EAAEO;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EACnFM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOR,oBAAoB,CAACQ,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFJ,KAAK,CAACM,WAAW,GAAG,OAAO"}
1
+ {"version":3,"names":["React","renderImage_unstable","useImage_unstable","useImageStyles_unstable","useCustomStyleHooks_unstable","Image","forwardRef","props","ref","state","useCustomStyles","displayName"],"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';\nimport type { ImageProps } from './Image.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_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 const { useImageStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderImage_unstable(state);\n});\n\nImage.displayName = 'Image';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,iBAAiB,QAAQ;AAClC,SAASC,uBAAuB,QAAQ;AAGxC,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,KAAA,gBAAyCL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrF,MAAMC,KAAA,GAAQP,iBAAA,CAAkBK,KAAA,EAAOC,GAAA;EAEvCL,uBAAA,CAAwBM,KAAA;EAExB,MAAM;IAAEN,uBAAA,EAAyBO;EAAe,CAAE,GAAGN,4BAAA;EACrDM,eAAA,CAAgBD,KAAA;EAEhB,OAAOR,oBAAA,CAAqBQ,KAAA;AAC9B;AAEAJ,KAAA,CAAMM,WAAW,GAAG"}
@@ -1 +1 @@
1
- {"version":3,"file":"Image.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-image/src/components/Image/Image.types.ts"],"names":[],"mappings":"","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"]}
1
+ {"version":3,"names":[],"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"],"mappings":"AAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-image/src/components/Image/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './Image.types';\nexport * from './Image';\nexport * from './renderImage';\nexport * from './useImage';\nexport * from './useImageStyles';\n"]}
1
+ {"version":3,"names":[],"sources":["../../../src/components/Image/index.ts"],"sourcesContent":["export * from './Image.types';\nexport * from './Image';\nexport * from './renderImage';\nexport * from './useImage';\nexport * from './useImageStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
@@ -9,8 +9,6 @@ export const renderImage_unstable = state => {
9
9
  slots,
10
10
  slotProps
11
11
  } = getSlots(state);
12
- return /*#__PURE__*/React.createElement(slots.root, {
13
- ...slotProps.root
14
- });
12
+ return /*#__PURE__*/React.createElement(slots.root, slotProps.root);
15
13
  };
16
14
  //# sourceMappingURL=renderImage.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","getSlots","renderImage_unstable","state","slots","slotProps","createElement","root"],"sources":["../src/packages/react-components/react-image/src/components/Image/renderImage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ImageSlots, ImageState } from './Image.types';\n\n/**\n * Define the render function.\n * Given the state of an image, renders it.\n */\nexport const renderImage_unstable = (state: ImageState) => {\n const { slots, slotProps } = getSlots<ImageSlots>(state);\n\n return <slots.root {...slotProps.root} />;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;;AAIA,OAAO,MAAMC,oBAAoB,GAAIC,KAAiB,IAAI;EACxD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAaE,KAAK,CAAC;EAExD,oBAAOH,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,EAAI;AAC3C,CAAC"}
1
+ {"version":3,"names":["React","getSlots","renderImage_unstable","state","slots","slotProps","createElement","root"],"sources":["../../../src/components/Image/renderImage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ImageSlots, ImageState } from './Image.types';\n\n/**\n * Define the render function.\n * Given the state of an image, renders it.\n */\nexport const renderImage_unstable = (state: ImageState) => {\n const { slots, slotProps } = getSlots<ImageSlots>(state);\n\n return <slots.root {...slotProps.root} />;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;;AAIA,OAAO,MAAMC,oBAAA,GAAwBC,KAAA,IAAsB;EACzD,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAAqBE,KAAA;EAElD,oBAAOH,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI;AACvC"}
@@ -1,3 +1,4 @@
1
+ import * as React from 'react';
1
2
  import { getNativeElementProps } from '@fluentui/react-utilities';
2
3
  /**
3
4
  * Given user props, returns state and render function for an Image.
@@ -1 +1 @@
1
- {"version":3,"names":["getNativeElementProps","useImage_unstable","props","ref","bordered","fit","block","shape","shadow","state","components","root"],"sources":["../src/packages/react-components/react-image/src/components/Image/useImage.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ImageProps, ImageState } from './Image.types';\n\n/**\n * Given user props, returns state and render function for an Image.\n */\nexport const useImage_unstable = (props: ImageProps, ref: React.Ref<HTMLImageElement>): ImageState => {\n const { bordered = false, fit = 'default', block = false, shape = 'square', shadow = false } = props;\n\n const state: ImageState = {\n bordered,\n fit,\n block,\n shape,\n shadow,\n components: {\n root: 'img',\n },\n root: getNativeElementProps('img', {\n ref,\n ...props,\n }),\n };\n\n return state;\n};\n"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,2BAA2B;AAGjE;;;AAGA,OAAO,MAAMC,iBAAiB,GAAGA,CAACC,KAAiB,EAAEC,GAAgC,KAAgB;EACnG,MAAM;IAAEC,QAAQ,GAAG,KAAK;IAAEC,GAAG,GAAG,SAAS;IAAEC,KAAK,GAAG,KAAK;IAAEC,KAAK,GAAG,QAAQ;IAAEC,MAAM,GAAG;EAAK,CAAE,GAAGN,KAAK;EAEpG,MAAMO,KAAK,GAAe;IACxBL,QAAQ;IACRC,GAAG;IACHC,KAAK;IACLC,KAAK;IACLC,MAAM;IACNE,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IACDA,IAAI,EAAEX,qBAAqB,CAAC,KAAK,EAAE;MACjCG,GAAG;MACH,GAAGD;KACJ;GACF;EAED,OAAOO,KAAK;AACd,CAAC"}
1
+ {"version":3,"names":["React","getNativeElementProps","useImage_unstable","props","ref","bordered","fit","block","shape","shadow","state","components","root"],"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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,QAAQ;AAGtC;;;AAGA,OAAO,MAAMC,iBAAA,GAAoBA,CAACC,KAAA,EAAmBC,GAAA,KAAiD;EACpG,MAAM;IAAEC,QAAA,GAAW,KAAK;IAAEC,GAAA,GAAM;IAAWC,KAAA,GAAQ,KAAK;IAAEC,KAAA,GAAQ;IAAUC,MAAA,GAAS;EAAK,CAAE,GAAGN,KAAA;EAE/F,MAAMO,KAAA,GAAoB;IACxBL,QAAA;IACAC,GAAA;IACAC,KAAA;IACAC,KAAA;IACAC,MAAA;IACAE,UAAA,EAAY;MACVC,IAAA,EAAM;IACR;IACAA,IAAA,EAAMX,qBAAA,CAAsB,OAAO;MACjCG,GAAA;MACA,GAAGD;IACL;EACF;EAEA,OAAOO,KAAA;AACT"}
@@ -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/packages/react-components/react-image/src/components/Image/useImageStyles.ts"],"sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ImageSlots, ImageState } from './Image.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const imageClassNames: SlotClassNames<ImageSlots> = {\n root: 'fui-Image',\n};\n\nconst useStyles = makeStyles({\n // Base styles\n base: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n\n boxSizing: 'border-box',\n display: 'inline-block',\n },\n\n // Bordered styles\n bordered: {\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n },\n\n // Shape variations\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n square: {\n /* The square styles are exactly the same as the base styles. */\n },\n\n // Shadow styles\n shadow: {\n boxShadow: tokens.shadow4,\n },\n\n // Fit variations\n center: {\n objectFit: 'none',\n objectPosition: 'center',\n height: '100%',\n width: '100%',\n },\n contain: {\n objectFit: 'contain',\n objectPosition: 'center',\n height: '100%',\n width: '100%',\n },\n default: {\n /* The default styles are exactly the same as the base styles. */\n },\n cover: {\n objectFit: 'cover',\n objectPosition: 'center',\n height: '100%',\n width: '100%',\n },\n none: {\n objectFit: 'none',\n objectPosition: 'left top',\n height: '100%',\n width: '100%',\n },\n\n // Block styles\n block: {\n width: '100%',\n },\n});\n\nexport const useImageStyles_unstable = (state: ImageState) => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n imageClassNames.root,\n styles.base,\n state.block && styles.block,\n state.bordered && styles.bordered,\n state.shadow && styles.shadow,\n styles[state.fit],\n styles[state.shape],\n state.root.className,\n );\n};\n"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAI9C,OAAO,MAAMC,eAAe,GAA+B;EACzDC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAGJ,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,EAiEhB;AAEF,OAAO,MAAMC,uBAAuB,GAAIC,KAAiB,IAAI;EAC3D,MAAMC,MAAM,GAAGtC,SAAS,EAAE;EAC1BqC,KAAK,CAACtC,IAAI,CAACwC,SAAS,GAAG5C,YAAY,CACjCG,eAAe,CAACC,IAAI,EACpBuC,MAAM,CAACrC,IAAI,EACXoC,KAAK,CAACH,KAAK,IAAII,MAAM,CAACJ,KAAK,EAC3BG,KAAK,CAACzB,QAAQ,IAAI0B,MAAM,CAAC1B,QAAQ,EACjCyB,KAAK,CAACb,MAAM,IAAIc,MAAM,CAACd,MAAM,EAC7Bc,MAAM,CAACD,KAAK,CAACG,GAAG,CAAC,EACjBF,MAAM,CAACD,KAAK,CAACI,KAAK,CAAC,EACnBJ,KAAK,CAACtC,IAAI,CAACwC,SAAS,CACrB;AACH,CAAC"}
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.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,EAiElB;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.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-image/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { Image, imageClassNames, renderImage_unstable, useImageStyles_unstable, useImage_unstable } from './Image';\nexport type { ImageProps, ImageSlots, ImageState } from './Image';\n"]}
1
+ {"version":3,"names":["Image","imageClassNames","renderImage_unstable","useImageStyles_unstable","useImage_unstable"],"sources":["../src/index.ts"],"sourcesContent":["export { Image, imageClassNames, renderImage_unstable, useImageStyles_unstable, useImage_unstable } from './Image';\nexport type { ImageProps, ImageSlots, ImageState } from './Image';\n"],"mappings":"AAAA,SAASA,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ"}
@@ -1,8 +1,9 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
5
4
  });
6
- const tslib_1 = /*#__PURE__*/require("tslib");
7
- tslib_1.__exportStar(require("./components/Image/index"), exports);
5
+ const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
6
+ _exportStar(require("./components/Image/index"), exports);
7
+ //# sourceMappingURL=Image.js.map
8
+
8
9
  //# sourceMappingURL=Image.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-image/src/Image.ts"],"sourcesContent":["export * from './components/Image/index';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,8BAAAC,OAAA"}
1
+ {"version":3,"sources":["../lib/Image.js"],"sourcesContent":["export * from './components/Image/index';\n//# sourceMappingURL=Image.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,iCAAiC"}
@@ -1,25 +1,24 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "Image", {
6
+ enumerable: true,
7
+ get: ()=>Image
5
8
  });
6
- exports.Image = void 0;
7
- const React = /*#__PURE__*/require("react");
8
- const renderImage_1 = /*#__PURE__*/require("./renderImage");
9
- const useImage_1 = /*#__PURE__*/require("./useImage");
10
- const useImageStyles_1 = /*#__PURE__*/require("./useImageStyles");
11
- const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
12
- /**
13
- * The Image component ensures the consistent styling of images.
14
- */
15
- exports.Image = /*#__PURE__*/React.forwardRef((props, ref) => {
16
- const state = useImage_1.useImage_unstable(props, ref);
17
- useImageStyles_1.useImageStyles_unstable(state);
18
- const {
19
- useImageStyles_unstable: useCustomStyles
20
- } = react_shared_contexts_1.useCustomStyleHooks_unstable();
21
- useCustomStyles(state);
22
- return renderImage_1.renderImage_unstable(state);
9
+ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
10
+ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
11
+ const _renderImage = require("./renderImage");
12
+ const _useImage = require("./useImage");
13
+ const _useImageStyles = require("./useImageStyles");
14
+ const _reactSharedContexts = require("@fluentui/react-shared-contexts");
15
+ const Image = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
16
+ const state = (0, _useImage.useImage_unstable)(props, ref);
17
+ (0, _useImageStyles.useImageStyles_unstable)(state);
18
+ const { useImageStyles_unstable: useCustomStyles } = (0, _reactSharedContexts.useCustomStyleHooks_unstable)();
19
+ useCustomStyles(state);
20
+ return (0, _renderImage.renderImage_unstable)(state);
23
21
  });
24
- exports.Image.displayName = 'Image';
22
+ Image.displayName = 'Image'; //# sourceMappingURL=Image.js.map
23
+
25
24
  //# sourceMappingURL=Image.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","require","renderImage_1","useImage_1","useImageStyles_1","react_shared_contexts_1","exports","Image","forwardRef","props","ref","state","useImage_unstable","useImageStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderImage_unstable","displayName"],"sources":["../src/packages/react-components/react-image/src/components/Image/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderImage_unstable } from './renderImage';\nimport { useImage_unstable } from './useImage';\nimport { useImageStyles_unstable } from './useImageStyles';\nimport type { ImageProps } from './Image.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_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 const { useImageStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderImage_unstable(state);\n});\n\nImage.displayName = 'Image';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,aAAA,gBAAAD,OAAA;AACA,MAAAE,UAAA,gBAAAF,OAAA;AACA,MAAAG,gBAAA,gBAAAH,OAAA;AAGA,MAAAI,uBAAA,gBAAAJ,OAAA;AAEA;;;AAGaK,OAAA,CAAAC,KAAK,gBAAoCP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGR,UAAA,CAAAS,iBAAiB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAE3CN,gBAAA,CAAAS,uBAAuB,CAACF,KAAK,CAAC;EAE9B,MAAM;IAAEE,uBAAuB,EAAEC;EAAe,CAAE,GAAGT,uBAAA,CAAAU,4BAA4B,EAAE;EACnFD,eAAe,CAACH,KAAK,CAAC;EAEtB,OAAOT,aAAA,CAAAc,oBAAoB,CAACL,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFL,OAAA,CAAAC,KAAK,CAACU,WAAW,GAAG,OAAO"}
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';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n/**\n * The Image component ensures the consistent styling of images.\n */\nexport const Image = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useImage_unstable(props, ref);\n useImageStyles_unstable(state);\n const {\n useImageStyles_unstable: useCustomStyles\n } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n return renderImage_unstable(state);\n});\nImage.displayName = 'Image';\n//# sourceMappingURL=Image.js.map"],"names":["Image","React","forwardRef","props","ref","state","useImage_unstable","useImageStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderImage_unstable","displayName"],"mappings":";;;;+BAQaA;;aAAAA;;;6DARU;6BACc;0BACH;gCACM;qCACK;AAItC,MAAMA,QAAQ,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACjE,MAAMC,QAAQC,IAAAA,2BAAiB,EAACH,OAAOC;IACvCG,IAAAA,uCAAuB,EAACF;IACxB,MAAM,EACJE,yBAAyBC,gBAAe,EACzC,GAAGC,IAAAA,iDAA4B;IAChCD,gBAAgBH;IAChB,OAAOK,IAAAA,iCAAoB,EAACL;AAC9B;AACAL,MAAMW,WAAW,GAAG,SACpB,iCAAiC"}
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
5
4
  });
5
+ //# sourceMappingURL=Image.types.js.map
6
+
6
7
  //# sourceMappingURL=Image.types.js.map
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":["../src/packages/react-components/react-image/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"],"mappings":""}
1
+ {"version":3,"sources":["../../../lib/components/Image/Image.types.js"],"sourcesContent":["export {};\n//# sourceMappingURL=Image.types.js.map"],"names":[],"mappings":";;;;CACA,uCAAuC"}
@@ -1,12 +1,13 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
5
4
  });
6
- const tslib_1 = /*#__PURE__*/require("tslib");
7
- tslib_1.__exportStar(require("./Image.types"), exports);
8
- tslib_1.__exportStar(require("./Image"), exports);
9
- tslib_1.__exportStar(require("./renderImage"), exports);
10
- tslib_1.__exportStar(require("./useImage"), exports);
11
- tslib_1.__exportStar(require("./useImageStyles"), exports);
5
+ const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
6
+ _exportStar(require("./Image.types"), exports);
7
+ _exportStar(require("./Image"), exports);
8
+ _exportStar(require("./renderImage"), exports);
9
+ _exportStar(require("./useImage"), exports);
10
+ _exportStar(require("./useImageStyles"), exports);
11
+ //# sourceMappingURL=index.js.map
12
+
12
13
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-image/src/components/Image/index.ts"],"sourcesContent":["export * from './Image.types';\nexport * from './Image';\nexport * from './renderImage';\nexport * from './useImage';\nexport * from './useImageStyles';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,mBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,aAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,mBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,gBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,sBAAAC,OAAA"}
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';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
@@ -1,23 +1,17 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "renderImage_unstable", {
6
+ enumerable: true,
7
+ get: ()=>renderImage_unstable
5
8
  });
6
- exports.renderImage_unstable = void 0;
7
- const React = /*#__PURE__*/require("react");
8
- const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
9
- /**
10
- * Define the render function.
11
- * Given the state of an image, renders it.
12
- */
13
- const renderImage_unstable = state => {
14
- const {
15
- slots,
16
- slotProps
17
- } = react_utilities_1.getSlots(state);
18
- return React.createElement(slots.root, {
19
- ...slotProps.root
20
- });
21
- };
22
- exports.renderImage_unstable = renderImage_unstable;
9
+ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
10
+ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
11
+ const _reactUtilities = require("@fluentui/react-utilities");
12
+ const renderImage_unstable = (state)=>{
13
+ const { slots , slotProps } = (0, _reactUtilities.getSlots)(state);
14
+ return /*#__PURE__*/ _react.createElement(slots.root, slotProps.root);
15
+ }; //# sourceMappingURL=renderImage.js.map
16
+
23
17
  //# sourceMappingURL=renderImage.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","require","react_utilities_1","renderImage_unstable","state","slots","slotProps","getSlots","createElement","root","exports"],"sources":["../src/packages/react-components/react-image/src/components/Image/renderImage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ImageSlots, ImageState } from './Image.types';\n\n/**\n * Define the render function.\n * Given the state of an image, renders it.\n */\nexport const renderImage_unstable = (state: ImageState) => {\n const { slots, slotProps } = getSlots<ImageSlots>(state);\n\n return <slots.root {...slotProps.root} />;\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAGA;;;;AAIO,MAAME,oBAAoB,GAAIC,KAAiB,IAAI;EACxD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,iBAAA,CAAAK,QAAQ,CAAaH,KAAK,CAAC;EAExD,OAAOJ,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,EAAI;AAC3C,CAAC;AAJYC,OAAA,CAAAP,oBAAoB,GAAAA,oBAAA"}
1
+ {"version":3,"sources":["../../../lib/components/Image/renderImage.js"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\n/**\n * Define the render function.\n * Given the state of an image, renders it.\n */\nexport const renderImage_unstable = state => {\n const {\n slots,\n slotProps\n } = getSlots(state);\n return /*#__PURE__*/React.createElement(slots.root, slotProps.root);\n};\n//# sourceMappingURL=renderImage.js.map"],"names":["renderImage_unstable","state","slots","slotProps","getSlots","React","createElement","root"],"mappings":";;;;+BAMaA;;aAAAA;;;6DANU;gCACE;AAKlB,MAAMA,uBAAuBC,CAAAA,QAAS;IAC3C,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACH;IACb,OAAO,WAAW,GAAEI,OAAMC,aAAa,CAACJ,MAAMK,IAAI,EAAEJ,UAAUI,IAAI;AACpE,GACA,uCAAuC"}
@@ -1,36 +1,31 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "useImage_unstable", {
6
+ enumerable: true,
7
+ get: ()=>useImage_unstable
5
8
  });
6
- exports.useImage_unstable = void 0;
7
- const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
8
- /**
9
- * Given user props, returns state and render function for an Image.
10
- */
11
- const useImage_unstable = (props, ref) => {
12
- const {
13
- bordered = false,
14
- fit = 'default',
15
- block = false,
16
- shape = 'square',
17
- shadow = false
18
- } = props;
19
- const state = {
20
- bordered,
21
- fit,
22
- block,
23
- shape,
24
- shadow,
25
- components: {
26
- root: 'img'
27
- },
28
- root: react_utilities_1.getNativeElementProps('img', {
29
- ref,
30
- ...props
31
- })
32
- };
33
- return state;
34
- };
35
- exports.useImage_unstable = useImage_unstable;
9
+ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
10
+ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
11
+ const _reactUtilities = require("@fluentui/react-utilities");
12
+ const useImage_unstable = (props, ref)=>{
13
+ const { bordered =false , fit ='default' , block =false , shape ='square' , shadow =false } = props;
14
+ const state = {
15
+ bordered,
16
+ fit,
17
+ block,
18
+ shape,
19
+ shadow,
20
+ components: {
21
+ root: 'img'
22
+ },
23
+ root: (0, _reactUtilities.getNativeElementProps)('img', {
24
+ ref,
25
+ ...props
26
+ })
27
+ };
28
+ return state;
29
+ }; //# sourceMappingURL=useImage.js.map
30
+
36
31
  //# sourceMappingURL=useImage.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["react_utilities_1","require","useImage_unstable","props","ref","bordered","fit","block","shape","shadow","state","components","root","getNativeElementProps","exports"],"sources":["../src/packages/react-components/react-image/src/components/Image/useImage.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ImageProps, ImageState } from './Image.types';\n\n/**\n * Given user props, returns state and render function for an Image.\n */\nexport const useImage_unstable = (props: ImageProps, ref: React.Ref<HTMLImageElement>): ImageState => {\n const { bordered = false, fit = 'default', block = false, shape = 'square', shadow = false } = props;\n\n const state: ImageState = {\n bordered,\n fit,\n block,\n shape,\n shadow,\n components: {\n root: 'img',\n },\n root: getNativeElementProps('img', {\n ref,\n ...props,\n }),\n };\n\n return state;\n};\n"],"mappings":";;;;;;AACA,MAAAA,iBAAA,gBAAAC,OAAA;AAGA;;;AAGO,MAAMC,iBAAiB,GAAGA,CAACC,KAAiB,EAAEC,GAAgC,KAAgB;EACnG,MAAM;IAAEC,QAAQ,GAAG,KAAK;IAAEC,GAAG,GAAG,SAAS;IAAEC,KAAK,GAAG,KAAK;IAAEC,KAAK,GAAG,QAAQ;IAAEC,MAAM,GAAG;EAAK,CAAE,GAAGN,KAAK;EAEpG,MAAMO,KAAK,GAAe;IACxBL,QAAQ;IACRC,GAAG;IACHC,KAAK;IACLC,KAAK;IACLC,MAAM;IACNE,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IACDA,IAAI,EAAEZ,iBAAA,CAAAa,qBAAqB,CAAC,KAAK,EAAE;MACjCT,GAAG;MACH,GAAGD;KACJ;GACF;EAED,OAAOO,KAAK;AACd,CAAC;AAnBYI,OAAA,CAAAZ,iBAAiB,GAAAA,iBAAA"}
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 */\nexport const useImage_unstable = (props, ref) => {\n const {\n bordered = false,\n fit = 'default',\n block = false,\n shape = 'square',\n shadow = false\n } = 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//# sourceMappingURL=useImage.js.map"],"names":["useImage_unstable","props","ref","bordered","fit","block","shape","shadow","state","components","root","getNativeElementProps"],"mappings":";;;;+BAKaA;;aAAAA;;;6DALU;gCACe;AAI/B,MAAMA,oBAAoB,CAACC,OAAOC,MAAQ;IAC/C,MAAM,EACJC,UAAW,KAAK,CAAA,EAChBC,KAAM,UAAS,EACfC,OAAQ,KAAK,CAAA,EACbC,OAAQ,SAAQ,EAChBC,QAAS,KAAK,CAAA,EACf,GAAGN;IACJ,MAAMO,QAAQ;QACZL;QACAC;QACAC;QACAC;QACAC;QACAE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,IAAAA,qCAAqB,EAAC,OAAO;YACjCT;YACA,GAAGD,KAAK;QACV;IACF;IACA,OAAOO;AACT,GACA,oCAAoC"}
@@ -1,87 +1,187 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ imageClassNames: ()=>imageClassNames,
13
+ useImageStyles_unstable: ()=>useImageStyles_unstable
5
14
  });
6
- exports.useImageStyles_unstable = exports.imageClassNames = void 0;
7
- const react_1 = /*#__PURE__*/require("@griffel/react");
8
- const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
9
- exports.imageClassNames = {
10
- root: 'fui-Image'
15
+ const _react = require("@griffel/react");
16
+ const imageClassNames = {
17
+ root: 'fui-Image'
11
18
  };
12
- const useStyles = /*#__PURE__*/react_1.__styles({
13
- base: {
14
- g2u3we: "fj3muxo",
15
- h3c5rm: ["f1akhkt", "f1lxtadh"],
16
- B9xav0g: "f1aperda",
17
- zhjwy3: ["f1lxtadh", "f1akhkt"],
18
- Bbmb7ep: ["fzi6hpg", "fyowgf4"],
19
- Beyfa6y: ["fyowgf4", "fzi6hpg"],
20
- B7oj6ja: ["f3fg2lr", "f13av6d4"],
21
- Btl43ni: ["f13av6d4", "f3fg2lr"],
22
- B7ck84d: "f1ewtqcl",
23
- mc9l5x: "f14t3ns0"
24
- },
25
- bordered: {
26
- icvyot: "fzkkow9",
27
- vrafjx: ["fcdblym", "fjik90z"],
28
- oivjwe: "fg706s2",
29
- wvpqe5: ["fjik90z", "fcdblym"],
30
- B4j52fo: "f192inf7",
31
- Bekrc4i: ["f5tn483", "f1ojsxk5"],
32
- Bn0qgzm: "f1vxd6vx",
33
- ibv6hh: ["f1ojsxk5", "f5tn483"]
34
- },
35
- circular: {
36
- Bbmb7ep: ["f8fbkgy", "f1nfllo7"],
37
- Beyfa6y: ["f1nfllo7", "f8fbkgy"],
38
- B7oj6ja: ["f1djnp8u", "f1s8kh49"],
39
- Btl43ni: ["f1s8kh49", "f1djnp8u"]
40
- },
41
- rounded: {
42
- Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
43
- Beyfa6y: ["f16jpd5f", "f1aa9q02"],
44
- B7oj6ja: ["f1jar5jt", "fyu767a"],
45
- Btl43ni: ["fyu767a", "f1jar5jt"]
46
- },
47
- square: {},
48
- shadow: {
49
- E5pizo: "f1whvlc6"
50
- },
51
- center: {
52
- st4lth: "f1plgu50",
53
- Ermj5k: "f14xojzb",
54
- Bqenvij: "f1l02sjl",
55
- a9b677: "fly5x3f"
56
- },
57
- contain: {
58
- st4lth: "f1kle4es",
59
- Ermj5k: "f14xojzb",
60
- Bqenvij: "f1l02sjl",
61
- a9b677: "fly5x3f"
62
- },
63
- "default": {},
64
- cover: {
65
- st4lth: "f1ps3kmd",
66
- Ermj5k: "f14xojzb",
67
- Bqenvij: "f1l02sjl",
68
- a9b677: "fly5x3f"
69
- },
70
- none: {
71
- st4lth: "f1plgu50",
72
- Ermj5k: ["f13uwng7", "fjmyj0p"],
73
- Bqenvij: "f1l02sjl",
74
- a9b677: "fly5x3f"
75
- },
76
- block: {
77
- a9b677: "fly5x3f"
78
- }
19
+ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
20
+ base: {
21
+ g2u3we: "fj3muxo",
22
+ h3c5rm: [
23
+ "f1akhkt",
24
+ "f1lxtadh"
25
+ ],
26
+ B9xav0g: "f1aperda",
27
+ zhjwy3: [
28
+ "f1lxtadh",
29
+ "f1akhkt"
30
+ ],
31
+ Bbmb7ep: [
32
+ "fzi6hpg",
33
+ "fyowgf4"
34
+ ],
35
+ Beyfa6y: [
36
+ "fyowgf4",
37
+ "fzi6hpg"
38
+ ],
39
+ B7oj6ja: [
40
+ "f3fg2lr",
41
+ "f13av6d4"
42
+ ],
43
+ Btl43ni: [
44
+ "f13av6d4",
45
+ "f3fg2lr"
46
+ ],
47
+ B7ck84d: "f1ewtqcl",
48
+ mc9l5x: "f14t3ns0"
49
+ },
50
+ bordered: {
51
+ icvyot: "fzkkow9",
52
+ vrafjx: [
53
+ "fcdblym",
54
+ "fjik90z"
55
+ ],
56
+ oivjwe: "fg706s2",
57
+ wvpqe5: [
58
+ "fjik90z",
59
+ "fcdblym"
60
+ ],
61
+ B4j52fo: "f192inf7",
62
+ Bekrc4i: [
63
+ "f5tn483",
64
+ "f1ojsxk5"
65
+ ],
66
+ Bn0qgzm: "f1vxd6vx",
67
+ ibv6hh: [
68
+ "f1ojsxk5",
69
+ "f5tn483"
70
+ ]
71
+ },
72
+ circular: {
73
+ Bbmb7ep: [
74
+ "f8fbkgy",
75
+ "f1nfllo7"
76
+ ],
77
+ Beyfa6y: [
78
+ "f1nfllo7",
79
+ "f8fbkgy"
80
+ ],
81
+ B7oj6ja: [
82
+ "f1djnp8u",
83
+ "f1s8kh49"
84
+ ],
85
+ Btl43ni: [
86
+ "f1s8kh49",
87
+ "f1djnp8u"
88
+ ]
89
+ },
90
+ rounded: {
91
+ Bbmb7ep: [
92
+ "f1aa9q02",
93
+ "f16jpd5f"
94
+ ],
95
+ Beyfa6y: [
96
+ "f16jpd5f",
97
+ "f1aa9q02"
98
+ ],
99
+ B7oj6ja: [
100
+ "f1jar5jt",
101
+ "fyu767a"
102
+ ],
103
+ Btl43ni: [
104
+ "fyu767a",
105
+ "f1jar5jt"
106
+ ]
107
+ },
108
+ square: {},
109
+ shadow: {
110
+ E5pizo: "f1whvlc6"
111
+ },
112
+ center: {
113
+ st4lth: "f1plgu50",
114
+ Ermj5k: "f14xojzb",
115
+ Bqenvij: "f1l02sjl",
116
+ a9b677: "fly5x3f"
117
+ },
118
+ contain: {
119
+ st4lth: "f1kle4es",
120
+ Ermj5k: "f14xojzb",
121
+ Bqenvij: "f1l02sjl",
122
+ a9b677: "fly5x3f"
123
+ },
124
+ "default": {},
125
+ cover: {
126
+ st4lth: "f1ps3kmd",
127
+ Ermj5k: "f14xojzb",
128
+ Bqenvij: "f1l02sjl",
129
+ a9b677: "fly5x3f"
130
+ },
131
+ none: {
132
+ st4lth: "f1plgu50",
133
+ Ermj5k: [
134
+ "f13uwng7",
135
+ "fjmyj0p"
136
+ ],
137
+ Bqenvij: "f1l02sjl",
138
+ a9b677: "fly5x3f"
139
+ },
140
+ block: {
141
+ a9b677: "fly5x3f"
142
+ }
79
143
  }, {
80
- d: [".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14t3ns0{display:inline-block;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f1plgu50{object-fit:none;}", ".f14xojzb{object-position:center;}", ".f1l02sjl{height:100%;}", ".fly5x3f{width:100%;}", ".f1kle4es{object-fit:contain;}", ".f1ps3kmd{object-fit:cover;}", ".f13uwng7{object-position:left top;}", ".fjmyj0p{object-position:right top;}"]
144
+ d: [
145
+ ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}",
146
+ ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}",
147
+ ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}",
148
+ ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}",
149
+ ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}",
150
+ ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}",
151
+ ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}",
152
+ ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}",
153
+ ".f1ewtqcl{box-sizing:border-box;}",
154
+ ".f14t3ns0{display:inline-block;}",
155
+ ".fzkkow9{border-top-style:solid;}",
156
+ ".fcdblym{border-right-style:solid;}",
157
+ ".fjik90z{border-left-style:solid;}",
158
+ ".fg706s2{border-bottom-style:solid;}",
159
+ ".f192inf7{border-top-width:var(--strokeWidthThin);}",
160
+ ".f5tn483{border-right-width:var(--strokeWidthThin);}",
161
+ ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}",
162
+ ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}",
163
+ ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}",
164
+ ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}",
165
+ ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}",
166
+ ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}",
167
+ ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}",
168
+ ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}",
169
+ ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}",
170
+ ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}",
171
+ ".f1whvlc6{box-shadow:var(--shadow4);}",
172
+ ".f1plgu50{object-fit:none;}",
173
+ ".f14xojzb{object-position:center;}",
174
+ ".f1l02sjl{height:100%;}",
175
+ ".fly5x3f{width:100%;}",
176
+ ".f1kle4es{object-fit:contain;}",
177
+ ".f1ps3kmd{object-fit:cover;}",
178
+ ".f13uwng7{object-position:left top;}",
179
+ ".fjmyj0p{object-position:right top;}"
180
+ ]
81
181
  });
82
- const useImageStyles_unstable = state => {
83
- const styles = useStyles();
84
- state.root.className = react_1.mergeClasses(exports.imageClassNames.root, styles.base, state.block && styles.block, state.bordered && styles.bordered, state.shadow && styles.shadow, styles[state.fit], styles[state.shape], state.root.className);
85
- };
86
- exports.useImageStyles_unstable = useImageStyles_unstable;
182
+ const useImageStyles_unstable = (state)=>{
183
+ const styles = useStyles();
184
+ state.root.className = (0, _react.mergeClasses)(imageClassNames.root, styles.base, state.block && styles.block, state.bordered && styles.bordered, state.shadow && styles.shadow, styles[state.fit], styles[state.shape], state.root.className);
185
+ }; //# sourceMappingURL=useImageStyles.js.map
186
+
87
187
  //# sourceMappingURL=useImageStyles.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["react_1","require","react_theme_1","exports","imageClassNames","root","useStyles","__styles","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","mergeClasses","fit","shape"],"sources":["../src/packages/react-components/react-image/src/components/Image/useImageStyles.ts"],"sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ImageSlots, ImageState } from './Image.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const imageClassNames: SlotClassNames<ImageSlots> = {\n root: 'fui-Image',\n};\n\nconst useStyles = makeStyles({\n // Base styles\n base: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n\n boxSizing: 'border-box',\n display: 'inline-block',\n },\n\n // Bordered styles\n bordered: {\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n },\n\n // Shape variations\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n square: {\n /* The square styles are exactly the same as the base styles. */\n },\n\n // Shadow styles\n shadow: {\n boxShadow: tokens.shadow4,\n },\n\n // Fit variations\n center: {\n objectFit: 'none',\n objectPosition: 'center',\n height: '100%',\n width: '100%',\n },\n contain: {\n objectFit: 'contain',\n objectPosition: 'center',\n height: '100%',\n width: '100%',\n },\n default: {\n /* The default styles are exactly the same as the base styles. */\n },\n cover: {\n objectFit: 'cover',\n objectPosition: 'center',\n height: '100%',\n width: '100%',\n },\n none: {\n objectFit: 'none',\n objectPosition: 'left top',\n height: '100%',\n width: '100%',\n },\n\n // Block styles\n block: {\n width: '100%',\n },\n});\n\nexport const useImageStyles_unstable = (state: ImageState) => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n imageClassNames.root,\n styles.base,\n state.block && styles.block,\n state.bordered && styles.bordered,\n state.shadow && styles.shadow,\n styles[state.fit],\n styles[state.shape],\n state.root.className,\n );\n};\n"],"mappings":";;;;;;AAAA,MAAAA,OAAA,gBAAAC,OAAA;AACA,MAAAC,aAAA,gBAAAD,OAAA;AAIaE,OAAA,CAAAC,eAAe,GAA+B;EACzDC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAGN,OAAA,CAAAO,QAAU;EAAAC,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,EAiE1B;AAEK,MAAMC,uBAAuB,GAAIC,KAAiB,IAAI;EAC3D,MAAMC,MAAM,GAAGvC,SAAS,EAAE;EAC1BsC,KAAK,CAACvC,IAAI,CAACyC,SAAS,GAAG9C,OAAA,CAAA+C,YAAY,CACjC5C,OAAA,CAAAC,eAAe,CAACC,IAAI,EACpBwC,MAAM,CAACrC,IAAI,EACXoC,KAAK,CAACH,KAAK,IAAII,MAAM,CAACJ,KAAK,EAC3BG,KAAK,CAACzB,QAAQ,IAAI0B,MAAM,CAAC1B,QAAQ,EACjCyB,KAAK,CAACb,MAAM,IAAIc,MAAM,CAACd,MAAM,EAC7Bc,MAAM,CAACD,KAAK,CAACI,GAAG,CAAC,EACjBH,MAAM,CAACD,KAAK,CAACK,KAAK,CAAC,EACnBL,KAAK,CAACvC,IAAI,CAACyC,SAAS,CACrB;AACH,CAAC;AAZY3C,OAAA,CAAAwC,uBAAuB,GAAAA,uBAAA"}
1
+ {"version":3,"sources":["../../../lib/components/Image/useImageStyles.js"],"sourcesContent":["import { shorthands, mergeClasses, __styles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const imageClassNames = {\n root: 'fui-Image'\n};\nconst useStyles = /*#__PURE__*/__styles({\n base: {\n g2u3we: \"fj3muxo\",\n h3c5rm: [\"f1akhkt\", \"f1lxtadh\"],\n B9xav0g: \"f1aperda\",\n zhjwy3: [\"f1lxtadh\", \"f1akhkt\"],\n Bbmb7ep: [\"fzi6hpg\", \"fyowgf4\"],\n Beyfa6y: [\"fyowgf4\", \"fzi6hpg\"],\n B7oj6ja: [\"f3fg2lr\", \"f13av6d4\"],\n Btl43ni: [\"f13av6d4\", \"f3fg2lr\"],\n B7ck84d: \"f1ewtqcl\",\n mc9l5x: \"f14t3ns0\"\n },\n bordered: {\n icvyot: \"fzkkow9\",\n vrafjx: [\"fcdblym\", \"fjik90z\"],\n oivjwe: \"fg706s2\",\n wvpqe5: [\"fjik90z\", \"fcdblym\"],\n B4j52fo: \"f192inf7\",\n Bekrc4i: [\"f5tn483\", \"f1ojsxk5\"],\n Bn0qgzm: \"f1vxd6vx\",\n ibv6hh: [\"f1ojsxk5\", \"f5tn483\"]\n },\n circular: {\n Bbmb7ep: [\"f8fbkgy\", \"f1nfllo7\"],\n Beyfa6y: [\"f1nfllo7\", \"f8fbkgy\"],\n B7oj6ja: [\"f1djnp8u\", \"f1s8kh49\"],\n Btl43ni: [\"f1s8kh49\", \"f1djnp8u\"]\n },\n rounded: {\n Bbmb7ep: [\"f1aa9q02\", \"f16jpd5f\"],\n Beyfa6y: [\"f16jpd5f\", \"f1aa9q02\"],\n B7oj6ja: [\"f1jar5jt\", \"fyu767a\"],\n Btl43ni: [\"fyu767a\", \"f1jar5jt\"]\n },\n square: {},\n shadow: {\n E5pizo: \"f1whvlc6\"\n },\n center: {\n st4lth: \"f1plgu50\",\n Ermj5k: \"f14xojzb\",\n Bqenvij: \"f1l02sjl\",\n a9b677: \"fly5x3f\"\n },\n contain: {\n st4lth: \"f1kle4es\",\n Ermj5k: \"f14xojzb\",\n Bqenvij: \"f1l02sjl\",\n a9b677: \"fly5x3f\"\n },\n \"default\": {},\n cover: {\n st4lth: \"f1ps3kmd\",\n Ermj5k: \"f14xojzb\",\n Bqenvij: \"f1l02sjl\",\n a9b677: \"fly5x3f\"\n },\n none: {\n st4lth: \"f1plgu50\",\n Ermj5k: [\"f13uwng7\", \"fjmyj0p\"],\n Bqenvij: \"f1l02sjl\",\n a9b677: \"fly5x3f\"\n },\n block: {\n a9b677: \"fly5x3f\"\n }\n}, {\n d: [\".fj3muxo{border-top-color:var(--colorNeutralStroke1);}\", \".f1akhkt{border-right-color:var(--colorNeutralStroke1);}\", \".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}\", \".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}\", \".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}\", \".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}\", \".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}\", \".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f14t3ns0{display:inline-block;}\", \".fzkkow9{border-top-style:solid;}\", \".fcdblym{border-right-style:solid;}\", \".fjik90z{border-left-style:solid;}\", \".fg706s2{border-bottom-style:solid;}\", \".f192inf7{border-top-width:var(--strokeWidthThin);}\", \".f5tn483{border-right-width:var(--strokeWidthThin);}\", \".f1ojsxk5{border-left-width:var(--strokeWidthThin);}\", \".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}\", \".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}\", \".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}\", \".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}\", \".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}\", \".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}\", \".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}\", \".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}\", \".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}\", \".f1whvlc6{box-shadow:var(--shadow4);}\", \".f1plgu50{object-fit:none;}\", \".f14xojzb{object-position:center;}\", \".f1l02sjl{height:100%;}\", \".fly5x3f{width:100%;}\", \".f1kle4es{object-fit:contain;}\", \".f1ps3kmd{object-fit:cover;}\", \".f13uwng7{object-position:left top;}\", \".fjmyj0p{object-position:right top;}\"]\n});\nexport const useImageStyles_unstable = state => {\n const styles = useStyles();\n state.root.className = mergeClasses(imageClassNames.root, styles.base, state.block && styles.block, state.bordered && styles.bordered, state.shadow && styles.shadow, styles[state.fit], styles[state.shape], state.root.className);\n};\n//# sourceMappingURL=useImageStyles.js.map"],"names":["imageClassNames","useImageStyles_unstable","root","useStyles","__styles","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","state","styles","className","mergeClasses","fit","shape"],"mappings":";;;;;;;;;;;IAEaA,eAAe,MAAfA;IAyEAC,uBAAuB,MAAvBA;;uBA3EsC;AAE5C,MAAMD,kBAAkB;IAC7BE,MAAM;AACR;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCC,MAAM;QACJC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,SAAS;YAAC;YAAW;SAAU;QAC/BC,SAAS;YAAC;YAAW;SAAU;QAC/BC,SAAS;YAAC;YAAW;SAAW;QAChCC,SAAS;YAAC;YAAY;SAAU;QAChCC,SAAS;QACTC,QAAQ;IACV;IACAC,UAAU;QACRC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,SAAS;QACTC,SAAS;YAAC;YAAW;SAAW;QAChCC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;IACjC;IACAC,UAAU;QACRf,SAAS;YAAC;YAAW;SAAW;QAChCC,SAAS;YAAC;YAAY;SAAU;QAChCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;IACnC;IACAa,SAAS;QACPhB,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAU;QAChCC,SAAS;YAAC;YAAW;SAAW;IAClC;IACAc,QAAQ,CAAC;IACTC,QAAQ;QACNC,QAAQ;IACV;IACAC,QAAQ;QACNC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;IACV;IACAC,SAAS;QACPJ,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;IACV;IACA,WAAW,CAAC;IACZE,OAAO;QACLL,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;IACV;IACAG,MAAM;QACJN,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,SAAS;QACTC,QAAQ;IACV;IACAI,OAAO;QACLJ,QAAQ;IACV;AACF,GAAG;IACDK,GAAG;QAAC;QAA0D;QAA4D;QAA4D;QAA8D;QAAiE;QAAgE;QAA8D;QAA8D;QAAqC;QAAoC;QAAqC;QAAuC;QAAsC;QAAwC;QAAuD;QAAwD;QAAwD;QAA0D;QAAqE;QAAqE;QAAmE;QAAkE;QAAoE;QAAmE;QAAiE;QAA+D;QAAyC;QAA+B;QAAsC;QAA2B;QAAyB;QAAkC;QAAgC;QAAwC;KAAuC;AAChwD;AACO,MAAMtC,0BAA0BuC,CAAAA,QAAS;IAC9C,MAAMC,SAAStC;IACfqC,MAAMtC,IAAI,CAACwC,SAAS,GAAGC,IAAAA,mBAAY,EAAC3C,gBAAgBE,IAAI,EAAEuC,OAAOpC,IAAI,EAAEmC,MAAMF,KAAK,IAAIG,OAAOH,KAAK,EAAEE,MAAMxB,QAAQ,IAAIyB,OAAOzB,QAAQ,EAAEwB,MAAMZ,MAAM,IAAIa,OAAOb,MAAM,EAAEa,MAAM,CAACD,MAAMI,GAAG,CAAC,EAAEH,MAAM,CAACD,MAAMK,KAAK,CAAC,EAAEL,MAAMtC,IAAI,CAACwC,SAAS;AACpO,GACA,0CAA0C"}
@@ -1,38 +1,21 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.useImage_unstable = exports.useImageStyles_unstable = exports.renderImage_unstable = exports.imageClassNames = exports.Image = void 0;
7
- var Image_1 = /*#__PURE__*/require("./Image");
8
- Object.defineProperty(exports, "Image", {
9
- enumerable: true,
10
- get: function () {
11
- return Image_1.Image;
12
- }
13
- });
14
- Object.defineProperty(exports, "imageClassNames", {
15
- enumerable: true,
16
- get: function () {
17
- return Image_1.imageClassNames;
18
- }
3
+ value: true
19
4
  });
20
- Object.defineProperty(exports, "renderImage_unstable", {
21
- enumerable: true,
22
- get: function () {
23
- return Image_1.renderImage_unstable;
24
- }
25
- });
26
- Object.defineProperty(exports, "useImageStyles_unstable", {
27
- enumerable: true,
28
- get: function () {
29
- return Image_1.useImageStyles_unstable;
30
- }
31
- });
32
- Object.defineProperty(exports, "useImage_unstable", {
33
- enumerable: true,
34
- get: function () {
35
- return Image_1.useImage_unstable;
36
- }
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ Image: ()=>_image.Image,
13
+ imageClassNames: ()=>_image.imageClassNames,
14
+ renderImage_unstable: ()=>_image.renderImage_unstable,
15
+ useImageStyles_unstable: ()=>_image.useImageStyles_unstable,
16
+ useImage_unstable: ()=>_image.useImage_unstable
37
17
  });
18
+ const _image = require("./Image");
19
+ //# sourceMappingURL=index.js.map
20
+
38
21
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["Image_1","require","Object","defineProperty","exports","enumerable","get","Image","imageClassNames","renderImage_unstable","useImageStyles_unstable","useImage_unstable"],"sources":["../src/packages/react-components/react-image/src/index.ts"],"sourcesContent":["export { Image, imageClassNames, renderImage_unstable, useImageStyles_unstable, useImage_unstable } from './Image';\nexport type { ImageProps, ImageSlots, ImageState } from './Image';\n"],"mappings":";;;;;;AAAA,IAAAA,OAAA,gBAAAC,OAAA;AAASC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAO,KAAK;EAAA;AAAA;AAAEL,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAQ,eAAe;EAAA;AAAA;AAAEN,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAS,oBAAoB;EAAA;AAAA;AAAEP,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAU,uBAAuB;EAAA;AAAA;AAAER,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAW,iBAAiB;EAAA;AAAA"}
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;CACzG,iCAAiC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-image",
3
- "version": "9.1.1",
3
+ "version": "9.1.2",
4
4
  "description": "Fluent UI React Image component.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -22,21 +22,21 @@
22
22
  "test": "jest --passWithNoTests",
23
23
  "storybook": "start-storybook",
24
24
  "type-check": "tsc -b tsconfig.json",
25
- "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
25
+ "generate-api": "just-scripts generate-api"
26
26
  },
27
27
  "devDependencies": {
28
28
  "@fluentui/eslint-plugin": "*",
29
29
  "@fluentui/react-conformance": "*",
30
- "@fluentui/react-conformance-griffel": "9.0.0-beta.19",
30
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.20",
31
31
  "@fluentui/scripts-api-extractor": "*",
32
32
  "@fluentui/scripts-tasks": "*"
33
33
  },
34
34
  "dependencies": {
35
35
  "@griffel/react": "^1.5.2",
36
- "@fluentui/react-shared-contexts": "^9.3.1",
37
- "@fluentui/react-utilities": "^9.7.1",
38
- "@fluentui/react-theme": "^9.1.6",
39
- "tslib": "^2.1.0"
36
+ "@fluentui/react-shared-contexts": "^9.3.2",
37
+ "@fluentui/react-utilities": "^9.7.2",
38
+ "@fluentui/react-theme": "^9.1.7",
39
+ "@swc/helpers": "^0.4.14"
40
40
  },
41
41
  "peerDependencies": {
42
42
  "@types/react": ">=16.8.0 <19.0.0",
@@ -53,6 +53,7 @@
53
53
  "exports": {
54
54
  ".": {
55
55
  "types": "./dist/index.d.ts",
56
+ "node": "./lib-commonjs/index.js",
56
57
  "import": "./lib/index.js",
57
58
  "require": "./lib-commonjs/index.js"
58
59
  },
package/lib-amd/Image.js DELETED
@@ -1,6 +0,0 @@
1
- define(["require", "exports", "tslib", "./components/Image/index"], function (require, exports, tslib_1, index_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- tslib_1.__exportStar(index_1, exports);
5
- });
6
- //# sourceMappingURL=Image.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-image/src/Image.ts"],"names":[],"mappings":";;;IAAA,uCAAyC","sourcesContent":["export * from './components/Image/index';\n"]}
@@ -1,17 +0,0 @@
1
- define(["require", "exports", "react", "./renderImage", "./useImage", "./useImageStyles", "@fluentui/react-shared-contexts"], function (require, exports, React, renderImage_1, useImage_1, useImageStyles_1, react_shared_contexts_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.Image = void 0;
5
- /**
6
- * The Image component ensures the consistent styling of images.
7
- */
8
- exports.Image = React.forwardRef(function (props, ref) {
9
- var state = useImage_1.useImage_unstable(props, ref);
10
- useImageStyles_1.useImageStyles_unstable(state);
11
- var useCustomStyles = react_shared_contexts_1.useCustomStyleHooks_unstable().useImageStyles_unstable;
12
- useCustomStyles(state);
13
- return renderImage_1.renderImage_unstable(state);
14
- });
15
- exports.Image.displayName = 'Image';
16
- });
17
- //# sourceMappingURL=Image.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-image/src/components/Image/Image.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACU,QAAA,KAAK,GAAoC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAChF,IAAM,KAAK,GAAG,4BAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE5C,wCAAuB,CAAC,KAAK,CAAC,CAAC;QAEvB,IAAyB,eAAe,GAAK,oDAA4B,EAAE,wBAAnC,CAAoC;QACpF,eAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,OAAO,kCAAoB,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import * as React from 'react';\nimport { renderImage_unstable } from './renderImage';\nimport { useImage_unstable } from './useImage';\nimport { useImageStyles_unstable } from './useImageStyles';\nimport type { ImageProps } from './Image.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_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 const { useImageStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderImage_unstable(state);\n});\n\nImage.displayName = 'Image';\n"]}
@@ -1,5 +0,0 @@
1
- define(["require", "exports"], function (require, exports) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- });
5
- //# sourceMappingURL=Image.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Image.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-image/src/components/Image/Image.types.ts"],"names":[],"mappings":"","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"]}
@@ -1,10 +0,0 @@
1
- define(["require", "exports", "tslib", "./Image.types", "./Image", "./renderImage", "./useImage", "./useImageStyles"], function (require, exports, tslib_1, Image_types_1, Image_1, renderImage_1, useImage_1, useImageStyles_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- tslib_1.__exportStar(Image_types_1, exports);
5
- tslib_1.__exportStar(Image_1, exports);
6
- tslib_1.__exportStar(renderImage_1, exports);
7
- tslib_1.__exportStar(useImage_1, exports);
8
- tslib_1.__exportStar(useImageStyles_1, exports);
9
- });
10
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-image/src/components/Image/index.ts"],"names":[],"mappings":";;;IAAA,6CAA8B;IAC9B,uCAAwB;IACxB,6CAA8B;IAC9B,0CAA2B;IAC3B,gDAAiC","sourcesContent":["export * from './Image.types';\nexport * from './Image';\nexport * from './renderImage';\nexport * from './useImage';\nexport * from './useImageStyles';\n"]}
@@ -1,15 +0,0 @@
1
- define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.renderImage_unstable = void 0;
5
- /**
6
- * Define the render function.
7
- * Given the state of an image, renders it.
8
- */
9
- var renderImage_unstable = function (state) {
10
- var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
11
- return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root));
12
- };
13
- exports.renderImage_unstable = renderImage_unstable;
14
- });
15
- //# sourceMappingURL=renderImage.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"renderImage.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-image/src/components/Image/renderImage.tsx"],"names":[],"mappings":";;;;IAIA;;;OAGG;IACI,IAAM,oBAAoB,GAAG,UAAC,KAAiB;QAC9C,IAAA,KAAuB,0BAAQ,CAAa,KAAK,CAAC,EAAhD,KAAK,WAAA,EAAE,SAAS,eAAgC,CAAC;QAEzD,OAAO,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CAAC;IAC5C,CAAC,CAAC;IAJW,QAAA,oBAAoB,wBAI/B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ImageSlots, ImageState } from './Image.types';\n\n/**\n * Define the render function.\n * Given the state of an image, renders it.\n */\nexport const renderImage_unstable = (state: ImageState) => {\n const { slots, slotProps } = getSlots<ImageSlots>(state);\n\n return <slots.root {...slotProps.root} />;\n};\n"]}
@@ -1,25 +0,0 @@
1
- define(["require", "exports", "tslib", "@fluentui/react-utilities"], function (require, exports, tslib_1, react_utilities_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.useImage_unstable = void 0;
5
- /**
6
- * Given user props, returns state and render function for an Image.
7
- */
8
- var useImage_unstable = function (props, ref) {
9
- var _a = props.bordered, bordered = _a === void 0 ? false : _a, _b = props.fit, fit = _b === void 0 ? 'default' : _b, _c = props.block, block = _c === void 0 ? false : _c, _d = props.shape, shape = _d === void 0 ? 'square' : _d, _e = props.shadow, shadow = _e === void 0 ? false : _e;
10
- var state = {
11
- bordered: bordered,
12
- fit: fit,
13
- block: block,
14
- shape: shape,
15
- shadow: shadow,
16
- components: {
17
- root: 'img',
18
- },
19
- root: react_utilities_1.getNativeElementProps('img', tslib_1.__assign({ ref: ref }, props)),
20
- };
21
- return state;
22
- };
23
- exports.useImage_unstable = useImage_unstable;
24
- });
25
- //# sourceMappingURL=useImage.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useImage.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-image/src/components/Image/useImage.ts"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,iBAAiB,GAAG,UAAC,KAAiB,EAAE,GAAgC;QAC3E,IAAA,KAAuF,KAAK,SAA5E,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAAE,KAAqE,KAAK,IAA3D,EAAf,GAAG,mBAAG,SAAS,KAAA,EAAE,KAAoD,KAAK,MAA5C,EAAb,KAAK,mBAAG,KAAK,KAAA,EAAE,KAAqC,KAAK,MAA1B,EAAhB,KAAK,mBAAG,QAAQ,KAAA,EAAE,KAAmB,KAAK,OAAV,EAAd,MAAM,mBAAG,KAAK,KAAA,CAAW;QAErG,IAAM,KAAK,GAAe;YACxB,QAAQ,UAAA;YACR,GAAG,KAAA;YACH,KAAK,OAAA;YACL,KAAK,OAAA;YACL,MAAM,QAAA;YACN,UAAU,EAAE;gBACV,IAAI,EAAE,KAAK;aACZ;YACD,IAAI,EAAE,uCAAqB,CAAC,KAAK,qBAC/B,GAAG,KAAA,IACA,KAAK,EACR;SACH,CAAC;QAEF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAnBW,QAAA,iBAAiB,qBAmB5B","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"]}
@@ -1,62 +0,0 @@
1
- define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"], function (require, exports, tslib_1, react_1, react_theme_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.useImageStyles_unstable = exports.imageClassNames = void 0;
5
- exports.imageClassNames = {
6
- root: 'fui-Image',
7
- };
8
- var useStyles = react_1.makeStyles({
9
- // Base styles
10
- base: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1)), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusNone)), { boxSizing: 'border-box', display: 'inline-block' }),
11
- // Bordered styles
12
- bordered: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderStyle('solid')), react_1.shorthands.borderWidth(react_theme_1.tokens.strokeWidthThin)),
13
- // Shape variations
14
- circular: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)),
15
- rounded: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)),
16
- square: {
17
- /* The square styles are exactly the same as the base styles. */
18
- },
19
- // Shadow styles
20
- shadow: {
21
- boxShadow: react_theme_1.tokens.shadow4,
22
- },
23
- // Fit variations
24
- center: {
25
- objectFit: 'none',
26
- objectPosition: 'center',
27
- height: '100%',
28
- width: '100%',
29
- },
30
- contain: {
31
- objectFit: 'contain',
32
- objectPosition: 'center',
33
- height: '100%',
34
- width: '100%',
35
- },
36
- default: {
37
- /* The default styles are exactly the same as the base styles. */
38
- },
39
- cover: {
40
- objectFit: 'cover',
41
- objectPosition: 'center',
42
- height: '100%',
43
- width: '100%',
44
- },
45
- none: {
46
- objectFit: 'none',
47
- objectPosition: 'left top',
48
- height: '100%',
49
- width: '100%',
50
- },
51
- // Block styles
52
- block: {
53
- width: '100%',
54
- },
55
- });
56
- var useImageStyles_unstable = function (state) {
57
- var styles = useStyles();
58
- state.root.className = react_1.mergeClasses(exports.imageClassNames.root, styles.base, state.block && styles.block, state.bordered && styles.bordered, state.shadow && styles.shadow, styles[state.fit], styles[state.shape], state.root.className);
59
- };
60
- exports.useImageStyles_unstable = useImageStyles_unstable;
61
- });
62
- //# sourceMappingURL=useImageStyles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useImageStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-image/src/components/Image/useImageStyles.ts"],"names":[],"mappings":";;;;IAKa,QAAA,eAAe,GAA+B;QACzD,IAAI,EAAE,WAAW;KAClB,CAAC;IAEF,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,cAAc;QACd,IAAI,yDACC,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,mBAAmB,CAAC,GAClD,kBAAU,CAAC,YAAY,CAAC,oBAAM,CAAC,gBAAgB,CAAC,KAEnD,SAAS,EAAE,YAAY,EACvB,OAAO,EAAE,cAAc,GACxB;QAED,kBAAkB;QAClB,QAAQ,wCACH,kBAAU,CAAC,WAAW,CAAC,OAAO,CAAC,GAC/B,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,eAAe,CAAC,CAClD;QAED,mBAAmB;QACnB,QAAQ,uBACH,kBAAU,CAAC,YAAY,CAAC,oBAAM,CAAC,oBAAoB,CAAC,CACxD;QACD,OAAO,uBACF,kBAAU,CAAC,YAAY,CAAC,oBAAM,CAAC,kBAAkB,CAAC,CACtD;QACD,MAAM,EAAE;QACN,gEAAgE;SACjE;QAED,gBAAgB;QAChB,MAAM,EAAE;YACN,SAAS,EAAE,oBAAM,CAAC,OAAO;SAC1B;QAED,iBAAiB;QACjB,MAAM,EAAE;YACN,SAAS,EAAE,MAAM;YACjB,cAAc,EAAE,QAAQ;YACxB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SACd;QACD,OAAO,EAAE;YACP,SAAS,EAAE,SAAS;YACpB,cAAc,EAAE,QAAQ;YACxB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SACd;QACD,OAAO,EAAE;QACP,iEAAiE;SAClE;QACD,KAAK,EAAE;YACL,SAAS,EAAE,OAAO;YAClB,cAAc,EAAE,QAAQ;YACxB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SACd;QACD,IAAI,EAAE;YACJ,SAAS,EAAE,MAAM;YACjB,cAAc,EAAE,UAAU;YAC1B,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SACd;QAED,eAAe;QACf,KAAK,EAAE;YACL,KAAK,EAAE,MAAM;SACd;KACF,CAAC,CAAC;IAEI,IAAM,uBAAuB,GAAG,UAAC,KAAiB;QACvD,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CACjC,uBAAe,CAAC,IAAI,EACpB,MAAM,CAAC,IAAI,EACX,KAAK,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK,EAC3B,KAAK,CAAC,QAAQ,IAAI,MAAM,CAAC,QAAQ,EACjC,KAAK,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,EAC7B,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,EACjB,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EACnB,KAAK,CAAC,IAAI,CAAC,SAAS,CACrB,CAAC;IACJ,CAAC,CAAC;IAZW,QAAA,uBAAuB,2BAYlC","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ImageSlots, ImageState } from './Image.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const imageClassNames: SlotClassNames<ImageSlots> = {\n root: 'fui-Image',\n};\n\nconst useStyles = makeStyles({\n // Base styles\n base: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n\n boxSizing: 'border-box',\n display: 'inline-block',\n },\n\n // Bordered styles\n bordered: {\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n },\n\n // Shape variations\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n square: {\n /* The square styles are exactly the same as the base styles. */\n },\n\n // Shadow styles\n shadow: {\n boxShadow: tokens.shadow4,\n },\n\n // Fit variations\n center: {\n objectFit: 'none',\n objectPosition: 'center',\n height: '100%',\n width: '100%',\n },\n contain: {\n objectFit: 'contain',\n objectPosition: 'center',\n height: '100%',\n width: '100%',\n },\n default: {\n /* The default styles are exactly the same as the base styles. */\n },\n cover: {\n objectFit: 'cover',\n objectPosition: 'center',\n height: '100%',\n width: '100%',\n },\n none: {\n objectFit: 'none',\n objectPosition: 'left top',\n height: '100%',\n width: '100%',\n },\n\n // Block styles\n block: {\n width: '100%',\n },\n});\n\nexport const useImageStyles_unstable = (state: ImageState) => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n imageClassNames.root,\n styles.base,\n state.block && styles.block,\n state.bordered && styles.bordered,\n state.shadow && styles.shadow,\n styles[state.fit],\n styles[state.shape],\n state.root.className,\n );\n};\n"]}
package/lib-amd/index.js DELETED
@@ -1,11 +0,0 @@
1
- define(["require", "exports", "./Image"], function (require, exports, Image_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.useImage_unstable = exports.useImageStyles_unstable = exports.renderImage_unstable = exports.imageClassNames = exports.Image = void 0;
5
- Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return Image_1.Image; } });
6
- Object.defineProperty(exports, "imageClassNames", { enumerable: true, get: function () { return Image_1.imageClassNames; } });
7
- Object.defineProperty(exports, "renderImage_unstable", { enumerable: true, get: function () { return Image_1.renderImage_unstable; } });
8
- Object.defineProperty(exports, "useImageStyles_unstable", { enumerable: true, get: function () { return Image_1.useImageStyles_unstable; } });
9
- Object.defineProperty(exports, "useImage_unstable", { enumerable: true, get: function () { return Image_1.useImage_unstable; } });
10
- });
11
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-image/src/index.ts"],"names":[],"mappings":";;;;IAAS,8FAAA,KAAK,OAAA;IAAE,wGAAA,eAAe,OAAA;IAAE,6GAAA,oBAAoB,OAAA;IAAE,gHAAA,uBAAuB,OAAA;IAAE,0GAAA,iBAAiB,OAAA","sourcesContent":["export { Image, imageClassNames, renderImage_unstable, useImageStyles_unstable, useImage_unstable } from './Image';\nexport type { ImageProps, ImageSlots, ImageState } from './Image';\n"]}