@atlaskit/image 1.2.0 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/image
 
+## 1.2.1
+
+### Patch Changes
+
+-   [#89307](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/89307)
+    [`47cdc66371fb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/47cdc66371fb) -
+    [ux] Fix bug where images flickered in dark mode. Source URLs are now set based on the current
+    theme before first paint.
+-   Updated dependencies
+
 ## 1.2.0
 
 ### Minor Changes

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

@@ -9,13 +9,21 @@ 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"];
 /** @jsx jsx */
-var imageStyles = (0, _react2.css)({
+var baseImageStyles = (0, _react2.css)({
   maxWidth: '100%',
   height: 'auto'
 });
+var themedImageStyles = (0, _react2.css)({
+  content: "var(--img-source)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'html[data-color-mode=dark] &': {
+    content: "var(--img-source-dark)"
+  }
+});
 
 /**
  * __Image__
@@ -33,8 +41,10 @@ function Image(_ref) {
     testId = _ref.testId,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var imgRef = (0, _react.useRef)(null);
+  var providedColorMode = (0, _appProvider.UNSAFE_useColorModeForMigration)();
   var _useThemeObserver = (0, _tokens.useThemeObserver)(),
-    colorMode = _useThemeObserver.colorMode;
+    observedColorMode = _useThemeObserver.colorMode;
+  var colorMode = providedColorMode || observedColorMode;
   (0, _react.useEffect)(function () {
     if (imgRef === null || imgRef.current === null) {
       return;
@@ -47,9 +57,13 @@ function Image(_ref) {
   }, [src, srcDark, colorMode]);
   return (0, _react2.jsx)("img", (0, _extends2.default)({
     alt: alt,
-    css: imageStyles,
     "data-testid": testId,
     src: src,
+    style: {
+      '--img-source': "url(".concat(src, ")"),
+      '--img-source-dark': "url(".concat(srcDark || src, ")")
+    },
+    css: [baseImageStyles, themedImageStyles],
     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.js

@@ -2,11 +2,19 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
+import { UNSAFE_useColorModeForMigration } from '@atlaskit/app-provider';
 import { useThemeObserver } from '@atlaskit/tokens';
-const imageStyles = css({
+const baseImageStyles = css({
   maxWidth: '100%',
   height: 'auto'
 });
+const themedImageStyles = css({
+  content: `var(--img-source)`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'html[data-color-mode=dark] &': {
+    content: `var(--img-source-dark)`
+  }
+});
 
 /**
  * __Image__
@@ -25,9 +33,11 @@ export default function Image({
   ...props
 }) {
   const imgRef = useRef(null);
+  const providedColorMode = UNSAFE_useColorModeForMigration();
   const {
-    colorMode
+    colorMode: observedColorMode
   } = useThemeObserver();
+  const colorMode = providedColorMode || observedColorMode;
   useEffect(() => {
     if (imgRef === null || imgRef.current === null) {
       return;
@@ -40,9 +50,13 @@ export default function Image({
   }, [src, srcDark, colorMode]);
   return jsx("img", _extends({
     alt: alt,
-    css: imageStyles,
     "data-testid": testId,
     src: src,
+    style: {
+      '--img-source': `url(${src})`,
+      '--img-source-dark': `url(${srcDark || src})`
+    },
+    css: [baseImageStyles, themedImageStyles],
     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.js

@@ -4,11 +4,19 @@ var _excluded = ["src", "srcDark", "alt", "testId"];
 /** @jsx jsx */
 import { useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
+import { UNSAFE_useColorModeForMigration } from '@atlaskit/app-provider';
 import { useThemeObserver } from '@atlaskit/tokens';
-var imageStyles = css({
+var baseImageStyles = css({
   maxWidth: '100%',
   height: 'auto'
 });
+var themedImageStyles = css({
+  content: "var(--img-source)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'html[data-color-mode=dark] &': {
+    content: "var(--img-source-dark)"
+  }
+});
 
 /**
  * __Image__
@@ -26,8 +34,10 @@ export default function Image(_ref) {
     testId = _ref.testId,
     props = _objectWithoutProperties(_ref, _excluded);
   var imgRef = useRef(null);
+  var providedColorMode = UNSAFE_useColorModeForMigration();
   var _useThemeObserver = useThemeObserver(),
-    colorMode = _useThemeObserver.colorMode;
+    observedColorMode = _useThemeObserver.colorMode;
+  var colorMode = providedColorMode || observedColorMode;
   useEffect(function () {
     if (imgRef === null || imgRef.current === null) {
       return;
@@ -40,9 +50,13 @@ export default function Image(_ref) {
   }, [src, srcDark, colorMode]);
   return jsx("img", _extends({
     alt: alt,
-    css: imageStyles,
     "data-testid": testId,
     src: src,
+    style: {
+      '--img-source': "url(".concat(src, ")"),
+      '--img-source-dark': "url(".concat(srcDark || src, ")")
+    },
+    css: [baseImageStyles, themedImageStyles],
     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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/image",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "An image that changes in light or dark themes.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,8 @@
     "runReact18": true
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.45.0",
+    "@atlaskit/app-provider": "1.3.2",
+    "@atlaskit/tokens": "^1.49.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },