@atlaskit/editor-common 74.56.1 → 74.56.3

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,19 @@
1
1
  # @atlaskit/editor-common
2
2
 
3
+ ## 74.56.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [`c4754a4e96f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c4754a4e96f) - Ignore invisible element for arrow key navigation to prevent focus loss
8
+ - [`3b7bf91daa5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3b7bf91daa5) - [ux] ED-19785 Add dark mode icon for custom panel and update light mode icon with new colours.
9
+
10
+ ## 74.56.2
11
+
12
+ ### Patch Changes
13
+
14
+ - [`74cf8d56408`](https://bitbucket.org/atlassian/atlassian-frontend/commits/74cf8d56408) - ED-19748: dispatch analytics when a table is selected.
15
+ - [`95225cb45ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/95225cb45ec) - increase mouse hover zone for resizer
16
+
3
17
  ## 74.56.1
4
18
 
5
19
  ### Patch Changes
@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
16
16
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
17
17
  var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
18
18
  var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
19
- var packageVersion = "74.56.1";
19
+ var packageVersion = "74.56.3";
20
20
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
21
21
  // Remove URL as it has UGC
22
22
  // TODO: Sanitise the URL instead of just removing it
@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.default = IconCustomPanel;
8
8
  var _react = _interopRequireDefault(require("react"));
9
- // TODO: https://product-fabric.atlassian.net/browse/DSP-4138
10
- /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
11
-
9
+ var _useIconThemed2 = require("../use-icon-themed");
12
10
  function IconCustomPanel() {
11
+ var _useIconThemed = (0, _useIconThemed2.useIconThemed)(),
12
+ iconThemed = _useIconThemed.iconThemed;
13
13
  return /*#__PURE__*/_react.default.createElement("svg", {
14
14
  width: "40",
15
15
  height: "40",
@@ -20,36 +20,63 @@ function IconCustomPanel() {
20
20
  }, /*#__PURE__*/_react.default.createElement("rect", {
21
21
  width: "40",
22
22
  height: "40",
23
- fill: "white"
23
+ fill: iconThemed({
24
+ light: '#fff',
25
+ dark: '#161A1D'
26
+ })
24
27
  }), /*#__PURE__*/_react.default.createElement("path", {
25
28
  d: "M8 13C8 12.4477 8.44772 12 9 12H40V28H9C8.44772 28 8 27.5523 8 27V13Z",
26
- fill: "#E6FCFF"
29
+ fill: iconThemed({
30
+ light: '#E3FAFC',
31
+ dark: '#1D474C'
32
+ })
27
33
  }), /*#__PURE__*/_react.default.createElement("g", {
28
34
  clipPath: "url(#clip0)"
29
35
  }, /*#__PURE__*/_react.default.createElement("path", {
30
36
  d: "M19.9999 16.2222C15.5817 16.2222 12.2222 19.5818 12.2222 24H16.0093C16.0093 21.7962 17.7964 20.0093 19.9999 20.0093V16.2222Z",
31
- fill: "#8767AC"
37
+ fill: iconThemed({
38
+ light: '#6E5DC6',
39
+ dark: '#9F8FEF'
40
+ })
32
41
  }), /*#__PURE__*/_react.default.createElement("path", {
33
42
  d: "M12 23.9998H12.676C12.676 19.9578 15.9502 16.6809 19.9909 16.676V16C15.5767 16.0051 12 19.5847 12 23.9998Z",
34
- fill: "#EB2027"
43
+ fill: iconThemed({
44
+ light: '#E34935',
45
+ dark: '#EF5C48'
46
+ })
35
47
  }), /*#__PURE__*/_react.default.createElement("path", {
36
48
  d: "M12.6851 24H13.3517C13.3517 20.3262 16.3273 17.3478 19.9999 17.3429V16.6762C15.9593 16.6811 12.6851 19.958 12.6851 24Z",
37
- fill: "#F19020"
49
+ fill: iconThemed({
50
+ light: '#D97008',
51
+ dark: '#F18D13'
52
+ })
38
53
  }), /*#__PURE__*/_react.default.createElement("path", {
39
54
  d: "M13.3518 24H14.0185C14.0185 20.6945 16.6956 18.0145 20 18.0096V17.3429C16.3274 17.3478 13.3518 20.3262 13.3518 24Z",
40
- fill: "#FFCB4C"
55
+ fill: iconThemed({
56
+ light: '#E2B203',
57
+ dark: '#E2B203'
58
+ })
41
59
  }), /*#__PURE__*/_react.default.createElement("path", {
42
60
  d: "M14.0184 24H14.6851C14.6851 21.0629 17.064 18.6811 20 18.6762V18.0096C16.6955 18.0144 14.0184 20.6944 14.0184 24Z",
43
- fill: "#5C903F"
61
+ fill: iconThemed({
62
+ light: '#6A9A23',
63
+ dark: '#82B536'
64
+ })
44
65
  }), /*#__PURE__*/_react.default.createElement("path", {
45
66
  d: "M14.6851 24H15.3517C15.3517 21.4311 17.4322 19.348 19.9999 19.3431V18.6762C17.0639 18.6811 14.6851 21.0629 14.6851 24Z",
46
- fill: "#226798"
67
+ fill: iconThemed({
68
+ light: '#0055CC',
69
+ dark: '#579DFF'
70
+ })
47
71
  })), /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("clipPath", {
48
72
  id: "clip0"
49
73
  }, /*#__PURE__*/_react.default.createElement("rect", {
50
74
  width: "8",
51
75
  height: "8",
52
- fill: "white",
76
+ fill: iconThemed({
77
+ light: '#fff',
78
+ dark: '#fff'
79
+ }),
53
80
  transform: "translate(12 16)"
54
81
  }))));
55
82
  }
