@atlaskit/editor-core 187.22.1 → 187.23.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 (14) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/plugins/type-ahead/ui/TypeAheadList.js +12 -1
  3. package/dist/cjs/plugins/type-ahead/ui/TypeAheadListItem.js +12 -5
  4. package/dist/cjs/version-wrapper.js +1 -1
  5. package/dist/cjs/version.json +1 -1
  6. package/dist/es2019/plugins/type-ahead/ui/TypeAheadList.js +10 -1
  7. package/dist/es2019/plugins/type-ahead/ui/TypeAheadListItem.js +15 -9
  8. package/dist/es2019/version-wrapper.js +1 -1
  9. package/dist/es2019/version.json +1 -1
  10. package/dist/esm/plugins/type-ahead/ui/TypeAheadList.js +12 -1
  11. package/dist/esm/plugins/type-ahead/ui/TypeAheadListItem.js +13 -6
  12. package/dist/esm/version-wrapper.js +1 -1
  13. package/dist/esm/version.json +1 -1
  14. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/editor-core
2
2
 
3
+ ## 187.23.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`1cadce074e4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1cadce074e4) - [ux] ED-19213 Improved typeahead styling with single point of interaction
8
+
3
9
  ## 187.22.1
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/plugins/type-ahead/ui/TypeAheadList.js CHANGED
@@ -131,6 +131,14 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
131
131
  });
132
132
  });
133
133
  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex]);
