@atlaskit/editor-plugin-type-ahead 1.0.0 → 1.0.2

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/.eslintrc.js +4 -0
  2. package/CHANGELOG.md +12 -0
  3. package/dist/cjs/ui/TypeAheadList.js +1 -1
  4. package/dist/cjs/ui/TypeAheadListItem.js +22 -12
  5. package/dist/cjs/ui/TypeAheadPopup.js +8 -9
  6. package/dist/es2019/ui/TypeAheadList.js +2 -2
  7. package/dist/es2019/ui/TypeAheadListItem.js +15 -21
  8. package/dist/es2019/ui/TypeAheadPopup.js +2 -3
  9. package/dist/esm/ui/TypeAheadList.js +2 -2
  10. package/dist/esm/ui/TypeAheadListItem.js +21 -11
  11. package/dist/esm/ui/TypeAheadPopup.js +2 -3
  12. package/dist/types/ui/TypeAheadListItem.d.ts +0 -3
  13. package/dist/types-ts4.5/ui/TypeAheadListItem.d.ts +0 -3
  14. package/package.json +3 -3
package/.eslintrc.js CHANGED
@@ -2,6 +2,10 @@ module.exports = {
2
2
  rules: {
3
3
  '@typescript-eslint/no-duplicate-imports': 'error',
4
4
  '@typescript-eslint/no-explicit-any': 'error',
5
+ '@atlaskit/design-system/ensure-design-token-usage/preview': [
6
+ 'error',
7
+ { domains: ['spacing'], shouldEnforceFallbacks: false },
8
+ ],
5
9
  '@typescript-eslint/ban-types': [
6
10
  'error',
7
11
  {
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-type-ahead
2
2
 
3
+ ## 1.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#73177](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/73177) [`22452599ed8f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/22452599ed8f) - Move styling for certain packages to tokens.
8
+
9
+ ## 1.0.1
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 1.0.0
4
16
 
5
17
  ### Major Changes
package/dist/cjs/ui/TypeAheadList.js CHANGED
@@ -24,7 +24,7 @@ var _templateObject;
24
24
  /** @jsx jsx */
25
25
  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); }
26
26
  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; }
27
- var LIST_ITEM_ESTIMATED_HEIGHT = _TypeAheadListItem.ICON_HEIGHT + _TypeAheadListItem.ITEM_PADDING * 2;
27
+ var LIST_ITEM_ESTIMATED_HEIGHT = 64;
28
28
  var LIST_WIDTH = 320;
29
29
  var TypeaheadAssistiveTextPureComponent = /*#__PURE__*/_react.default.memo(function (_ref) {
30
30
  var numberOfResults = _ref.numberOfResults;
package/dist/cjs/ui/TypeAheadListItem.js CHANGED
@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.itemIcon = exports.TypeAheadListItem = exports.ITEM_PADDING = exports.ICON_WIDTH = exports.ICON_HEIGHT = void 0;
8
+ exports.itemIcon = exports.TypeAheadListItem = void 0;
9
9
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var _react2 = require("@emotion/react");
@@ -16,20 +16,30 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
16
16
  var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
17
17
  var _menu = require("@atlaskit/menu");
18
18
  var _colors = require("@atlaskit/theme/colors");
19
- var _constants = require("@atlaskit/theme/constants");
20
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6; // Disabling for ED-21403 fixing accessibility issue.
19
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5; // Disabling for ED-21403 fixing accessibility issue.
21
20
  /* eslint-disable jsx-a11y/role-supports-aria-props */
22
21
  /** @jsx jsx */
23
22
  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); }
24
23
  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; }
