@atlaskit/editor-common 76.26.3 → 76.26.5

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/editor-common
2
2
 
3
+ ## 76.26.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [#60035](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60035) [`5cf5779a8cbe`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5cf5779a8cbe) - [ux] [ED-19814] Fixed infinite loop when none of the dropdown menu items were enabled during keyboard navigation
8
+
9
+ ## 76.26.4
10
+
11
+ ### Patch Changes
12
+
13
+ - [#59829](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59829) [`3120b36a9f2c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3120b36a9f2c) - Converted spacing values to the corresponding space tokens
14
+
3
15
  ## 76.26.3
4
16
 
5
17
  ### Patch Changes
@@ -30,12 +30,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
30
30
  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; }
31
31
  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); }; }
32
32
  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; } }
33
- var container = exports.container = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background-color: transparent;\n padding: 8px 12px;\n cursor: pointer;\n display: flex;\n margin-top: 0;\n"])));
33
+ var container = exports.container = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background-color: transparent;\n padding: ", " ", ";\n cursor: pointer;\n display: flex;\n margin-top: 0;\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-150, 12px)");
34
34
  var containerSelected = exports.containerSelected = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")"));
35
35
  var nameWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n overflow: hidden;\n"])));
36
36
  var nameStyle = exports.nameStyle = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n line-height: 20px;\n"])), "var(--ds-text, ".concat(_colors.N800, ")"));
