@fluentui/react-image 9.0.0-nightly.f81b28ceb3.1 → 9.0.0-rc.4

package/MIGRATION.md

@@ -0,0 +1,235 @@
+# Image Migration
+
+## Introduction
+
+This guide is a reference for upgrading the Image component from v8 (Fabric) or v0 (Northstar) to v9 (FluentUI vNext).
+
+## Migration from v8 (Fabric)
+
+### Property mapping
+
+The table below presents a mapping of props between the v8 (FabricUI) and v9 (Fluent UI vNext) in order to clarify which properties require changes to achieve the same result.
+
+> ⚠️ Note - Properties not in this table are considered deprecated.
+
+| v7 / v8                 | v9      | Good to go? |
+| ----------------------- | ------- | ----------- |
+| `className`             | -       | ✔️          |
+| `coverStyle`            | `fit`   | ⚠️          |
+| `imageFit`              | `fit`   | ✔️          |
+| `maximizeFrame`         | `block` | ✔️          |
+| `loading`               | -       | ✔️          |
+| `onLoadingStateChanged` | -       | ❌          |
+| `shouldFadeIn`          | -       | ❌          |
+| `shouldStartVisible`    | -       | ❌          |
+| `styles`                | -       | ❌          |
+| `theme`                 | -       | ❓          |
+
+### className
+
+_This property has not changed and can be left as is._
+
+### coverStyle
+
+The behaviour of this prop can be achieved using the `fit` prop with the value of `cover`.
+
+```jsx
+<Image src="example.jpg" fit="cover" />
+```
+
+### imageFit
+
+This can be achieved using the `fit` prop by asigning the value of `contain`.
+
+```jsx
+<Image src="example.jpg" fit="contain" />
+```
+
+### maximizeFrame
+
+This prop has been renamed to `block` which will result in the same behaviour as before.
+
+```jsx
+<Image src="example.jpg" block />
+```
+
+### loading
+
+_This property has not changed and can be used as is._
+
+### onLoadingStateChanged
+
+For v9, this feature is no longer supported. The alternative would be to use the global events such as: `onLoad`, `onError` to detect the image loading state.
+
+### shouldFadeIn
+
+For v9, this feature is no longer supported. The alternative is to apply the animation through `make-styles` and using the global event `onLoad`. Below is an example of a migration:
+
+```jsx
+import { useState } from 'react';
+import { Image } from '@fluentui/react-image';
+import { makeStyles } from '@griffel/react';
+
+const useStyles = makeStyles(theme => ({
+  fadeIn400: {
+    animationName: {
+      from : {
+        opacity: 0,
+      },
+      to: {
+        opacity: 1,
+      }
+    },
+    animationIterationCount: 'infinite',
+    animationDuration: '0.367s',
+  },
+})
+
+const MyComponent = () => {
+    const [isLoaded, setLoaded] = useState(false);
+    const styles = useStyles()
+
+    return <Image src="example.jpg" onLoad={()=> setLoaded(true)} className={!isLoaded? styles.fadeIn400 : ''} />
+}
+```
+
+### shouldStartVisible
+
+For v9, this feature is no longer supported. The alternative would be to use the global events such as: `onLoad` and `onError` to achieve the same behaviour. Below is an example showcasing this:
+
+```jsx
+import { useState } from 'react';
+import { makeStyles } from '@griffel/react';
+import { Image } from '@fluentui/react-image';
+
+const useStyles = makeStyles({
+  root: {
+    display: 'none',
+  },
+});
+
+export default function App() {
+  const [isLoaded, setLoaded] = useState(null);
+
+  const styles = useStyles();
+
+  return (
+    <Image
+      src="https://via.placeholder.com/300x300"
+      alt="Example image"
+      onLoad={() => setLoaded(true)}
+      onError={() => setLoaded(false)}
+      className={isLoaded === false ? styles.root : ''}
+    />
+  );
+}
+```
+
+### styles
+
+_This property has not changed and can be used as is. However, we highly recommend that you migrate to a `make-styles` styling solution for performance reasons._
+
+### theme
+
+_This property has not changed and can be used as is. However, we highly recommend that you migrate to a `make-styles` styling solution for performance reasons._
+
+## Migration from v0 (Northstar)
+
+### Property mapping
+
+The table below presents a mapping of props between the v0 and v9 versions in order to make it clear which properties require changes to achieve the same result.
+
+| v0              | v9                 | Good to go? |
+| --------------- | ------------------ | ----------- |
+| `accessibility` | -                  | ❌          |
+| `alt`           | -                  | ✔️          |
+| `aria-label`    | -                  | ✔️          |
+| `as`            | -                  | ❌          |
+| `avatar`        | `shape="circular"` | ✔️          |
+| `circular`      | `shape="circular"` | ✔️          |
+| `className`     | -                  | ✔️          |
+| `fluid`         | `block`            | ✔️          |
+| `styles`        | -                  | ❌          |
+| `variables`     | -                  | ❌          |
+
+### accessibility
+
+For v9, this property is no longer supported. It is recommended to follow the best practices of a11y in order for Image to be accessible to assistive tools. Thus:
+
+- It is important for Image to have the `alt` description.
+- In case the Image is decorative only, have either `role="presentation"` or `aria-hidden`. Ensure the correct usage of these two attributes, based on your objectives.
+
+### alt
+
+_This property has not changed and can be left as is._
+
+### aria-label
+
+_This property has not changed and can be left as is._
+
+### as
+
+For v9, this property is no longer supported. The Image prop will always be an `<img/>` element, it is not possible to show an image as any other element.
+
+### avatar
+
+This can be achieved using the `shape` prop with the value of `circular`.
+
+```jsx
+<Image src="example.jpg" shape="circular" />
+```
+
+### circular
+
+This can be achieved using the `shape` prop with the value of `circular`.
+
+```jsx
+<Image src="example.jpg" shape="circular" />
+```
+
+### className
+
+_This property has not changed and can be left as is._
+
+### fluid
+
+This prop has been renamed to `block` which will result into the same behaviour as before.
+
+```jsx
+<Image src="example.jpg" block />
+```
+
+### styles
+
+_This property has not changed and can be used as is. However, we highly recommend that you migrate to a `make-styles` styling solution for performance reasons._
+
+### variables
+
+For v9, this feature is no longer supported. The alternative is to apply styles through `make-styles`. Below is an example of a migration:
+
+#### v0 (Northstar) implementation
+
+```jsx
+const MyComponent = () => {
+  return <Image src="example.jpg" variables={{ width: '100px' }} />;
+};
+```
+
+#### v9 (Fluent UI vNext) implementation
+
+```jsx
+import { Image } from '@fluentui/react-image';
+import { makeStyles } from '@griffel/react';
+
+const useStyles = makeStyles(theme => ({
+  width100: {
+     width: '100px'
+  },
+})
+
+const MyComponent = () => {
+    const styles = useStyles()
+
+    return <Image src="example.jpg" className={styles.width100} />
+}
+```