25
- var ICON_HEIGHT = exports.ICON_HEIGHT = 40;
26
- var ICON_WIDTH = exports.ICON_WIDTH = 40;
27
- var ITEM_PADDING = exports.ITEM_PADDING = 12;
28
- var itemIcon = exports.itemIcon = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: ", "px;\n height: ", "px;\n overflow: hidden;\n border: 1px solid ", "; /* N60 at 50% */\n border-radius: ", "px;\n box-sizing: border-box;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n div {\n width: ", "px;\n height: ", "px;\n }\n"])), ICON_WIDTH, ICON_HEIGHT, "var(--ds-border, rgba(223, 225, 229, 0.5))", (0, _constants.borderRadius)(), ICON_WIDTH, ICON_HEIGHT);
29
- var itemBody = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: space-between;\n"])));
30
- var itemText = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n white-space: initial;\n color: ", ";\n .item-title {\n line-height: 1.4;\n }\n .item-description {\n font-size: ", ";\n color: ", ";\n margin-top: 3px;\n }\n"])), "var(--ds-text, ".concat(_colors.N800, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)(12), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"));
31
- var itemAfter = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n flex: 0 0 auto;\n"])));
32
- 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, ")"));
24
+ var itemIcon = exports.itemIcon = (0, _react2.css)({
25
+ width: "var(--ds-space-500, 40px)",
26
+ height: "var(--ds-space-500, 40px)",
27
+ overflow: 'hidden',
28
+ border: "1px solid ".concat("var(--ds-border, rgba(223, 225, 229, 0.5))") /* N60 at 50% */,
29
+ borderRadius: "var(--ds-border-radius, 3px)",
30
+ boxSizing: 'border-box',
31
+ display: 'flex',
32
+ justifyContent: 'center',
33
+ alignItems: 'center',
34
+ div: {
35
+ width: "var(--ds-space-500, 40px)",
36
+ height: "var(--ds-space-500, 40px)"
37
+ }
38
+ });
39
+ var itemBody = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: space-between;\n"])));
40
+ var itemText = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n white-space: initial;\n color: ", ";\n .item-title {\n line-height: 1.4;\n }\n .item-description {\n font-size: ", ";\n color: ", ";\n margin-top: ", ";\n }\n"])), "var(--ds-text, ".concat(_colors.N800, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)(12), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-050, 4px)");
41
+ var itemAfter = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n flex: 0 0 auto;\n"])));
42
+ var customRenderItemDivStyle = (0, _react2.css)(_templateObject4 || (_templateObject4 = (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, ")"));
33
43
 
34
44
  /**
35
45
  * This CSS emulates the desired behaviour with :focus-visible for firefox.
@@ -50,7 +60,7 @@ var selectionFrame = {
50
60
  outline: 'none'
51
61
  }
52
62
  };
53
- 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, ")"));
63
+ var selectedStyle = (0, _react2.css)(_templateObject5 || (_templateObject5 = (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, ")"));
54
64
  var FallbackIcon = /*#__PURE__*/_react.default.memo(function (_ref) {
55
65
  var label = _ref.label;
56
66
  return (0, _react2.jsx)(_quickInsert.IconFallback, null);
package/dist/cjs/ui/TypeAheadPopup.js CHANGED
@@ -15,16 +15,15 @@ var _analytics = require("@atlaskit/editor-common/analytics");
15
15
  var _ui = require("@atlaskit/editor-common/ui");
16
16
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
17
17
  var _colors = require("@atlaskit/theme/colors");
18
- var _constants = require("@atlaskit/theme/constants");
19
- var _constants2 = require("../constants");
18
+ var _constants = require("../constants");
20
19
  var _TypeAheadList = require("./TypeAheadList");
21
- var _TypeAheadListItem = require("./TypeAheadListItem");
22
20
  var _templateObject;
23
21
  /** @jsx jsx */
24
22
  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); }
25
23
  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; }
26
24
  var DEFAULT_TYPEAHEAD_MENU_HEIGHT = 380;