37
37
  var containerName = exports.containerName = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n line-height: 14px;\n font-size: ", ";\n"])), "var(--ds-text-subtlest, ".concat(_colors.N300, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSizeSmall)()));
38
- var iconStyle = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n min-width: 16px;\n margin-top: 3px;\n margin-right: 12px;\n\n img {\n max-width: 16px;\n }\n"])));
38
+ var iconStyle = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n min-width: 16px;\n margin-top: 3px;\n margin-right: ", ";\n\n img {\n max-width: 16px;\n }\n"])), "var(--ds-space-150, 12px)");
39
39
  var LinkSearchListItem = /*#__PURE__*/function (_React$PureComponent) {
40
40
  (0, _inherits2.default)(LinkSearchListItem, _React$PureComponent);
41
41
  var _super = _createSuper(LinkSearchListItem);
@@ -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 = "76.26.3";
19
+ var packageVersion = "76.26.5";
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
@@ -11,4 +11,4 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
11
11
  var _colors = require("@atlaskit/theme/colors");
12
12
  var _templateObject;
13
13
  var GRID_GUTTER = exports.GRID_GUTTER = 12;
14
- var gridStyles = exports.gridStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .gridParent {\n width: calc(100% + ", "px);\n margin-left: -", "px;\n margin-right: -", "px;\n transform: scale(1);\n z-index: ", ";\n }\n\n .gridContainer {\n position: fixed;\n height: 100vh;\n width: 100%;\n pointer-events: none;\n }\n\n // TODO: https://product-fabric.atlassian.net/browse/DSP-4352\n .gridLine {\n border-left: 1px solid ", ";\n display: inline-block;\n box-sizing: border-box;\n height: 100%;\n margin-left: -1px;\n\n transition: border-color 0.15s linear;\n z-index: 0;\n }\n\n .highlight {\n border-left: 1px solid ", ";\n }\n"])), GRID_GUTTER * 2, GRID_GUTTER, GRID_GUTTER, _editorSharedStyles.akEditorGridLineZIndex, "var(--ds-border, ".concat(_colors.N30A, ")"), "var(--ds-border-focused, ".concat(_colors.B200, ")"));
14
+ var gridStyles = exports.gridStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .gridParent {\n width: calc(100% + ", "px);\n margin-left: ", "; // Negative GRID_GUTTER\n margin-right: ", "; // Negative GRID_GUTTER\n transform: scale(1);\n z-index: ", ";\n }\n\n .gridContainer {\n position: fixed;\n height: 100vh;\n width: 100%;\n pointer-events: none;\n }\n\n // TODO: https://product-fabric.atlassian.net/browse/DSP-4352\n .gridLine {\n border-left: 1px solid ", ";\n display: inline-block;\n box-sizing: border-box;\n height: 100%;\n margin-left: -1px;\n\n transition: border-color 0.15s linear;\n z-index: 0;\n }\n\n .highlight {\n border-left: 1px solid ", ";\n }\n"])), GRID_GUTTER * 2, "var(--ds-space-negative-150, -12px)", "var(--ds-space-negative-150, -12px)", _editorSharedStyles.akEditorGridLineZIndex, "var(--ds-border, ".concat(_colors.N30A, ")"), "var(--ds-border-focused, ".concat(_colors.B200, ")"));
@@ -14,4 +14,4 @@ var TaskDecisionSharedCssClassName = exports.TaskDecisionSharedCssClassName = {
14
14
  TASK_CONTAINER: 'taskItemView-content-wrap',
15
15
  TASK_ITEM: 'task-item'
16
16
  };
17
- var tasksAndDecisionsStyles = exports.tasksAndDecisionsStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror {\n .taskItemView-content-wrap,\n .", " {\n position: relative;\n min-width: ", "px;\n }\n\n .", " {\n margin-top: 0;\n }\n\n .", " {\n span[contenteditable='false'] {\n height: ", "em;\n }\n }\n\n .", " {\n line-height: ", ";\n }\n }\n\n div[data-task-local-id] {\n span[contenteditable='false'] {\n height: ", "em;\n }\n span[contenteditable='false'] + div {\n line-height: ", "em;\n }\n }\n\n div[data-task-list-local-id] {\n margin: 12px 0 0 0;\n }\n\n div[data-task-list-local-id] {\n // If task item is not first in the list then set margin top to 4px.\n div + div {\n margin-top: ", ";\n }\n }\n\n // If task list is not first in the document then set margin top to 4px.\n div[data-task-list-local-id] div[data-task-list-local-id] {\n margin-top: ", ";\n margin-left: 24px;\n }\n"])), TaskDecisionSharedCssClassName.DECISION_CONTAINER, _editorSharedStyles.akEditorTableCellMinWidth, TaskDecisionSharedCssClassName.DECISION_CONTAINER, TaskDecisionSharedCssClassName.TASK_CONTAINER, _editorSharedStyles.akEditorLineHeight, TaskDecisionSharedCssClassName.TASK_ITEM, _editorSharedStyles.akEditorLineHeight, _editorSharedStyles.akEditorLineHeight, _editorSharedStyles.akEditorLineHeight, "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)");
17
+ var tasksAndDecisionsStyles = exports.tasksAndDecisionsStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror {\n .taskItemView-content-wrap,\n .", " {\n position: relative;\n min-width: ", "px;\n }\n\n .", " {\n margin-top: 0;\n }\n\n .", " {\n span[contenteditable='false'] {\n height: ", "em;\n }\n }\n\n .", " {\n line-height: ", ";\n }\n }\n\n div[data-task-local-id] {\n span[contenteditable='false'] {\n height: ", "em;\n }\n span[contenteditable='false'] + div {\n line-height: ", "em;\n }\n }\n\n div[data-task-list-local-id] {\n margin: ", " 0 0 0;\n }\n\n div[data-task-list-local-id] {\n // If task item is not first in the list then set margin top to 4px.\n div + div {\n margin-top: ", ";\n }\n }\n\n // If task list is not first in the document then set margin top to 4px.\n div[data-task-list-local-id] div[data-task-list-local-id] {\n margin-top: ", ";\n margin-left: ", ";\n }\n"])), TaskDecisionSharedCssClassName.DECISION_CONTAINER, _editorSharedStyles.akEditorTableCellMinWidth, TaskDecisionSharedCssClassName.DECISION_CONTAINER, TaskDecisionSharedCssClassName.TASK_CONTAINER, _editorSharedStyles.akEditorLineHeight, TaskDecisionSharedCssClassName.TASK_ITEM, _editorSharedStyles.akEditorLineHeight, _editorSharedStyles.akEditorLineHeight, _editorSharedStyles.akEditorLineHeight, "var(--ds-space-150, 12px)", "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", "var(--ds-space-300, 24px)");
@@ -21,7 +21,7 @@ var _templateObject, _templateObject2;
21
21
  /** @jsx jsx */
22
22
  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); }; }
23
23
  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; } }
