@atlaskit/image 1.2.0 → 1.2.2

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.
package/CHANGELOG.md CHANGED
@@ -1,140 +1,156 @@
1
1
  # @atlaskit/image
2
2
 
3
+ ## 1.2.2
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 1.2.1
10
+
11
+ ### Patch Changes
12
+
13
+ - [#89307](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/89307)
14
+ [`47cdc66371fb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/47cdc66371fb) -
15
+ [ux] Fix bug where images flickered in dark mode. Source URLs are now set based on the current
16
+ theme before first paint.
17
+ - Updated dependencies
18
+
3
19
  ## 1.2.0
4
20
 
5
21
  ### Minor Changes
6
22
 
7
- - [#96499](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/96499)
8
- [`d9a3724cdeb8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d9a3724cdeb8) -
9
- Add support for React 18.
23
+ - [#96499](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/96499)
24
+ [`d9a3724cdeb8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d9a3724cdeb8) -
25
+ Add support for React 18 in non-strict mode.
10
26
 
11
27
  ## 1.1.7
12
28
 
13
29
  ### Patch Changes
14
30
 
15
- - [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116)
16
- [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) -
17
- Upgrade Typescript from `4.9.5` to `5.4.2`
31
+ - [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116)
32
+ [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) -
33
+ Upgrade Typescript from `4.9.5` to `5.4.2`
18
34
 
19
35
  ## 1.1.6
20
36
 
21
37
  ### Patch Changes
22
38
 
23
- - [#38487](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38487)
24
- [`b2da5b33468`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b2da5b33468) -
25
- Documents that props like `css` and `className` are unsafe and will be deprecated in the future.
39
+ - [#38487](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38487)
40
+ [`b2da5b33468`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b2da5b33468) -
41
+ Documents that props like `css` and `className` are unsafe and will be deprecated in the future.
26
42
 
27
43
  ## 1.1.5
28
44
 
29
45
  ### Patch Changes
30
46
 
31
- - [#36754](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/36754)
32
- [`4ae083a7e66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ae083a7e66) - Use
33
- `@af/accessibility-testing` for default jest-axe config and jest-axe import in accessibility
34
- testing.
47
+ - [#36754](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/36754)
48
+ [`4ae083a7e66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ae083a7e66) - Use
49
+ `@af/accessibility-testing` for default jest-axe config and jest-axe import in accessibility
50
+ testing.
35
51
 
36
52
  ## 1.1.4
37
53
 
38
54
  ### Patch Changes
39
55
 
40
- - [#34853](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34853)
41
- [`d0a020ae050`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d0a020ae050) - Basic
42
- accessibility unit tests with jest-axe
56
+ - [#34853](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34853)
57
+ [`d0a020ae050`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d0a020ae050) - Basic
58
+ accessibility unit tests with jest-axe
43
59
 
44
60
  ## 1.1.3
45
61
 
46
62
  ### Patch Changes
47
63
 
48
- - [#32935](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32935)
49
- [`b1bdec7cce2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1bdec7cce2) -
50
- Internal change to enforce token usage for spacing properties. There is no expected visual or
51
- behaviour change.
64
+ - [#32935](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32935)
65
+ [`b1bdec7cce2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1bdec7cce2) - Internal
66
+ change to enforce token usage for spacing properties. There is no expected visual or behaviour
67
+ change.
52
68
 
53
69
  ## 1.1.2
54
70
 
55
71
  ### Patch Changes
56
72
 
57
- - [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793)
58
- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure
59
- legacy types are published for TS 4.5-4.8
73
+ - [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793)
74
+ [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure
75
+ legacy types are published for TS 4.5-4.8
60
76
 
61
77
  ## 1.1.1
62
78
 
63
79
  ### Patch Changes
64
80
 
65
- - [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649)
66
- [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) -
67
- Upgrade Typescript from `4.5.5` to `4.9.5`
81
+ - [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649)
82
+ [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade
83
+ Typescript from `4.5.5` to `4.9.5`
68
84
 
69
85
  ## 1.1.0
70
86
 
71
87
  ### Minor Changes
72
88
 
73
- - [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258)
74
- [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip
75
- minor dependency bump
89
+ - [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258)
90
+ [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip
91
+ minor dependency bump
76
92
 
77
93
  ### Patch Changes
78
94
 
79
- - Updated dependencies
95
+ - Updated dependencies
80
96
 
81
97
  ## 1.0.4
82
98
 
83
99
  ### Patch Changes
84
100
 
85
- - [#27634](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27634)
86
- [`718d5ad3044`](https://bitbucket.org/atlassian/atlassian-frontend/commits/718d5ad3044) -
87
- Updates to support the new `@atlaskit/tokens` theming API.
88
- - Updated dependencies
101
+ - [#27634](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27634)
102
+ [`718d5ad3044`](https://bitbucket.org/atlassian/atlassian-frontend/commits/718d5ad3044) - Updates
103
+ to support the new `@atlaskit/tokens` theming API.
104
+ - Updated dependencies
89
105
 
90
106
  ## 1.0.3
91
107
 
92
108
  ### Patch Changes
93
109
 
94
- - Updated dependencies
110
+ - Updated dependencies
95
111
 
96
112
  ## 1.0.2
97
113
 
98
114
  ### Patch Changes
99
115
 
100
- - Updated dependencies
116
+ - Updated dependencies
101
117
 
102
118
  ## 1.0.1
103
119
 
104
120
  ### Patch Changes
105
121
 
106
- - [#28081](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/28081)
107
- [`98f5ba36c98`](https://bitbucket.org/atlassian/atlassian-frontend/commits/98f5ba36c98) -
108
- Updates atlaskit/image thumbnails + descriptions for the website
122
+ - [#28081](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/28081)
123
+ [`98f5ba36c98`](https://bitbucket.org/atlassian/atlassian-frontend/commits/98f5ba36c98) - Updates
124
+ atlaskit/image thumbnails + descriptions for the website
109
125
 
110
126
  ## 1.0.0
111
127
 
112
128
  ### Major Changes
113
129
 
114
- - [#28012](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/28012)
115
- [`bc74a5feb7d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc74a5feb7d) - This
116
- package is no longer experimental and the API is considered stable. Version contains no changes
117
- what so ever.
130
+ - [#28012](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/28012)
131
+ [`bc74a5feb7d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc74a5feb7d) - This
132
+ package is no longer experimental and the API is considered stable. Version contains no changes
133
+ what so ever.
118
134
 
119
135
  ## 0.2.1
120
136
 
121
137
  ### Patch Changes
122
138
 
123
- - [#27885](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27885)
124
- [`c674eafa051`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c674eafa051) - Fixes
125
- a bug where the system preference would override the default behaviour when the color-mode was
126
- not set to auto. As a result, an OS setting of "dark" and a product setting of "light" would
127
- result in a "dark" image.
139
+ - [#27885](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27885)
140
+ [`c674eafa051`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c674eafa051) - Fixes a
141
+ bug where the system preference would override the default behaviour when the color-mode was not
142
+ set to auto. As a result, an OS setting of "dark" and a product setting of "light" would result in
143
+ a "dark" image.
128
144
 
129
145
  ## 0.2.0
130
146
 
131
147
  ### Minor Changes
132
148
 
133
- - [#27046](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27046)
134
- [`8ab96dfc824`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8ab96dfc824) - Adds a
135
- new Image primitive that works like the native HTML img element, with the added functionality of
136
- being theme-aware.
149
+ - [#27046](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27046)
150
+ [`8ab96dfc824`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8ab96dfc824) - Adds a
151
+ new Image primitive that works like the native HTML img element, with the added functionality of
152
+ being theme-aware.
137
153
 
138
154
  ## 0.1.0
139
155
 
140
- - Create Image component with theme functionality.
156
+ - Create Image component with theme functionality.
package/LICENSE.md CHANGED
@@ -1,13 +1,11 @@
1
1
  Copyright 2022 Atlassian Pty Ltd
2
2
 
3
- Licensed under the Apache License, Version 2.0 (the "License");
4
- you may not use this file except in compliance with the License.
5
- You may obtain a copy of the License at
3
+ Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in
4
+ compliance with the License. You may obtain a copy of the License at
6
5
 
7
6
  http://www.apache.org/licenses/LICENSE-2.0
8
7
 
9
- Unless required by applicable law or agreed to in writing, software
10
- distributed under the License is distributed on an "AS IS" BASIS,
11
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
- See the License for the specific language governing permissions and
13
- limitations under the License.
8
+ Unless required by applicable law or agreed to in writing, software distributed under the License is
9
+ distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
10
+ implied. See the License for the specific language governing permissions and limitations under the
11
+ License.
@@ -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, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
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,15 @@ 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
- src: src,
61
+ src: src
62
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
63
+ ,
64
+ style: {
65
+ '--img-source': "url(".concat(src, ")"),
66
+ '--img-source-dark': "url(".concat(srcDark || src, ")")
67
+ },
68
+ css: [baseImageStyles, themedImageStyles],
53
69
  ref: imgRef
54
70
  // The spread operator is necessary since the component can accept all the props of an `img` element.
55
71
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
@@ -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, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
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,15 @@ 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
- src: src,
54
+ src: src
55
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
56
+ ,
57
+ style: {
58
+ '--img-source': `url(${src})`,
59
+ '--img-source-dark': `url(${srcDark || src})`
60
+ },
61
+ css: [baseImageStyles, themedImageStyles],
46
62
  ref: imgRef
47
63
  // The spread operator is necessary since the component can accept all the props of an `img` element.
48
64
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
@@ -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, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
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,15 @@ 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
- src: src,
54
+ src: src
55
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
56
+ ,
57
+ style: {
58
+ '--img-source': "url(".concat(src, ")"),
59
+ '--img-source-dark': "url(".concat(srcDark || src, ")")
60
+ },
61
+ css: [baseImageStyles, themedImageStyles],
46
62
  ref: imgRef
47
63
  // The spread operator is necessary since the component can accept all the props of an `img` element.
48
64
  // 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.2.0",
3
+ "version": "1.2.2",
4
4
  "description": "An image that changes in light or dark themes.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,8 @@
28
28
  "runReact18": true
29
29
  },
30
30
  "dependencies": {
31
- "@atlaskit/tokens": "^1.45.0",
31
+ "@atlaskit/app-provider": "1.3.3",
32
+ "@atlaskit/tokens": "^1.50.0",
32
33
  "@babel/runtime": "^7.0.0",
33
34
  "@emotion/react": "^11.7.1"
34
35
  },
@@ -42,7 +43,6 @@
42
43
  "@atlaskit/ds-lib": "^2.3.0",
43
44
  "@atlaskit/ssr": "*",
44
45
  "@atlaskit/visual-regression": "*",
45
- "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
46
46
  "@testing-library/react": "^12.1.5",
47
47
  "react-dom": "^16.8.0",
48
48
  "typescript": "~5.4.2",
@@ -96,6 +96,5 @@
96
96
  },
97
97
  "af:exports": {
98
98
  ".": "./src/index.tsx"
99
- },
100
- "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
99
+ }
101
100
  }
package/report.api.md CHANGED
@@ -2,7 +2,8 @@
2
2
 
3
3
  ## API Report File for "@atlaskit/image"
4
4
 
5
- > Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
5
+ > Do not edit this file. This report is auto-generated using
6
+ > [API Extractor](https://api-extractor.com/).
6
7
  > [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
7
8
 
8
9
  ### Table of contents
@@ -20,19 +21,13 @@
20
21
  import { jsx } from '@emotion/react';
21
22
 
22
23
  // @public
23
- function Image_2({
24
- src,
25
- srcDark,
26
- alt,
27
- testId,
28
- ...props
29
- }: ImageProps): jsx.JSX.Element;
24
+ function Image_2({ src, srcDark, alt, testId, ...props }: ImageProps): jsx.JSX.Element;
30
25
  export default Image_2;
31
26
 
32
27
  // @public (undocumented)
33
28
  interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
34
- srcDark?: string;
35
- testId?: string;
29
+ srcDark?: string;
30
+ testId?: string;
36
31
  }
37
32
 
38
33
  // (No @packageDocumentation comment for this package)
@@ -46,7 +41,7 @@ interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
46
41
 
47
42
  ```json
48
43
  {
49
- "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
44
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
50
45
  }
51
46
  ```
52
47