@fluentui/react-image 9.0.0-rc.5 → 9.0.0-rc.8

package/dist/{react-image.d.ts → index.d.ts}

@@ -3,6 +3,7 @@ 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';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * The Image component ensures the consistent styling of images.
@@ -10,8 +11,13 @@ import type { Slot } from '@fluentui/react-utilities';
 declare const Image_2: ForwardRefComponent<ImageProps>;
 export { Image_2 as Image }
 
+/**
+ * @deprecated Use `imageClassNames.root` instead.
+ */
 export declare const imageClassName = "fui-Image";
 
+export declare const imageClassNames: SlotClassNames<ImageSlots>;
+
 declare type ImageCommons = {
     /**
      * An image can appear with rectangular border.

package/lib/components/Image/useImageStyles.js

@@ -1,6 +1,13 @@
 import { shorthands, mergeClasses, __styles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
+/**
+ * @deprecated Use `imageClassNames.root` instead.
+ */
+
 export const imageClassName = 'fui-Image';
+export const imageClassNames = {
+  root: 'fui-Image'
+};
 
 const useStyles = /*#__PURE__*/__styles({
   "root": {
@@ -73,6 +80,6 @@ const useStyles = /*#__PURE__*/__styles({
 
 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);
+  state.root.className = mergeClasses(imageClassNames.root, 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":["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/"}
+{"version":3,"sources":["components/Image/useImageStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA;;AAEG;;AACH,OAAO,MAAM,cAAc,GAAG,WAAvB;AACP,OAAO,MAAM,eAAe,GAA+B;AACzD,EAAA,IAAI,EAAE;AADmD,CAApD;;AAIP,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,eAAe,CAAC,IADiB,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 { ImageSlots, ImageState } from './Image.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `imageClassNames.root` instead.\n */\nexport const imageClassName = 'fui-Image';\nexport const imageClassNames: SlotClassNames<ImageSlots> = {\n  root: 'fui-Image',\n};\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    imageClassNames.root,\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

@@ -1,2 +1,3 @@
-export * from './Image';
+export { Image, // eslint-disable-next-line deprecation/deprecation -- https://github.com/microsoft/fluentui/pull/21960#issuecomment-1068991851
+imageClassName, imageClassNames, renderImage_unstable, useImageStyles_unstable, useImage_unstable } from './Image';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC","sourcesContent":["export * from './Image';\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,KADF,EAEE;AACA,cAHF,EAIE,eAJF,EAKE,oBALF,EAME,uBANF,EAOE,iBAPF,QAQO,SARP","sourcesContent":["export {\n  Image,\n  // eslint-disable-next-line deprecation/deprecation -- https://github.com/microsoft/fluentui/pull/21960#issuecomment-1068991851\n  imageClassName,\n  imageClassNames,\n  renderImage_unstable,\n  useImageStyles_unstable,\n  useImage_unstable,\n} from './Image';\nexport type { ImageProps, ImageSlots, ImageState } from './Image';\n"],"sourceRoot":"../src/"}

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

@@ -3,13 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useImageStyles_unstable = exports.imageClassName = void 0;
+exports.useImageStyles_unstable = exports.imageClassNames = exports.imageClassName = void 0;
 
 const react_1 = /*#__PURE__*/require("@griffel/react");
 
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+/**
+ * @deprecated Use `imageClassNames.root` instead.
+ */
+
 
 exports.imageClassName = 'fui-Image';
+exports.imageClassNames = {
+  root: 'fui-Image'
+};
 
 const useStyles = /*#__PURE__*/react_1.__styles({
   "root": {
@@ -82,7 +89,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
 
 const useImageStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_1.mergeClasses(exports.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);
+  state.root.className = react_1.mergeClasses(exports.imageClassNames.root, 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);
 };
 
 exports.useImageStyles_unstable = useImageStyles_unstable;

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Image/useImageStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAGa,OAAA,CAAA,cAAA,GAAiB,WAAjB;;AAEb,MAAM,SAAS,gBAAG,OAAA,SAAA;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;;AAkDO,MAAM,uBAAuB,GAAI,KAAD,IAAsB;AAC3D,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,cADqB,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,YAHJ,EAIrB,KAAK,CAAC,KAAN,KAAgB,UAAhB,IAA8B,MAAM,CAAC,YAJhB,EAKrB,KAAK,CAAC,KAAN,KAAgB,SAAhB,IAA6B,MAAM,CAAC,WALf,EAMrB,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,UANF,EAOrB,KAAK,CAAC,GAAN,KAAc,MAAd,IAAwB,MAAM,CAAC,WAPV,EAQrB,KAAK,CAAC,GAAN,KAAc,QAAd,IAA0B,MAAM,CAAC,aARZ,EASrB,KAAK,CAAC,GAAN,KAAc,OAAd,IAAyB,MAAM,CAAC,YATX,EAUrB,KAAK,CAAC,GAAN,KAAc,SAAd,IAA2B,MAAM,CAAC,cAVb,EAWrB,KAAK,CAAC,KAAN,IAAe,MAAM,CAAC,SAXD,EAYrB,KAAK,CAAC,IAAN,CAAW,SAZU,CAAvB;AAcD,CAhBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","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/"}
+{"version":3,"sources":["components/Image/useImageStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,cAAA,GAAiB,WAAjB;AACA,OAAA,CAAA,eAAA,GAA8C;AACzD,EAAA,IAAI,EAAE;AADmD,CAA9C;;AAIb,MAAM,SAAS,gBAAG,OAAA,SAAA;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;;AAkDO,MAAM,uBAAuB,GAAI,KAAD,IAAsB;AAC3D,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,eAAA,CAAgB,IADK,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,YAHJ,EAIrB,KAAK,CAAC,KAAN,KAAgB,UAAhB,IAA8B,MAAM,CAAC,YAJhB,EAKrB,KAAK,CAAC,KAAN,KAAgB,SAAhB,IAA6B,MAAM,CAAC,WALf,EAMrB,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,UANF,EAOrB,KAAK,CAAC,GAAN,KAAc,MAAd,IAAwB,MAAM,CAAC,WAPV,EAQrB,KAAK,CAAC,GAAN,KAAc,QAAd,IAA0B,MAAM,CAAC,aARZ,EASrB,KAAK,CAAC,GAAN,KAAc,OAAd,IAAyB,MAAM,CAAC,YATX,EAUrB,KAAK,CAAC,GAAN,KAAc,SAAd,IAA2B,MAAM,CAAC,cAVb,EAWrB,KAAK,CAAC,KAAN,IAAe,MAAM,CAAC,SAXD,EAYrB,KAAK,CAAC,IAAN,CAAW,SAZU,CAAvB;AAcD,CAhBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ImageSlots, ImageState } from './Image.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `imageClassNames.root` instead.\n */\nexport const imageClassName = 'fui-Image';\nexport const imageClassNames: SlotClassNames<ImageSlots> = {\n  root: 'fui-Image',\n};\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    imageClassNames.root,\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-commonjs/index.js

@@ -3,8 +3,45 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.useImage_unstable = exports.useImageStyles_unstable = exports.renderImage_unstable = exports.imageClassNames = exports.imageClassName = exports.Image = void 0;
 
-const tslib_1 = /*#__PURE__*/require("tslib");
+var Image_1 = /*#__PURE__*/require("./Image");
 
-tslib_1.__exportStar(require("./Image"), exports);
+Object.defineProperty(exports, "Image", {
+  enumerable: true,
+  get: function () {
+    return Image_1.Image;
+  }
+}); // eslint-disable-next-line deprecation/deprecation -- https://github.com/microsoft/fluentui/pull/21960#issuecomment-1068991851
+
+Object.defineProperty(exports, "imageClassName", {
+  enumerable: true,
+  get: function () {
+    return Image_1.imageClassName;
+  }
+});
+Object.defineProperty(exports, "imageClassNames", {
+  enumerable: true,
+  get: function () {
+    return Image_1.imageClassNames;
+  }
+});
+Object.defineProperty(exports, "renderImage_unstable", {
+  enumerable: true,
+  get: function () {
+    return Image_1.renderImage_unstable;
+  }
+});
+Object.defineProperty(exports, "useImageStyles_unstable", {
+  enumerable: true,
+  get: function () {
+    return Image_1.useImageStyles_unstable;
+  }
+});
+Object.defineProperty(exports, "useImage_unstable", {
+  enumerable: true,
+  get: function () {
+    return Image_1.useImage_unstable;
+  }
+});
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Image';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,OAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,KAAA;AAAK;AAAL,CAAA,E,CACA;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,cAAA;AAAc;AAAd,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,iBAAA;AAAiB;AAAjB,CAAA","sourcesContent":["export {\n  Image,\n  // eslint-disable-next-line deprecation/deprecation -- https://github.com/microsoft/fluentui/pull/21960#issuecomment-1068991851\n  imageClassName,\n  imageClassNames,\n  renderImage_unstable,\n  useImageStyles_unstable,\n  useImage_unstable,\n} from './Image';\nexport type { ImageProps, ImageSlots, ImageState } from './Image';\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@fluentui/react-image",
-  "version": "9.0.0-rc.5",
+  "version": "9.0.0-rc.8",
   "description": "Fluent UI React Image component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
-  "typings": "lib/index.d.ts",
+  "typings": "dist/index.d.ts",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -21,31 +21,20 @@
     "start": "yarn storybook",
     "test": "jest --passWithNoTests",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-image/src && yarn docs",
-    "storybook": "node ../../scripts/storybook/runner",
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-image/src && yarn docs",
+    "storybook": "node ../../../scripts/storybook/runner",
     "type-check": "tsc -b tsconfig.json"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.3",
-    "@fluentui/scripts": "^1.0.0",
-    "@types/enzyme": "3.10.3",
-    "@types/enzyme-adapter-react-16": "1.0.3",
-    "@types/object-fit-images": "^3.2.0",
-    "@types/react": "16.9.42",
-    "@types/react-dom": "16.9.10",
-    "@types/react-test-renderer": "^16.0.0",
-    "enzyme": "~3.10.0",
-    "enzyme-adapter-react-16": "^1.15.0",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
-    "react-test-renderer": "^16.3.0"
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.5",
+    "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@griffel/react": "1.0.0",
-    "@fluentui/react-utilities": "9.0.0-rc.5",
-    "@fluentui/react-theme": "9.0.0-rc.4",
+    "@griffel/react": "1.0.3",
+    "@fluentui/react-utilities": "9.0.0-rc.8",
+    "@fluentui/react-theme": "9.0.0-rc.7",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {

package/lib/Image.d.ts

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

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

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

@@ -1,30 +0,0 @@
-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/index.d.ts

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

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

@@ -1,6 +0,0 @@
-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/useImage.d.ts

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

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

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

package/lib/index.d.ts

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

package/lib-commonjs/Image.d.ts

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

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

@@ -1,6 +0,0 @@
-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-commonjs/components/Image/Image.types.d.ts

@@ -1,30 +0,0 @@
-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-commonjs/components/Image/index.d.ts

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

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

@@ -1,6 +0,0 @@
-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-commonjs/components/Image/useImage.d.ts

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

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

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

package/lib-commonjs/index.d.ts

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