@@ -189,5 +189,7 @@ function ResizerNext(props) {
189
189
  snapGap: snapGapActual,
190
190
  snap: snap,
191
191
  handleComponent: finalHandleComponent
192
- }, otherProps), children);
192
+ }, otherProps), /*#__PURE__*/_react.default.createElement("span", {
193
+ className: _resizer.resizerHoverZoneClassName
194
+ }, children));
193
195
  }
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.resizerStyles = exports.resizerItemClassName = exports.resizerHandleZIndex = exports.resizerHandleTrackClassName = exports.resizerHandleThumbClassName = exports.resizerHandleClassName = exports.resizerDangerClassName = void 0;
7
+ exports.resizerStyles = exports.resizerItemClassName = exports.resizerHoverZoneClassName = exports.resizerHandleZIndex = exports.resizerHandleTrackClassName = exports.resizerHandleThumbClassName = exports.resizerHandleClassName = exports.resizerDangerClassName = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
9
  var _react = require("@emotion/react");
10
10
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -17,6 +17,8 @@ var _templateObject;
17
17
 
18
18
  var resizerItemClassName = 'resizer-item';
19
19
  exports.resizerItemClassName = resizerItemClassName;
20
+ var resizerHoverZoneClassName = 'resizer-hover-zone';
21
+ exports.resizerHoverZoneClassName = resizerHoverZoneClassName;
20
22
  var resizerHandleClassName = 'resizer-handle';
21
23
  exports.resizerHandleClassName = resizerHandleClassName;
22
24
  var resizerHandleTrackClassName = "".concat(resizerHandleClassName, "-track");
@@ -30,5 +32,5 @@ exports.resizerDangerClassName = resizerDangerClassName;
30
32
  var akEditorSelectedNodeClassName = 'ak-editor-selected-node';
31
33
  var resizerHandleZIndex = 99;
32
34
  exports.resizerHandleZIndex = resizerHandleZIndex;
33
- var resizerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n will-change: width;\n\n &:hover,\n &.display-handle {\n & .", " {\n visibility: visible;\n opacity: 1;\n }\n }\n\n &.is-resizing {\n & .", " {\n background: ", ";\n }\n }\n\n &.", " {\n & .", " {\n transition: none;\n background: ", ";\n }\n }\n }\n\n .", " {\n display: flex;\n visibility: hidden;\n opacity: 0;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 7px;\n transition: visibility 0.2s, opacity 0.2s;\n\n /*\n NOTE: The below style is targeted at the div element added by the tooltip. We don't have any means of injecting styles\n into the tooltip\n */\n & div[role='presentation'] {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n }\n\n /*\n Handle Positions\n */\n &.left {\n align-items: flex-start;\n }\n &.right {\n align-items: flex-end;\n }\n\n /*\n Handle Sizing\n */\n &.small {\n & .", " {\n height: 43px;\n }\n }\n &.medium {\n & .", " {\n height: 64px;\n }\n }\n &.large {\n & .", " {\n height: 96px;\n }\n }\n\n /*\n Handle Alignment\n */\n &.sticky {\n & .", " {\n position: sticky;\n top: ", ";\n bottom: ", ";\n }\n }\n\n &:hover {\n & .", " {\n background: ", ";\n }\n\n & .", " {\n visibility: visible;\n opacity: 0.5;\n }\n }\n }\n\n .", " {\n content: ' ';\n display: flex;\n width: 3px;\n height: 64px;\n transition: background-color 0.2s;\n border-radius: 6px;\n\n background: ", ";\n }\n\n .", " {\n visibility: hidden;\n position: absolute;\n width: 7px;\n height: calc(100% - 24px);\n border-radius: 4px;\n opacity: 0;\n transition: background-color 0.2s, visibility 0.2s, opacity 0.2s;\n\n &.none {\n background: none;\n }\n\n &.shadow {\n background: ", ";\n }\n }\n\n .", " {\n & .", " {\n background: ", ";\n }\n }\n"])), resizerItemClassName, resizerHandleClassName, resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), resizerDangerClassName, resizerHandleThumbClassName, "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), resizerHandleClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), resizerHandleTrackClassName, resizerHandleThumbClassName, "var(--ds-border, ".concat(_colors.N60, ")"), resizerHandleTrackClassName, "var(--ds-background-selected, ".concat(_colors.B50, ")"), akEditorSelectedNodeClassName, resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"));
35
+ var resizerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n will-change: width;\n\n &:hover,\n &.display-handle {\n & .", " {\n visibility: visible;\n opacity: 1;\n }\n }\n\n &.is-resizing {\n & .", " {\n background: ", ";\n }\n }\n\n &.", " {\n & .", " {\n transition: none;\n background: ", ";\n }\n }\n }\n\n .", " {\n display: flex;\n visibility: hidden;\n opacity: 0;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 7px;\n transition: visibility 0.2s, opacity 0.2s;\n\n /*\n NOTE: The below style is targeted at the div element added by the tooltip. We don't have any means of injecting styles\n into the tooltip\n */\n & div[role='presentation'] {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-top: -16px;\n }\n\n /*\n Handle Positions\n */\n &.left {\n align-items: flex-start;\n }\n &.right {\n align-items: flex-end;\n }\n\n /*\n Handle Sizing\n */\n &.small {\n & .", " {\n height: 43px;\n }\n }\n &.medium {\n & .", " {\n height: 64px;\n }\n }\n &.large {\n & .", " {\n height: 96px;\n }\n }\n\n /*\n Handle Alignment\n */\n &.sticky {\n & .", " {\n position: sticky;\n top: ", ";\n bottom: ", ";\n }\n }\n\n &:hover {\n & .", " {\n background: ", ";\n }\n\n & .", " {\n visibility: visible;\n opacity: 0.5;\n }\n }\n }\n\n .", " {\n content: ' ';\n display: flex;\n width: 3px;\n height: 64px;\n transition: background-color 0.2s;\n border-radius: 6px;\n\n background: ", ";\n }\n\n .", " {\n visibility: hidden;\n position: absolute;\n width: 7px;\n height: calc(100% - 42px);\n border-radius: 4px;\n opacity: 0;\n transition: background-color 0.2s, visibility 0.2s, opacity 0.2s;\n\n &.none {\n background: none;\n }\n\n &.shadow {\n background: ", ";\n }\n }\n\n .", " {\n & .", " {\n background: ", ";\n }\n }\n\n .", " {\n padding: 0 ", ";\n position: relative;\n display: inline-block;\n width: 100%;\n left: -12px;\n }\n"])), resizerItemClassName, resizerHandleClassName, resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), resizerDangerClassName, resizerHandleThumbClassName, "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), resizerHandleClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), resizerHandleTrackClassName, resizerHandleThumbClassName, "var(--ds-border, ".concat(_colors.N60, ")"), resizerHandleTrackClassName, "var(--ds-background-selected, ".concat(_colors.B50, ")"), akEditorSelectedNodeClassName, resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), resizerHoverZoneClassName, "var(--ds-space-150, 12px)");
34
36
  exports.resizerStyles = resizerStyles;
