@fluentui/react-image 0.0.0-nightly-20220302-0405.1

package/LICENSE

@@ -0,0 +1,15 @@
+@fluentui/react-image
+
+Copyright (c) Microsoft Corporation
+
+All rights reserved.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

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

@@ -0,0 +1,57 @@
+# @fluentui/react-image
+
+**React Image component for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
+
+> WIP 🚧 - These are not production-ready components as we are still in a Beta phase.
+
+Usage of Image component ensures consistent styling and behaviour of images in your application based on the Fluent UI Design System.
+
+## Usage
+
+To use the Image component, it is required to install the main package of Fluent UI components:
+
+```sh
+npm install @fluentui/react-components
+```
+
+```js
+import { Image } from '@fluentui/react-components';
+
+const App = () => {
+  return <Image src="example_image.png" />;
+};
+```
+
+Or, installing only the `react-image` package:
+
+```sh
+npm install @fluentui/react-image
+npm install @fluentui/react-provider
+```
+
+```js
+import { Image } from '@fluentui/react-image';
+import { FluentProvider } from '@fluentui/react-provider';
+
+const App = () => (
+  <FluentProvider>
+    <Image src="example_image.png" alt="Example image" />;
+  </FluentProvider>
+);
+```
+
+The DOM structure will result into:
+
+```jsx
+<img src="example_image.png" alt="Example image" />
+```
+
+## API
+
+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/Spec.md

