@atlaskit/editor-plugin-type-ahead 2.0.2 → 2.0.4

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 2.0.4
+
+### Patch Changes
+
+- [#120533](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120533)
+  [`f1bec731e278f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f1bec731e278f) -
+  Adds a `sideEffects` field to ensure this package does not have Compiled styles tree-shaken in the
+  future to avoid an accidental regression.
+
+  This is related to
+  https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953
+
+## 2.0.3
+
+### Patch Changes
+
+- [#120431](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120431)
+  [`17173ce340cdc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/17173ce340cdc) -
+  [ED-26763] Support inserting selected item by Enter
+
 ## 2.0.2
 
 ### Patch Changes

package/dist/cjs/ui/modern/TypeAheadMenu.js

@@ -8,6 +8,7 @@ exports.TypeAheadMenu = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+var _updateSelectedIndex = require("../../pm-plugins/commands/update-selected-index");
 var _useItemInsert3 = require("../hooks/use-item-insert");
 var _TypeAheadPopup = require("./TypeAheadPopup");
 var TypeAheadMenu = exports.TypeAheadMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
@@ -30,6 +31,12 @@ var TypeAheadMenu = exports.TypeAheadMenu = /*#__PURE__*/_react.default.memo(fun
     _useItemInsert2 = (0, _slicedToArray2.default)(_useItemInsert, 2),
     onItemInsert = _useItemInsert2[0],
     onTextInsert = _useItemInsert2[1];
+  var setSelectedItem = _react.default.useCallback(function (_ref2) {
+    var nextIndex = _ref2.index;
+    queueMicrotask(function () {
+      (0, _updateSelectedIndex.updateSelectedIndex)(nextIndex, api)(editorView.state, editorView.dispatch);
+    });
+  }, [editorView, api]);
   var insertItem = _react.default.useCallback(function () {
     var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _typeAhead.SelectItemMode.SELECTED;
     var index = arguments.length > 1 ? arguments[1] : undefined;
@@ -41,10 +48,10 @@ var TypeAheadMenu = exports.TypeAheadMenu = /*#__PURE__*/_react.default.memo(fun
       });
     });
   }, [onItemInsert, query]);