@@ -24,7 +24,7 @@ var _templateObject, _templateObject2, _templateObject3;
24
24
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
25
25
  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
26
26
  var packageName = "@atlaskit/editor-common";
27
- var packageVersion = "74.56.1";
27
+ var packageVersion = "74.56.3";
28
28
  var halfFocusRing = 1;
29
29
  var dropOffset = '0, 8';
30
30
  var DropList = /*#__PURE__*/function (_Component) {
@@ -214,6 +214,9 @@ function getFocusableElements(rootNode) {
214
214
  function getFilteredFocusableElements(rootNode) {
215
215
  //The focusable elements from child components such as dropdown menus / popups are ignored
216
216
  return getFocusableElements(rootNode).filter(function (elm) {
217
- return !elm.closest('[data-role="droplistContent"]') && !elm.closest('[data-emoji-picker-container="true"]') && !elm.closest('[data-test-id="color-picker-menu"]') && !elm.closest('.scroll-buttons');
217
+ var style = window.getComputedStyle(elm);
218
+ // ignore invisible element to avoid losing focus
219
+ var isVisible = style.visibility !== 'hidden' && style.display !== 'none';
220
+ return !elm.closest('[data-role="droplistContent"]') && !elm.closest('[data-emoji-picker-container="true"]') && !elm.closest('[data-test-id="color-picker-menu"]') && !elm.closest('.scroll-buttons') && isVisible;
218
221
  });
219
222
  }
@@ -1,6 +1,6 @@
1
1
  const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
2
2
  const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
3
- const packageVersion = "74.56.1";
3
+ const packageVersion = "74.56.3";
4
4
  const sanitiseSentryEvents = (data, _hint) => {
5
5
  // Remove URL as it has UGC
6
6
  // TODO: Sanitise the URL instead of just removing it
@@ -1,7 +1,9 @@
1
- // TODO: https://product-fabric.atlassian.net/browse/DSP-4138
2
- /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
3
1
  import React from 'react';
2
+ import { useIconThemed } from '../use-icon-themed';
4
3
  export default function IconCustomPanel() {
4
+ const {
5
+ iconThemed
6
+ } = useIconThemed();
5
7
  return /*#__PURE__*/React.createElement("svg", {
6
8
  width: "40",
7
9
  height: "40",
@@ -12,36 +14,63 @@ export default function IconCustomPanel() {
12
14
  }, /*#__PURE__*/React.createElement("rect", {
13
15
  width: "40",
14
16
  height: "40",
15
- fill: "white"
17
+ fill: iconThemed({
18
+ light: '#fff',
19
+ dark: '#161A1D'
20
+ })
16
21
  }), /*#__PURE__*/React.createElement("path", {
17
22
  d: "M8 13C8 12.4477 8.44772 12 9 12H40V28H9C8.44772 28 8 27.5523 8 27V13Z",
18
- fill: "#E6FCFF"
23
+ fill: iconThemed({
24
+ light: '#E3FAFC',
25
+ dark: '#1D474C'
26
+ })
19
27
  }), /*#__PURE__*/React.createElement("g", {
20
28
  clipPath: "url(#clip0)"
21
29
  }, /*#__PURE__*/React.createElement("path", {
22
30
  d: "M19.9999 16.2222C15.5817 16.2222 12.2222 19.5818 12.2222 24H16.0093C16.0093 21.7962 17.7964 20.0093 19.9999 20.0093V16.2222Z",
23
- fill: "#8767AC"
31
+ fill: iconThemed({
32
+ light: '#6E5DC6',
33
+ dark: '#9F8FEF'
34
+ })
24
35
  }), /*#__PURE__*/React.createElement("path", {
25
36
  d: "M12 23.9998H12.676C12.676 19.9578 15.9502 16.6809 19.9909 16.676V16C15.5767 16.0051 12 19.5847 12 23.9998Z",
26
- fill: "#EB2027"
37
+ fill: iconThemed({
38
+ light: '#E34935',
39
+ dark: '#EF5C48'
40
+ })
27
41
  }), /*#__PURE__*/React.createElement("path", {
28
42
  d: "M12.6851 24H13.3517C13.3517 20.3262 16.3273 17.3478 19.9999 17.3429V16.6762C15.9593 16.6811 12.6851 19.958 12.6851 24Z",
29
- fill: "#F19020"
43
+ fill: iconThemed({
44
+ light: '#D97008',
45
+ dark: '#F18D13'
46
+ })
30
47
  }), /*#__PURE__*/React.createElement("path", {
31
48
  d: "M13.3518 24H14.0185C14.0185 20.6945 16.6956 18.0145 20 18.0096V17.3429C16.3274 17.3478 13.3518 20.3262 13.3518 24Z",
32
- fill: "#FFCB4C"
49
+ fill: iconThemed({
50
+ light: '#E2B203',
51
+ dark: '#E2B203'
52
+ })
33
53
  }), /*#__PURE__*/React.createElement("path", {
34
54
  d: "M14.0184 24H14.6851C14.6851 21.0629 17.064 18.6811 20 18.6762V18.0096C16.6955 18.0144 14.0184 20.6944 14.0184 24Z",
35
- fill: "#5C903F"
55
+ fill: iconThemed({
56
+ light: '#6A9A23',
57
+ dark: '#82B536'
58
+ })
36
59
  }), /*#__PURE__*/React.createElement("path", {
37
60
  d: "M14.6851 24H15.3517C15.3517 21.4311 17.4322 19.348 19.9999 19.3431V18.6762C17.0639 18.6811 14.6851 21.0629 14.6851 24Z",
38
- fill: "#226798"
61
+ fill: iconThemed({
62
+ light: '#0055CC',
63
+ dark: '#579DFF'
64
+ })
39
65
  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
40
66
  id: "clip0"
41
67
  }, /*#__PURE__*/React.createElement("rect", {
42
68
  width: "8",
43
69
  height: "8",
44
- fill: "white",
70
+ fill: iconThemed({
71
+ light: '#fff',
72
+ dark: '#fff'
73
+ }),
45
74
  transform: "translate(12 16)"
46
75
  }))));
47
76
  }
@@ -3,7 +3,7 @@ import React, { useMemo, useRef, useState } from 'react';
3
3
  import classnames from 'classnames';
4
4
  import { Resizable } from 're-resizable';
5
5
  import Tooltip from '@atlaskit/tooltip';
6
- import { resizerDangerClassName, resizerHandleClassName, resizerHandleThumbClassName, resizerHandleTrackClassName, resizerHandleZIndex, resizerItemClassName } from '../styles/shared/resizer';
6
+ import { resizerDangerClassName, resizerHandleClassName, resizerHandleThumbClassName, resizerHandleTrackClassName, resizerHandleZIndex, resizerHoverZoneClassName, resizerItemClassName } from '../styles/shared/resizer';
7
7
  export default function ResizerNext(props) {
8
8
  const [isResizing, setIsResizing] = useState(false);
9
9
  const resizable = useRef(null);
@@ -171,5 +171,7 @@ export default function ResizerNext(props) {
171
171
  snapGap: snapGapActual,
172
172
  snap: snap,
173
173
  handleComponent: finalHandleComponent
174
- }, otherProps), children);
174
+ }, otherProps), /*#__PURE__*/React.createElement("span", {
175
+ className: resizerHoverZoneClassName
176
+ }, children));
175
177
  }