package/README.md

@@ -51,3 +51,7 @@ The DOM structure will result into:
 Image component is build upon the `<img/>` tag, which does support all the native attributes. Additionaly, the following properties are available: `bordered`, `fit`, `block`, `shape` and `shadow`.
 
 For more information on the component, please refer to the [API documentation](https://aka.ms/fluentui-storybook).
+
+## Migration
+
+For migrating from older versions of FluentUI, please check out the [migration guide](./MIGRATION.md)

package/dist/react-image.d.ts

@@ -1,8 +1,8 @@
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
 
 /**
  * The Image component ensures the consistent styling of images.
@@ -10,7 +10,9 @@ import * as React_2 from 'react';
 declare const Image_2: ForwardRefComponent<ImageProps>;
 export { Image_2 as Image }
 
-export declare type ImageCommons = {
+export declare const imageClassName = "fui-Image";
+
+declare type ImageCommons = {
     /**
      * An image can appear with rectangular border.
      */
@@ -36,10 +38,8 @@ export declare type ImageCommons = {
 
 export declare type ImageProps = ComponentProps<ImageSlots> & Partial<ImageCommons>;
 
-export declare const imageShorthandProps: Array<keyof ImageSlots>;
-
 export declare type ImageSlots = {
-    root: IntrinsicShorthandProps<'img'>;
+    root: Slot<'img'>;
 };
 
 export declare type ImageState = ComponentState<ImageSlots> & ImageCommons;
@@ -48,13 +48,13 @@ export declare type ImageState = ComponentState<ImageSlots> & ImageCommons;
  * Define the render function.
  * Given the state of an image, renders it.
  */
-export declare const renderImage: (state: ImageState) => JSX.Element;
+export declare const renderImage_unstable: (state: ImageState) => JSX.Element;
 
 /**
  * Given user props, returns state and render function for an Image.
  */
-export declare const useImage: (props: ImageProps, ref: React_2.Ref<HTMLImageElement>) => ImageState;
+export declare const useImage_unstable: (props: ImageProps, ref: React_2.Ref<HTMLImageElement>) => ImageState;
 
-export declare const useImageStyles: (state: ImageState) => void;
+export declare const useImageStyles_unstable: (state: ImageState) => void;
 
 export { }

package/lib/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"","sources":["../src/Image.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"Image.js","sourceRoot":"../src/","sources":["Image.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './components/Image/index';\n"]}

package/lib/components/Image/Image.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { renderImage } from './renderImage';
-import { useImage } from './useImage';
-import { useImageStyles } from './useImageStyles';
+import { renderImage_unstable } from './renderImage';
+import { useImage_unstable } from './useImage';
+import { useImageStyles_unstable } from './useImageStyles';
 /**
  * The Image component ensures the consistent styling of images.
  */
 
-export var Image = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useImage(props, ref);
-  useImageStyles(state);
-  return renderImage(state);
+export const Image = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useImage_unstable(props, ref);
+  useImageStyles_unstable(state);
+  return renderImage_unstable(state);
 });
 Image.displayName = 'Image';
 //# sourceMappingURL=Image.js.map

package/lib/components/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,WAAT,QAA4B,eAA5B;AACA,SAAS,QAAT,QAAyB,YAAzB;AACA,SAAS,cAAT,QAA+B,kBAA/B;AAIA;;AAEG;;AACH,OAAO,IAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAChF,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAD,EAAQ,GAAR,CAAtB;AACA,EAAA,cAAc,CAAC,KAAD,CAAd;AAEA,SAAO,WAAW,CAAC,KAAD,CAAlB;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourceRoot":""}
+{"version":3,"sources":["components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AAIA;;AAEG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpF,QAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;AACA,EAAA,uBAAuB,CAAC,KAAD,CAAvB;AAEA,SAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { renderImage_unstable } from './renderImage';\nimport { useImage_unstable } from './useImage';\nimport { useImageStyles_unstable } from './useImageStyles';\nimport type { ImageProps } from './Image.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The Image component ensures the consistent styling of images.\n */\nexport const Image: ForwardRefComponent<ImageProps> = React.forwardRef((props, ref) => {\n  const state = useImage_unstable(props, ref);\n  useImageStyles_unstable(state);\n\n  return renderImage_unstable(state);\n});\n\nImage.displayName = 'Image';\n"],"sourceRoot":"../src/"}

package/lib/components/Image/Image.types.d.ts

@@ -1,8 +1,8 @@
-import type { ComponentState, ComponentProps, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';
 export declare type ImageSlots = {
-    root: IntrinsicShorthandProps<'img'>;
+    root: Slot<'img'>;
 };
-export declare type ImageCommons = {
+declare type ImageCommons = {
     /**
      * An image can appear with rectangular border.
      */
@@ -27,3 +27,4 @@ export declare type ImageCommons = {
 };
 export declare type ImageProps = ComponentProps<ImageSlots> & Partial<ImageCommons>;
 export declare type ImageState = ComponentState<ImageSlots> & ImageCommons;
+export {};

package/lib/components/Image/Image.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.types.js","sourceRoot":"","sources":["../../../src/components/Image/Image.types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"Image.types.js","sourceRoot":"../src/","sources":["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\ntype ImageCommons = {\n  /**\n   * An image can appear with rectangular border.\n   */\n  bordered?: boolean;\n\n  /**\n   * An image can set how it should be resized to fit its container.\n   */\n  fit?: 'none' | 'center' | 'contain' | 'cover';\n\n  /**\n   * An image can take up the width of its container.\n   */\n  block?: boolean;\n\n  /**\n   * An image can appear square, circular, or rounded.\n   * @defaultvalue square\n   */\n  shape?: 'square' | 'circular' | 'rounded';\n\n  /**\n   * An image can appear elevated with shadow.\n   */\n  shadow?: boolean;\n};\n\nexport type ImageProps = ComponentProps<ImageSlots> & Partial<ImageCommons>;\n\nexport type ImageState = ComponentState<ImageSlots> & ImageCommons;\n"]}

package/lib/components/Image/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../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"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["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"]}

package/lib/components/Image/renderImage.d.ts

@@ -3,4 +3,4 @@ import { ImageState } from './Image.types';
  * Define the render function.
  * Given the state of an image, renders it.
  */
-export declare const renderImage: (state: ImageState) => JSX.Element;
+export declare const renderImage_unstable: (state: ImageState) => JSX.Element;

package/lib/components/Image/renderImage.js

@@ -1,17 +1,16 @@
-import { __assign } from "tslib";
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { imageShorthandProps } from './useImage';
 /**
  * Define the render function.
  * Given the state of an image, renders it.
  */
 
-export var renderImage = function (state) {
-  var _a = getSlots(state, imageShorthandProps),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root));
+export const renderImage_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  });
 };
 //# sourceMappingURL=renderImage.js.map