24
- var captionWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n margin-top: 8px;\n text-align: center;\n position: relative;\n color: ", ";\n"])), "var(--ds-text-subtle, ".concat(_colors.N400, ")"));
24
+ var captionWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n margin-top: ", ";\n text-align: center;\n position: relative;\n color: ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-text-subtle, ".concat(_colors.N400, ")"));
25
25
  var placeholderStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n position: absolute;\n top: 0;\n width: 100%;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"));
26
26
  var CaptionComponent = exports.CaptionComponent = /*#__PURE__*/function (_React$Component) {
27
27
  (0, _inherits2.default)(CaptionComponent, _React$Component);
@@ -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 = "76.26.3";
27
+ var packageVersion = "76.26.5";
28
28
  var halfFocusRing = 1;
29
29
  var dropOffset = '0, 8';
30
30
  var DropList = /*#__PURE__*/function (_Component) {
@@ -10,6 +10,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
12
12
  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; }
13
+ var hasEnabledItems = function hasEnabledItems(list) {
14
+ return list.some(function (item) {
15
+ return item.getAttribute('aria-disabled') !== 'true';
16
+ });
17
+ };
18
+
13
19
  /**
14
20
  * This component is a wrapper of vertical menus which listens to keydown events of children
15
21
  * and handles up/down arrow key navigation
@@ -96,18 +102,22 @@ var MenuArrowKeyNavigationProvider = exports.MenuArrowKeyNavigationProvider = fu
96
102
  switch (event.key) {
97
103
  case 'ArrowDown':
98
104
  {
99
- var _focusableElements$fo;
100
- var focusIndex = incrementIndex(focusableElements);
101
- (_focusableElements$fo = focusableElements[focusIndex]) === null || _focusableElements$fo === void 0 || _focusableElements$fo.focus();
102
- event.preventDefault();
105
+ if (hasEnabledItems(focusableElements)) {
106
+ var _focusableElements$fo;
107
+ var focusIndex = incrementIndex(focusableElements);
108
+ (_focusableElements$fo = focusableElements[focusIndex]) === null || _focusableElements$fo === void 0 || _focusableElements$fo.focus();
109
+ event.preventDefault();
110
+ }
103
111
  break;
104
112
  }
105
113
  case 'ArrowUp':
106
114
  {
107
- var _focusableElements$_f;
108
- var _focusIndex = decrementIndex(focusableElements);
109
- (_focusableElements$_f = focusableElements[_focusIndex]) === null || _focusableElements$_f === void 0 || _focusableElements$_f.focus();
110
- event.preventDefault();
115
+ if (hasEnabledItems(focusableElements)) {
116
+ var _focusableElements$_f;
117
+ var _focusIndex = decrementIndex(focusableElements);
118
+ (_focusableElements$_f = focusableElements[_focusIndex]) === null || _focusableElements$_f === void 0 || _focusableElements$_f.focus();
119
+ event.preventDefault();
120
+ }
111
121
  break;
112
122
  }
113
123
 
@@ -12,7 +12,7 @@ import { getCorrectAltByIconUrl } from './listItemAlts';
12
12
  import { transformTimeStamp } from './transformTimeStamp';
13
13
  export const container = css`
14
14
  background-color: transparent;
15
- padding: 8px 12px;
15
+ padding: ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-150, 12px)"};
16
16
  cursor: pointer;
17
17
  display: flex;
18
18
  margin-top: 0;
@@ -38,7 +38,7 @@ export const containerName = css`
38
38
  const iconStyle = css`
39
39
  min-width: 16px;
40
40
  margin-top: 3px;
41
- margin-right: 12px;
41
+ margin-right: ${"var(--ds-space-150, 12px)"};
42
42
 
43
43
  img {
44
44
  max-width: 16px;
@@ -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 = "76.26.3";
3
+ const packageVersion = "76.26.5";
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
@@ -5,8 +5,8 @@ export const GRID_GUTTER = 12;
5
5
  export const gridStyles = css`
6
6
  .gridParent {
7
7
  width: calc(100% + ${GRID_GUTTER * 2}px);
8
- margin-left: -${GRID_GUTTER}px;
9
- margin-right: -${GRID_GUTTER}px;
8
+ margin-left: ${"var(--ds-space-negative-150, -12px)"}; // Negative GRID_GUTTER
9
+ margin-right: ${"var(--ds-space-negative-150, -12px)"}; // Negative GRID_GUTTER
10
10
  transform: scale(1);
11
11
  z-index: ${akEditorGridLineZIndex};
12
12
  }
@@ -38,7 +38,7 @@ export const tasksAndDecisionsStyles = css`
38
38
  }
39
39
 
40
40
  div[data-task-list-local-id] {
41
- margin: 12px 0 0 0;
41
+ margin: ${"var(--ds-space-150, 12px)"} 0 0 0;
42
42
  }
43
43
 
44
44
  div[data-task-list-local-id] {
@@ -51,6 +51,6 @@ export const tasksAndDecisionsStyles = css`
51
51
  // If task list is not first in the document then set margin top to 4px.
52
52
  div[data-task-list-local-id] div[data-task-list-local-id] {
53
53
  margin-top: ${"var(--ds-space-050, 4px)"};
54
- margin-left: 24px;
54
+ margin-left: ${"var(--ds-space-300, 24px)"};
55
55
  }
56
56
  `;
@@ -6,7 +6,7 @@ import { injectIntl } from 'react-intl-next';
6
6
  import { N200, N400 } from '@atlaskit/theme/colors';
7
7
  import { messages } from './messages';
8
8
  const captionWrapperStyle = css`
9
- margin-top: 8px;
9
+ margin-top: ${"var(--ds-space-100, 8px)"};
10
10
  text-align: center;
11
11
  position: relative;
12
12
  color: ${`var(--ds-text-subtle, ${N400})`};
@@ -9,7 +9,7 @@ import { themed } from '@atlaskit/theme/components';
9
9
  import { borderRadius } from '@atlaskit/theme/constants';
10
10
  import Layer from '../Layer';
11
11
  const packageName = "@atlaskit/editor-common";
12
- const packageVersion = "76.26.3";
12
+ const packageVersion = "76.26.5";
13
13
  const halfFocusRing = 1;
14
14
  const dropOffset = '0, 8';
15
15
  class DropList extends Component {
@@ -1,4 +1,6 @@
1
1
  import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
2
+ const hasEnabledItems = list => list.some(item => item.getAttribute('aria-disabled') !== 'true');
3
+
2
4
  /**
3
5
  * This component is a wrapper of vertical menus which listens to keydown events of children
4
6
  * and handles up/down arrow key navigation
@@ -81,18 +83,22 @@ export const MenuArrowKeyNavigationProvider = ({
81
83
  switch (event.key) {
82
84
  case 'ArrowDown':
83
85
  {
84
- var _focusableElements$fo;
85
- const focusIndex = incrementIndex(focusableElements);
86
- (_focusableElements$fo = focusableElements[focusIndex]) === null || _focusableElements$fo === void 0 ? void 0 : _focusableElements$fo.focus();
87
- event.preventDefault();
86
+ if (hasEnabledItems(focusableElements)) {
87
+ var _focusableElements$fo;
88
+ const focusIndex = incrementIndex(focusableElements);
89
+ (_focusableElements$fo = focusableElements[focusIndex]) === null || _focusableElements$fo === void 0 ? void 0 : _focusableElements$fo.focus();
90
+ event.preventDefault();
91
+ }
88
92
  break;
89
93
  }
90
94
  case 'ArrowUp':
91
95
  {
92
- var _focusableElements$fo2;
93
- const focusIndex = decrementIndex(focusableElements);
94
- (_focusableElements$fo2 = focusableElements[focusIndex]) === null || _focusableElements$fo2 === void 0 ? void 0 : _focusableElements$fo2.focus();
95
- event.preventDefault();
96
+ if (hasEnabledItems(focusableElements)) {
97
+ var _focusableElements$fo2;
98
+ const focusIndex = decrementIndex(focusableElements);
99
+ (_focusableElements$fo2 = focusableElements[focusIndex]) === null || _focusableElements$fo2 === void 0 ? void 0 : _focusableElements$fo2.focus();
100
+ event.preventDefault();
101
+ }
96
102
  break;
97
103
  }
98
104
 
@@ -20,12 +20,12 @@ import { N20, N300, N800 } from '@atlaskit/theme/colors';
20
20
  import { fontSizeSmall } from '@atlaskit/theme/constants';
21
21
  import { getCorrectAltByIconUrl } from './listItemAlts';
22
22
  import { transformTimeStamp } from './transformTimeStamp';
23
- export var container = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: transparent;\n padding: 8px 12px;\n cursor: pointer;\n display: flex;\n margin-top: 0;\n"])));
23
+ export var container = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: transparent;\n padding: ", " ", ";\n cursor: pointer;\n display: flex;\n margin-top: 0;\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-150, 12px)");
24
24
  export var containerSelected = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background-color: ", ";\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")"));
25
25
  var nameWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n overflow: hidden;\n"])));
26
26
  export var nameStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n color: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n line-height: 20px;\n"])), "var(--ds-text, ".concat(N800, ")"));
27
27
  export var containerName = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n color: ", ";\n line-height: 14px;\n font-size: ", ";\n"])), "var(--ds-text-subtlest, ".concat(N300, ")"), relativeFontSizeToBase16(fontSizeSmall()));
28
- var iconStyle = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n min-width: 16px;\n margin-top: 3px;\n margin-right: 12px;\n\n img {\n max-width: 16px;\n }\n"])));
28
+ var iconStyle = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n min-width: 16px;\n margin-top: 3px;\n margin-right: ", ";\n\n img {\n max-width: 16px;\n }\n"])), "var(--ds-space-150, 12px)");
29
29
  var LinkSearchListItem = /*#__PURE__*/function (_React$PureComponent) {
30
30
  _inherits(LinkSearchListItem, _React$PureComponent);
31
31
  var _super = _createSuper(LinkSearchListItem);
@@ -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 = "76.26.3";
9
+ var packageVersion = "76.26.5";
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
@@ -4,4 +4,4 @@ import { css } from '@emotion/react';
4
4
  import { akEditorGridLineZIndex } from '@atlaskit/editor-shared-styles';
5
5
  import { B200, N30A } from '@atlaskit/theme/colors';
6
6
  export var GRID_GUTTER = 12;
7
- export var gridStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .gridParent {\n width: calc(100% + ", "px);\n margin-left: -", "px;\n margin-right: -", "px;\n transform: scale(1);\n z-index: ", ";\n }\n\n .gridContainer {\n position: fixed;\n height: 100vh;\n width: 100%;\n pointer-events: none;\n }\n\n // TODO: https://product-fabric.atlassian.net/browse/DSP-4352\n .gridLine {\n border-left: 1px solid ", ";\n display: inline-block;\n box-sizing: border-box;\n height: 100%;\n margin-left: -1px;\n\n transition: border-color 0.15s linear;\n z-index: 0;\n }\n\n .highlight {\n border-left: 1px solid ", ";\n }\n"])), GRID_GUTTER * 2, GRID_GUTTER, GRID_GUTTER, akEditorGridLineZIndex, "var(--ds-border, ".concat(N30A, ")"), "var(--ds-border-focused, ".concat(B200, ")"));
7
+ export var gridStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .gridParent {\n width: calc(100% + ", "px);\n margin-left: ", "; // Negative GRID_GUTTER\n margin-right: ", "; // Negative GRID_GUTTER\n transform: scale(1);\n z-index: ", ";\n }\n\n .gridContainer {\n position: fixed;\n height: 100vh;\n width: 100%;\n pointer-events: none;\n }\n\n // TODO: https://product-fabric.atlassian.net/browse/DSP-4352\n .gridLine {\n border-left: 1px solid ", ";\n display: inline-block;\n box-sizing: border-box;\n height: 100%;\n margin-left: -1px;\n\n transition: border-color 0.15s linear;\n z-index: 0;\n }\n\n .highlight {\n border-left: 1px solid ", ";\n }\n"])), GRID_GUTTER * 2, "var(--ds-space-negative-150, -12px)", "var(--ds-space-negative-150, -12px)", akEditorGridLineZIndex, "var(--ds-border, ".concat(N30A, ")"), "var(--ds-border-focused, ".concat(B200, ")"));
@@ -7,4 +7,4 @@ export var TaskDecisionSharedCssClassName = {
7
7
  TASK_CONTAINER: 'taskItemView-content-wrap',
8
8
  TASK_ITEM: 'task-item'
9
9
  };
10
- export var tasksAndDecisionsStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .ProseMirror {\n .taskItemView-content-wrap,\n .", " {\n position: relative;\n min-width: ", "px;\n }\n\n .", " {\n margin-top: 0;\n }\n\n .", " {\n span[contenteditable='false'] {\n height: ", "em;\n }\n }\n\n .", " {\n line-height: ", ";\n }\n }\n\n div[data-task-local-id] {\n span[contenteditable='false'] {\n height: ", "em;\n }\n span[contenteditable='false'] + div {\n line-height: ", "em;\n }\n }\n\n div[data-task-list-local-id] {\n margin: 12px 0 0 0;\n }\n\n div[data-task-list-local-id] {\n // If task item is not first in the list then set margin top to 4px.\n div + div {\n margin-top: ", ";\n }\n }\n\n // If task list is not first in the document then set margin top to 4px.\n div[data-task-list-local-id] div[data-task-list-local-id] {\n margin-top: ", ";\n margin-left: 24px;\n }\n"])), TaskDecisionSharedCssClassName.DECISION_CONTAINER, akEditorTableCellMinWidth, TaskDecisionSharedCssClassName.DECISION_CONTAINER, TaskDecisionSharedCssClassName.TASK_CONTAINER, akEditorLineHeight, TaskDecisionSharedCssClassName.TASK_ITEM, akEditorLineHeight, akEditorLineHeight, akEditorLineHeight, "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)");
10
+ export var tasksAndDecisionsStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .ProseMirror {\n .taskItemView-content-wrap,\n .", " {\n position: relative;\n min-width: ", "px;\n }\n\n .", " {\n margin-top: 0;\n }\n\n .", " {\n span[contenteditable='false'] {\n height: ", "em;\n }\n }\n\n .", " {\n line-height: ", ";\n }\n }\n\n div[data-task-local-id] {\n span[contenteditable='false'] {\n height: ", "em;\n }\n span[contenteditable='false'] + div {\n line-height: ", "em;\n }\n }\n\n div[data-task-list-local-id] {\n margin: ", " 0 0 0;\n }\n\n div[data-task-list-local-id] {\n // If task item is not first in the list then set margin top to 4px.\n div + div {\n margin-top: ", ";\n }\n }\n\n // If task list is not first in the document then set margin top to 4px.\n div[data-task-list-local-id] div[data-task-list-local-id] {\n margin-top: ", ";\n margin-left: ", ";\n }\n"])), TaskDecisionSharedCssClassName.DECISION_CONTAINER, akEditorTableCellMinWidth, TaskDecisionSharedCssClassName.DECISION_CONTAINER, TaskDecisionSharedCssClassName.TASK_CONTAINER, akEditorLineHeight, TaskDecisionSharedCssClassName.TASK_ITEM, akEditorLineHeight, akEditorLineHeight, akEditorLineHeight, "var(--ds-space-150, 12px)", "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", "var(--ds-space-300, 24px)");
@@ -14,7 +14,7 @@ import { css, jsx } from '@emotion/react';
14
14
  import { injectIntl } from 'react-intl-next';
15
15
  import { N200, N400 } from '@atlaskit/theme/colors';
16
16
  import { messages } from './messages';
17
- var captionWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n margin-top: 8px;\n text-align: center;\n position: relative;\n color: ", ";\n"])), "var(--ds-text-subtle, ".concat(N400, ")"));
17
+ var captionWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n margin-top: ", ";\n text-align: center;\n position: relative;\n color: ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-text-subtle, ".concat(N400, ")"));
18
18
  var placeholderStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n position: absolute;\n top: 0;\n width: 100%;\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"));
19
19
  export var CaptionComponent = /*#__PURE__*/function (_React$Component) {
20
20
  _inherits(CaptionComponent, _React$Component);
@@ -19,7 +19,7 @@ import { themed } from '@atlaskit/theme/components';
19
19
  import { borderRadius } from '@atlaskit/theme/constants';
20
20
  import Layer from '../Layer';
21
21
  var packageName = "@atlaskit/editor-common";
22
- var packageVersion = "76.26.3";
22
+ var packageVersion = "76.26.5";
23
23
  var halfFocusRing = 1;
24
24
  var dropOffset = '0, 8';
25
25
  var DropList = /*#__PURE__*/function (_Component) {
@@ -1,5 +1,11 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
2
  import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
3
+ var hasEnabledItems = function hasEnabledItems(list) {
4
+ return list.some(function (item) {
5
+ return item.getAttribute('aria-disabled') !== 'true';
6
+ });
7
+ };
8
+
3
9
  /**
4
10
  * This component is a wrapper of vertical menus which listens to keydown events of children
5
11
  * and handles up/down arrow key navigation
@@ -86,18 +92,22 @@ export var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvi
86
92
  switch (event.key) {
87
93
  case 'ArrowDown':
88
94
  {
89
- var _focusableElements$fo;
90
- var focusIndex = incrementIndex(focusableElements);
91
- (_focusableElements$fo = focusableElements[focusIndex]) === null || _focusableElements$fo === void 0 || _focusableElements$fo.focus();
92
- event.preventDefault();
95
+ if (hasEnabledItems(focusableElements)) {
96
+ var _focusableElements$fo;
97
+ var focusIndex = incrementIndex(focusableElements);
98
+ (_focusableElements$fo = focusableElements[focusIndex]) === null || _focusableElements$fo === void 0 || _focusableElements$fo.focus();
99
+ event.preventDefault();
100
+ }
93
101
  break;
94
102
  }
95
103
  case 'ArrowUp':
96
104
  {
97
- var _focusableElements$_f;
98
- var _focusIndex = decrementIndex(focusableElements);
99
- (_focusableElements$_f = focusableElements[_focusIndex]) === null || _focusableElements$_f === void 0 || _focusableElements$_f.focus();
100
- event.preventDefault();
105
+ if (hasEnabledItems(focusableElements)) {
106
+ var _focusableElements$_f;
107
+ var _focusIndex = decrementIndex(focusableElements);
108
+ (_focusableElements$_f = focusableElements[_focusIndex]) === null || _focusableElements$_f === void 0 || _focusableElements$_f.focus();
109
+ event.preventDefault();
110
+ }
101
111
  break;
102
112
  }
103
113
 
@@ -15,6 +15,7 @@ export type ColorPaletteArrowKeyNavigationOptions = {
15
15
  selectedColumnIndex: number;
16
16
  isOpenedByKeyboard: boolean;
17
17
  isPopupPositioned: boolean;
18
+ children?: React.ReactNode;
18
19
  };
19
20
  export type ColorPaletteArrowKeyNavigationProps = ColorPaletteArrowKeyNavigationOptions & {
20
21
  handleClose?: SimpleEventHandler<KeyboardEvent>;
@@ -25,6 +26,7 @@ export type MenuArrowKeyNavigationOptions = {
25
26
  type: ArrowKeyNavigationType.MENU;
26
27
  disableArrowKeyNavigation?: boolean;
27
28
  keyDownHandlerContext?: KeyDownHandlerContext;
29
+ children?: React.ReactNode;
28
30
  };
29
31
  export type MenuArrowKeyNavigationProviderProps = MenuArrowKeyNavigationOptions & {
30
32
  handleClose?: SimpleEventHandler<KeyboardEvent>;
@@ -15,6 +15,7 @@ export type ColorPaletteArrowKeyNavigationOptions = {
15
15
  selectedColumnIndex: number;
16
16
  isOpenedByKeyboard: boolean;
17
17
  isPopupPositioned: boolean;
18
+ children?: React.ReactNode;
18
19
  };
19
20
  export type ColorPaletteArrowKeyNavigationProps = ColorPaletteArrowKeyNavigationOptions & {
20
21
  handleClose?: SimpleEventHandler<KeyboardEvent>;
@@ -25,6 +26,7 @@ export type MenuArrowKeyNavigationOptions = {
25
26
  type: ArrowKeyNavigationType.MENU;
26
27
  disableArrowKeyNavigation?: boolean;
27
28
  keyDownHandlerContext?: KeyDownHandlerContext;
29
+ children?: React.ReactNode;
28
30
  };
29
31
  export type MenuArrowKeyNavigationProviderProps = MenuArrowKeyNavigationOptions & {
30
32
  handleClose?: SimpleEventHandler<KeyboardEvent>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-common",
3
- "version": "76.26.3",
3
+ "version": "76.26.5",
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/"