@atlaskit/image 2.0.0 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/image
 
+## 3.0.0
+
+### Major Changes
+
+- [#130672](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/130672)
+  [`c92554212ded6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c92554212ded6) -
+  Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
+  the rest of the Atlaskit techstack, and support React 18 Streaming SSR. Please note, in order to
+  use this version of `@atlaskit/image`, you will need to ensure that your bundler is configured to
+  handle `.css` imports correctly.
+
+  Removed `--img-source` and `--img-source-dark` CSS variables and `content` CSS property from
+  `<img>` since the `content` values were invalid before.
+
+  Most bundlers come with built-in support for `.css` imports, so you may not need to do anything.
+  If you are using a different bundler, please refer to the documentation for that bundler to
+  understand how to handle `.css` imports. For more information on the migration, please refer to
+  [RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
+
 ## 2.0.0
 
 ### Major Changes

package/dist/cjs/ui/image/index.compiled.css

@@ -0,0 +1,2 @@
+._4t3i1wug{height:auto}
+._p12f1osq{max-width:100%}

package/dist/cjs/ui/image/index.js

@@ -1,33 +1,24 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Image;
+require("./index.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
 var _appProvider = require("@atlaskit/app-provider");
 var _tokens = require("@atlaskit/tokens");
-var _excluded = ["src", "srcDark", "alt", "testId"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var baseImageStyles = (0, _react2.css)({
-  maxWidth: '100%',
-  height: 'auto'
-});
-var themedImageStyles = (0, _react2.css)({
-  content: "url(var(--img-source))",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  'html[data-color-mode=dark] &': {
-    content: "var(--img-source-dark)"
-  }
-});
+var _excluded = ["src", "srcDark", "alt", "testId", "className"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var baseImageStyles = null;
 
 /**
  * __Image__
@@ -43,6 +34,7 @@ function Image(_ref) {
     srcDark = _ref.srcDark,
     alt = _ref.alt,
     testId = _ref.testId,
+    className = _ref.className,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var imgRef = (0, _react.useRef)(null);
   var providedColorMode = (0, _appProvider.UNSAFE_useColorModeForMigration)();
@@ -59,17 +51,12 @@ function Image(_ref) {
       imgRef.current.src = src;
     }
   }, [src, srcDark, colorMode]);
-  return (0, _react2.jsx)("img", (0, _extends2.default)({
+  return /*#__PURE__*/React.createElement("img", (0, _extends2.default)({
     alt: alt,
     "data-testid": testId,
-    src: src
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: {
-      '--img-source': src,
-      '--img-source-dark': srcDark || src
-    },
-    css: [baseImageStyles, themedImageStyles],
+    src: src,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: (0, _runtime.ax)(["_p12f1osq _4t3i1wug", className]),
     ref: imgRef
     // The spread operator is necessary since the component can accept all the props of an `img` element.
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props

package/dist/es2019/ui/image/index.compiled.css

@@ -0,0 +1,2 @@
+._4t3i1wug{height:auto}
+._p12f1osq{max-width:100%}

package/dist/es2019/ui/image/index.js

@@ -1,25 +1,12 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useEffect, useRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { UNSAFE_useColorModeForMigration } from '@atlaskit/app-provider';
 import { useThemeObserver } from '@atlaskit/tokens';
-const baseImageStyles = css({
-  maxWidth: '100%',
-  height: 'auto'
-});
-const themedImageStyles = css({
-  content: `url(var(--img-source))`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  'html[data-color-mode=dark] &': {
-    content: `var(--img-source-dark)`
-  }
-});
+const baseImageStyles = null;
 
 /**
  * __Image__
@@ -35,6 +22,7 @@ export default function Image({
   srcDark,
   alt,
   testId,
+  className,
   ...props
 }) {
   const imgRef = useRef(null);
@@ -53,17 +41,12 @@ export default function Image({
       imgRef.current.src = src;
     }
   }, [src, srcDark, colorMode]);
-  return jsx("img", _extends({
+  return /*#__PURE__*/React.createElement("img", _extends({
     alt: alt,
     "data-testid": testId,
-    src: src
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: {
-      '--img-source': src,
-      '--img-source-dark': srcDark || src
-    },
-    css: [baseImageStyles, themedImageStyles],
+    src: src,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: ax(["_p12f1osq _4t3i1wug", className]),
     ref: imgRef
     // The spread operator is necessary since the component can accept all the props of an `img` element.
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props

package/dist/esm/ui/image/index.compiled.css

@@ -0,0 +1,2 @@
+._4t3i1wug{height:auto}
+._p12f1osq{max-width:100%}

package/dist/esm/ui/image/index.js

@@ -1,27 +1,14 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["src", "srcDark", "alt", "testId"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+var _excluded = ["src", "srcDark", "alt", "testId", "className"];
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useEffect, useRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { UNSAFE_useColorModeForMigration } from '@atlaskit/app-provider';
 import { useThemeObserver } from '@atlaskit/tokens';
-var baseImageStyles = css({
-  maxWidth: '100%',
-  height: 'auto'
-});
-var themedImageStyles = css({
-  content: "url(var(--img-source))",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  'html[data-color-mode=dark] &': {
-    content: "var(--img-source-dark)"
-  }
-});
+var baseImageStyles = null;
 
 /**
  * __Image__
@@ -37,6 +24,7 @@ export default function Image(_ref) {
     srcDark = _ref.srcDark,
     alt = _ref.alt,
     testId = _ref.testId,
+    className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
   var imgRef = useRef(null);
   var providedColorMode = UNSAFE_useColorModeForMigration();
@@ -53,17 +41,12 @@ export default function Image(_ref) {
       imgRef.current.src = src;
     }
   }, [src, srcDark, colorMode]);
-  return jsx("img", _extends({
+  return /*#__PURE__*/React.createElement("img", _extends({
     alt: alt,
     "data-testid": testId,
-    src: src
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: {
-      '--img-source': src,
-      '--img-source-dark': srcDark || src
-    },
-    css: [baseImageStyles, themedImageStyles],
+    src: src,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: ax(["_p12f1osq _4t3i1wug", className]),
     ref: imgRef
     // The spread operator is necessary since the component can accept all the props of an `img` element.
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props

package/dist/types/ui/image/index.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { jsx } from '@emotion/react';
 interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
     /**
      * Image URL to use for dark mode. This overrides `src` when the user
@@ -22,5 +21,5 @@ interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
  * - [Code](https://atlassian.design/components/image/code)
  * - [Usage](https://atlassian.design/components/image/usage)
  */
-export default function Image({ src, srcDark, alt, testId, ...props }: ImageProps): jsx.JSX.Element;
+export default function Image({ src, srcDark, alt, testId, className, ...props }: ImageProps): JSX.Element;
 export {};

package/dist/types-ts4.5/ui/image/index.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { jsx } from '@emotion/react';
 interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
     /**
      * Image URL to use for dark mode. This overrides `src` when the user
@@ -22,5 +21,5 @@ interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
  * - [Code](https://atlassian.design/components/image/code)
  * - [Usage](https://atlassian.design/components/image/usage)
  */
-export default function Image({ src, srcDark, alt, testId, ...props }: ImageProps): jsx.JSX.Element;
+export default function Image({ src, srcDark, alt, testId, className, ...props }: ImageProps): JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/image",
-	"version": "2.0.0",
+	"version": "3.0.0",
 	"description": "An image that changes in light or dark themes.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -28,24 +28,24 @@
 		"runReact18": true
 	},
 	"dependencies": {
-		"@atlaskit/app-provider": "2.0.0",
-		"@atlaskit/tokens": "^4.0.0",
+		"@atlaskit/app-provider": "^2.0.0",
+		"@atlaskit/tokens": "^4.5.0",
 		"@babel/runtime": "^7.0.0",
-		"@emotion/react": "^11.7.1"
+		"@compiled/react": "^0.18.3"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
-		"@af/accessibility-testing": "*",
-		"@af/integration-testing": "*",
-		"@af/visual-regression": "*",
-		"@atlaskit/docs": "*",
+		"@af/accessibility-testing": "^2.0.0",
+		"@af/integration-testing": "^0.5.0",
+		"@af/visual-regression": "^1.3.0",
+		"@atlaskit/docs": "^10.0.0",
 		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/link": "*",
-		"@atlaskit/primitives": "^14.0.0",
-		"@atlaskit/section-message": "*",
-		"@atlaskit/ssr": "*",
+		"@atlaskit/link": "^3.0.0",
+		"@atlaskit/primitives": "^14.2.0",
+		"@atlaskit/section-message": "^8.2.0",
+		"@atlaskit/ssr": "^0.4.0",
 		"@testing-library/react": "^13.4.0",
 		"react-dom": "^18.2.0",
 		"typescript": "~5.4.2"