@@ -7,6 +7,7 @@ import { B200, B50, N60 } from '@atlaskit/theme/colors';
7
7
  */
8
8
 
9
9
  export const resizerItemClassName = 'resizer-item';
10
+ export const resizerHoverZoneClassName = 'resizer-hover-zone';
10
11
  export const resizerHandleClassName = 'resizer-handle';
11
12
  export const resizerHandleTrackClassName = `${resizerHandleClassName}-track`;
12
13
  export const resizerHandleThumbClassName = `${resizerHandleClassName}-thumb`;
@@ -62,6 +63,7 @@ export const resizerStyles = css`
62
63
  flex-direction: column;
63
64
  justify-content: center;
64
65
  align-items: center;
66
+ margin-top: -16px;
65
67
  }
66
68
 
67
69
  /*
@@ -131,7 +133,7 @@ export const resizerStyles = css`
131
133
  visibility: hidden;
132
134
  position: absolute;
133
135
  width: 7px;
134
- height: calc(100% - 24px);
136
+ height: calc(100% - 42px);
135
137
  border-radius: 4px;
136
138
  opacity: 0;
137
139
  transition: background-color 0.2s, visibility 0.2s, opacity 0.2s;
@@ -150,4 +152,12 @@ export const resizerStyles = css`
150
152
  background: ${`var(--ds-border-focused, ${B200})`};
151
153
  }
152
154
  }
155
+
156
+ .${resizerHoverZoneClassName} {
157
+ padding: 0 ${"var(--ds-space-150, 12px)"};
158
+ position: relative;
159
+ display: inline-block;
160
+ width: 100%;
161
+ left: -12px;
162
+ }
153
163
  `;
