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

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

@@ -1,81 +1,76 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_make_styles_1 = require("@fluentui/react-make-styles");
-exports.useRootStyles = react_make_styles_1.makeStylesCompat([
-    [
-        null,
-        function (theme) { return ({
-            borderColor: theme.alias.color.neutral.neutralStroke1,
-            borderRadius: theme.global.borderRadius.none,
-            boxShadow: theme.alias.shadow.shadow4,
-            boxSizing: 'border-box',
-            display: 'inline-block',
-        }); },
-    ],
-    [
-        function (props) { return props.bordered; },
-        function (theme) { return ({
-            borderStyle: 'solid',
-            borderWidth: theme.global.strokeWidth.thin,
-        }); },
-    ],
-    [
-        function (props) { return props.circular; },
-        function (theme) { return ({
-            borderRadius: theme.global.borderRadius.circular,
-        }); },
-    ],
-    [
-        function (props) { return props.rounded; },
-        function (theme) { return ({
-            borderRadius: theme.global.borderRadius.medium,
-        }); },
-    ],
-    [
-        function (props) { return props.fit === 'none'; },
-        {
-            objectFit: 'none',
-            objectPosition: 'left top',
-            height: '100%',
-            width: '100%',
-        },
-    ],
-    [
-        function (props) { return props.fit === 'center'; },
-        {
-            objectFit: 'none',
-            objectPosition: 'center',
-            height: '100%',
-            width: '100%',
-        },
-    ],
-    [
-        function (props) { return props.fit === 'cover'; },
-        {
-            objectFit: 'cover',
-            objectPosition: 'center',
-            height: '100%',
-            width: '100%',
-        },
-    ],
-    [
-        function (props) { return props.fit === 'contain'; },
-        {
-            objectFit: 'contain',
-            objectPosition: 'center',
-            height: '100%',
-            width: '100%',
-        },
-    ],
-    [
-        function (props) { return props.fluid; },
-        {
-            width: '100%',
-        },
-    ],
-]);
-exports.useImageStyles = function (state) {
-    var rootClassName = exports.useRootStyles(state);
-    state.className = react_make_styles_1.ax(rootClassName, state.className);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useImageStyles = void 0;
+
+var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+
+var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+  "root": {
+    "g2u3we": "fj3muxo",
+    "h3c5rm": ["f1akhkt", "f1lxtadh"],
+    "B9xav0g": "f1aperda",
+    "zhjwy3": ["f1lxtadh", "f1akhkt"],
+    "Dimara": "f1fabniw",
+    "B7ck84d": "f1ewtqcl",
+    "mc9l5x": "f14t3ns0"
+  },
+  "rootBordered": {
+    "icvyot": "fzkkow9",
+    "vrafjx": ["fcdblym", "fjik90z"],
+    "oivjwe": "fg706s2",
+    "wvpqe5": ["fjik90z", "fcdblym"],
+    "B4j52fo": "f192inf7",
+    "Bekrc4i": ["f5tn483", "f1ojsxk5"],
+    "Bn0qgzm": "f1vxd6vx",
+    "ibv6hh": ["f1ojsxk5", "f5tn483"]
+  },
+  "rootCircular": {
+    "Dimara": "f44lkw9"
+  },
+  "rootRounded": {
+    "Dimara": "ft85np5"
+  },
+  "rootShadow": {
+    "E5pizo": ["f1whvlc6", "fzb35q0"]
+  },
+  "rootFitNone": {
+    "st4lth": "f1plgu50",
+    "Ermj5k": ["f13uwng7", "fjmyj0p"],
+    "Bqenvij": "f1l02sjl",
+    "a9b677": "fly5x3f"
+  },
+  "rootFitCenter": {
+    "st4lth": "f1plgu50",
+    "Ermj5k": "f14xojzb",
+    "Bqenvij": "f1l02sjl",
+    "a9b677": "fly5x3f"
+  },
+  "rootFitCover": {
+    "st4lth": "f1ps3kmd",
+    "Ermj5k": "f14xojzb",
+    "Bqenvij": "f1l02sjl",
+    "a9b677": "fly5x3f"
+  },
+  "rootFitContain": {
+    "st4lth": "f1kle4es",
+    "Ermj5k": "f14xojzb",
+    "Bqenvij": "f1l02sjl",
+    "a9b677": "fly5x3f"
+  },
+  "rootBlock": {
+    "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;}"]
+});
+
+var useImageStyles = function (state) {
+  var styles = useStyles();
+  state.root.className = react_make_styles_1.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);
 };
