@atlaskit/blanket 12.3.4 → 12.3.6

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,5 +1,17 @@
1
1
  # @atlaskit/blanket
2
2
 
3
+ ## 12.3.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [`a7e8a6c3ace`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a7e8a6c3ace) - Prevent onBlanketClick function firing on Blanket when mousedown event begins on Blanket children
8
+
9
+ ## 12.3.5
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 12.3.4
4
16
 
5
17
  ### Patch Changes
@@ -1,34 +1,22 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = void 0;
9
-
10
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
-
12
9
  var _react = require("react");
13
-
14
10
  var _react2 = require("@emotion/react");
15
-
16
11
  var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
17
-
18
12
  var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
19
-
20
13
  var _colors = require("@atlaskit/theme/colors");
21
-
22
14
  var _components = require("@atlaskit/theme/components");
23
-
24
15
  var _constants = require("@atlaskit/theme/constants");
25
-
26
16
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
27
-
28
17
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
29
-
30
18
  var packageName = "@atlaskit/blanket";
31
- var packageVersion = "12.3.4";
19
+ var packageVersion = "12.3.6";
32
20
  var analyticsAttributes = {
33
21
  componentName: 'blanket',
34
22
  packageName: packageName,
@@ -60,6 +48,7 @@ var backgroundStyle = {
60
48
  light: lightBgStyles,
61
49
  dark: darkBgStyles
62
50
  };
51
+
63
52
  /**
64
53
  * __Blanket__
65
54
  *
@@ -67,34 +56,36 @@ var backgroundStyle = {
67
56
  *
68
57
  * - [Examples](https://atlaskit.atlassian.com/examples/design-system/blanket/basic-usage)
69
58
  */
70
-
71
59
  var Blanket = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function Blanket(_ref, ref) {
72
60
  var _ref$shouldAllowClick = _ref.shouldAllowClickThrough,
73
- shouldAllowClickThrough = _ref$shouldAllowClick === void 0 ? false : _ref$shouldAllowClick,
74
- _ref$isTinted = _ref.isTinted,
75
- isTinted = _ref$isTinted === void 0 ? false : _ref$isTinted,
76
- _ref$onBlanketClicked = _ref.onBlanketClicked,
77
- onBlanketClicked = _ref$onBlanketClicked === void 0 ? _noop.default : _ref$onBlanketClicked,
78
- testId = _ref.testId,
79
- children = _ref.children,
80
- analyticsContext = _ref.analyticsContext;
81
-
61
+ shouldAllowClickThrough = _ref$shouldAllowClick === void 0 ? false : _ref$shouldAllowClick,
62
+ _ref$isTinted = _ref.isTinted,
63
+ isTinted = _ref$isTinted === void 0 ? false : _ref$isTinted,
64
+ _ref$onBlanketClicked = _ref.onBlanketClicked,
65
+ onBlanketClicked = _ref$onBlanketClicked === void 0 ? _noop.default : _ref$onBlanketClicked,
66
+ testId = _ref.testId,
67
+ children = _ref.children,
68
+ analyticsContext = _ref.analyticsContext;
82
69
  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
83
- mode = _useGlobalTheme.mode;
84
-
70
+ mode = _useGlobalTheme.mode;
71
+ var mouseDownTarget = (0, _react.useRef)(null);
85
72
  var onBlanketClickedWithAnalytics = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)(_objectSpread({
86
73
  fn: onBlanketClicked,
87
74
  action: 'clicked',
88
75
  analyticsData: analyticsContext
89
76
  }, analyticsAttributes));
90
77
  var blanketClickOutsideChildren = (0, _react.useCallback)(function (e) {
91
- return e.currentTarget === e.target ? onBlanketClickedWithAnalytics(e) : undefined;
78
+ return e.currentTarget === e.target && mouseDownTarget.current === e.target ? onBlanketClickedWithAnalytics(e) : undefined;
92
79
  }, [onBlanketClickedWithAnalytics]);
93
80
  var onClick = shouldAllowClickThrough ? undefined : blanketClickOutsideChildren;
81
+ var onMouseDown = (0, _react.useCallback)(function (e) {
82
+ mouseDownTarget.current = e.target;
83
+ }, []);
94
84
  return (0, _react2.jsx)("div", {
95
85
  role: "presentation",
96
86
  css: [baseStyles, shouldAllowClickThrough && shouldAllowClickThroughStyles, backgroundStyle[mode], !isTinted && invisibleStyles],
97
87
  onClick: onClick,
88
+ onMouseDown: onMouseDown,
98
89
  "data-testid": testId,
99
90
  ref: ref
100
91
  }, children);
package/dist/cjs/index.js CHANGED
@@ -1,7 +1,6 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
11
10
  return _blanket.default;
12
11
  }
13
12
  });