-  var cancel = _react.default.useCallback(function (_ref2) {
-    var setSelectionAt = _ref2.setSelectionAt,
-      addPrefixTrigger = _ref2.addPrefixTrigger,
-      forceFocusOnEditor = _ref2.forceFocusOnEditor;
+  var cancel = _react.default.useCallback(function (_ref3) {
+    var setSelectionAt = _ref3.setSelectionAt,
+      addPrefixTrigger = _ref3.addPrefixTrigger,
+      forceFocusOnEditor = _ref3.forceFocusOnEditor;
     var fullQuery = addPrefixTrigger ? "".concat(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger).concat(query) : query;
     onTextInsert({
       forceFocusOnEditor: forceFocusOnEditor,
@@ -65,8 +72,8 @@ var TypeAheadMenu = exports.TypeAheadMenu = /*#__PURE__*/_react.default.memo(fun
     items: items,
     errorInfo: errorInfo
     // selectedIndex={selectedIndex}
-    // setSelectedItem={setSelectedItem}
     ,
+    setSelectedItem: setSelectedItem,
     onItemInsert: insertItem,
     decorationSet: decorationSet,
     isEmptyQuery: !query,

package/dist/cjs/ui/modern/TypeAheadPopup.js

@@ -60,7 +60,8 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     isEmptyQuery = props.isEmptyQuery,
     cancel = props.cancel,
     api = props.api,
-    query = props.query;
+    query = props.query,
+    setSelectedItem = props.setSelectedItem;
   var ref = (0, _react.useRef)(null);
   var defaultMenuHeight = DEFAULT_TYPEAHEAD_MENU_HEIGHT;
   var startTime = (0, _react.useMemo)(function () {
@@ -293,7 +294,8 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
   }, errorInfo ? (0, _react2.jsx)(_TypeAheadErrorFallback.TypeAheadErrorFallback, null) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_editorElementBrowser.QuickInsertPanel, {
     items: items,
     onItemInsert: onItemInsert,
-    query: query
+    query: query,
+    setSelectedItem: setSelectedItem
   }), (api === null || api === void 0 ? void 0 : api.contextPanel) && (0, _react2.jsx)(_ViewAllButton.ViewAllButton, {
     items: items,
     editorApi: api,

package/dist/es2019/ui/modern/TypeAheadMenu.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { updateSelectedIndex } from '../../pm-plugins/commands/update-selected-index';
 import { useItemInsert } from '../hooks/use-item-insert';
 import { TypeAheadPopup as TypeAheadPopupModern } from './TypeAheadPopup';
 export const TypeAheadMenu = /*#__PURE__*/React.memo(({
@@ -22,6 +23,13 @@ export const TypeAheadMenu = /*#__PURE__*/React.memo(({
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   triggerHandler, editorView, items, api);
+  const setSelectedItem = React.useCallback(({
+    index: nextIndex
+  }) => {
+    queueMicrotask(() => {
+      updateSelectedIndex(nextIndex, api)(editorView.state, editorView.dispatch);
+    });
+  }, [editorView, api]);
   const insertItem = React.useCallback((mode = SelectItemMode.SELECTED, index) => {
     queueMicrotask(() => {
       onItemInsert({
@@ -56,8 +64,8 @@ export const TypeAheadMenu = /*#__PURE__*/React.memo(({
     items: items,
     errorInfo: errorInfo
     // selectedIndex={selectedIndex}
-    // setSelectedItem={setSelectedItem}
     ,
+    setSelectedItem: setSelectedItem,
     onItemInsert: insertItem,
     decorationSet: decorationSet,
     isEmptyQuery: !query,

package/dist/es2019/ui/modern/TypeAheadPopup.js

@@ -49,7 +49,8 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     isEmptyQuery,
     cancel,
     api,
-    query
+    query,
+    setSelectedItem
   } = props;
   const ref = useRef(null);
   const defaultMenuHeight = DEFAULT_TYPEAHEAD_MENU_HEIGHT;
@@ -284,7 +285,8 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
   }, errorInfo ? jsx(TypeAheadErrorFallback, null) : jsx(React.Fragment, null, jsx(QuickInsertPanel, {
     items: items,
     onItemInsert: onItemInsert,
-    query: query
+    query: query,
+    setSelectedItem: setSelectedItem
   }), (api === null || api === void 0 ? void 0 : api.contextPanel) && jsx(ViewAllButton, {
     items: items,
     editorApi: api,

package/dist/esm/ui/modern/TypeAheadMenu.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React from 'react';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { updateSelectedIndex } from '../../pm-plugins/commands/update-selected-index';
 import { useItemInsert } from '../hooks/use-item-insert';
 import { TypeAheadPopup as TypeAheadPopupModern } from './TypeAheadPopup';
 export var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
@@ -23,6 +24,12 @@ export var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
     _useItemInsert2 = _slicedToArray(_useItemInsert, 2),
     onItemInsert = _useItemInsert2[0],
     onTextInsert = _useItemInsert2[1];
+  var setSelectedItem = React.useCallback(function (_ref2) {
+    var nextIndex = _ref2.index;
+    queueMicrotask(function () {
+      updateSelectedIndex(nextIndex, api)(editorView.state, editorView.dispatch);
+    });
+  }, [editorView, api]);
   var insertItem = React.useCallback(function () {
     var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : SelectItemMode.SELECTED;
     var index = arguments.length > 1 ? arguments[1] : undefined;
@@ -34,10 +41,10 @@ export var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
       });
     });
   }, [onItemInsert, query]);
-  var cancel = React.useCallback(function (_ref2) {
-    var setSelectionAt = _ref2.setSelectionAt,
-      addPrefixTrigger = _ref2.addPrefixTrigger,
-      forceFocusOnEditor = _ref2.forceFocusOnEditor;
+  var cancel = React.useCallback(function (_ref3) {
+    var setSelectionAt = _ref3.setSelectionAt,
+      addPrefixTrigger = _ref3.addPrefixTrigger,
+      forceFocusOnEditor = _ref3.forceFocusOnEditor;
     var fullQuery = addPrefixTrigger ? "".concat(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger).concat(query) : query;
     onTextInsert({
       forceFocusOnEditor: forceFocusOnEditor,
@@ -58,8 +65,8 @@ export var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
     items: items,
     errorInfo: errorInfo
     // selectedIndex={selectedIndex}
-    // setSelectedItem={setSelectedItem}
     ,
+    setSelectedItem: setSelectedItem,
     onItemInsert: insertItem,
     decorationSet: decorationSet,
     isEmptyQuery: !query,

package/dist/esm/ui/modern/TypeAheadPopup.js

@@ -49,7 +49,8 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     isEmptyQuery = props.isEmptyQuery,
     cancel = props.cancel,
     api = props.api,
-    query = props.query;
+    query = props.query,
+    setSelectedItem = props.setSelectedItem;
   var ref = useRef(null);
   var defaultMenuHeight = DEFAULT_TYPEAHEAD_MENU_HEIGHT;
   var startTime = useMemo(function () {
@@ -282,7 +283,8 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
   }, errorInfo ? jsx(TypeAheadErrorFallback, null) : jsx(React.Fragment, null, jsx(QuickInsertPanel, {
     items: items,
     onItemInsert: onItemInsert,
-    query: query
+    query: query,
+    setSelectedItem: setSelectedItem
   }), (api === null || api === void 0 ? void 0 : api.contextPanel) && jsx(ViewAllButton, {
     items: items,
     editorApi: api,

package/dist/types/ui/modern/TypeAheadPopup.d.ts

@@ -29,6 +29,9 @@ type TypeAheadPopupProps = {
         forceFocusOnEditor: boolean;
     }) => void;
     api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
+    setSelectedItem?: (props: {
+        index: number;
+    }) => void;
 };
 export declare const TypeAheadPopup: React.MemoExoticComponent<(props: TypeAheadPopupProps) => jsx.JSX.Element>;
 export {};

package/dist/types-ts4.5/ui/modern/TypeAheadPopup.d.ts

@@ -29,6 +29,9 @@ type TypeAheadPopupProps = {
         forceFocusOnEditor: boolean;
     }) => void;
     api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
+    setSelectedItem?: (props: {
+        index: number;
+    }) => void;
 };
 export declare const TypeAheadPopup: React.MemoExoticComponent<(props: TypeAheadPopupProps) => jsx.JSX.Element>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-type-ahead",
-	"version": "2.0.2",
+	"version": "2.0.4",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -25,14 +25,16 @@
 			]
 		}
 	},
-	"sideEffects": false,
+	"sideEffects": [
+		"*.compiled.css"
+	],
 	"atlaskit:src": "src/index.ts",
 	"af:exports": {
 		".": "./src/index.ts"
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.2.1",
-		"@atlaskit/editor-common": "^100.2.0",
+		"@atlaskit/editor-common": "^100.4.0",
 		"@atlaskit/editor-element-browser": "^0.1.0",
 		"@atlaskit/editor-plugin-analytics": "^2.0.0",
 		"@atlaskit/editor-plugin-connectivity": "^2.0.0",