+
+exports.useImageStyles = useImageStyles;
 //# sourceMappingURL=useImageStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useImageStyles.js","sourceRoot":"../src/","sources":["components/Image/useImageStyles.ts"],"names":[],"mappings":";;AAAA,iEAAmE;AAGtD,QAAA,aAAa,GAAG,oCAAgB,CAAa;IACxD;QACE,IAAI;QACJ,UAAA,KAAK,IAAI,OAAA,CAAC;YACR,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;YACrD,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI;YAC5C,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;YAErC,SAAS,EAAE,YAAY;YACvB,OAAO,EAAE,cAAc;SACxB,CAAC,EAPO,CAOP;KACH;IACD;QACE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,QAAQ,EAAd,CAAc;QACvB,UAAA,KAAK,IAAI,OAAA,CAAC;YACR,WAAW,EAAE,OAAO;YACpB,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI;SAC3C,CAAC,EAHO,CAGP;KACH;IACD;QACE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,QAAQ,EAAd,CAAc;QACvB,UAAA,KAAK,IAAI,OAAA,CAAC;YACR,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ;SACjD,CAAC,EAFO,CAEP;KACH;IACD;QACE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,OAAO,EAAb,CAAa;QACtB,UAAA,KAAK,IAAI,OAAA,CAAC;YACR,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM;SAC/C,CAAC,EAFO,CAEP;KACH;IACD;QACE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,GAAG,KAAK,MAAM,EAApB,CAAoB;QAC7B;YACE,SAAS,EAAE,MAAM;YACjB,cAAc,EAAE,UAAU;YAC1B,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SAId;KACF;IACD;QACE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAtB,CAAsB;QAC/B;YACE,SAAS,EAAE,MAAM;YACjB,cAAc,EAAE,QAAQ;YACxB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SAId;KACF;IACD;QACE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,GAAG,KAAK,OAAO,EAArB,CAAqB;QAC9B;YACE,SAAS,EAAE,OAAO;YAClB,cAAc,EAAE,QAAQ;YACxB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SAId;KACF;IACD;QACE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,GAAG,KAAK,SAAS,EAAvB,CAAuB;QAChC;YACE,SAAS,EAAE,SAAS;YACpB,cAAc,EAAE,QAAQ;YACxB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SAId;KACF;IACD;QACE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,KAAK,EAAX,CAAW;QACpB;YACE,KAAK,EAAE,MAAM;SACd;KACF;CACF,CAAC,CAAC;AAEU,QAAA,cAAc,GAAG,UAAC,KAAiB;IAC9C,IAAM,aAAa,GAAG,qBAAa,CAAC,KAAK,CAAC,CAAC;IAC3C,KAAK,CAAC,SAAS,GAAG,sBAAE,CAAC,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;AACvD,CAAC,CAAC","sourcesContent":["import { makeStylesCompat, ax } from '@fluentui/react-make-styles';\nimport { ImageState } from './Image.types';\n\nexport const useRootStyles = makeStylesCompat<ImageState>([\n  [\n    null,\n    theme => ({\n      borderColor: theme.alias.color.neutral.neutralStroke1,\n      borderRadius: theme.global.borderRadius.none,\n      boxShadow: theme.alias.shadow.shadow4,\n\n      boxSizing: 'border-box',\n      display: 'inline-block',\n    }),\n  ],\n  [\n    props => props.bordered,\n    theme => ({\n      borderStyle: 'solid',\n      borderWidth: theme.global.strokeWidth.thin,\n    }),\n  ],\n  [\n    props => props.circular,\n    theme => ({\n      borderRadius: theme.global.borderRadius.circular,\n    }),\n  ],\n  [\n    props => props.rounded,\n    theme => ({\n      borderRadius: theme.global.borderRadius.medium,\n    }),\n  ],\n  [\n    props => props.fit === 'none',\n    {\n      objectFit: 'none',\n      objectPosition: 'left top',\n      height: '100%',\n      width: '100%',\n\n      // TODO IE 11\n      // font-family: 'object-fit: none; object-position: left top;',\n    },\n  ],\n  [\n    props => props.fit === 'center',\n    {\n      objectFit: 'none',\n      objectPosition: 'center',\n      height: '100%',\n      width: '100%',\n\n      // TODO IE 11\n      // font-family: 'object-fit: none; object-position: center;',\n    },\n  ],\n  [\n    props => props.fit === 'cover',\n    {\n      objectFit: 'cover',\n      objectPosition: 'center',\n      height: '100%',\n      width: '100%',\n\n      // TODO IE 11\n      // font-family: 'object-fit: cover; object-position: center;',\n    },\n  ],\n  [\n    props => props.fit === 'contain',\n    {\n      objectFit: 'contain',\n      objectPosition: 'center',\n      height: '100%',\n      width: '100%',\n\n      // TODO IE 11\n      // font-family: 'object-fit: contain; object-position: center;',\n    },\n  ],\n  [\n    props => props.fluid,\n    {\n      width: '100%',\n    },\n  ],\n]);\n\nexport const useImageStyles = (state: ImageState) => {\n  const rootClassName = useRootStyles(state);\n  state.className = ax(rootClassName, state.className);\n};\n"]}