14
-
15
13
  var _blanket = _interopRequireDefault(require("./blanket"));
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/blanket",
3
- "version": "12.3.4",
3
+ "version": "12.3.6",
4
4
  "sideEffects": false
5
5
  }
@@ -1,5 +1,5 @@
1
1
  /** @jsx jsx */
2
- import { forwardRef, memo, useCallback } from 'react';
2
+ import { forwardRef, memo, useCallback, useRef } from 'react';
3
3
  import { css, jsx } from '@emotion/react';
4
4
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
5
5
  import noop from '@atlaskit/ds-lib/noop';
@@ -7,7 +7,7 @@ import { DN90A, N100A } from '@atlaskit/theme/colors';
7
7
  import { useGlobalTheme } from '@atlaskit/theme/components';
8
8
  import { layers } from '@atlaskit/theme/constants';
9
9
  const packageName = "@atlaskit/blanket";
10
- const packageVersion = "12.3.4";
10
+ const packageVersion = "12.3.6";
11
11
  const analyticsAttributes = {
12
12
  componentName: 'blanket',
13
13
  packageName,
@@ -39,6 +39,7 @@ const backgroundStyle = {
39
39
  light: lightBgStyles,
40
40
  dark: darkBgStyles
41
41
  };
42
+
42
43
  /**
43
44
  * __Blanket__
44
45
  *
@@ -46,7 +47,6 @@ const backgroundStyle = {
46
47
  *
47
48
  * - [Examples](https://atlaskit.atlassian.com/examples/design-system/blanket/basic-usage)
48
49
  */
49
-
50
50
  const Blanket = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Blanket({
51
51
  shouldAllowClickThrough = false,
52
52
  isTinted = false,
@@ -58,18 +58,23 @@ const Blanket = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Blanket({
58
58
  const {
59
59
  mode
60
60
  } = useGlobalTheme();
61
+ const mouseDownTarget = useRef(null);
61
62
  const onBlanketClickedWithAnalytics = usePlatformLeafEventHandler({
62
63
  fn: onBlanketClicked,
63
64
  action: 'clicked',
64
65
  analyticsData: analyticsContext,
65
66
  ...analyticsAttributes
66
67
  });
67
- const blanketClickOutsideChildren = useCallback(e => e.currentTarget === e.target ? onBlanketClickedWithAnalytics(e) : undefined, [onBlanketClickedWithAnalytics]);
68
+ const blanketClickOutsideChildren = useCallback(e => e.currentTarget === e.target && mouseDownTarget.current === e.target ? onBlanketClickedWithAnalytics(e) : undefined, [onBlanketClickedWithAnalytics]);
68
69
  const onClick = shouldAllowClickThrough ? undefined : blanketClickOutsideChildren;
70
+ const onMouseDown = useCallback(e => {
71
+ mouseDownTarget.current = e.target;
72
+ }, []);
69
73
  return jsx("div", {
70
74
  role: "presentation",
71
75
  css: [baseStyles, shouldAllowClickThrough && shouldAllowClickThroughStyles, backgroundStyle[mode], !isTinted && invisibleStyles],
72
76
  onClick: onClick,
77
+ onMouseDown: onMouseDown,
73
78
  "data-testid": testId,
74
79
  ref: ref
75
80
  }, children);
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/blanket",
3
- "version": "12.3.4",
3
+ "version": "12.3.6",
4
4
  "sideEffects": false
5
5
  }
@@ -1,11 +1,8 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
-
3
2
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
4
-
5
3
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6
-
7
4
  /** @jsx jsx */
8
- import { forwardRef, memo, useCallback } from 'react';
5
+ import { forwardRef, memo, useCallback, useRef } from 'react';
9
6
  import { css, jsx } from '@emotion/react';
10
7
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
11
8
  import noop from '@atlaskit/ds-lib/noop';
@@ -13,7 +10,7 @@ import { DN90A, N100A } from '@atlaskit/theme/colors';
13
10
  import { useGlobalTheme } from '@atlaskit/theme/components';
14
11
  import { layers } from '@atlaskit/theme/constants';
15
12
  var packageName = "@atlaskit/blanket";
16
- var packageVersion = "12.3.4";
13
+ var packageVersion = "12.3.6";
17
14
  var analyticsAttributes = {
18
15
  componentName: 'blanket',
19
16
  packageName: packageName,
@@ -45,6 +42,7 @@ var backgroundStyle = {
45
42
  light: lightBgStyles,
46
43
  dark: darkBgStyles
47
44
  };
45
+
48
46
  /**
49
47
  * __Blanket__
50
48
  *
@@ -52,34 +50,36 @@ var backgroundStyle = {
52
50
  *
53
51
  * - [Examples](https://atlaskit.atlassian.com/examples/design-system/blanket/basic-usage)
54
52
  */
55
-
56
53
  var Blanket = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Blanket(_ref, ref) {
57
54
  var _ref$shouldAllowClick = _ref.shouldAllowClickThrough,
58
- shouldAllowClickThrough = _ref$shouldAllowClick === void 0 ? false : _ref$shouldAllowClick,
59
- _ref$isTinted = _ref.isTinted,
60
- isTinted = _ref$isTinted === void 0 ? false : _ref$isTinted,
61
- _ref$onBlanketClicked = _ref.onBlanketClicked,
62
- onBlanketClicked = _ref$onBlanketClicked === void 0 ? noop : _ref$onBlanketClicked,
63
- testId = _ref.testId,
64
- children = _ref.children,
65
- analyticsContext = _ref.analyticsContext;
66
-
55
+ shouldAllowClickThrough = _ref$shouldAllowClick === void 0 ? false : _ref$shouldAllowClick,
56
+ _ref$isTinted = _ref.isTinted,
57
+ isTinted = _ref$isTinted === void 0 ? false : _ref$isTinted,
58
+ _ref$onBlanketClicked = _ref.onBlanketClicked,
59
+ onBlanketClicked = _ref$onBlanketClicked === void 0 ? noop : _ref$onBlanketClicked,
60
+ testId = _ref.testId,
61
+ children = _ref.children,
62
+ analyticsContext = _ref.analyticsContext;
67
63
  var _useGlobalTheme = useGlobalTheme(),
68
- mode = _useGlobalTheme.mode;
69
-
64
+ mode = _useGlobalTheme.mode;
65
+ var mouseDownTarget = useRef(null);
70
66
  var onBlanketClickedWithAnalytics = usePlatformLeafEventHandler(_objectSpread({
71
67
  fn: onBlanketClicked,
72
68
  action: 'clicked',
73
69
  analyticsData: analyticsContext
74
70
  }, analyticsAttributes));
75
71
  var blanketClickOutsideChildren = useCallback(function (e) {
76
- return e.currentTarget === e.target ? onBlanketClickedWithAnalytics(e) : undefined;
72
+ return e.currentTarget === e.target && mouseDownTarget.current === e.target ? onBlanketClickedWithAnalytics(e) : undefined;
77
73
  }, [onBlanketClickedWithAnalytics]);
78
74
  var onClick = shouldAllowClickThrough ? undefined : blanketClickOutsideChildren;
75
+ var onMouseDown = useCallback(function (e) {
76
+ mouseDownTarget.current = e.target;
77
+ }, []);
79
78
  return jsx("div", {
80
79
  role: "presentation",
81
80
  css: [baseStyles, shouldAllowClickThrough && shouldAllowClickThroughStyles, backgroundStyle[mode], !isTinted && invisibleStyles],
82
81
  onClick: onClick,
82
+ onMouseDown: onMouseDown,
83
83
  "data-testid": testId,
84
84
  ref: ref
85
85
  }, children);
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/blanket",
3
- "version": "12.3.4",
3
+ "version": "12.3.6",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/blanket",
3
- "version": "12.3.4",
3
+ "version": "12.3.6",
4
4
  "description": "A blanket covers the underlying UI for a layered component, such as a modal dialog or a tooltip.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -33,7 +33,7 @@
33
33
  "@atlaskit/codemod-utils": "^4.1.0",
34
34
  "@atlaskit/ds-lib": "^2.1.0",
35
35
  "@atlaskit/theme": "^12.2.0",
36
- "@atlaskit/tokens": "^0.13.0",
36
+ "@atlaskit/tokens": "^1.1.0",
37
37
  "@babel/runtime": "^7.0.0",
38
38
  "@emotion/react": "^11.7.1"
39
39
  },
@@ -51,6 +51,7 @@
51
51
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
52
52
  "@testing-library/dom": "^8.17.1",
53
53
  "@testing-library/react": "^12.1.5",
54
+ "@testing-library/user-event": "^14.4.3",
54
55
  "jscodeshift": "^0.13.0",
55
56
  "react-dom": "^16.8.0",
56
57
  "react-lorem-component": "^0.13.0",
@@ -76,8 +77,10 @@
76
77
  ],
77
78
  "ui-components": "lite-mode",
78
79
  "analytics": "analytics-next",
79
- "design-tokens": "spacing",
80
- "theming": "tokens",
80
+ "design-tokens": [
81
+ "color",
82
+ "spacing"
83
+ ],
81
84
  "deprecation": "no-deprecated-imports"
82
85
  }
83
86
  },
package/report.api.md CHANGED
@@ -1,4 +1,4 @@
1
- <!-- API Report Version: 2.2 -->
1
+ <!-- API Report Version: 2.3 -->
2
2
 
3
3
  ## API Report File for "@atlaskit/blanket"
4
4