@@ -8,7 +8,7 @@ import { themed } from '@atlaskit/theme/components';
8
8
  import { borderRadius } from '@atlaskit/theme/constants';
9
9
  import Layer from '../Layer';
10
10
  const packageName = "@atlaskit/editor-common";
11
- const packageVersion = "74.56.1";
11
+ const packageVersion = "74.56.3";
12
12
  const halfFocusRing = 1;
13
13
  const dropOffset = '0, 8';
14
14
  class DropList extends Component {
@@ -1,5 +1,6 @@
1
1
  /** @jsx jsx */
2
2
  /* eslint-disable no-console */
3
+
3
4
  import React, { useCallback, useLayoutEffect, useRef } from 'react';
4
5
  import { css, jsx } from '@emotion/react';
5
6
  import { fullPageMessages as messages } from '../../messages';
@@ -205,5 +206,10 @@ function getFocusableElements(rootNode) {
205
206
  }
206
207
  function getFilteredFocusableElements(rootNode) {
207
208
  //The focusable elements from child components such as dropdown menus / popups are ignored
208
- return getFocusableElements(rootNode).filter(elm => !elm.closest('[data-role="droplistContent"]') && !elm.closest('[data-emoji-picker-container="true"]') && !elm.closest('[data-test-id="color-picker-menu"]') && !elm.closest('.scroll-buttons'));
209
+ return getFocusableElements(rootNode).filter(elm => {
210
+ const style = window.getComputedStyle(elm);
211
+ // ignore invisible element to avoid losing focus
212
+ const isVisible = style.visibility !== 'hidden' && style.display !== 'none';
213
+ return !elm.closest('[data-role="droplistContent"]') && !elm.closest('[data-emoji-picker-container="true"]') && !elm.closest('[data-test-id="color-picker-menu"]') && !elm.closest('.scroll-buttons') && isVisible;
214
+ });
209
215
  }
@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
6
6
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
7
7
  var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
8
8
  var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
9
- var packageVersion = "74.56.1";
9
+ var packageVersion = "74.56.3";
10
10
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
11
11
  // Remove URL as it has UGC
12
12
  // TODO: Sanitise the URL instead of just removing it
@@ -1,7 +1,8 @@
1
- // TODO: https://product-fabric.atlassian.net/browse/DSP-4138
2
- /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
3
1
  import React from 'react';
2
+ import { useIconThemed } from '../use-icon-themed';
4
3
  export default function IconCustomPanel() {
4
+ var _useIconThemed = useIconThemed(),
5
+ iconThemed = _useIconThemed.iconThemed;
5
6
  return /*#__PURE__*/React.createElement("svg", {
6
7
  width: "40",
7
8
  height: "40",
@@ -12,36 +13,63 @@ export default function IconCustomPanel() {
12
13
  }, /*#__PURE__*/React.createElement("rect", {
13
14
  width: "40",
14
15
  height: "40",
15
- fill: "white"
16
+ fill: iconThemed({
17
+ light: '#fff',
18
+ dark: '#161A1D'
19
+ })
16
20
  }), /*#__PURE__*/React.createElement("path", {
17
21
  d: "M8 13C8 12.4477 8.44772 12 9 12H40V28H9C8.44772 28 8 27.5523 8 27V13Z",
18
- fill: "#E6FCFF"
22
+ fill: iconThemed({
23
+ light: '#E3FAFC',
24
+ dark: '#1D474C'
25
+ })
19
26
  }), /*#__PURE__*/React.createElement("g", {
20
27
  clipPath: "url(#clip0)"
21
28
  }, /*#__PURE__*/React.createElement("path", {
22
29
  d: "M19.9999 16.2222C15.5817 16.2222 12.2222 19.5818 12.2222 24H16.0093C16.0093 21.7962 17.7964 20.0093 19.9999 20.0093V16.2222Z",
23
- fill: "#8767AC"
30
+ fill: iconThemed({
31
+ light: '#6E5DC6',
32
+ dark: '#9F8FEF'
33
+ })
24
34
  }), /*#__PURE__*/React.createElement("path", {
25
35
  d: "M12 23.9998H12.676C12.676 19.9578 15.9502 16.6809 19.9909 16.676V16C15.5767 16.0051 12 19.5847 12 23.9998Z",
26
- fill: "#EB2027"
36
+ fill: iconThemed({
37
+ light: '#E34935',
38
+ dark: '#EF5C48'
39
+ })
27
40
  }), /*#__PURE__*/React.createElement("path", {
28
41
  d: "M12.6851 24H13.3517C13.3517 20.3262 16.3273 17.3478 19.9999 17.3429V16.6762C15.9593 16.6811 12.6851 19.958 12.6851 24Z",
29
- fill: "#F19020"
42
+ fill: iconThemed({
43
+ light: '#D97008',
44
+ dark: '#F18D13'
45
+ })
30
46
  }), /*#__PURE__*/React.createElement("path", {
31
47
  d: "M13.3518 24H14.0185C14.0185 20.6945 16.6956 18.0145 20 18.0096V17.3429C16.3274 17.3478 13.3518 20.3262 13.3518 24Z",
32
- fill: "#FFCB4C"
48
+ fill: iconThemed({
49
+ light: '#E2B203',
50
+ dark: '#E2B203'
51
+ })
33
52
  }), /*#__PURE__*/React.createElement("path", {
34
53
  d: "M14.0184 24H14.6851C14.6851 21.0629 17.064 18.6811 20 18.6762V18.0096C16.6955 18.0144 14.0184 20.6944 14.0184 24Z",
35
- fill: "#5C903F"
54
+ fill: iconThemed({
55
+ light: '#6A9A23',
56
+ dark: '#82B536'
57
+ })
36
58
  }), /*#__PURE__*/React.createElement("path", {
37
59
  d: "M14.6851 24H15.3517C15.3517 21.4311 17.4322 19.348 19.9999 19.3431V18.6762C17.0639 18.6811 14.6851 21.0629 14.6851 24Z",
38
- fill: "#226798"
60
+ fill: iconThemed({
61
+ light: '#0055CC',
62
+ dark: '#579DFF'
63
+ })
39
64
  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
40
65
  id: "clip0"
41
66
  }, /*#__PURE__*/React.createElement("rect", {
42
67
  width: "8",
43
68
  height: "8",
44
- fill: "white",
69
+ fill: iconThemed({
70
+ light: '#fff',
71
+ dark: '#fff'
72
+ }),
45
73
  transform: "translate(12 16)"
46
74
  }))));
47
75
  }
@@ -9,7 +9,7 @@ import React, { useMemo, useRef, useState } from 'react';
9
9
  import classnames from 'classnames';
10
10
  import { Resizable } from 're-resizable';
11
11
  import Tooltip from '@atlaskit/tooltip';
12
- import { resizerDangerClassName, resizerHandleClassName, resizerHandleThumbClassName, resizerHandleTrackClassName, resizerHandleZIndex, resizerItemClassName } from '../styles/shared/resizer';
12
+ import { resizerDangerClassName, resizerHandleClassName, resizerHandleThumbClassName, resizerHandleTrackClassName, resizerHandleZIndex, resizerHoverZoneClassName, resizerItemClassName } from '../styles/shared/resizer';
13
13
  export default function ResizerNext(props) {
14
14
  var _useState = useState(false),
15
15
  _useState2 = _slicedToArray(_useState, 2),
@@ -179,5 +179,7 @@ export default function ResizerNext(props) {
179
179
  snapGap: snapGapActual,
180
180
  snap: snap,
181
181
  handleComponent: finalHandleComponent
182
- }, otherProps), children);
182
+ }, otherProps), /*#__PURE__*/React.createElement("span", {
183
+ className: resizerHoverZoneClassName
184
+ }, children));
183
185
  }