package/lib/components/Image/renderImage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Image/renderImage.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,mBAAT,QAAoC,YAApC;AAEA;;;AAGG;;AACH,OAAO,IAAM,WAAW,GAAG,UAAC,KAAD,EAAkB;AACrC,MAAA,EAAA,GAAuB,QAAQ,CAAa,KAAb,EAAoB,mBAApB,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAAP;AACD,CAJM","sourceRoot":""}
+{"version":3,"sources":["components/Image/renderImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;;AAGG;;AACH,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;AACxD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAa,KAAb,CAArC;AAEA,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM","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"],"sourceRoot":"../src/"}

package/lib/components/Image/useImage.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import type { ImageProps, ImageSlots, ImageState } from './Image.types';
-export declare const imageShorthandProps: Array<keyof ImageSlots>;
+import type { ImageProps, ImageState } from './Image.types';
 /**
  * Given user props, returns state and render function for an Image.
  */
-export declare const useImage: (props: ImageProps, ref: React.Ref<HTMLImageElement>) => ImageState;
+export declare const useImage_unstable: (props: ImageProps, ref: React.Ref<HTMLImageElement>) => ImageState;

package/lib/components/Image/useImage.js

@@ -1,29 +1,29 @@
-import { __assign } from "tslib";
 import { getNativeElementProps } from '@fluentui/react-utilities';
