@atlaskit/image 1.1.7 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +68 -18
  2. package/dist/cjs/ui/image/index.js +17 -3
  3. package/dist/es2019/ui/image/index.js +17 -3
  4. package/dist/esm/ui/image/index.js +17 -3
  5. package/package.json +6 -4
package/CHANGELOG.md CHANGED
@@ -1,100 +1,150 @@
1
1
  # @atlaskit/image
2
2
 
3
+ ## 1.2.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#89307](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/89307)
8
+ [`47cdc66371fb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/47cdc66371fb) -
9
+ [ux] Fix bug where images flickered in dark mode. Source URLs are now set based on the current
10
+ theme before first paint.
11
+ - Updated dependencies
12
+
13
+ ## 1.2.0
14
+
15
+ ### Minor Changes
16
+
17
+ - [#96499](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/96499)
18
+ [`d9a3724cdeb8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d9a3724cdeb8) -
19
+ Add support for React 18.
20
+
3
21
  ## 1.1.7
4
22
 
5
23
  ### Patch Changes
6
24
 
7
- - [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116) [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) - Upgrade Typescript from `4.9.5` to `5.4.2`
25
+ - [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116)
26
+ [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) -
27
+ Upgrade Typescript from `4.9.5` to `5.4.2`
8
28
 
9
29
  ## 1.1.6
10
30
 
11
31
  ### Patch Changes
12
32
 