@@ -9,6 +9,7 @@ import { B200, B50, N60 } from '@atlaskit/theme/colors';
9
9
  */
10
10
 
11
11
  export var resizerItemClassName = 'resizer-item';
12
+ export var resizerHoverZoneClassName = 'resizer-hover-zone';
12
13
  export var resizerHandleClassName = 'resizer-handle';
13
14
  export var resizerHandleTrackClassName = "".concat(resizerHandleClassName, "-track");
14
15
  export var resizerHandleThumbClassName = "".concat(resizerHandleClassName, "-thumb");
@@ -17,4 +18,4 @@ export var resizerDangerClassName = "".concat(resizerHandleClassName, "-danger")
17
18
  // akEditorSelectedNodeClassName from '@atlaskit/editor-shared-styles';
18
19
  var akEditorSelectedNodeClassName = 'ak-editor-selected-node';
19
20
  export var resizerHandleZIndex = 99;
20
- export var resizerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .", " {\n will-change: width;\n\n &:hover,\n &.display-handle {\n & .", " {\n visibility: visible;\n opacity: 1;\n }\n }\n\n &.is-resizing {\n & .", " {\n background: ", ";\n }\n }\n\n &.", " {\n & .", " {\n transition: none;\n background: ", ";\n }\n }\n }\n\n .", " {\n display: flex;\n visibility: hidden;\n opacity: 0;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 7px;\n transition: visibility 0.2s, opacity 0.2s;\n\n /*\n NOTE: The below style is targeted at the div element added by the tooltip. We don't have any means of injecting styles\n into the tooltip\n */\n & div[role='presentation'] {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n }\n\n /*\n Handle Positions\n */\n &.left {\n align-items: flex-start;\n }\n &.right {\n align-items: flex-end;\n }\n\n /*\n Handle Sizing\n */\n &.small {\n & .", " {\n height: 43px;\n }\n }\n &.medium {\n & .", " {\n height: 64px;\n }\n }\n &.large {\n & .", " {\n height: 96px;\n }\n }\n\n /*\n Handle Alignment\n */\n &.sticky {\n & .", " {\n position: sticky;\n top: ", ";\n bottom: ", ";\n }\n }\n\n &:hover {\n & .", " {\n background: ", ";\n }\n\n & .", " {\n visibility: visible;\n opacity: 0.5;\n }\n }\n }\n\n .", " {\n content: ' ';\n display: flex;\n width: 3px;\n height: 64px;\n transition: background-color 0.2s;\n border-radius: 6px;\n\n background: ", ";\n }\n\n .", " {\n visibility: hidden;\n position: absolute;\n width: 7px;\n height: calc(100% - 24px);\n border-radius: 4px;\n opacity: 0;\n transition: background-color 0.2s, visibility 0.2s, opacity 0.2s;\n\n &.none {\n background: none;\n }\n\n &.shadow {\n background: ", ";\n }\n }\n\n .", " {\n & .", " {\n background: ", ";\n }\n }\n"])), resizerItemClassName, resizerHandleClassName, resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(B200, ")"), resizerDangerClassName, resizerHandleThumbClassName, "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), resizerHandleClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(B200, ")"), resizerHandleTrackClassName, resizerHandleThumbClassName, "var(--ds-border, ".concat(N60, ")"), resizerHandleTrackClassName, "var(--ds-background-selected, ".concat(B50, ")"), akEditorSelectedNodeClassName, resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(B200, ")"));
21
+ export var resizerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .", " {\n will-change: width;\n\n &:hover,\n &.display-handle {\n & .", " {\n visibility: visible;\n opacity: 1;\n }\n }\n\n &.is-resizing {\n & .", " {\n background: ", ";\n }\n }\n\n &.", " {\n & .", " {\n transition: none;\n background: ", ";\n }\n }\n }\n\n .", " {\n display: flex;\n visibility: hidden;\n opacity: 0;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 7px;\n transition: visibility 0.2s, opacity 0.2s;\n\n /*\n NOTE: The below style is targeted at the div element added by the tooltip. We don't have any means of injecting styles\n into the tooltip\n */\n & div[role='presentation'] {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-top: -16px;\n }\n\n /*\n Handle Positions\n */\n &.left {\n align-items: flex-start;\n }\n &.right {\n align-items: flex-end;\n }\n\n /*\n Handle Sizing\n */\n &.small {\n & .", " {\n height: 43px;\n }\n }\n &.medium {\n & .", " {\n height: 64px;\n }\n }\n &.large {\n & .", " {\n height: 96px;\n }\n }\n\n /*\n Handle Alignment\n */\n &.sticky {\n & .", " {\n position: sticky;\n top: ", ";\n bottom: ", ";\n }\n }\n\n &:hover {\n & .", " {\n background: ", ";\n }\n\n & .", " {\n visibility: visible;\n opacity: 0.5;\n }\n }\n }\n\n .", " {\n content: ' ';\n display: flex;\n width: 3px;\n height: 64px;\n transition: background-color 0.2s;\n border-radius: 6px;\n\n background: ", ";\n }\n\n .", " {\n visibility: hidden;\n position: absolute;\n width: 7px;\n height: calc(100% - 42px);\n border-radius: 4px;\n opacity: 0;\n transition: background-color 0.2s, visibility 0.2s, opacity 0.2s;\n\n &.none {\n background: none;\n }\n\n &.shadow {\n background: ", ";\n }\n }\n\n .", " {\n & .", " {\n background: ", ";\n }\n }\n\n .", " {\n padding: 0 ", ";\n position: relative;\n display: inline-block;\n width: 100%;\n left: -12px;\n }\n"])), resizerItemClassName, resizerHandleClassName, resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(B200, ")"), resizerDangerClassName, resizerHandleThumbClassName, "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), resizerHandleClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(B200, ")"), resizerHandleTrackClassName, resizerHandleThumbClassName, "var(--ds-border, ".concat(N60, ")"), resizerHandleTrackClassName, "var(--ds-background-selected, ".concat(B50, ")"), akEditorSelectedNodeClassName, resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(B200, ")"), resizerHoverZoneClassName, "var(--ds-space-150, 12px)");
@@ -18,7 +18,7 @@ import { themed } from '@atlaskit/theme/components';
18
18
  import { borderRadius } from '@atlaskit/theme/constants';