134
+ var _onMouseMove = function onMouseMove(event, index) {
135
+ event.preventDefault();
136
+ event.stopPropagation();
137
+ if (selectedIndex === index) {
138
+ return;
139
+ }
140
+ (0, _updateSelectedIndex.updateSelectedIndex)(index)(editorView.state, editorView.dispatch);
141
+ };
134
142
  (0, _react.useLayoutEffect)(function () {
135
143
  if (!listRef.current) {
136
144
  return;
@@ -231,7 +239,10 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
231
239
  style: style,
232
240
  "data-index": index
233
241
  }, (0, _react2.jsx)("div", {
234
- "data-testid": "list-item-height-observed-".concat(index)
242
+ "data-testid": "list-item-height-observed-".concat(index),
243
+ onMouseMove: function onMouseMove(e) {
244
+ return _onMouseMove(e, index);
245
+ }
235
246
  }, (0, _react2.jsx)(_TypeAheadListItem.TypeAheadListItem, {
236
247
  key: items[index].title,
237
248
  item: currentItem,
package/dist/cjs/plugins/type-ahead/ui/TypeAheadListItem.js CHANGED
@@ -39,7 +39,7 @@ var itemText = function itemText(theme) {
39
39
  })(theme), (0, _editorSharedStyles.relativeFontSizeToBase16)(12), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"));
40
40
  };
41
41
  var itemAfter = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n flex: 0 0 auto;\n"])));
42
- var customRenderItemDivStyle = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n overflow: hidden;\n &:hover {\n background-color: ", ";\n }\n &:focus {\n box-shadow: inset 0px 0px 0px 2px ", ";\n outline: none;\n }\n"])), "var(--ds-background-selected, ".concat(_colors.N30, ")"), "var(--ds-border-focused, ".concat(_colors.B100, ")"));
42
+ var customRenderItemDivStyle = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n overflow: hidden;\n &:focus {\n box-shadow: inset 2px 0px 0px ", ";\n background-color: ", ";\n outline: none;\n }\n"])), "var(--ds-border-focused, ".concat(_colors.B400, ")"), "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"));
43
43
 
44
44
  /**
45
45
  * This CSS emulates the desired behaviour with :focus-visible for firefox.
@@ -48,14 +48,19 @@ var customRenderItemDivStyle = (0, _react2.css)(_templateObject5 || (_templateOb
48
48
  */
49
49
  var selectionFrame = {
50
50
  '& > button:focus': {
51
- boxShadow: "inset 0px 0px 0px 2px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
51
+ boxShadow: "inset 2px 0px 0px ".concat("var(--ds-border-focused, ".concat(_colors.B400, ")"), ";"),
52
+ backgroundColor: "".concat("var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")")),
52
53
  outline: 'none',
53
54
  '&:active': {
54
55
  boxShadow: 'none'
55
56
  }
57
+ },
58
+ '& > button:hover': {
59
+ backgroundColor: 'inherit',
60
+ outline: 'none'
56
61
  }
57
62
  };
58
- var selectedStyle = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n"])), "var(--ds-background-selected, ".concat(_colors.N30, ")"));
63
+ var selectedStyle = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n box-shadow: inset 2px 0px 0px ", ";\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"), "var(--ds-border-focused, ".concat(_colors.B400, ")"));
59
64
  var FallbackIcon = /*#__PURE__*/_react.default.memo(function (_ref) {
60
65
  var label = _ref.label;
61
66
  return (0, _react2.jsx)(_quickInsert.IconFallback, null);
@@ -141,8 +146,9 @@ var TypeAheadListItem = function TypeAheadListItem(_ref3) {
141
146
  if (customItem) {
142
147
  return customItem;
143
148
  }
149
+ var listItemClasses = [selectionFrame, isSelected && selectedStyle];
144
150
  return (0, _react2.jsx)("span", {
145
- css: selectionFrame
151
+ css: listItemClasses
146
152
  }, (0, _react2.jsx)(_menu.ButtonItem, {
147
153
  onClick: insertSelectedItem,
148
154
  iconBefore: elementIcon,
@@ -151,7 +157,8 @@ var TypeAheadListItem = function TypeAheadListItem(_ref3) {
151
157
  "aria-label": title,
152
158
  "aria-setsize": itemsLength,
153
159
  role: "option",
154
- ref: buttonItemRef
160
+ ref: buttonItemRef,
161
+ css: listItemClasses
155
162
  }, (0, _react2.jsx)("div", {
156
163
  "aria-hidden": true
157
164
  }, (0, _react2.jsx)("div", {
package/dist/cjs/version-wrapper.js CHANGED
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.version = exports.nextMajorVersion = exports.name = void 0;
7
7
  var name = "@atlaskit/editor-core";
8
8
  exports.name = name;
9
- var version = "187.22.1";
9
+ var version = "187.23.0";
10
10
  exports.version = version;
11
11
  var nextMajorVersion = function nextMajorVersion() {
12
12
  return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "187.22.1",
3
+ "version": "187.23.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/plugins/type-ahead/ui/TypeAheadList.js CHANGED
@@ -110,6 +110,14 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
110
110
  });
111
111
  });
112
112
  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex]);
113
+ const onMouseMove = (event, index) => {
114
+ event.preventDefault();
115
+ event.stopPropagation();
116
+ if (selectedIndex === index) {
117
+ return;
118
+ }
119
+ updateSelectedIndex(index)(editorView.state, editorView.dispatch);
120
+ };
113
121
  useLayoutEffect(() => {
114
122
  if (!listRef.current) {
115
123
  return;
@@ -213,7 +221,8 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
213
221
  style: style,
214
222
  "data-index": index
215
223
  }, jsx("div", {
216
- "data-testid": `list-item-height-observed-${index}`
224
+ "data-testid": `list-item-height-observed-${index}`,
225
+ onMouseMove: e => onMouseMove(e, index)
217
226
  }, jsx(TypeAheadListItem, {
218
227
  key: items[index].title,
219
228
  item: currentItem,
package/dist/es2019/plugins/type-ahead/ui/TypeAheadListItem.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /** @jsx jsx */
2
2
  import React, { useCallback, useMemo, useLayoutEffect } from 'react';
3
3
  import { css, jsx } from '@emotion/react';
4
- import { DN600, N200, N800, N30, B100 } from '@atlaskit/theme/colors';
4
+ import { DN600, N200, N800, N30, B400 } from '@atlaskit/theme/colors';
5
5
  import { themed } from '@atlaskit/theme/components';
6
6
  import { borderRadius } from '@atlaskit/theme/constants';
7
7
  import { ButtonItem } from '@atlaskit/menu';
@@ -57,11 +57,9 @@ const itemAfter = css`
57
57
  `;
58
58
  const customRenderItemDivStyle = css`
59
59
  overflow: hidden;
60
- &:hover {
61
- background-color: ${`var(--ds-background-selected, ${N30})`};
62
- }
63
60
  &:focus {
64
- box-shadow: inset 0px 0px 0px 2px ${`var(--ds-border-focused, ${B100})`};
61
+ box-shadow: inset 2px 0px 0px ${`var(--ds-border-focused, ${B400})`};
62
+ background-color: ${`var(--ds-background-neutral-subtle-hovered, ${N30})`};
65
63
  outline: none;
66
64
  }
67
65
  `;
@@ -73,15 +71,21 @@ const customRenderItemDivStyle = css`
73
71
  */
74
72
  const selectionFrame = {
75
73
  '& > button:focus': {
76
- boxShadow: `inset 0px 0px 0px 2px ${`var(--ds-border-focused, ${B100})`}`,
74
+ boxShadow: `inset 2px 0px 0px ${`var(--ds-border-focused, ${B400})`};`,
75
+ backgroundColor: `${`var(--ds-background-neutral-subtle-hovered, ${N30})`}`,
77
76
  outline: 'none',
78
77
  '&:active': {
79
78
  boxShadow: 'none'
80
79
  }
80
+ },
81
+ '& > button:hover': {
82
+ backgroundColor: 'inherit',
83
+ outline: 'none'
81
84
  }
82
85
  };
83
86
  const selectedStyle = css`
84
- background-color: ${`var(--ds-background-selected, ${N30})`};
87
+ background-color: ${`var(--ds-background-neutral-subtle-hovered, ${N30})`};
88
+ box-shadow: inset 2px 0px 0px ${`var(--ds-border-focused, ${B400})`};
85
89
  `;
86
90
  const FallbackIcon = /*#__PURE__*/React.memo(({
87
91
  label
@@ -173,8 +177,9 @@ export const TypeAheadListItem = ({
173
177
  if (customItem) {
174
178
  return customItem;
175
179
  }
180
+ const listItemClasses = [selectionFrame, isSelected && selectedStyle];
176
181
  return jsx("span", {
177
- css: selectionFrame
182
+ css: listItemClasses
178
183
  }, jsx(ButtonItem, {
179
184
  onClick: insertSelectedItem,
180
185
  iconBefore: elementIcon,
@@ -183,7 +188,8 @@ export const TypeAheadListItem = ({
183
188
  "aria-label": title,
184
189
  "aria-setsize": itemsLength,
185
190
  role: "option",
186
- ref: buttonItemRef
191
+ ref: buttonItemRef,
192
+ css: listItemClasses
187
193
  }, jsx("div", {
188
194
  "aria-hidden": true
189
195
  }, jsx("div", {
package/dist/es2019/version-wrapper.js CHANGED
@@ -1,5 +1,5 @@
1
1
  export const name = "@atlaskit/editor-core";
2
- export const version = "187.22.1";
2
+ export const version = "187.23.0";
3
3
  export const nextMajorVersion = () => {
4
4
  return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
5
5
  };
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "187.22.1",
3
+ "version": "187.23.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/plugins/type-ahead/ui/TypeAheadList.js CHANGED
@@ -122,6 +122,14 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
122
122
  });
123
123
  });
124
124
  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex]);
125
+ var _onMouseMove = function onMouseMove(event, index) {
126
+ event.preventDefault();
127
+ event.stopPropagation();
128
+ if (selectedIndex === index) {
129
+ return;
130
+ }
131
+ updateSelectedIndex(index)(editorView.state, editorView.dispatch);
132
+ };
125
133
  useLayoutEffect(function () {
126
134
  if (!listRef.current) {
127
135
  return;
@@ -222,7 +230,10 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
222
230
  style: style,
223
231
  "data-index": index
224
232
  }, jsx("div", {
225
- "data-testid": "list-item-height-observed-".concat(index)
233
+ "data-testid": "list-item-height-observed-".concat(index),
234
+ onMouseMove: function onMouseMove(e) {
235
+ return _onMouseMove(e, index);
236
+ }
226
237
  }, jsx(TypeAheadListItem, {
227
238
  key: items[index].title,
228
239
  item: currentItem,
package/dist/esm/plugins/type-ahead/ui/TypeAheadListItem.js CHANGED
@@ -3,7 +3,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
3
3
  /** @jsx jsx */
4
4
  import React, { useCallback, useMemo, useLayoutEffect } from 'react';
5
5
  import { css, jsx } from '@emotion/react';
6
- import { DN600, N200, N800, N30, B100 } from '@atlaskit/theme/colors';
6
+ import { DN600, N200, N800, N30, B400 } from '@atlaskit/theme/colors';
7
7
  import { themed } from '@atlaskit/theme/components';
8
8
  import { borderRadius } from '@atlaskit/theme/constants';
9
9
  import { ButtonItem } from '@atlaskit/menu';
@@ -25,7 +25,7 @@ var itemText = function itemText(theme) {
25
25
  })(theme), relativeFontSizeToBase16(12), "var(--ds-text-subtlest, ".concat(N200, ")"));
26
26
  };
27
27
  var itemAfter = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n flex: 0 0 auto;\n"])));
28
- var customRenderItemDivStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n overflow: hidden;\n &:hover {\n background-color: ", ";\n }\n &:focus {\n box-shadow: inset 0px 0px 0px 2px ", ";\n outline: none;\n }\n"])), "var(--ds-background-selected, ".concat(N30, ")"), "var(--ds-border-focused, ".concat(B100, ")"));
28
+ var customRenderItemDivStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n overflow: hidden;\n &:focus {\n box-shadow: inset 2px 0px 0px ", ";\n background-color: ", ";\n outline: none;\n }\n"])), "var(--ds-border-focused, ".concat(B400, ")"), "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"));
29
29
 
30
30
  /**
31
31
  * This CSS emulates the desired behaviour with :focus-visible for firefox.
@@ -34,14 +34,19 @@ var customRenderItemDivStyle = css(_templateObject5 || (_templateObject5 = _tagg
34
34
  */
35
35
  var selectionFrame = {
36
36
  '& > button:focus': {
37
- boxShadow: "inset 0px 0px 0px 2px ".concat("var(--ds-border-focused, ".concat(B100, ")")),
37
+ boxShadow: "inset 2px 0px 0px ".concat("var(--ds-border-focused, ".concat(B400, ")"), ";"),
38
+ backgroundColor: "".concat("var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")")),
38
39
  outline: 'none',
39
40
  '&:active': {
40
41
  boxShadow: 'none'
41
42
  }
43
+ },
44
+ '& > button:hover': {
45
+ backgroundColor: 'inherit',
46
+ outline: 'none'
42
47
  }
43
48
  };
44
- var selectedStyle = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n background-color: ", ";\n"])), "var(--ds-background-selected, ".concat(N30, ")"));
49
+ var selectedStyle = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n background-color: ", ";\n box-shadow: inset 2px 0px 0px ", ";\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"), "var(--ds-border-focused, ".concat(B400, ")"));
45
50
  var FallbackIcon = /*#__PURE__*/React.memo(function (_ref) {
46
51
  var label = _ref.label;
47
52
  return jsx(IconFallback, null);
@@ -127,8 +132,9 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref3) {
127
132
  if (customItem) {
128
133
  return customItem;
129
134
  }
135
+ var listItemClasses = [selectionFrame, isSelected && selectedStyle];
130
136
  return jsx("span", {
131
- css: selectionFrame
137
+ css: listItemClasses
132
138
  }, jsx(ButtonItem, {
133
139
  onClick: insertSelectedItem,
134
140
  iconBefore: elementIcon,
@@ -137,7 +143,8 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref3) {
137
143
  "aria-label": title,
138
144
  "aria-setsize": itemsLength,
139
145
  role: "option",
140
- ref: buttonItemRef
146
+ ref: buttonItemRef,
147
+ css: listItemClasses
141
148
  }, jsx("div", {
142
149
  "aria-hidden": true
143
150
  }, jsx("div", {
package/dist/esm/version-wrapper.js CHANGED
@@ -1,5 +1,5 @@
1
1
  export var name = "@atlaskit/editor-core";
2
- export var version = "187.22.1";
2
+ export var version = "187.23.0";
3
3
  export var nextMajorVersion = function nextMajorVersion() {
4
4
  return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
5
5
  };
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "187.22.1",
3
+ "version": "187.23.0",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "187.22.1",
3
+ "version": "187.23.0",
4
4
  "description": "A package contains Atlassian editor core functionality",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"