@fluentui/react-image 9.0.0-alpha.9 → 9.0.0-alpha.90

package/README.md

@@ -2,14 +2,52 @@
 
 **React Image component for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
 
-These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
+> WIP 🚧 - These are not production-ready components as we are still in a Beta phase.
 
-To import React Image component:
+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-image';
+import { Image } from '@fluentui/react-components';
 
 const App = () => {
-  return <Image src="image.png" />;
+  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).

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

@@ -1,13 +1,16 @@
-import { ComponentProps } from '@fluentui/react-utilities';
-import * as React from 'react';
+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';
 
-export declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLElement>>;
+/**
+ * The Image component ensures the consistent styling of images.
+ */
+declare const Image_2: ForwardRefComponent<ImageProps>;
+export { Image_2 as Image }
 
-export declare interface ImageProps extends ComponentProps, React.ImgHTMLAttributes<HTMLImageElement> {
-    /**
-     * An alternative text for an image.
-     */
-    alt?: string;
+export declare type ImageCommons = {
     /**
      * An image can appear with rectangular border.
      */
@@ -19,24 +22,27 @@ export declare interface ImageProps extends ComponentProps, React.ImgHTMLAttribu
     /**
      * An image can take up the width of its container.
      */
-    fluid?: boolean;
-    /**
-     * An image can appear circular.
-     */
-    circular?: boolean;
+    block?: boolean;
     /**
-     * An image can appear rounded.
+     * An image can appear square, circular, or rounded.
+     * @defaultvalue square
      */
-    rounded?: boolean;
+    shape?: 'square' | 'circular' | 'rounded';
     /**
-     * An image can have source URL.
+     * An image can appear elevated with shadow.
      */
-    src?: string;
-}
+    shadow?: boolean;
+};
+
+export declare type ImageProps = ComponentProps<ImageSlots> & Partial<ImageCommons>;
+
+export declare const imageShorthandProps: Array<keyof ImageSlots>;
 
-export declare interface ImageState extends ImageProps {
-    ref: React.RefObject<HTMLImageElement>;
-}
+export declare type ImageSlots = {
+    root: IntrinsicShorthandProps<'img'>;
+};
+
+export declare type ImageState = ComponentState<ImageSlots> & ImageCommons;
 
 /**
  * Define the render function.
@@ -47,10 +53,8 @@ export declare const renderImage: (state: ImageState) => JSX.Element;
 /**
  * Given user props, returns state and render function for an Image.
  */
-export declare const useImage: (props: ImageProps, ref: React.Ref<HTMLElement>, defaultProps?: ImageProps | undefined) => ImageState;
+export declare const useImage: (props: ImageProps, ref: React_2.Ref<HTMLImageElement>) => ImageState;
 
 export declare const useImageStyles: (state: ImageState) => void;
 
-export declare const useRootStyles: (selectors: ImageState) => string;
-
 export { }

package/lib/Image.js.map

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

package/lib/common/isConformant.d.ts

@@ -0,0 +1,4 @@
+import type { IsConformantOptions } from '@fluentui/react-conformance';
+export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
+    componentPath?: string;
+}): void;

package/lib/common/isConformant.js

@@ -0,0 +1,13 @@
+import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
+import makeStylesTests from '@fluentui/react-conformance-make-styles';
+export function isConformant(testInfo) {
+  var defaultOptions = {
+    asPropHandlesRef: true,
+    componentPath: module.parent.filename.replace('.test', ''),
+    disabledTests: ['has-docblock'],
+    extraTests: makeStylesTests,
+    skipAsPropTests: true
+  };
+  baseIsConformant(defaultOptions, testInfo);
+}
+//# sourceMappingURL=isConformant.js.map

package/lib/common/isConformant.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":"AAAA,SAAS,YAAY,IAAI,gBAAzB,QAAiD,6BAAjD;AAEA,OAAO,eAAP,MAA4B,yCAA5B;AAEA,OAAM,SAAU,YAAV,CACJ,QADI,EACqF;AAEzF,MAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,aAAa,EAAE,CAAC,cAAD,CAH4C;AAI3D,IAAA,UAAU,EAAE,eAJ+C;AAK3D,IAAA,eAAe,EAAE;AAL0C,GAA7D;AAQA,EAAA,gBAAgB,CAAC,cAAD,EAAiB,QAAjB,CAAhB;AACD","sourceRoot":""}

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

@@ -1,3 +1,6 @@
-import * as React from 'react';
-import { ImageProps } from './Image.types';
-export declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLElement>>;
+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

@@ -2,10 +2,14 @@ import * as React from 'react';
 import { renderImage } from './renderImage';
 import { useImage } from './useImage';
 import { useImageStyles } from './useImageStyles';
-export var Image = React.forwardRef(function (props, ref) {
-    var state = useImage(props, ref);
-    useImageStyles(state);
-    return renderImage(state);
+/**
+ * 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);
 });
 Image.displayName = 'Image';
 //# sourceMappingURL=Image.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"../src/","sources":["components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,CAAC,IAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,UAAC,KAAiB,EAAE,GAA2B;IACnF,IAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACnC,cAAc,CAAC,KAAK,CAAC,CAAC;IAEtB,OAAO,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,CAAC,CAAC,CAAC;AAEH,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import * as React from 'react';\nimport { ImageProps } from './Image.types';\nimport { renderImage } from './renderImage';\nimport { useImage } from './useImage';\nimport { useImageStyles } from './useImageStyles';\n\nexport const Image = React.forwardRef((props: ImageProps, ref: React.Ref<HTMLElement>) => {\n  const state = useImage(props, ref);\n  useImageStyles(state);\n\n  return renderImage(state);\n});\n\nImage.displayName = 'Image';\n"]}
+{"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":""}

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

@@ -1,10 +1,8 @@
-import * as React from 'react';
-import { ComponentProps } from '@fluentui/react-utilities';
-export interface ImageProps extends ComponentProps, React.ImgHTMLAttributes<HTMLImageElement> {
-    /**
-     * An alternative text for an image.
-     */
-    alt?: string;
+import type { ComponentState, ComponentProps, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+export declare type ImageSlots = {
+    root: IntrinsicShorthandProps<'img'>;
+};
+export declare type ImageCommons = {
     /**
      * An image can appear with rectangular border.
      */
@@ -16,20 +14,16 @@ export interface ImageProps extends ComponentProps, React.ImgHTMLAttributes<HTML
     /**
      * An image can take up the width of its container.
      */
-    fluid?: boolean;
-    /**
-     * An image can appear circular.
-     */
-    circular?: boolean;
+    block?: boolean;
     /**
-     * An image can appear rounded.
+     * An image can appear square, circular, or rounded.
+     * @defaultvalue square
      */
-    rounded?: boolean;
+    shape?: 'square' | 'circular' | 'rounded';
     /**
-     * An image can have source URL.
+     * An image can appear elevated with shadow.
      */
-    src?: string;
-}
-export interface ImageState extends ImageProps {
-    ref: React.RefObject<HTMLImageElement>;
-}
+    shadow?: boolean;
+};
+export declare type ImageProps = ComponentProps<ImageSlots> & Partial<ImageCommons>;
+export declare type ImageState = ComponentState<ImageSlots> & ImageCommons;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Image.types.js","sourceRoot":"../src/","sources":["components/Image/Image.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ComponentProps } from '@fluentui/react-utilities';\n\nexport interface ImageProps extends ComponentProps, React.ImgHTMLAttributes<HTMLImageElement> {\n  /**\n   * An alternative text for an image.\n   */\n  alt?: string;\n\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  fluid?: boolean;\n\n  /**\n   * An image can appear circular.\n   */\n  circular?: boolean;\n\n  /**\n   * An image can appear rounded.\n   */\n  rounded?: boolean;\n\n  /**\n   * An image can have source URL.\n   */\n  src?: string;\n}\n\nexport interface ImageState extends ImageProps {\n  ref: React.RefObject<HTMLImageElement>;\n}\n"]}
+{"version":3,"file":"Image.types.js","sourceRoot":"","sources":["../../../src/components/Image/Image.types.ts"],"names":[],"mappings":""}

package/lib/components/Image/index.js

@@ -1,3 +1,4 @@
+export * from './Image.types';
 export * from './Image';
 export * from './renderImage';
 export * from './useImage';

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

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

package/lib/components/Image/renderImage.js

@@ -1,12 +1,17 @@
 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), slots = _a.slots, slotProps = _a.slotProps;
-    return React.createElement(slots.root, __assign({}, slotProps.root));
+  var _a = getSlots(state, imageShorthandProps),
+      slots = _a.slots,
+      slotProps = _a.slotProps;
+
+  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root));
 };
 //# sourceMappingURL=renderImage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"renderImage.js","sourceRoot":"../src/","sources":["components/Image/renderImage.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGrD;;;GAGG;AACH,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,KAAiB;IACrC,IAAA,oBAAsC,EAApC,gBAAK,EAAE,wBAA6B,CAAC;IAE7C,OAAO,oBAAC,KAAK,CAAC,IAAI,eAAK,SAAS,CAAC,IAAI,EAAI,CAAC;AAC5C,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ImageState } from './Image.types';\n\n/**\n * Define the render function.\n * Given the state of an image, renders it.\n */\nexport const renderImage = (state: ImageState) => {\n  const { slots, slotProps } = getSlots(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"]}