19
19
  import Layer from '../Layer';
20
20
  var packageName = "@atlaskit/editor-common";
21
- var packageVersion = "74.56.1";
21
+ var packageVersion = "74.56.3";
22
22
  var halfFocusRing = 1;
23
23
  var dropOffset = '0, 8';
24
24
  var DropList = /*#__PURE__*/function (_Component) {
@@ -2,6 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
2
2
  var _templateObject;
3
3
  /** @jsx jsx */
4
4
  /* eslint-disable no-console */
5
+
5
6
  import React, { useCallback, useLayoutEffect, useRef } from 'react';
6
7
  import { css, jsx } from '@emotion/react';
7
8
  import { fullPageMessages as messages } from '../../messages';
@@ -202,6 +203,9 @@ function getFocusableElements(rootNode) {
202
203
  function getFilteredFocusableElements(rootNode) {
203
204
  //The focusable elements from child components such as dropdown menus / popups are ignored
204
205
  return getFocusableElements(rootNode).filter(function (elm) {
205
- return !elm.closest('[data-role="droplistContent"]') && !elm.closest('[data-emoji-picker-container="true"]') && !elm.closest('[data-test-id="color-picker-menu"]') && !elm.closest('.scroll-buttons');
206
+ var style = window.getComputedStyle(elm);
207
+ // ignore invisible element to avoid losing focus
208
+ var isVisible = style.visibility !== 'hidden' && style.display !== 'none';
209
+ return !elm.closest('[data-role="droplistContent"]') && !elm.closest('[data-emoji-picker-container="true"]') && !elm.closest('[data-test-id="color-picker-menu"]') && !elm.closest('.scroll-buttons') && isVisible;
206
210
  });
207
211
  }
@@ -14,5 +14,8 @@ export type SelectCellAEP = SelectAEP<ACTION_SUBJECT_ID.CELL, {
14
14
  selectedCells: number;
15
15
  totalCells: number;
16
16
  }>;
17
- export type SelectionEventPayload = SelectNodeAEP | SelectRangeAEP | SelectAllAEP | SelectCellAEP;
17
+ export type SelectTableAEP = SelectAEP<ACTION_SUBJECT_ID.TABLE, {
18
+ localId: string;
19
+ }>;
20
+ export type SelectionEventPayload = SelectNodeAEP | SelectRangeAEP | SelectAllAEP | SelectCellAEP | SelectTableAEP;
18
21
  export {};
@@ -1,4 +1,5 @@
1
1
  export declare const resizerItemClassName = "resizer-item";
2
+ export declare const resizerHoverZoneClassName = "resizer-hover-zone";
2
3
  export declare const resizerHandleClassName = "resizer-handle";
3
4
  export declare const resizerHandleTrackClassName: string;
4
5
  export declare const resizerHandleThumbClassName: string;
@@ -1,10 +1,11 @@
1
1
  /** @jsx jsx */
2
- import React, { ReactNode } from 'react';
2
+ import type { ReactNode } from 'react';
3
+ import React from 'react';
3
4
  import { jsx } from '@emotion/react';
4
- import { IntlShape } from 'react-intl-next/src/types';
5
- import { EditorView } from '@atlaskit/editor-prosemirror/view';
6
- import { EditorAppearance } from '../../types';
7
- import { UseStickyToolbarType } from '../../ui';
5
+ import type { IntlShape } from 'react-intl-next/src/types';
6
+ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
7
+ import type { EditorAppearance } from '../../types';
8
+ import type { UseStickyToolbarType } from '../../ui';
8
9
  export interface KeyDownHandlerContext {
9
10
  handleArrowLeft: () => void;
10
11
  handleArrowRight: () => void;
@@ -14,5 +14,8 @@ export type SelectCellAEP = SelectAEP<ACTION_SUBJECT_ID.CELL, {
14
14
  selectedCells: number;
15
15
  totalCells: number;
16
16
  }>;
17
- export type SelectionEventPayload = SelectNodeAEP | SelectRangeAEP | SelectAllAEP | SelectCellAEP;
17
+ export type SelectTableAEP = SelectAEP<ACTION_SUBJECT_ID.TABLE, {
18
+ localId: string;
19
+ }>;
20
+ export type SelectionEventPayload = SelectNodeAEP | SelectRangeAEP | SelectAllAEP | SelectCellAEP | SelectTableAEP;
18
21
  export {};
@@ -1,4 +1,5 @@
1
1
  export declare const resizerItemClassName = "resizer-item";
2
+ export declare const resizerHoverZoneClassName = "resizer-hover-zone";
2
3
  export declare const resizerHandleClassName = "resizer-handle";
3
4
  export declare const resizerHandleTrackClassName: string;
4
5
  export declare const resizerHandleThumbClassName: string;
@@ -1,10 +1,11 @@
1
1
  /** @jsx jsx */
2
- import React, { ReactNode } from 'react';
2
+ import type { ReactNode } from 'react';
3
+ import React from 'react';
3
4
  import { jsx } from '@emotion/react';
4
- import { IntlShape } from 'react-intl-next/src/types';
5
- import { EditorView } from '@atlaskit/editor-prosemirror/view';
6
- import { EditorAppearance } from '../../types';
7
- import { UseStickyToolbarType } from '../../ui';
5
+ import type { IntlShape } from 'react-intl-next/src/types';
6
+ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
7
+ import type { EditorAppearance } from '../../types';
8
+ import type { UseStickyToolbarType } from '../../ui';
8
9
  export interface KeyDownHandlerContext {
9
10
  handleArrowLeft: () => void;
10
11
  handleArrowRight: () => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-common",
3
- "version": "74.56.1",
3
+ "version": "74.56.3",
4
4
  "description": "A package that contains common classes and components for editor and renderer",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -111,7 +111,7 @@
111
111
  "@atlaskit/smart-user-picker": "^6.3.0",
112
112
  "@atlaskit/spinner": "^15.5.0",
113
113
  "@atlaskit/task-decision": "^17.7.0",
114
- "@atlaskit/theme": "^12.5.0",
114
+ "@atlaskit/theme": "^12.6.0",
115
115
  "@atlaskit/tokens": "^1.18.0",
116
116
  "@atlaskit/tooltip": "^17.8.0",
117
117
  "@atlaskit/ufo": "^0.2.0",