13
- - [#38487](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38487) [`b2da5b33468`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b2da5b33468) - Documents that props like `css` and `className` are unsafe and will be deprecated in the future.
33
+ - [#38487](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38487)
34
+ [`b2da5b33468`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b2da5b33468) -
35
+ Documents that props like `css` and `className` are unsafe and will be deprecated in the future.
14
36
 
15
37
  ## 1.1.5
16
38
 
17
39
  ### Patch Changes
18
40
 
19
- - [#36754](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/36754) [`4ae083a7e66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ae083a7e66) - Use `@af/accessibility-testing` for default jest-axe config and jest-axe import in accessibility testing.
41
+ - [#36754](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/36754)
42
+ [`4ae083a7e66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ae083a7e66) - Use
43
+ `@af/accessibility-testing` for default jest-axe config and jest-axe import in accessibility
44
+ testing.
20
45
 
21
46
  ## 1.1.4
22
47
 
23
48
  ### Patch Changes
24
49
 
25
- - [#34853](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34853) [`d0a020ae050`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d0a020ae050) - Basic accessibility unit tests with jest-axe
50
+ - [#34853](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34853)
51
+ [`d0a020ae050`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d0a020ae050) - Basic
52
+ accessibility unit tests with jest-axe
26
53
 
27
54
  ## 1.1.3
28
55
 
29
56
  ### Patch Changes
30
57
 
31
- - [#32935](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32935) [`b1bdec7cce2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1bdec7cce2) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
58
+ - [#32935](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32935)
59
+ [`b1bdec7cce2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1bdec7cce2) -
60
+ Internal change to enforce token usage for spacing properties. There is no expected visual or
61
+ behaviour change.
32
62
 
33
63
  ## 1.1.2
34
64
 
35
65
  ### Patch Changes
36
66
 
37
- - [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793) [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
67
+ - [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793)
68
+ [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure
69
+ legacy types are published for TS 4.5-4.8
38
70
 
39
71
  ## 1.1.1
40
72
 
41
73
  ### Patch Changes
42
74
 
43
- - [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649) [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
75
+ - [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649)
76
+ [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) -
77
+ Upgrade Typescript from `4.5.5` to `4.9.5`
44
78
 
45
79
  ## 1.1.0
46
80
 
47
81
  ### Minor Changes
48
82
 
49
- - [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258) [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
83
+ - [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258)
84
+ [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip
85
+ minor dependency bump
50
86
 
51
87
  ### Patch Changes
52
88
 
53
- - Updated dependencies
89
+ - Updated dependencies
54
90
 
55
91
  ## 1.0.4
56
92
 
57
93
  ### Patch Changes
58
94
 
59
- - [#27634](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27634) [`718d5ad3044`](https://bitbucket.org/atlassian/atlassian-frontend/commits/718d5ad3044) - Updates to support the new `@atlaskit/tokens` theming API.
60
- - Updated dependencies
95
+ - [#27634](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27634)
96
+ [`718d5ad3044`](https://bitbucket.org/atlassian/atlassian-frontend/commits/718d5ad3044) -
97
+ Updates to support the new `@atlaskit/tokens` theming API.
98
+ - Updated dependencies
61
99
 
62
100
  ## 1.0.3
63
101
 
64
102
  ### Patch Changes
65
103
 
66
- - Updated dependencies
104
+ - Updated dependencies
67
105
 
68
106
  ## 1.0.2
69
107
 
70
108
  ### Patch Changes
71
109
 
72
- - Updated dependencies
110
+ - Updated dependencies
73
111
 
74
112
  ## 1.0.1
75
113
 
76
114
  ### Patch Changes
77
115
 
78
- - [#28081](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/28081) [`98f5ba36c98`](https://bitbucket.org/atlassian/atlassian-frontend/commits/98f5ba36c98) - Updates atlaskit/image thumbnails + descriptions for the website
116
+ - [#28081](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/28081)
117
+ [`98f5ba36c98`](https://bitbucket.org/atlassian/atlassian-frontend/commits/98f5ba36c98) -
118
+ Updates atlaskit/image thumbnails + descriptions for the website
79
119
 
80
120
  ## 1.0.0
81
121
 
82
122
  ### Major Changes
83
123
 
84
- - [#28012](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/28012) [`bc74a5feb7d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc74a5feb7d) - This package is no longer experimental and the API is considered stable. Version contains no changes what so ever.
124
+ - [#28012](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/28012)
125
+ [`bc74a5feb7d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc74a5feb7d) - This
126
+ package is no longer experimental and the API is considered stable. Version contains no changes
127
+ what so ever.
85
128
 
86
129
  ## 0.2.1
87
130
 
88
131
  ### Patch Changes
89
132
 
90
- - [#27885](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27885) [`c674eafa051`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c674eafa051) - Fixes a bug where the system preference would override the default behaviour when the color-mode was not set to auto. As a result, an OS setting of "dark" and a product setting of "light" would result in a "dark" image.
133
+ - [#27885](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27885)
134
+ [`c674eafa051`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c674eafa051) - Fixes
135
+ a bug where the system preference would override the default behaviour when the color-mode was
136
+ not set to auto. As a result, an OS setting of "dark" and a product setting of "light" would
137
+ result in a "dark" image.
91
138
 
92
139
  ## 0.2.0
93
140
 
94
141
  ### Minor Changes
95
142
 
96
- - [#27046](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27046) [`8ab96dfc824`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8ab96dfc824) - Adds a new Image primitive that works like the native HTML img element, with the added functionality of being theme-aware.
143
+ - [#27046](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27046)
144
+ [`8ab96dfc824`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8ab96dfc824) - Adds a
145
+ new Image primitive that works like the native HTML img element, with the added functionality of
146
+ being theme-aware.
97
147
 
98
148
  ## 0.1.0
99
149
 
100
- - Create Image component with theme functionality.
150
+ - Create Image component with theme functionality.
package/dist/cjs/ui/image/index.js CHANGED
@@ -9,13 +9,21 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
9
9
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
10
  var _react = require("react");
11
11
  var _react2 = require("@emotion/react");
12
+ var _appProvider = require("@atlaskit/app-provider");
12
13
  var _tokens = require("@atlaskit/tokens");
13
14
  var _excluded = ["src", "srcDark", "alt", "testId"];
14
15
  /** @jsx jsx */
15
- var imageStyles = (0, _react2.css)({
16
+ var baseImageStyles = (0, _react2.css)({
16
17
  maxWidth: '100%',
17
18
  height: 'auto'
18
19
  });
20
+ var themedImageStyles = (0, _react2.css)({
21
+ content: "var(--img-source)",
22
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
23
+ 'html[data-color-mode=dark] &': {
24
+ content: "var(--img-source-dark)"
25
+ }
26
+ });
19
27
 
20
28
  /**
21
29
  * __Image__
@@ -33,8 +41,10 @@ function Image(_ref) {
33
41
  testId = _ref.testId,
34
42
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
35
43
  var imgRef = (0, _react.useRef)(null);
44
+ var providedColorMode = (0, _appProvider.UNSAFE_useColorModeForMigration)();
36
45
  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
37
- colorMode = _useThemeObserver.colorMode;
46
+ observedColorMode = _useThemeObserver.colorMode;
47
+ var colorMode = providedColorMode || observedColorMode;
38
48
  (0, _react.useEffect)(function () {
39
49
  if (imgRef === null || imgRef.current === null) {
40
50
  return;
@@ -47,9 +57,13 @@ function Image(_ref) {
47
57
  }, [src, srcDark, colorMode]);
48
58
  return (0, _react2.jsx)("img", (0, _extends2.default)({
49
59
  alt: alt,
50
- css: imageStyles,
51
60
  "data-testid": testId,
52
61
  src: src,
62
+ style: {
63
+ '--img-source': "url(".concat(src, ")"),
64
+ '--img-source-dark': "url(".concat(srcDark || src, ")")
65
+ },
66
+ css: [baseImageStyles, themedImageStyles],
53
67
  ref: imgRef
54
68
  // The spread operator is necessary since the component can accept all the props of an `img` element.
55
69
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
package/dist/es2019/ui/image/index.js CHANGED
@@ -2,11 +2,19 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  /** @jsx jsx */
3
3
  import { useEffect, useRef } from 'react';
4
4
  import { css, jsx } from '@emotion/react';
5
+ import { UNSAFE_useColorModeForMigration } from '@atlaskit/app-provider';
5
6
  import { useThemeObserver } from '@atlaskit/tokens';
6
- const imageStyles = css({
7
+ const baseImageStyles = css({
7
8
  maxWidth: '100%',
8
9
  height: 'auto'
9
10
  });
11
+ const themedImageStyles = css({
12
+ content: `var(--img-source)`,
13
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
14
+ 'html[data-color-mode=dark] &': {
15
+ content: `var(--img-source-dark)`
16
+ }
17
+ });
10
18
 
11
19
  /**
12
20
  * __Image__
@@ -25,9 +33,11 @@ export default function Image({
25
33
  ...props
26
34
  }) {
27
35
  const imgRef = useRef(null);
36
+ const providedColorMode = UNSAFE_useColorModeForMigration();
28
37
  const {
29
- colorMode
38
+ colorMode: observedColorMode
30
39
  } = useThemeObserver();
40
+ const colorMode = providedColorMode || observedColorMode;
31
41
  useEffect(() => {
32
42
  if (imgRef === null || imgRef.current === null) {
33
43
  return;
@@ -40,9 +50,13 @@ export default function Image({
40
50
  }, [src, srcDark, colorMode]);
41
51
  return jsx("img", _extends({
42
52
  alt: alt,
43
- css: imageStyles,
44
53
  "data-testid": testId,
45
54
  src: src,
55
+ style: {
56
+ '--img-source': `url(${src})`,
57
+ '--img-source-dark': `url(${srcDark || src})`
58
+ },
59
+ css: [baseImageStyles, themedImageStyles],
46
60
  ref: imgRef
47
61
  // The spread operator is necessary since the component can accept all the props of an `img` element.
48
62
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
package/dist/esm/ui/image/index.js CHANGED
@@ -4,11 +4,19 @@ var _excluded = ["src", "srcDark", "alt", "testId"];
4
4
  /** @jsx jsx */
5
5
  import { useEffect, useRef } from 'react';
6
6
  import { css, jsx } from '@emotion/react';
7
+ import { UNSAFE_useColorModeForMigration } from '@atlaskit/app-provider';
7
8
  import { useThemeObserver } from '@atlaskit/tokens';
8
- var imageStyles = css({
9
+ var baseImageStyles = css({
9
10
  maxWidth: '100%',
10
11
  height: 'auto'
11
12
  });
13
+ var themedImageStyles = css({
14
+ content: "var(--img-source)",
15
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
16
+ 'html[data-color-mode=dark] &': {
17
+ content: "var(--img-source-dark)"
18
+ }
19
+ });
12
20
 
13
21
  /**
14
22
  * __Image__
@@ -26,8 +34,10 @@ export default function Image(_ref) {
26
34
  testId = _ref.testId,
27
35
  props = _objectWithoutProperties(_ref, _excluded);
28
36
  var imgRef = useRef(null);
37
+ var providedColorMode = UNSAFE_useColorModeForMigration();
29
38
  var _useThemeObserver = useThemeObserver(),
30
- colorMode = _useThemeObserver.colorMode;
39
+ observedColorMode = _useThemeObserver.colorMode;
40
+ var colorMode = providedColorMode || observedColorMode;
31
41
  useEffect(function () {
32
42
  if (imgRef === null || imgRef.current === null) {
33
43
  return;
@@ -40,9 +50,13 @@ export default function Image(_ref) {
40
50
  }, [src, srcDark, colorMode]);
41
51
  return jsx("img", _extends({
42
52
  alt: alt,
43
- css: imageStyles,
44
53
  "data-testid": testId,
45
54
  src: src,
55
+ style: {
56
+ '--img-source': "url(".concat(src, ")"),
57
+ '--img-source-dark': "url(".concat(srcDark || src, ")")
58
+ },
59
+ css: [baseImageStyles, themedImageStyles],
46
60
  ref: imgRef
47
61
  // The spread operator is necessary since the component can accept all the props of an `img` element.
48
62
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/image",
3
- "version": "1.1.7",
3
+ "version": "1.2.1",
4
4
  "description": "An image that changes in light or dark themes.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -24,10 +24,12 @@
24
24
  "status": {
25
25
  "type": "beta"
26
26
  }
27
- }
27
+ },
28
+ "runReact18": true
28
29
  },
29
30
  "dependencies": {
30
- "@atlaskit/tokens": "^1.42.0",
31
+ "@atlaskit/app-provider": "1.3.2",
32
+ "@atlaskit/tokens": "^1.49.0",
31
33
  "@babel/runtime": "^7.0.0",
32
34
  "@emotion/react": "^11.7.1"
33
35
  },
@@ -38,7 +40,7 @@
38
40
  "@af/accessibility-testing": "*",
39
41
  "@af/integration-testing": "*",
40
42
  "@af/visual-regression": "*",
41
- "@atlaskit/ds-lib": "^2.2.0",
43
+ "@atlaskit/ds-lib": "^2.3.0",
42
44
  "@atlaskit/ssr": "*",
43
45
  "@atlaskit/visual-regression": "*",
44
46
  "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",