+{"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":""}

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

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

package/lib/components/Image/useImage.js

@@ -1,31 +1,30 @@
-import * as React from 'react';
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-ignore Typings require esModuleInterop
-import { objectFitImages } from 'object-fit-images';
-import { makeMergeProps, resolveShorthandProps, useMergedRefs } from '@fluentui/react-utilities';
-var mergeProps = makeMergeProps();
-var isFitSupported = (function () {
-    var testImg = new Image();
-    return 'object-fit' in testImg.style && 'object-position' in testImg.style;
-})();
+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, defaultProps) {
-    var resolvedRef = useMergedRefs(ref, React.useRef(null));
-    var state = mergeProps({
-        ref: resolvedRef,
-        as: 'img',
-    }, defaultProps, resolveShorthandProps(props, []));
-    React.useEffect(function () {
-        if (!isFitSupported) {
-            objectFitImages(state.ref.current);
-        }
-    }, 
-    // objectFitImages() should be executed once per element
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    state['aria-hidden'] = state.alt || state['aria-label'] ? undefined : 'true';
-    return state;
+
+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,
+    components: {
+      root: 'img'
+    },
+    root: getNativeElementProps('img', __assign({
+      ref: ref
+    }, props))
+  };
+  return state;
 };
 //# sourceMappingURL=useImage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useImage.js","sourceRoot":"../src/","sources":["components/Image/useImage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,sDAAsD;AACtD,6CAA6C;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAGjG,IAAM,UAAU,GAAG,cAAc,EAAc,CAAC;AAEhD,IAAM,cAAc,GAAG,CAAC;IACtB,IAAM,OAAO,GAAG,IAAI,KAAK,EAAE,CAAC;IAE5B,OAAO,YAAY,IAAI,OAAO,CAAC,KAAK,IAAI,iBAAiB,IAAI,OAAO,CAAC,KAAK,CAAC;AAC7E,CAAC,CAAC,EAAE,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,IAAM,QAAQ,GAAG,UAAC,KAAiB,EAAE,GAA2B,EAAE,YAAyB;IAChG,IAAM,WAAW,GAAG,aAAa,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;IAC3D,IAAM,KAAK,GAAG,UAAU,CACtB;QACE,GAAG,EAAE,WAAW;QAChB,EAAE,EAAE,KAAK;KACV,EACD,YAAY,EACZ,qBAAqB,CAAC,KAAK,EAAE,EAAE,CAAC,CACjC,CAAC;IAEF,KAAK,CAAC,SAAS,CACb;QACE,IAAI,CAAC,cAAc,EAAE;YACnB,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;SACpC;IACH,CAAC;IACD,wDAAwD;IACxD,uDAAuD;IACvD,EAAE,CACH,CAAC;IAEF,KAAK,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC,GAAG,IAAI,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IAE7E,OAAO,KAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n/* eslint-disable @typescript-eslint/ban-ts-comment */\n// @ts-ignore Typings require esModuleInterop\nimport { objectFitImages } from 'object-fit-images';\nimport { makeMergeProps, resolveShorthandProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { ImageProps, ImageState } from './Image.types';\n\nconst mergeProps = makeMergeProps<ImageState>();\n\nconst isFitSupported = (function() {\n  const testImg = new Image();\n\n  return 'object-fit' in testImg.style && 'object-position' in testImg.style;\n})();\n\n/**\n * Given user props, returns state and render function for an Image.\n */\nexport const useImage = (props: ImageProps, ref: React.Ref<HTMLElement>, defaultProps?: ImageProps): ImageState => {\n  const resolvedRef = useMergedRefs(ref, React.useRef(null));\n  const state = mergeProps(\n    {\n      ref: resolvedRef,\n      as: 'img',\n    },\n    defaultProps,\n    resolveShorthandProps(props, []),\n  );\n\n  React.useEffect(\n    () => {\n      if (!isFitSupported) {\n        objectFitImages(state.ref.current);\n      }\n    },\n    // objectFitImages() should be executed once per element\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n\n  state['aria-hidden'] = state.alt || state['aria-label'] ? undefined : 'true';\n\n  return state;\n};\n"]}
+{"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":""}

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

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