27
- var typeAheadContent = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n border-radius: ", "px;\n box-shadow: ", ";\n padding: ", " 0;\n width: 320px;\n max-height: 380px; /* ~5.5 visibile items */\n overflow-y: auto;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n position: relative;\n"])), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"), (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 0 1px ".concat(_colors.N60A, ", 0 4px 8px -2px ").concat(_colors.N50A), ")"), "var(--ds-space-050, 4px)");
25
+ var ITEM_PADDING = 12;
26
+ var typeAheadContent = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n padding: ", " 0;\n width: 320px;\n max-height: 380px; /* ~5.5 visibile items */\n overflow-y: auto;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n position: relative;\n"])), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"), "var(--ds-border-radius, 3px)", "var(--ds-shadow-overlay, ".concat("0 0 1px ".concat(_colors.N60A, ", 0 4px 8px -2px ").concat(_colors.N50A), ")"), "var(--ds-space-050, 4px)");
28
27
  var Highlight = function Highlight(_ref) {
29
28
  var state = _ref.state,
30
29
  triggerHandler = _ref.triggerHandler;
@@ -134,7 +133,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
134
133
  // Each typeahead item has some padding
135
134
  // We want to leave some space at the top so first item
136
135
  // is not partially cropped
137
- var fitHeightWithSpace = newFitHeight - _TypeAheadListItem.ITEM_PADDING * 2;
136
+ var fitHeightWithSpace = newFitHeight - ITEM_PADDING * 2;
138
137
 
139
138
  // Ensure typeahead height is max its default height
140
139
  var minFitHeight = Math.min(DEFAULT_TYPEAHEAD_MENU_HEIGHT, fitHeightWithSpace);
@@ -163,7 +162,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
163
162
  // Given the user is changing the focus
164
163
  // When the target is inside the TypeAhead Popup
165
164
  // Then the popup should stay open
166
- if (relatedTarget instanceof HTMLElement && relatedTarget.closest && (relatedTarget.closest(".".concat(_constants2.TYPE_AHEAD_POPUP_CONTENT_CLASS)) || relatedTarget.closest("[data-type-ahead=\"".concat(_constants2.TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, "\"]")))) {
165
+ if (relatedTarget instanceof HTMLElement && relatedTarget.closest && (relatedTarget.closest(".".concat(_constants.TYPE_AHEAD_POPUP_CONTENT_CLASS)) || relatedTarget.closest("[data-type-ahead=\"".concat(_constants.TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, "\"]")))) {
167
166
  return;
168
167
  }
169
168
  if (!(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range')) {
@@ -171,7 +170,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
171
170
  }
172
171
  cancel({
173
172
  addPrefixTrigger: true,
174
- setSelectionAt: _constants2.CloseSelectionOptions.AFTER_TEXT_INSERTED,
173
+ setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED,
175
174
  forceFocusOnEditor: false
176
175
  });
177
176
  };
@@ -189,7 +188,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
189
188
  if (event.key === 'Escape') {
190
189
  cancel({
191
190
  addPrefixTrigger: true,
192
- setSelectionAt: _constants2.CloseSelectionOptions.AFTER_TEXT_INSERTED,
191
+ setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED,
193
192
  forceFocusOnEditor: true
194
193
  });
195
194
  }
@@ -212,7 +211,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
212
211
  }, (0, _react2.jsx)("div", {
213
212
  css: typeAheadContent,
214
213
  tabIndex: 0,
215
- className: _constants2.TYPE_AHEAD_POPUP_CONTENT_CLASS,
214
+ className: _constants.TYPE_AHEAD_POPUP_CONTENT_CLASS,
216
215
  ref: ref
217
216
  }, (0, _react2.jsx)(Highlight, {
218
217
  state: editorView.state,
package/dist/es2019/ui/TypeAheadList.js CHANGED
@@ -11,8 +11,8 @@ import { updateSelectedIndex } from '../commands/update-selected-index';
11
11
  import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../constants';
12
12
  import { getTypeAheadListAriaLabels, moveSelectedIndex } from '../utils';
13
13
  import { AssistiveText } from './AssistiveText';
14
- import { ICON_HEIGHT, ITEM_PADDING, TypeAheadListItem } from './TypeAheadListItem';
15
- const LIST_ITEM_ESTIMATED_HEIGHT = ICON_HEIGHT + ITEM_PADDING * 2;
14
+ import { TypeAheadListItem } from './TypeAheadListItem';
15
+ const LIST_ITEM_ESTIMATED_HEIGHT = 64;
16
16
  const LIST_WIDTH = 320;
17
17
  const TypeaheadAssistiveTextPureComponent = /*#__PURE__*/React.memo(({
18
18
  numberOfResults
package/dist/es2019/ui/TypeAheadListItem.js CHANGED
@@ -10,27 +10,21 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
10
10
  import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
11
11
  import { ButtonItem } from '@atlaskit/menu';
12
12
  import { B400, N200, N30, N800 } from '@atlaskit/theme/colors';
13
- import { borderRadius } from '@atlaskit/theme/constants';
14
- export const ICON_HEIGHT = 40;
15
- export const ICON_WIDTH = 40;
16
- export const ITEM_PADDING = 12;
17
- export const itemIcon = css`
18
- width: ${ICON_WIDTH}px;
19
- height: ${ICON_HEIGHT}px;
20
- overflow: hidden;
21
- border: 1px solid ${"var(--ds-border, rgba(223, 225, 229, 0.5))"}; /* N60 at 50% */
22
- border-radius: ${borderRadius()}px;
23
- box-sizing: border-box;
24
-
25
- display: flex;
26
- justify-content: center;
27
- align-items: center;
28
-
29
- div {
30
- width: ${ICON_WIDTH}px;
31
- height: ${ICON_HEIGHT}px;
13
+ export const itemIcon = css({
14
+ width: "var(--ds-space-500, 40px)",
15
+ height: "var(--ds-space-500, 40px)",
16
+ overflow: 'hidden',
17
+ border: `1px solid ${"var(--ds-border, rgba(223, 225, 229, 0.5))"}` /* N60 at 50% */,
18
+ borderRadius: "var(--ds-border-radius, 3px)",
19
+ boxSizing: 'border-box',
20
+ display: 'flex',
21
+ justifyContent: 'center',
22
+ alignItems: 'center',
23
+ div: {
24
+ width: "var(--ds-space-500, 40px)",
25
+ height: "var(--ds-space-500, 40px)"
32
26
  }
33
- `;
27
+ });
34
28
  const itemBody = css`
35
29
  display: flex;
36
30
  flex-direction: row;
@@ -46,7 +40,7 @@ const itemText = css`
46
40
  .item-description {
47
41
  font-size: ${relativeFontSizeToBase16(12)};
48
42
  color: ${`var(--ds-text-subtlest, ${N200})`};
49
- margin-top: 3px;
43
+ margin-top: ${"var(--ds-space-050, 4px)"};
50
44
  }
51
45
  `;
52
46
  const itemAfter = css`
package/dist/es2019/ui/TypeAheadPopup.js CHANGED
@@ -6,14 +6,13 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/anal
6
6
  import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
7
7
  import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
8
8
  import { N0, N50A, N60A } from '@atlaskit/theme/colors';
9
- import { borderRadius } from '@atlaskit/theme/constants';
10
9
  import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
11
10
  import { TypeAheadList } from './TypeAheadList';
12
- import { ITEM_PADDING } from './TypeAheadListItem';
13
11
  const DEFAULT_TYPEAHEAD_MENU_HEIGHT = 380;
12
+ const ITEM_PADDING = 12;
14
13
  const typeAheadContent = css`
15
14
  background: ${`var(--ds-surface-overlay, ${N0})`};
16
- border-radius: ${borderRadius()}px;
15
+ border-radius: ${"var(--ds-border-radius, 3px)"};
17
16
  box-shadow: ${`var(--ds-shadow-overlay, ${`0 0 1px ${N60A}, 0 4px 8px -2px ${N50A}`})`};
18
17
  padding: ${"var(--ds-space-050, 4px)"} 0;
19
18
  width: 320px;
package/dist/esm/ui/TypeAheadList.js CHANGED
@@ -14,8 +14,8 @@ import { updateSelectedIndex } from '../commands/update-selected-index';
14
14
  import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../constants';
15
15
  import { getTypeAheadListAriaLabels, moveSelectedIndex } from '../utils';
16
16
  import { AssistiveText } from './AssistiveText';
17
- import { ICON_HEIGHT, ITEM_PADDING, TypeAheadListItem } from './TypeAheadListItem';
18
- var LIST_ITEM_ESTIMATED_HEIGHT = ICON_HEIGHT + ITEM_PADDING * 2;
17
+ import { TypeAheadListItem } from './TypeAheadListItem';
18
+ var LIST_ITEM_ESTIMATED_HEIGHT = 64;
19
19
  var LIST_WIDTH = 320;
20
20
  var TypeaheadAssistiveTextPureComponent = /*#__PURE__*/React.memo(function (_ref) {
21
21
  var numberOfResults = _ref.numberOfResults;
package/dist/esm/ui/TypeAheadListItem.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
2
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
3
3
  // Disabling for ED-21403 fixing accessibility issue.
4
4
  /* eslint-disable jsx-a11y/role-supports-aria-props */
5
5
  /** @jsx jsx */
@@ -12,15 +12,25 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
12
12
  import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
13
13
  import { ButtonItem } from '@atlaskit/menu';
14
14
  import { B400, N200, N30, N800 } from '@atlaskit/theme/colors';
15
- import { borderRadius } from '@atlaskit/theme/constants';
16
- export var ICON_HEIGHT = 40;
17
- export var ICON_WIDTH = 40;
18
- export var ITEM_PADDING = 12;
19
- export var itemIcon = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: ", "px;\n height: ", "px;\n overflow: hidden;\n border: 1px solid ", "; /* N60 at 50% */\n border-radius: ", "px;\n box-sizing: border-box;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n div {\n width: ", "px;\n height: ", "px;\n }\n"])), ICON_WIDTH, ICON_HEIGHT, "var(--ds-border, rgba(223, 225, 229, 0.5))", borderRadius(), ICON_WIDTH, ICON_HEIGHT);
20
- var itemBody = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: space-between;\n"])));
21
- var itemText = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n white-space: initial;\n color: ", ";\n .item-title {\n line-height: 1.4;\n }\n .item-description {\n font-size: ", ";\n color: ", ";\n margin-top: 3px;\n }\n"])), "var(--ds-text, ".concat(N800, ")"), relativeFontSizeToBase16(12), "var(--ds-text-subtlest, ".concat(N200, ")"));
22
- var itemAfter = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n flex: 0 0 auto;\n"])));
23
- 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, ")"));
15
+ export var itemIcon = css({
16
+ width: "var(--ds-space-500, 40px)",
17
+ height: "var(--ds-space-500, 40px)",
18
+ overflow: 'hidden',
19
+ border: "1px solid ".concat("var(--ds-border, rgba(223, 225, 229, 0.5))") /* N60 at 50% */,
20
+ borderRadius: "var(--ds-border-radius, 3px)",
21
+ boxSizing: 'border-box',
22
+ display: 'flex',
23
+ justifyContent: 'center',
24
+ alignItems: 'center',
25
+ div: {
26
+ width: "var(--ds-space-500, 40px)",
27
+ height: "var(--ds-space-500, 40px)"
28
+ }
29
+ });
30
+ var itemBody = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: space-between;\n"])));
31
+ var itemText = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n white-space: initial;\n color: ", ";\n .item-title {\n line-height: 1.4;\n }\n .item-description {\n font-size: ", ";\n color: ", ";\n margin-top: ", ";\n }\n"])), "var(--ds-text, ".concat(N800, ")"), relativeFontSizeToBase16(12), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-050, 4px)");
32
+ var itemAfter = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n flex: 0 0 auto;\n"])));
33
+ var customRenderItemDivStyle = css(_templateObject4 || (_templateObject4 = _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, ")"));
24
34
 
25
35
  /**
26
36
  * This CSS emulates the desired behaviour with :focus-visible for firefox.
@@ -41,7 +51,7 @@ var selectionFrame = {
41
51
  outline: 'none'
42
52
  }
43
53
  };
44
- 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, ")"));
54
+ var selectedStyle = css(_templateObject5 || (_templateObject5 = _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
55
  var FallbackIcon = /*#__PURE__*/React.memo(function (_ref) {
46
56
  var label = _ref.label;
47
57
  return jsx(IconFallback, null);
package/dist/esm/ui/TypeAheadPopup.js CHANGED
@@ -9,12 +9,11 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/anal
9
9
  import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
10
10
  import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
11
11
  import { N0, N50A, N60A } from '@atlaskit/theme/colors';
12
- import { borderRadius } from '@atlaskit/theme/constants';
13
12
  import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
14
13
  import { TypeAheadList } from './TypeAheadList';
15
- import { ITEM_PADDING } from './TypeAheadListItem';
16
14
  var DEFAULT_TYPEAHEAD_MENU_HEIGHT = 380;
17
- var typeAheadContent = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: ", ";\n border-radius: ", "px;\n box-shadow: ", ";\n padding: ", " 0;\n width: 320px;\n max-height: 380px; /* ~5.5 visibile items */\n overflow-y: auto;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n position: relative;\n"])), "var(--ds-surface-overlay, ".concat(N0, ")"), borderRadius(), "var(--ds-shadow-overlay, ".concat("0 0 1px ".concat(N60A, ", 0 4px 8px -2px ").concat(N50A), ")"), "var(--ds-space-050, 4px)");
15
+ var ITEM_PADDING = 12;
16
+ var typeAheadContent = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n padding: ", " 0;\n width: 320px;\n max-height: 380px; /* ~5.5 visibile items */\n overflow-y: auto;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n position: relative;\n"])), "var(--ds-surface-overlay, ".concat(N0, ")"), "var(--ds-border-radius, 3px)", "var(--ds-shadow-overlay, ".concat("0 0 1px ".concat(N60A, ", 0 4px 8px -2px ").concat(N50A), ")"), "var(--ds-space-050, 4px)");
18
17
  var Highlight = function Highlight(_ref) {
19
18
  var state = _ref.state,
20
19
  triggerHandler = _ref.triggerHandler;
package/dist/types/ui/TypeAheadListItem.d.ts CHANGED
@@ -1,9 +1,6 @@
1
1
  import { jsx } from '@emotion/react';
2
2
  import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
3
3
  import type { TypeAheadItem } from '../types';
4
- export declare const ICON_HEIGHT = 40;
5
- export declare const ICON_WIDTH = 40;
6
- export declare const ITEM_PADDING = 12;
7
4
  export declare const itemIcon: import("@emotion/react").SerializedStyles;
8
5
  type TypeAheadListItemProps = {
9
6
  item: TypeAheadItem;
package/dist/types-ts4.5/ui/TypeAheadListItem.d.ts CHANGED
@@ -1,9 +1,6 @@
1
1
  import { jsx } from '@emotion/react';
2
2
  import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
3
3
  import type { TypeAheadItem } from '../types';
4
- export declare const ICON_HEIGHT = 40;
5
- export declare const ICON_WIDTH = 40;
6
- export declare const ITEM_PADDING = 12;
7
4
  export declare const itemIcon: import("@emotion/react").SerializedStyles;
8
5
  type TypeAheadListItemProps = {
9
6
  item: TypeAheadItem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-type-ahead",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "Type-ahead plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -34,7 +34,7 @@
34
34
  "dependencies": {
35
35
  "@atlaskit/adf-schema": "^35.5.1",
36
36
  "@atlaskit/analytics-next": "^9.2.0",
37
- "@atlaskit/editor-common": "^77.4.0",
37
+ "@atlaskit/editor-common": "^78.0.0",
38
38
  "@atlaskit/editor-plugin-analytics": "^1.0.0",
39
39
  "@atlaskit/editor-prosemirror": "3.0.0",
40
40
  "@atlaskit/editor-shared-styles": "^2.9.0",
@@ -42,7 +42,7 @@
42
42
  "@atlaskit/platform-feature-flags": "^0.2.0",
43
43
  "@atlaskit/prosemirror-input-rules": "^2.4.0",
44
44
  "@atlaskit/theme": "^12.6.0",
45
- "@atlaskit/tokens": "^1.36.0",
45
+ "@atlaskit/tokens": "^1.37.0",
46
46
  "@babel/runtime": "^7.0.0",
47
47
  "@emotion/react": "^11.7.1",
48
48
  "lodash": "^4.17.21",