@@ -0,0 +1,173 @@
+# @fluentui/react-image
+
+## Background
+
+Image is a visual representation of some content, such as a photo, illustration etc.
+
+## Concerns
+
+Based on the OpenUI research and the Figma specification, Image seems to be one of those components that is purely styling, thus I would appreciate your answers in any of these questions:
+
+- Are there any components would need to use Image?
+- Apart from styling, are there any other functionalities for Image?
+
+  **Conclusion**: Some potential features that Image can have are:
+
+  - fallback image placeholder when image fails to load
+  - onLoading callback when image fails to load
+  - styling helpers
+    These will be addressed on later iterations when needed
+
+- Is there any benefit of having Image as a component? (taking into consideration that it is css styling and we will need to maintain it over time.)
+
+  **Conclusion**: The image component will ensure correct styling and behaviour regardless of the Theme
+
+## Prior Art
+
+- Convergence epic issue: [#16658](https://github.com/microsoft/fluentui/issues/16658)
+- Open UI research [Link](https://open-ui.org/components/image.research), PR: [#274](https://github.com/openui/open-ui/pull/274)
+
+### V8/v0 comparison
+
+Comparison done in: [#17608](https://github.com/microsoft/fluentui/pull/17608)
+
+[image@v7/v8]: https://developer.microsoft.com/en-us/fluentui#/controls/web/image
+[image@v0]: https://fluentsite.z22.web.core.windows.net/0.53.0/components/image/props
+
+| Purpose                                                                 | v7 / v8                 | v0              | Matching                      |
+| ----------------------------------------------------------------------- | ----------------------- | --------------- | ----------------------------- |
+| Additional CSS class name(s) to apply                                   | `className`             | `className`     | matching                      |
+| Specifies the cover style to be used for this image                     | `coverStyle`            | N/A             | v0 missing                    |
+| Replaces the src in case of errors                                      | `errorSrc` [DEPRECATED] | N/A             | _See `onLoadingStateChanged`_ |
+| Determines how the image is scaled and cropped to fit the frame         | `imageFit`              | `fluid`         | partially matching            |
+| Expands image frame to fill its parent container                        | `maximizeFrame`         | `fluid`         | partially matching            |
+| Optional callback for when the image load state changed                 | `onLoadingStateChanged` | N/A             | v0 missing                    |
+| Fades the image in when loaded                                          | `shouldFadeIn`          | N/A             | v0 missing                    |
+| The image starts as visible and is hidden on error                      | `shouldStartVisible`    | N/A             | v0 missing                    |
+| Provides customized styling that will layer on top of the variant rules | `styles`                | `styles`        | matching                      |
+| Theme provided by HOC                                                   | `theme`                 | `variables`     | matching                      |
+| Accessibility behavior overridden by the user                           | N/A                     | `accessibility` | v7/v8 missing                 |
+| An element type to render as (string or component)                      | N/A                     | `as`            | v7/v8 missing                 |
+| An image may be formatted to appear inline with text as an avatar       | N/A                     | `avatar`        | v7/v8 missing                 |
+| An image can appear circular                                            | N/A                     | `circular`      | v7/v8 missing                 |
+| Component design prop                                                   | N/A                     | `design`        | v7/v8 missing                 |
+| Image source URL                                                        | N/A                     | `src`           | v7/v8 missing                 |
+
+### v8 usage
+
+```jsx
+import { Image, ImageFit } from '@fluentui/react/lib/Image';
+
+<Image maximizeFrame imageFit={ImageFit.contain} src="..." alt="Example of the image component in v8" />;
+```
+
+### v0 usage
+
+```jsx
+<Image block src="..." alt="Example of the image component in v0" />
+```
+
+## Variants
+
+n/a
+
+## API proposal
+
+See [react-image/Image.types.ts] for the API.
+
+[react-image/image.types.ts]: https://github.com/microsoft/fluentui/blob/master/packages/react-image/src/components/Image/Image.types.ts
+
+Proposed component props:
+
+| Name       | Type      | Default value | Comments                                     |
+| ---------- | --------- | ------------- | -------------------------------------------- |
+| `bordered` | `boolean` | `false`       |                                              |
+| `fit`      | `string`  | "`none`"      | One of: `none`, `center`, `contain`, `cover` |
+| `block`    | `boolean` | `false`       |                                              |
+| `shape `   | `string ` | `false`       | One of: `square`, `circular` , `rounded`     |
+| `shadow`   | `boolean` | `false`       |                                              |
+
+All native html attributes of the `<img />` will be available to be used as props of the Image component.
+
+## Sample Code
+
+Sample code based on the proposed API:
+
+### Bordered
+
+```jsx
+<Image bordered src="..." />
+```
+
+### Block
+
+```jsx
+<Image block src="..." />
+```
+
+### Rounded
+
+```jsx
+<Image shape="rounded" src="..." />
+```
+
+### Circular
+
+```jsx
+<Image shape="circular" src="..." />
+```
+
+### Fit
+
+```jsx
+// None
+<Image fit="none" src="..." />
+
+// Center
+<Image fit="center" src="..." />
+
+// Contain
+<Image fit="contain" src="..." />
+
+// Cover
+<Image fit="cover" src="..." />
+```
+
+## Structure
+
+### Public
+
+```tsx
+<Image src=".." />
+```
+
+### Internal
+
+```tsx
+<slots.root {...slotProps.root} />
+```
+
+### DOM
+
+```tsx
+<img src="..." class="...">
+```
+
+<!-- ## Migration -->
+
+<!-- _Describe what will need to be done to upgrade from the existing implementations:_
+
+- _Migration from v8_
+- _Migration from v0_ -->
+
+## Accessibility
+
+Images should include the `alt` attribute that includes a description of the image's content and function to be accessible to assistive technologies. The alt description should be concise and clearly communicate the meaning and purpose of the image on where it was included. Avoid using "image of", "picture of" etc. as it is redundant.
+
+The images that are only decorative and do not have the structural relevance implied by the semantic element should use the `alt=""` (null alt text) or `role="presentation"`/`role="none"` which will remove the semantic meaning of the element. In case the image is needed to be removed from the accessibility tree then `aria-hidden="true"` can be used.
+
+### Relevant documents
+
+- [WAI-ARIA 1.1 img Spec](https://www.w3.org/TR/wai-aria-1.1/#img)
+- [WAI-ARIA 1.2 img Spec](https://www.w3.org/TR/wai-aria-1.2/#img)
+- [WAI-ARIA 1.1 Hiding Semantics](https://www.w3.org/TR/wai-aria-practices-1.1/#presentation_role)

package/dist/react-image.d.ts

@@ -0,0 +1,60 @@
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } 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.
+ */
+declare const Image_2: ForwardRefComponent<ImageProps>;
+export { Image_2 as Image }
+
+export declare const imageClassName = "fui-Image";
+
+declare type ImageCommons = {
+    /**
+     * An image can appear with rectangular border.
+     */
+    bordered?: boolean;
+    /**
+     * An image can set how it should be resized to fit its container.
+     */
+    fit?: 'none' | 'center' | 'contain' | 'cover';
+    /**
+     * An image can take up the width of its container.
+     */
+    block?: boolean;
+    /**
+     * An image can appear square, circular, or rounded.
+     * @defaultvalue square
+     */
+    shape?: 'square' | 'circular' | 'rounded';
+    /**
+     * An image can appear elevated with shadow.
+     */
+    shadow?: boolean;
+};
+
+export declare type ImageProps = ComponentProps<ImageSlots> & Partial<ImageCommons>;
+
+export declare type ImageSlots = {
+    root: Slot<'img'>;
+};
+
+export declare type ImageState = ComponentState<ImageSlots> & ImageCommons;
+
+/**
+ * Define the render function.
+ * Given the state of an image, renders it.
+ */
+export declare const renderImage_unstable: (state: ImageState) => JSX.Element;
+
+/**
+ * Given user props, returns state and render function for an Image.
+ */
+export declare const useImage_unstable: (props: ImageProps, ref: React_2.Ref<HTMLImageElement>) => ImageState;
+
+export declare const useImageStyles_unstable: (state: ImageState) => void;
+
+export { }

package/lib/Image.d.ts

@@ -0,0 +1 @@
+export * from './components/Image/index';

package/lib/Image.js

@@ -0,0 +1,2 @@
+export * from './components/Image/index';
+//# sourceMappingURL=Image.js.map

package/lib/Image.js.map

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,6 @@
+import type { ImageProps } from './Image.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+/**
+ * The Image component ensures the consistent styling of images.
+ */
+export declare const Image: ForwardRefComponent<ImageProps>;

package/lib/components/Image/Image.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+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 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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,30 @@
+import type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';
+export declare type ImageSlots = {
+    root: Slot<'img'>;
+};
+declare type ImageCommons = {
+    /**
+     * An image can appear with rectangular border.
+     */
+    bordered?: boolean;
+    /**
+     * An image can set how it should be resized to fit its container.
+     */
+    fit?: 'none' | 'center' | 'contain' | 'cover';
+    /**
+     * An image can take up the width of its container.
+     */
+    block?: boolean;
+    /**
+     * An image can appear square, circular, or rounded.
+     * @defaultvalue square
+     */
+    shape?: 'square' | 'circular' | 'rounded';
+    /**
+     * An image can appear elevated with shadow.
+     */
+    shadow?: boolean;
+};
+export declare type ImageProps = ComponentProps<ImageSlots> & Partial<ImageCommons>;
+export declare type ImageState = ComponentState<ImageSlots> & ImageCommons;
+export {};

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Image.types.js.map

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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,5 @@
+export * from './Image.types';
+export * from './Image';
+export * from './renderImage';
+export * from './useImage';
+export * from './useImageStyles';

package/lib/components/Image/index.js

@@ -0,0 +1,6 @@
+export * from './Image.types';
+export * from './Image';
+export * from './renderImage';
+export * from './useImage';
+export * from './useImageStyles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"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

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

package/lib/components/Image/renderImage.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+/**
+ * Define the render function.
+ * Given the state of an image, renders it.
+ */
+
+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

@@ -0,0 +1 @@
+{"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/"}