+{"version":3,"sources":["../../../src/components/Image/useImageStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAGA,IAAM,SAAS,gBAAG,mBAAA,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,EAAlB;;AAkDO,IAAM,cAAc,GAAG,UAAC,KAAD,EAAkB;AAC9C,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CACrB,MAAM,CAAC,IADc,EAErB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,YAFJ,EAGrB,KAAK,CAAC,KAAN,KAAgB,UAAhB,IAA8B,MAAM,CAAC,YAHhB,EAIrB,KAAK,CAAC,KAAN,KAAgB,SAAhB,IAA6B,MAAM,CAAC,WAJf,EAKrB,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,UALF,EAMrB,KAAK,CAAC,GAAN,KAAc,MAAd,IAAwB,MAAM,CAAC,WANV,EAOrB,KAAK,CAAC,GAAN,KAAc,QAAd,IAA0B,MAAM,CAAC,aAPZ,EAQrB,KAAK,CAAC,GAAN,KAAc,OAAd,IAAyB,MAAM,CAAC,YARX,EASrB,KAAK,CAAC,GAAN,KAAc,SAAd,IAA2B,MAAM,CAAC,cATb,EAUrB,KAAK,CAAC,KAAN,IAAe,MAAM,CAAC,SAVD,EAWrB,KAAK,CAAC,IAAN,CAAW,SAXU,CAAvB;AAaD,CAfM;;AAAM,OAAA,CAAA,cAAA,GAAc,cAAd","sourceRoot":""}

package/lib-commonjs/index.js

@@ -1,5 +1,10 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
 tslib_1.__exportStar(require("./Image"), exports);
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

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

package/package.json

@@ -1,13 +1,11 @@
 {
   "name": "@fluentui/react-image",
-  "version": "9.0.0-alpha.9",
+  "version": "9.0.0-alpha.90",
   "description": "Fluent UI React Image component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
-  "sideEffects": [
-    "lib/version.js"
-  ],
+  "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui"
@@ -15,19 +13,23 @@
   "license": "MIT",
   "scripts": {
     "build": "just-scripts build",
-    "bundle": "just-scripts bundle",
+    "bundle-size": "bundle-size measure",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
     "lint": "just-scripts lint",
-    "start": "just-scripts dev:storybook",
-    "start-test": "just-scripts jest-watch",
-    "test": "just-scripts test",
-    "update-snapshots": "just-scripts jest -u"
+    "start": "yarn storybook",
+    "test": "jest",
+    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
+    "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-image/src && yarn docs",
+    "storybook": "start-storybook"
   },
   "devDependencies": {
-    "@fluentui/eslint-plugin": "^1.0.1",
-    "@fluentui/react-conformance": "^0.2.3",
+    "@fluentui/babel-make-styles": "9.0.0-alpha.60",
+    "@fluentui/eslint-plugin": "*",
+    "@fluentui/jest-serializer-make-styles": "9.0.0-alpha.53",
+    "@fluentui/react-conformance": "*",
+    "@fluentui/react-conformance-make-styles": "9.0.0-alpha.22",
     "@fluentui/scripts": "^1.0.0",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
@@ -38,16 +40,13 @@
     "enzyme": "~3.10.0",
     "enzyme-adapter-react-16": "^1.15.0",
     "react": "16.8.6",
-    "react-app-polyfill": "~1.0.1",
     "react-dom": "16.8.6",
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react-make-styles": "^9.0.0-alpha.9",
-    "@fluentui/react-utilities": "^9.0.0-alpha.7",
-    "@microsoft/load-themed-styles": "^1.10.26",
-    "object-fit-images": "^3.2.4",
-    "tslib": "^1.10.0"
+    "@fluentui/react-make-styles": "9.0.0-alpha.78",
+    "@fluentui/react-utilities": "9.0.0-alpha.56",
+    "tslib": "^2.1.0"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0 <18.0.0",

package/config/api-extractor.json

@@ -1,3 +0,0 @@
-{
-  "extends": "@fluentui/scripts/api-extractor/api-extractor.common.json"
-}

package/config/tests.js

@@ -1,6 +0,0 @@
-/** Jest test setup file. */
-const { configure } = require('enzyme');
-const Adapter = require('enzyme-adapter-react-16');
-
-// Configure enzyme.
-configure({ adapter: new Adapter() });

package/etc/react-image.api.md

@@ -1,45 +0,0 @@
-## API Report File for "@fluentui/react-image"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-import { ComponentProps } from '@fluentui/react-utilities';
-import * as React from 'react';
-
-// @public (undocumented)
-export const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLElement>>;
-
-// @public (undocumented)
-export interface ImageProps extends ComponentProps, React.ImgHTMLAttributes<HTMLImageElement> {
-    alt?: string;
-    bordered?: boolean;
-    circular?: boolean;
-    fit?: 'none' | 'center' | 'contain' | 'cover';
-    fluid?: boolean;
-    rounded?: boolean;
-    src?: string;
-}
-
-// @public (undocumented)
-export interface ImageState extends ImageProps {
-    // (undocumented)
-    ref: React.RefObject<HTMLImageElement>;
-}
-
-// @public
-export const renderImage: (state: ImageState) => JSX.Element;
-
-// @public
-export const useImage: (props: ImageProps, ref: React.Ref<HTMLElement>, defaultProps?: ImageProps | undefined) => ImageState;
-
-// @public (undocumented)
-export const useImageStyles: (state: ImageState) => void;
-
-// @public (undocumented)
-export const useRootStyles: (selectors: ImageState) => string;
-
-
-// (No @packageDocumentation comment for this package)
-
-```

package/just.config.ts

@@ -1,3 +0,0 @@
-import { preset } from '@fluentui/scripts';
-
-preset();

package/lib-amd/Image.d.ts

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

package/lib-amd/Image.js

@@ -1,6 +0,0 @@
-define(["require", "exports", "tslib", "./components/Image/index"], function (require, exports, tslib_1, index_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    tslib_1.__exportStar(index_1, exports);
-});
-//# sourceMappingURL=Image.js.map

package/lib-amd/Image.js.map

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

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

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

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

@@ -1,11 +0,0 @@
-define(["require", "exports", "react", "./renderImage", "./useImage", "./useImageStyles"], function (require, exports, React, renderImage_1, useImage_1, useImageStyles_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.Image = React.forwardRef(function (props, ref) {
-        var state = useImage_1.useImage(props, ref);
-        useImageStyles_1.useImageStyles(state);
-        return renderImage_1.renderImage(state);
-    });
-    exports.Image.displayName = 'Image';
-});
-//# sourceMappingURL=Image.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Image.js","sourceRoot":"../src/","sources":["components/Image/Image.tsx"],"names":[],"mappings":";;;IAMa,QAAA,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,UAAC,KAAiB,EAAE,GAA2B;QACnF,IAAM,KAAK,GAAG,mBAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QACnC,+BAAc,CAAC,KAAK,CAAC,CAAC;QAEtB,OAAO,yBAAW,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,aAAK,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"]}

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

@@ -1,35 +0,0 @@
-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;
-    /**
-     * 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.
-     */
-    fluid?: boolean;
-    /**
-     * An image can appear circular.
-     */
-    circular?: boolean;
-    /**
-     * An image can appear rounded.
-     */
-    rounded?: boolean;
-    /**
-     * An image can have source URL.
-     */
-    src?: string;
-}
-export interface ImageState extends ImageProps {
-    ref: React.RefObject<HTMLImageElement>;
-}

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

@@ -1,5 +0,0 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-});
-//# sourceMappingURL=Image.types.js.map

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

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

package/lib-amd/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-amd/components/Image/index.js

@@ -1,9 +0,0 @@
-define(["require", "exports", "tslib", "./Image", "./renderImage", "./useImage", "./useImageStyles"], function (require, exports, tslib_1, Image_1, renderImage_1, useImage_1, useImageStyles_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    tslib_1.__exportStar(Image_1, exports);
-    tslib_1.__exportStar(renderImage_1, exports);
-    tslib_1.__exportStar(useImage_1, exports);
-    tslib_1.__exportStar(useImageStyles_1, exports);
-});
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Image/index.ts"],"names":[],"mappings":";;;IACA,uCAAwB;IACxB,6CAA8B;IAC9B,0CAA2B;IAC3B,gDAAiC","sourcesContent":["export * from './Image.types';\nexport * from './Image';\nexport * from './renderImage';\nexport * from './useImage';\nexport * from './useImageStyles';\n"]}

package/lib-amd/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: (state: ImageState) => JSX.Element;

package/lib-amd/components/Image/renderImage.js

@@ -1,13 +0,0 @@
-define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * Define the render function.
-     * Given the state of an image, renders it.
-     */
-    exports.renderImage = function (state) {
-        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
-        return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root));
-    };
-});
-//# sourceMappingURL=renderImage.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"renderImage.js","sourceRoot":"../src/","sources":["components/Image/renderImage.tsx"],"names":[],"mappings":";;;IAIA;;;OAGG;IACU,QAAA,WAAW,GAAG,UAAC,KAAiB;QACrC,IAAA,sCAAsC,EAApC,gBAAK,EAAE,wBAA6B,CAAC;QAE7C,OAAO,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CAAC;IAC5C,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"]}

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

@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { 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<HTMLElement>, defaultProps?: ImageProps | undefined) => ImageState;

package/lib-amd/components/Image/useImage.js

@@ -1,30 +0,0 @@
-define(["require", "exports", "react", "object-fit-images", "@fluentui/react-utilities"], function (require, exports, React, object_fit_images_1, react_utilities_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var mergeProps = react_utilities_1.makeMergeProps();
-    var isFitSupported = (function () {
-        var testImg = new Image();
-        return 'object-fit' in testImg.style && 'object-position' in testImg.style;
-    })();
-    /**
-     * Given user props, returns state and render function for an Image.
-     */
-    exports.useImage = function (props, ref, defaultProps) {
-        var resolvedRef = react_utilities_1.useMergedRefs(ref, React.useRef(null));
-        var state = mergeProps({
-            ref: resolvedRef,
-            as: 'img',
-        }, defaultProps, react_utilities_1.resolveShorthandProps(props, []));
-        React.useEffect(function () {
-            if (!isFitSupported) {
-                object_fit_images_1.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;
-    };
-});
-//# sourceMappingURL=useImage.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useImage.js","sourceRoot":"../src/","sources":["components/Image/useImage.ts"],"names":[],"mappings":";;;IAOA,IAAM,UAAU,GAAG,gCAAc,EAAc,CAAC;IAEhD,IAAM,cAAc,GAAG,CAAC;QACtB,IAAM,OAAO,GAAG,IAAI,KAAK,EAAE,CAAC;QAE5B,OAAO,YAAY,IAAI,OAAO,CAAC,KAAK,IAAI,iBAAiB,IAAI,OAAO,CAAC,KAAK,CAAC;IAC7E,CAAC,CAAC,EAAE,CAAC;IAEL;;OAEG;IACU,QAAA,QAAQ,GAAG,UAAC,KAAiB,EAAE,GAA2B,EAAE,YAAyB;QAChG,IAAM,WAAW,GAAG,+BAAa,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;QAC3D,IAAM,KAAK,GAAG,UAAU,CACtB;YACE,GAAG,EAAE,WAAW;YAChB,EAAE,EAAE,KAAK;SACV,EACD,YAAY,EACZ,uCAAqB,CAAC,KAAK,EAAE,EAAE,CAAC,CACjC,CAAC;QAEF,KAAK,CAAC,SAAS,CACb;YACE,IAAI,CAAC,cAAc,EAAE;gBACnB,mCAAe,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;aACpC;QACH,CAAC;QACD,wDAAwD;QACxD,uDAAuD;QACvD,EAAE,CACH,CAAC;QAEF,KAAK,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC,GAAG,IAAI,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;QAE7E,OAAO,KAAK,CAAC;IACf,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"]}

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

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

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

@@ -1,82 +0,0 @@
-define(["require", "exports", "@fluentui/react-make-styles"], function (require, exports, react_make_styles_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useRootStyles = react_make_styles_1.makeStylesCompat([
-        [
-            null,
-            function (theme) { return ({
-                borderColor: theme.alias.color.neutral.neutralStroke1,
-                borderRadius: theme.global.borderRadius.none,
-                boxShadow: theme.alias.shadow.shadow4,
-                boxSizing: 'border-box',
-                display: 'inline-block',
-            }); },
-        ],
-        [
-            function (props) { return props.bordered; },
-            function (theme) { return ({
-                borderStyle: 'solid',
-                borderWidth: theme.global.strokeWidth.thin,
-            }); },
-        ],
-        [
-            function (props) { return props.circular; },
-            function (theme) { return ({
-                borderRadius: theme.global.borderRadius.circular,
-            }); },
-        ],
-        [
-            function (props) { return props.rounded; },
-            function (theme) { return ({
-                borderRadius: theme.global.borderRadius.medium,
-            }); },
-        ],
-        [
-            function (props) { return props.fit === 'none'; },
-            {
-                objectFit: 'none',
-                objectPosition: 'left top',
-                height: '100%',
-                width: '100%',
-            },
-        ],
-        [
-            function (props) { return props.fit === 'center'; },
-            {
-                objectFit: 'none',
-                objectPosition: 'center',
-                height: '100%',
-                width: '100%',
-            },
-        ],
-        [
-            function (props) { return props.fit === 'cover'; },
-            {
-                objectFit: 'cover',
-                objectPosition: 'center',
-                height: '100%',
-                width: '100%',
-            },
-        ],
-        [
-            function (props) { return props.fit === 'contain'; },
-            {
-                objectFit: 'contain',
-                objectPosition: 'center',
-                height: '100%',
-                width: '100%',
-            },
-        ],
-        [
-            function (props) { return props.fluid; },
-            {
-                width: '100%',
-            },
-        ],
-    ]);
-    exports.useImageStyles = function (state) {
-        var rootClassName = exports.useRootStyles(state);
-        state.className = react_make_styles_1.ax(rootClassName, state.className);
-    };
-});
-//# sourceMappingURL=useImageStyles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useImageStyles.js","sourceRoot":"../src/","sources":["components/Image/useImageStyles.ts"],"names":[],"mappings":";;;IAGa,QAAA,aAAa,GAAG,oCAAgB,CAAa;QACxD;YACE,IAAI;YACJ,UAAA,KAAK,IAAI,OAAA,CAAC;gBACR,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;gBACrD,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI;gBAC5C,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;gBAErC,SAAS,EAAE,YAAY;gBACvB,OAAO,EAAE,cAAc;aACxB,CAAC,EAPO,CAOP;SACH;QACD;YACE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,QAAQ,EAAd,CAAc;YACvB,UAAA,KAAK,IAAI,OAAA,CAAC;gBACR,WAAW,EAAE,OAAO;gBACpB,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI;aAC3C,CAAC,EAHO,CAGP;SACH;QACD;YACE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,QAAQ,EAAd,CAAc;YACvB,UAAA,KAAK,IAAI,OAAA,CAAC;gBACR,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ;aACjD,CAAC,EAFO,CAEP;SACH;QACD;YACE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,OAAO,EAAb,CAAa;YACtB,UAAA,KAAK,IAAI,OAAA,CAAC;gBACR,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM;aAC/C,CAAC,EAFO,CAEP;SACH;QACD;YACE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,GAAG,KAAK,MAAM,EAApB,CAAoB;YAC7B;gBACE,SAAS,EAAE,MAAM;gBACjB,cAAc,EAAE,UAAU;gBAC1B,MAAM,EAAE,MAAM;gBACd,KAAK,EAAE,MAAM;aAId;SACF;QACD;YACE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAtB,CAAsB;YAC/B;gBACE,SAAS,EAAE,MAAM;gBACjB,cAAc,EAAE,QAAQ;gBACxB,MAAM,EAAE,MAAM;gBACd,KAAK,EAAE,MAAM;aAId;SACF;QACD;YACE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,GAAG,KAAK,OAAO,EAArB,CAAqB;YAC9B;gBACE,SAAS,EAAE,OAAO;gBAClB,cAAc,EAAE,QAAQ;gBACxB,MAAM,EAAE,MAAM;gBACd,KAAK,EAAE,MAAM;aAId;SACF;QACD;YACE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,GAAG,KAAK,SAAS,EAAvB,CAAuB;YAChC;gBACE,SAAS,EAAE,SAAS;gBACpB,cAAc,EAAE,QAAQ;gBACxB,MAAM,EAAE,MAAM;gBACd,KAAK,EAAE,MAAM;aAId;SACF;QACD;YACE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,KAAK,EAAX,CAAW;YACpB;gBACE,KAAK,EAAE,MAAM;aACd;SACF;KACF,CAAC,CAAC;IAEU,QAAA,cAAc,GAAG,UAAC,KAAiB;QAC9C,IAAM,aAAa,GAAG,qBAAa,CAAC,KAAK,CAAC,CAAC;QAC3C,KAAK,CAAC,SAAS,GAAG,sBAAE,CAAC,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IACvD,CAAC,CAAC","sourcesContent":["import { makeStylesCompat, ax } from '@fluentui/react-make-styles';\nimport { ImageState } from './Image.types';\n\nexport const useRootStyles = makeStylesCompat<ImageState>([\n  [\n    null,\n    theme => ({\n      borderColor: theme.alias.color.neutral.neutralStroke1,\n      borderRadius: theme.global.borderRadius.none,\n      boxShadow: theme.alias.shadow.shadow4,\n\n      boxSizing: 'border-box',\n      display: 'inline-block',\n    }),\n  ],\n  [\n    props => props.bordered,\n    theme => ({\n      borderStyle: 'solid',\n      borderWidth: theme.global.strokeWidth.thin,\n    }),\n  ],\n  [\n    props => props.circular,\n    theme => ({\n      borderRadius: theme.global.borderRadius.circular,\n    }),\n  ],\n  [\n    props => props.rounded,\n    theme => ({\n      borderRadius: theme.global.borderRadius.medium,\n    }),\n  ],\n  [\n    props => props.fit === 'none',\n    {\n      objectFit: 'none',\n      objectPosition: 'left top',\n      height: '100%',\n      width: '100%',\n\n      // TODO IE 11\n      // font-family: 'object-fit: none; object-position: left top;',\n    },\n  ],\n  [\n    props => props.fit === 'center',\n    {\n      objectFit: 'none',\n      objectPosition: 'center',\n      height: '100%',\n      width: '100%',\n\n      // TODO IE 11\n      // font-family: 'object-fit: none; object-position: center;',\n    },\n  ],\n  [\n    props => props.fit === 'cover',\n    {\n      objectFit: 'cover',\n      objectPosition: 'center',\n      height: '100%',\n      width: '100%',\n\n      // TODO IE 11\n      // font-family: 'object-fit: cover; object-position: center;',\n    },\n  ],\n  [\n    props => props.fit === 'contain',\n    {\n      objectFit: 'contain',\n      objectPosition: 'center',\n      height: '100%',\n      width: '100%',\n\n      // TODO IE 11\n      // font-family: 'object-fit: contain; object-position: center;',\n    },\n  ],\n  [\n    props => props.fluid,\n    {\n      width: '100%',\n    },\n  ],\n]);\n\nexport const useImageStyles = (state: ImageState) => {\n  const rootClassName = useRootStyles(state);\n  state.className = ax(rootClassName, state.className);\n};\n"]}

package/lib-amd/index.d.ts

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

package/lib-amd/index.js

@@ -1,6 +0,0 @@
-define(["require", "exports", "tslib", "./Image"], function (require, exports, tslib_1, Image_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    tslib_1.__exportStar(Image_1, exports);
-});
-//# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

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