-export var imageShorthandProps = ['root'];
 /**
  * Given user props, returns state and render function for an Image.
  */
 
-export var useImage = function (props, ref) {
-  var bordered = props.bordered,
-      fit = props.fit,
-      block = props.block,
-      _a = props.shape,
-      shape = _a === void 0 ? 'square' : _a,
-      shadow = props.shadow;
-  var state = {
-    bordered: bordered,
-    fit: fit,
-    block: block,
-    shape: shape,
-    shadow: shadow,
+export const useImage_unstable = (props, ref) => {
+  const {
+    bordered,
+    fit,
+    block,
+    shape = 'square',
+    shadow
+  } = props;
+  const state = {
+    bordered,
+    fit,
+    block,
+    shape,
+    shadow,
     components: {
       root: 'img'
     },
-    root: getNativeElementProps('img', __assign({
-      ref: ref
-    }, props))
+    root: getNativeElementProps('img', {
+      ref,
+      ...props
+    })
   };
   return state;
 };

package/lib/components/Image/useImage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Image/useImage.ts"],"names":[],"mappings":";AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAGA,OAAO,IAAM,mBAAmB,GAA4B,CAAC,MAAD,CAArD;AAEP;;AAEG;;AACH,OAAO,IAAM,QAAQ,GAAG,UAAC,KAAD,EAAoB,GAApB,EAAoD;AAClE,MAAA,QAAQ,GAA2C,KAAK,CAAhD,QAAR;AAAA,MAAU,GAAG,GAAsC,KAAK,CAA3C,GAAb;AAAA,MAAe,KAAK,GAA+B,KAAK,CAApC,KAApB;AAAA,MAAsB,EAAA,GAA6B,KAAK,CAAlB,KAAtC;AAAA,MAAsB,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EAAtC;AAAA,MAAwC,MAAM,GAAK,KAAK,CAAV,MAA9C;AAER,MAAM,KAAK,GAAe;AACxB,IAAA,QAAQ,EAAA,QADgB;AAExB,IAAA,GAAG,EAAA,GAFqB;AAGxB,IAAA,KAAK,EAAA,KAHmB;AAIxB,IAAA,KAAK,EAAA,KAJmB;AAKxB,IAAA,MAAM,EAAA,MALkB;AAMxB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KANY;AASxB,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAM,QAAA,CAAA;AAC/B,MAAA,GAAG,EAAA;AAD4B,KAAA,EAE5B,KAF4B,CAAN;AATH,GAA1B;AAeA,SAAO,KAAP;AACD,CAnBM","sourceRoot":""}
+{"version":3,"sources":["components/Image/useImage.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAGA;;AAEG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;AACnG,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA,GAAZ;AAAiB,IAAA,KAAjB;AAAwB,IAAA,KAAK,GAAG,QAAhC;AAA0C,IAAA;AAA1C,MAAqD,KAA3D;AAEA,QAAM,KAAK,GAAe;AACxB,IAAA,QADwB;AAExB,IAAA,GAFwB;AAGxB,IAAA,KAHwB;AAIxB,IAAA,KAJwB;AAKxB,IAAA,MALwB;AAMxB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KANY;AASxB,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAAR;AATH,GAA1B;AAeA,SAAO,KAAP;AACD,CAnBM","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, fit, block, shape = 'square', shadow } = 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"],"sourceRoot":"../src/"}

package/lib/components/Image/useImageStyles.d.ts

@@ -1,2 +1,3 @@
 import type { ImageState } from './Image.types';
-export declare const useImageStyles: (state: ImageState) => void;
+export declare const imageClassName = "fui-Image";
+export declare const useImageStyles_unstable: (state: ImageState) => void;

package/lib/components/Image/useImageStyles.js

@@ -1,12 +1,17 @@
-import { mergeClasses, __styles } from '@fluentui/react-make-styles';
+import { shorthands, mergeClasses, __styles } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const imageClassName = 'fui-Image';
 
-var useStyles = /*#__PURE__*/__styles({
+const useStyles = /*#__PURE__*/__styles({
   "root": {
     "g2u3we": "fj3muxo",
     "h3c5rm": ["f1akhkt", "f1lxtadh"],
     "B9xav0g": "f1aperda",
     "zhjwy3": ["f1lxtadh", "f1akhkt"],
-    "Dimara": "f1fabniw",
+    "Bbmb7ep": ["fzi6hpg", "fyowgf4"],
+    "Beyfa6y": ["fyowgf4", "fzi6hpg"],
+    "B7oj6ja": ["f3fg2lr", "f13av6d4"],
+    "Btl43ni": ["f13av6d4", "f3fg2lr"],
     "B7ck84d": "f1ewtqcl",
     "mc9l5x": "f14t3ns0"
   },
@@ -21,13 +26,19 @@ var useStyles = /*#__PURE__*/__styles({
     "ibv6hh": ["f1ojsxk5", "f5tn483"]
   },
   "rootCircular": {
-    "Dimara": "f44lkw9"
+    "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
+    "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
+    "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
+    "Btl43ni": ["f1s8kh49", "f1djnp8u"]
   },
   "rootRounded": {
-    "Dimara": "ft85np5"
+    "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
+    "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
+    "B7oj6ja": ["f1jar5jt", "fyu767a"],
+    "Btl43ni": ["fyu767a", "f1jar5jt"]
   },
   "rootShadow": {
-    "E5pizo": ["f1whvlc6", "fzb35q0"]
+    "E5pizo": "f1whvlc6"
   },
   "rootFitNone": {
     "st4lth": "f1plgu50",
@@ -57,11 +68,11 @@ var useStyles = /*#__PURE__*/__styles({
     "a9b677": "fly5x3f"
   }
 }, {
-  "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);}", ".f1fabniw{border-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);}", ".f44lkw9{border-radius:var(--borderRadiusCircular);}", ".ft85np5{border-radius:var(--borderRadiusMedium);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".fzb35q0{box-shadow:var(--shadow-4);}", ".f1plgu50{object-fit:none;}", ".f13uwng7{object-position:left top;}", ".fjmyj0p{object-position:right top;}", ".f1l02sjl{height:100%;}", ".fly5x3f{width:100%;}", ".f14xojzb{object-position:center;}", ".f1ps3kmd{object-fit:cover;}", ".f1kle4es{object-fit:contain;}"]
+  "d": [".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14t3ns0{display:inline-block;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f1plgu50{object-fit:none;}", ".f13uwng7{object-position:left top;}", ".fjmyj0p{object-position:right top;}", ".f1l02sjl{height:100%;}", ".fly5x3f{width:100%;}", ".f14xojzb{object-position:center;}", ".f1ps3kmd{object-fit:cover;}", ".f1kle4es{object-fit:contain;}"]
 });
 
-export var useImageStyles = function (state) {
-  var styles = useStyles();
-  state.root.className = mergeClasses(styles.root, state.bordered && styles.rootBordered, state.shape === 'circular' && styles.rootCircular, state.shape === 'rounded' && styles.rootRounded, state.shadow && styles.rootShadow, state.fit === 'none' && styles.rootFitNone, state.fit === 'center' && styles.rootFitCenter, state.fit === 'cover' && styles.rootFitCover, state.fit === 'contain' && styles.rootFitContain, state.block && styles.rootBlock, state.root.className);
+export const useImageStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(imageClassName, styles.root, state.bordered && styles.rootBordered, state.shape === 'circular' && styles.rootCircular, state.shape === 'rounded' && styles.rootRounded, state.shadow && styles.rootShadow, state.fit === 'none' && styles.rootFitNone, state.fit === 'center' && styles.rootFitCenter, state.fit === 'cover' && styles.rootFitCover, state.fit === 'contain' && styles.rootFitContain, state.block && styles.rootBlock, state.root.className);
 };
 //# sourceMappingURL=useImageStyles.js.map

package/lib/components/Image/useImageStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Image/useImageStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,6BAAzC;;AAGA,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AAkDA,OAAO,IAAM,cAAc,GAAG,UAAC,KAAD,EAAkB;AAC9C,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,MAAM,CAAC,IAD0B,EAEjC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,YAFQ,EAGjC,KAAK,CAAC,KAAN,KAAgB,UAAhB,IAA8B,MAAM,CAAC,YAHJ,EAIjC,KAAK,CAAC,KAAN,KAAgB,SAAhB,IAA6B,MAAM,CAAC,WAJH,EAKjC,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,UALU,EAMjC,KAAK,CAAC,GAAN,KAAc,MAAd,IAAwB,MAAM,CAAC,WANE,EAOjC,KAAK,CAAC,GAAN,KAAc,QAAd,IAA0B,MAAM,CAAC,aAPA,EAQjC,KAAK,CAAC,GAAN,KAAc,OAAd,IAAyB,MAAM,CAAC,YARC,EASjC,KAAK,CAAC,GAAN,KAAc,SAAd,IAA2B,MAAM,CAAC,cATD,EAUjC,KAAK,CAAC,KAAN,IAAe,MAAM,CAAC,SAVW,EAWjC,KAAK,CAAC,IAAN,CAAW,SAXsB,CAAnC;AAaD,CAfM","sourceRoot":""}
+{"version":3,"sources":["components/Image/useImageStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,OAAO,MAAM,cAAc,GAAG,WAAvB;;AAEP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AAkDA,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAsB;AAC3D,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,cADiC,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,YAHQ,EAIjC,KAAK,CAAC,KAAN,KAAgB,UAAhB,IAA8B,MAAM,CAAC,YAJJ,EAKjC,KAAK,CAAC,KAAN,KAAgB,SAAhB,IAA6B,MAAM,CAAC,WALH,EAMjC,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,UANU,EAOjC,KAAK,CAAC,GAAN,KAAc,MAAd,IAAwB,MAAM,CAAC,WAPE,EAQjC,KAAK,CAAC,GAAN,KAAc,QAAd,IAA0B,MAAM,CAAC,aARA,EASjC,KAAK,CAAC,GAAN,KAAc,OAAd,IAAyB,MAAM,CAAC,YATC,EAUjC,KAAK,CAAC,GAAN,KAAc,SAAd,IAA2B,MAAM,CAAC,cAVD,EAWjC,KAAK,CAAC,KAAN,IAAe,MAAM,CAAC,SAXW,EAYjC,KAAK,CAAC,IAAN,CAAW,SAZsB,CAAnC;AAcD,CAhBM","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ImageState } from './Image.types';\n\nexport const imageClassName = 'fui-Image';\n\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n\n    boxSizing: 'border-box',\n    display: 'inline-block',\n  },\n  rootBordered: {\n    ...shorthands.borderStyle('solid'),\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n  },\n  rootCircular: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n  rootRounded: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  rootShadow: {\n    boxShadow: tokens.shadow4,\n  },\n  rootFitNone: {\n    objectFit: 'none',\n    objectPosition: 'left top',\n    height: '100%',\n    width: '100%',\n  },\n  rootFitCenter: {\n    objectFit: 'none',\n    objectPosition: 'center',\n    height: '100%',\n    width: '100%',\n  },\n  rootFitCover: {\n    objectFit: 'cover',\n    objectPosition: 'center',\n    height: '100%',\n    width: '100%',\n  },\n  rootFitContain: {\n    objectFit: 'contain',\n    objectPosition: 'center',\n    height: '100%',\n    width: '100%',\n  },\n  rootBlock: {\n    width: '100%',\n  },\n});\n\nexport const useImageStyles_unstable = (state: ImageState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    imageClassName,\n    styles.root,\n    state.bordered && styles.rootBordered,\n    state.shape === 'circular' && styles.rootCircular,\n    state.shape === 'rounded' && styles.rootRounded,\n    state.shadow && styles.rootShadow,\n    state.fit === 'none' && styles.rootFitNone,\n    state.fit === 'center' && styles.rootFitCenter,\n    state.fit === 'cover' && styles.rootFitCover,\n    state.fit === 'contain' && styles.rootFitContain,\n    state.block && styles.rootBlock,\n    state.root.className,\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC","sourcesContent":["export * from './Image';\n"]}

package/lib-commonjs/Image.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./components/Image/index"), exports);
 //# sourceMappingURL=Image.js.map

package/lib-commonjs/Image.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Image.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"sources":["Image.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Image/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Image/Image.js

@@ -5,22 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Image = void 0;
 
-var React = /*#__PURE__*/require("react");
+const React = /*#__PURE__*/require("react");
 
-var renderImage_1 = /*#__PURE__*/require("./renderImage");
+const renderImage_1 = /*#__PURE__*/require("./renderImage");
 
-var useImage_1 = /*#__PURE__*/require("./useImage");
+const useImage_1 = /*#__PURE__*/require("./useImage");
 
-var useImageStyles_1 = /*#__PURE__*/require("./useImageStyles");
+const useImageStyles_1 = /*#__PURE__*/require("./useImageStyles");
 /**
  * The Image component ensures the consistent styling of images.
  */
 
 
-exports.Image = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useImage_1.useImage(props, ref);
-  useImageStyles_1.useImageStyles(state);
-  return renderImage_1.renderImage(state);
+exports.Image = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useImage_1.useImage_unstable(props, ref);
+  useImageStyles_1.useImageStyles_unstable(state);
+  return renderImage_1.renderImage_unstable(state);
 });
 exports.Image.displayName = 'Image';
 //# sourceMappingURL=Image.js.map

package/lib-commonjs/components/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,IAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,IAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAChF,MAAM,KAAK,GAAG,UAAA,CAAA,QAAA,CAAS,KAAT,EAAgB,GAAhB,CAAd;AACA,EAAA,gBAAA,CAAA,cAAA,CAAe,KAAf;AAEA,SAAO,aAAA,CAAA,WAAA,CAAY,KAAZ,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourceRoot":""}
+{"version":3,"sources":["components/Image/Image.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpF,QAAM,KAAK,GAAG,UAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;AACA,EAAA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;AAEA,SAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { renderImage_unstable } from './renderImage';\nimport { useImage_unstable } from './useImage';\nimport { useImageStyles_unstable } from './useImageStyles';\nimport type { ImageProps } from './Image.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The Image component ensures the consistent styling of images.\n */\nexport const Image: ForwardRefComponent<ImageProps> = React.forwardRef((props, ref) => {\n  const state = useImage_unstable(props, ref);\n  useImageStyles_unstable(state);\n\n  return renderImage_unstable(state);\n});\n\nImage.displayName = 'Image';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Image/Image.types.d.ts

@@ -1,8 +1,8 @@
-import type { ComponentState, ComponentProps, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';
 export declare type ImageSlots = {
-    root: IntrinsicShorthandProps<'img'>;
+    root: Slot<'img'>;
 };
-export declare type ImageCommons = {
+declare type ImageCommons = {
     /**
      * An image can appear with rectangular border.
      */
@@ -27,3 +27,4 @@ export declare type ImageCommons = {
 };
 export declare type ImageProps = ComponentProps<ImageSlots> & Partial<ImageCommons>;
 export declare type ImageState = ComponentState<ImageSlots> & ImageCommons;
+export {};

package/lib-commonjs/components/Image/Image.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}