@atlaskit/image 0.2.0 → 1.0.0

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 (9) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/ui/image/index.js +16 -1
  3. package/dist/cjs/version.json +1 -1
  4. package/dist/es2019/ui/image/index.js +10 -2
  5. package/dist/es2019/version.json +1 -1
  6. package/dist/esm/ui/image/index.js +16 -2
  7. package/dist/esm/version.json +1 -1
  8. package/package.json +5 -2
  9. package/report.api.md +13 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/image
2
2
 
3
+ ## 1.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [`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.
8
+
9
+ ## 0.2.1
10
+
11
+ ### Patch Changes
12
+
13
+ - [`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.
14
+
3
15
  ## 0.2.0
4
16
 
5
17
  ### Minor Changes
package/dist/cjs/ui/image/index.js CHANGED
@@ -9,6 +9,8 @@ exports.default = Image;
9
9
 
10
10
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
11
 
12
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
13
+
12
14
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
13
15
 
14
16
  var _react = require("react");
@@ -39,6 +41,12 @@ function Image(_ref) {
39
41
  testId = _ref.testId,
40
42
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
41
43
  var imgRef = (0, _react.useRef)(null);
44
+
45
+ var _useState = (0, _react.useState)(''),
46
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
47
+ colorMode = _useState2[0],
48
+ setColorMode = _useState2[1];
49
+
42
50
  var theme = (0, _tokens.useThemeObserver)();
43
51
  (0, _react.useEffect)(function () {
44
52
  if (imgRef === null || imgRef.current === null) {
@@ -51,7 +59,14 @@ function Image(_ref) {
51
59
  imgRef.current.src = src;
52
60
  }
53
61
  }, [src, srcDark, theme]);
54
- return (0, _react2.jsx)("picture", null, srcDark && (0, _react2.jsx)("source", {
62
+ /**
63
+ * TODO: Remove the following once useThemeObserver reports `color-mode`
64
+ */
65
+
66
+ (0, _react.useEffect)(function () {
67
+ setColorMode(document.documentElement.getAttribute('data-color-mode') || '');
68
+ }, [theme, setColorMode]);
69
+ return (0, _react2.jsx)("picture", null, srcDark && colorMode === 'auto' && (0, _react2.jsx)("source", {
55
70
  srcSet: srcDark,
56
71
  media: "(prefers-color-scheme: dark)"
57
72
  }), (0, _react2.jsx)("img", (0, _extends2.default)({
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/image",
3
- "version": "0.2.0",
3
+ "version": "1.0.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/ui/image/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
 
3
3
  /** @jsx jsx */
4
- import { useEffect, useRef } from 'react';
4
+ import { useEffect, useRef, useState } from 'react';
5
5
  import { css, jsx } from '@emotion/react';
6
6
  import { useThemeObserver } from '@atlaskit/tokens';
7
7
  const imageStyles = css({
@@ -26,6 +26,7 @@ export default function Image({
26
26
  ...props
27
27
  }) {
28
28
  const imgRef = useRef(null);
29
+ const [colorMode, setColorMode] = useState('');
29
30
  const theme = useThemeObserver();
30
31
  useEffect(() => {
31
32
  if (imgRef === null || imgRef.current === null) {
@@ -38,7 +39,14 @@ export default function Image({
38
39
  imgRef.current.src = src;
39
40
  }
40
41
  }, [src, srcDark, theme]);
41
- return jsx("picture", null, srcDark && jsx("source", {
42
+ /**
43
+ * TODO: Remove the following once useThemeObserver reports `color-mode`
44
+ */
45
+
46
+ useEffect(() => {
47
+ setColorMode(document.documentElement.getAttribute('data-color-mode') || '');
48
+ }, [theme, setColorMode]);
49
+ return jsx("picture", null, srcDark && colorMode === 'auto' && jsx("source", {
42
50
  srcSet: srcDark,
43
51
  media: "(prefers-color-scheme: dark)"
44
52
  }), jsx("img", _extends({
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/image",
3
- "version": "0.2.0",
3
+ "version": "1.0.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/ui/image/index.js CHANGED
@@ -1,9 +1,10 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
4
  var _excluded = ["src", "srcDark", "alt", "testId"];
4
5
 
5
6
  /** @jsx jsx */
6
- import { useEffect, useRef } from 'react';
7
+ import { useEffect, useRef, useState } from 'react';
7
8
  import { css, jsx } from '@emotion/react';
8
9
  import { useThemeObserver } from '@atlaskit/tokens';
9
10
  var imageStyles = css({
@@ -28,6 +29,12 @@ export default function Image(_ref) {
28
29
  props = _objectWithoutProperties(_ref, _excluded);
29
30
 
30
31
  var imgRef = useRef(null);
32
+
33
+ var _useState = useState(''),
34
+ _useState2 = _slicedToArray(_useState, 2),
35
+ colorMode = _useState2[0],
36
+ setColorMode = _useState2[1];
37
+
31
38
  var theme = useThemeObserver();
32
39
  useEffect(function () {
33
40
  if (imgRef === null || imgRef.current === null) {
@@ -40,7 +47,14 @@ export default function Image(_ref) {
40
47
  imgRef.current.src = src;
41
48
  }
42
49
  }, [src, srcDark, theme]);
43
- return jsx("picture", null, srcDark && jsx("source", {
50
+ /**
51
+ * TODO: Remove the following once useThemeObserver reports `color-mode`
52
+ */
53
+
54
+ useEffect(function () {
55
+ setColorMode(document.documentElement.getAttribute('data-color-mode') || '');
56
+ }, [theme, setColorMode]);
57
+ return jsx("picture", null, srcDark && colorMode === 'auto' && jsx("source", {
44
58
  srcSet: srcDark,
45
59
  media: "(prefers-color-scheme: dark)"
46
60
  }), jsx("img", _extends({
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/image",
3
- "version": "0.2.0",
3
+ "version": "1.0.0",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/image",
3
- "version": "0.2.0",
3
+ "version": "1.0.0",
4
4
  "description": "Image component with additional functionality.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -14,7 +14,10 @@
14
14
  "releaseModel": "continuous",
15
15
  "website": {
16
16
  "name": "Image",
17
- "category": "Components"
17
+ "category": "Components",
18
+ "status": {
19
+ "type": "beta"
20
+ }
18
21
  }
19
22
  },
20
23
  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
package/report.api.md CHANGED
@@ -8,6 +8,7 @@
8
8
  ### Table of contents
9
9
 
10
10
  - [Main Entry Types](#main-entry-types)
11
+ - [Peer Dependencies](#peer-dependencies)
11
12
 
12
13
  ### Main Entry Types
13
14
 
@@ -38,3 +39,15 @@ interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
38
39
  ```
39
40
 
40
41
  <!--SECTION END: Main Entry Types-->
42
+
43
+ ### Peer Dependencies
44
+
45
+ <!--SECTION START: Peer Dependencies-->
46
+
47
+ ```json
48
+ {
49
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
50
+ }
51
+ ```
52
+
53
+ <!--SECTION END: Peer Dependencies-->