@atlaskit/editor-plugin-type-ahead 0.5.0 → 0.7.0

package/dist/cjs/ui/TypeAheadListItem.js

@@ -0,0 +1,181 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.itemIcon = exports.TypeAheadListItem = exports.ITEM_PADDING = exports.ICON_WIDTH = exports.ICON_HEIGHT = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _quickInsert = require("@atlaskit/editor-common/quick-insert");
+var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
+var _menu = require("@atlaskit/menu");
+var _colors = require("@atlaskit/theme/colors");
+var _components = require("@atlaskit/theme/components");
+var _constants = require("@atlaskit/theme/constants");
+var _messages = require("../messages");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+/** @jsx jsx */
+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); }
+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; }
+var ICON_HEIGHT = exports.ICON_HEIGHT = 40;
+var ICON_WIDTH = exports.ICON_WIDTH = 40;
+var ITEM_PADDING = exports.ITEM_PADDING = 12;
+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);
+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"])));
+var itemText = function itemText(theme) {
+  return (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"])), (0, _components.themed)({
+    light: "var(--ds-text, ".concat(_colors.N800, ")"),
+    dark: "var(--ds-text, ".concat(_colors.DN600, ")")
+  })(theme), (0, _editorSharedStyles.relativeFontSizeToBase16)(12), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"));
+};
+var itemAfter = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n"])));
+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, ")"));
+
+/**
+ * This CSS emulates the desired behaviour with :focus-visible for firefox.
+ * Firefox unfortunately does not register keyboard focus if user mouseDown and drag a typeahead item
+ * resulting in focus-visible style not drawn.
+ */
+var selectionFrame = {
+  '& > button:focus': {
+    boxShadow: "inset 2px 0px 0px ".concat("var(--ds-border-focused, ".concat(_colors.B400, ")"), ";"),
+    backgroundColor: "".concat("var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")")),
+    outline: 'none',
+    '&:active': {
+      boxShadow: 'none'
+    }
+  },
+  '& > button:hover': {
+    backgroundColor: 'inherit',
+    outline: 'none'
+  }
+};
+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, ")"));
+var FallbackIcon = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var label = _ref.label;
+  return (0, _react2.jsx)(_quickInsert.IconFallback, null);
+});
+var noop = function noop() {};
+var AssistiveText = function AssistiveText(_ref2) {
+  var title = _ref2.title,
+    description = _ref2.description,
+    shortcut = _ref2.shortcut;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var descriptionText = description ? " ".concat(intl.formatMessage(_messages.typeAheadListMessages.descriptionLabel), " ").concat(description, ".") : '';
+  var shortcutText = shortcut ? " ".concat(intl.formatMessage(_messages.typeAheadListMessages.shortcutLabel), " ").concat(shortcut, ".") : '';
+  return (0, _react2.jsx)("span", {
+    className: "assistive"
+  }, "".concat(title, ". ").concat(descriptionText, " ").concat(shortcutText));
+};
+var TypeAheadListItem = exports.TypeAheadListItem = function TypeAheadListItem(_ref3) {
+  var item = _ref3.item,
+    itemsLength = _ref3.itemsLength,
+    selectedIndex = _ref3.selectedIndex,
+    onItemClick = _ref3.onItemClick,
+    itemIndex = _ref3.itemIndex,
+    ariaLabel = _ref3.ariaLabel;
+  /**
+   * To select and highlight the first Item when no item is selected
+   * However selectedIndex remains -1, So that user does not skip the first item when down arrow key is used from typeahead query(inputQuery.tsx)
+   */
+  var isSelected = itemIndex === selectedIndex || selectedIndex === -1 && itemIndex === 0;
+  var icon = item.icon,
+    title = item.title,
+    customRenderItem = item.render;
+  var elementIcon = (0, _react.useMemo)(function () {
+    return (0, _react2.jsx)("div", {
+      css: itemIcon
+    }, icon ? icon() : (0, _react2.jsx)(FallbackIcon, {
+      label: title
+    }));
+  }, [icon, title]);
+  var insertSelectedItem = (0, _react.useCallback)(function () {
+    onItemClick(_typeAhead.SelectItemMode.SELECTED, itemIndex);
+  }, [onItemClick, itemIndex]);
+  var customItemRef = /*#__PURE__*/_react.default.createRef();
+  var buttonItemRef = /*#__PURE__*/_react.default.createRef();
+  var shouldUpdateFocus = selectedIndex === itemIndex;
+  (0, _react.useLayoutEffect)(function () {
+    if (shouldUpdateFocus) {
+      var _customItemRef$curren;
+      customItemRef === null || customItemRef === void 0 || (_customItemRef$curren = customItemRef.current) === null || _customItemRef$curren === void 0 || _customItemRef$curren.focus();
+    }
+  }, [customItemRef, shouldUpdateFocus]);
+  (0, _react.useLayoutEffect)(function () {
+    if (shouldUpdateFocus) {
+      var _buttonItemRef$curren;
+      buttonItemRef === null || buttonItemRef === void 0 || (_buttonItemRef$curren = buttonItemRef.current) === null || _buttonItemRef$curren === void 0 || _buttonItemRef$curren.focus();
+    }
+  }, [buttonItemRef, shouldUpdateFocus]);
+  var customItem = (0, _react.useMemo)(function () {
+    if (!customRenderItem) {
+      return null;
+    }
+    var Comp = customRenderItem;
+    var listItemClasses = [customRenderItemDivStyle, isSelected && selectedStyle];
+    return (0, _react2.jsx)("div", {
+      "aria-selected": isSelected,
+      role: "option",
+      "aria-label": ariaLabel,
+      "aria-setsize": itemsLength,
+      "aria-posinset": itemIndex,
+      tabIndex: 0,
+      css: listItemClasses,
+      className: "ak-typeahead-item ".concat(isSelected ? 'typeahead-selected-item' : '')
+      //CSS classes added for test cases purpose
+      ,
+      ref: customItemRef
+    }, (0, _react2.jsx)("div", {
+      "aria-hidden": true
+    }, (0, _react2.jsx)(Comp, {
+      onClick: insertSelectedItem,
+      isSelected: false //The selection styles are handled in the parent div instead. Hence isSelected is made false always.
+      ,
+      onHover: noop
+    })));
+  }, [customRenderItem, isSelected, ariaLabel, itemsLength, customItemRef, insertSelectedItem, itemIndex]);
+  if (customItem) {
+    return customItem;
+  }
+  var listItemClasses = [selectionFrame, isSelected && selectedStyle];
+  return (0, _react2.jsx)("span", {
+    css: listItemClasses
+  }, (0, _react2.jsx)(_menu.ButtonItem, {
+    onClick: insertSelectedItem,
+    iconBefore: elementIcon,
+    isSelected: isSelected,
+    "aria-selected": isSelected,
+    "aria-label": title,
+    "aria-setsize": itemsLength,
+    "aria-posinset": itemIndex,
+    role: "option",
+    ref: buttonItemRef
+    // @ts-ignore
+    ,
+    css: listItemClasses
+  }, (0, _react2.jsx)("div", {
+    "aria-hidden": true
+  }, (0, _react2.jsx)("div", {
+    css: itemText
+  }, (0, _react2.jsx)("div", {
+    css: itemBody
+  }, (0, _react2.jsx)("div", {
+    className: "item-title"
+  }, item.title), (0, _react2.jsx)("div", {
+    css: itemAfter
+  }, item.keyshortcut && (0, _react2.jsx)("div", {
+    css: _shortcut.shortcutStyle
+  }, item.keyshortcut))), (0, _react2.jsx)("div", {
+    className: "item-description"
+  }, item.description))), (0, _react2.jsx)(AssistiveText, {
+    title: item.title,
+    description: item.description,
+    shortcut: item.keyshortcut
+  })));
+};

package/dist/cjs/ui/TypeAheadPopup.js

@@ -0,0 +1,230 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TypeAheadPopup = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _ui = require("@atlaskit/editor-common/ui");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _colors = require("@atlaskit/theme/colors");
+var _constants = require("@atlaskit/theme/constants");
+var _constants2 = require("../constants");
+var _TypeAheadList = require("./TypeAheadList");
+var _TypeAheadListItem = require("./TypeAheadListItem");
+var _templateObject;
+/** @jsx jsx */
+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); }
+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; }
+var DEFAULT_TYPEAHEAD_MENU_HEIGHT = 380;
+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)");
+var Highlight = function Highlight(_ref) {
+  var state = _ref.state,
+    triggerHandler = _ref.triggerHandler;
+  if (!(triggerHandler !== null && triggerHandler !== void 0 && triggerHandler.getHighlight)) {
+    return null;
+  }
+  return triggerHandler.getHighlight(state);
+};
+var OFFSET = [0, 8];
+var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(function (props) {
+  var editorView = props.editorView,
+    triggerHandler = props.triggerHandler,
+    anchorElement = props.anchorElement,
+    popupsMountPoint = props.popupsMountPoint,
+    popupsBoundariesElement = props.popupsBoundariesElement,
+    popupsScrollableElement = props.popupsScrollableElement,
+    items = props.items,
+    selectedIndex = props.selectedIndex,
+    onItemInsert = props.onItemInsert,
+    fireAnalyticsCallback = props.fireAnalyticsCallback,
+    isEmptyQuery = props.isEmptyQuery,
+    cancel = props.cancel;
+  var ref = (0, _react.useRef)(null);
+  var startTime = (0, _react.useMemo)(function () {
+    return performance.now();
+  },
+  // In case those props changes
+  // we need to recreate the startTime
+  [items, isEmptyQuery, fireAnalyticsCallback, triggerHandler] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  (0, _react.useEffect)(function () {
+    if (!fireAnalyticsCallback) {
+      return;
+    }
+    var stopTime = performance.now();
+    var time = stopTime - startTime;
+    fireAnalyticsCallback({
+      payload: {
+        action: _analytics.ACTION.RENDERED,
+        actionSubject: _analytics.ACTION_SUBJECT.TYPEAHEAD,
+        eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          time: time,
+          items: items.length,
+          initial: isEmptyQuery
+        }
+      }
+    });
+  }, [startTime, items, fireAnalyticsCallback, isEmptyQuery,
+  // In case the current triggerHandler changes
+  // e.g: Inserting a mention using the quick insert
+  // we need to send the event again
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  triggerHandler]);
+  (0, _react.useEffect)(function () {
+    if (!fireAnalyticsCallback) {
+      return;
+    }
+    fireAnalyticsCallback({
+      payload: {
+        action: _analytics.ACTION.VIEWED,
+        actionSubject: _analytics.ACTION_SUBJECT.TYPEAHEAD_ITEM,
+        eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          index: selectedIndex,
+          items: items.length
+        }
+      }
+    });
+  }, [items, fireAnalyticsCallback, selectedIndex,
+  // In case the current triggerHandler changes
+  // e.g: Inserting a mention using the quick insert
+  // we need to send the event again
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  triggerHandler]);
+  var _useState = (0, _react.useState)(DEFAULT_TYPEAHEAD_MENU_HEIGHT),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    fitHeight = _useState2[0],
+    setFitHeight = _useState2[1];
+  var getFitHeight = (0, _react.useCallback)(function () {
+    if (!anchorElement || !popupsMountPoint) {
+      return;
+    }
+    var target = anchorElement;
+    var _target$getBoundingCl = target.getBoundingClientRect(),
+      targetTop = _target$getBoundingCl.top,
+      targetHeight = _target$getBoundingCl.height;
+    var boundariesElement = document.body;
+    var _boundariesElement$ge = boundariesElement.getBoundingClientRect(),
+      boundariesHeight = _boundariesElement$ge.height,
+      boundariesTop = _boundariesElement$ge.top;
+
+    // Calculating the space above and space below our decoration
+    var spaceAbove = targetTop - (boundariesTop - boundariesElement.scrollTop);
+    var spaceBelow = boundariesTop + boundariesHeight - (targetTop + targetHeight);
+
+    // Keep default height if more than enough space
+    if (spaceBelow >= DEFAULT_TYPEAHEAD_MENU_HEIGHT) {
+      return setFitHeight(DEFAULT_TYPEAHEAD_MENU_HEIGHT);
+    }
+
+    // Determines whether typeahead will fit above or below decoration
+    // and return the space available.
+    var newFitHeight = spaceBelow >= spaceAbove ? spaceBelow : spaceAbove;
+
+    // Each typeahead item has some padding
+    // We want to leave some space at the top so first item
+    // is not partially cropped
+    var fitHeightWithSpace = newFitHeight - _TypeAheadListItem.ITEM_PADDING * 2;
+
+    // Ensure typeahead height is max its default height
+    var minFitHeight = Math.min(DEFAULT_TYPEAHEAD_MENU_HEIGHT, fitHeightWithSpace);
+    return setFitHeight(minFitHeight);
+  }, [anchorElement, popupsMountPoint]);
+  var getFitHeightDebounced = (0, _rafSchd.default)(getFitHeight);
+  (0, _react.useLayoutEffect)(function () {
+    var scrollableElement = popupsScrollableElement || (0, _ui.findOverflowScrollParent)(anchorElement);
+    getFitHeight();
+    window.addEventListener('resize', getFitHeightDebounced);
+    if (scrollableElement) {
+      scrollableElement.addEventListener('scroll', getFitHeightDebounced);
+    }
+    return function () {
+      window.removeEventListener('resize', getFitHeightDebounced);
+      if (scrollableElement) {
+        scrollableElement.removeEventListener('scroll', getFitHeightDebounced);
+      }
+    };
+  }, [anchorElement, popupsScrollableElement, getFitHeightDebounced, getFitHeight]);
+  (0, _react.useLayoutEffect)(function () {
+    var focusOut = function focusOut(event) {
+      var _window$getSelection;
+      var relatedTarget = event.relatedTarget;
+
+      // Given the user is changing the focus
+      // When the target is inside the TypeAhead Popup
+      // Then the popup should stay open
+      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, "\"]")))) {
+        return;
+      }
+      if (!(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range')) {
+        return;
+      }
+      cancel({
+        addPrefixTrigger: true,
+        setSelectionAt: _constants2.CloseSelectionOptions.AFTER_TEXT_INSERTED,
+        forceFocusOnEditor: false
+      });
+    };
+    var element = ref.current;
+    element === null || element === void 0 || element.addEventListener('focusout', focusOut);
+    return function () {
+      element === null || element === void 0 || element.removeEventListener('focusout', focusOut);
+    };
+  }, [ref, cancel]);
+
+  // ED-17443 When you press escape on typeahead panel, it should remove focus and close the panel
+  // This is the expected keyboard behaviour advised by the Accessibility team
+  (0, _react.useLayoutEffect)(function () {
+    var escape = function escape(event) {
+      if (event.key === 'Escape') {
+        cancel({
+          addPrefixTrigger: true,
+          setSelectionAt: _constants2.CloseSelectionOptions.AFTER_TEXT_INSERTED,
+          forceFocusOnEditor: true
+        });
+      }
+    };
+    var element = ref.current;
+    element === null || element === void 0 || element.addEventListener('keydown', escape);
+    return function () {
+      element === null || element === void 0 || element.removeEventListener('keydown', escape);
+    };
+  }, [ref, cancel]);
+  return (0, _react2.jsx)(_ui.Popup, {
+    zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
+    target: anchorElement,
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    fitHeight: fitHeight,
+    fitWidth: 340,
+    offset: OFFSET
+  }, (0, _react2.jsx)("div", {
+    css: typeAheadContent,
+    tabIndex: 0,
+    className: _constants2.TYPE_AHEAD_POPUP_CONTENT_CLASS,
+    ref: ref
+  }, (0, _react2.jsx)(Highlight, {
+    state: editorView.state,
+    triggerHandler: triggerHandler
+  }), (0, _react2.jsx)(_TypeAheadList.TypeAheadList, {
+    items: items,
+    selectedIndex: selectedIndex,
+    onItemClick: onItemInsert,
+    fitHeight: fitHeight,
+    editorView: editorView,
+    decorationElement: anchorElement,
+    triggerHandler: triggerHandler
+  })));
+});
+TypeAheadPopup.displayName = 'TypeAheadPopup';

package/dist/cjs/ui/WrapperTypeAhead.js

@@ -0,0 +1,127 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WrapperTypeAhead = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+var _updateQuery = require("../commands/update-query");
+var _utils = require("../utils");
+var _useItemInsert3 = require("./hooks/use-item-insert");
+var _useLoadItems = require("./hooks/use-load-items");
+var _useOnForceSelect = require("./hooks/use-on-force-select");
+var _InputQuery = require("./InputQuery");
+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); }
+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; }
+var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var triggerHandler = _ref.triggerHandler,
+    editorView = _ref.editorView,
+    anchorElement = _ref.anchorElement,
+    shouldFocusCursorInsideQuery = _ref.shouldFocusCursorInsideQuery,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    createAnalyticsEvent = _ref.createAnalyticsEvent,
+    inputMethod = _ref.inputMethod,
+    getDecorationPosition = _ref.getDecorationPosition,
+    reopenQuery = _ref.reopenQuery,
+    onUndoRedo = _ref.onUndoRedo;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    closed = _useState2[0],
+    setClosed = _useState2[1];
+  var _useState3 = (0, _react.useState)(reopenQuery || ''),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    query = _useState4[0],
+    setQuery = _useState4[1];
+  var queryRef = (0, _react.useRef)(query);
+  var editorViewRef = (0, _react.useRef)(editorView);
+  var items = (0, _useLoadItems.useLoadItems)(triggerHandler, editorView, query);
+  (0, _react.useLayoutEffect)(function () {
+    queryRef.current = query;
+  }, [query]);
+  var _useItemInsert = (0, _useItemInsert3.useItemInsert)(triggerHandler, editorView, items),
+    _useItemInsert2 = (0, _slicedToArray2.default)(_useItemInsert, 2),
+    onItemInsert = _useItemInsert2[0],
+    onTextInsert = _useItemInsert2[1];
+  var selectNextItem = (0, _react.useMemo)(function () {
+    return (0, _utils.moveSelectedIndex)({
+      editorView: editorView,
+      direction: 'next'
+    });
+  }, [editorView]);
+  var selectPreviousItem = (0, _react.useMemo)(function () {
+    return (0, _utils.moveSelectedIndex)({
+      editorView: editorView,
+      direction: 'previous'
+    });
+  }, [editorView]);
+  var cancel = (0, _react.useCallback)(function (_ref2) {
+    var setSelectionAt = _ref2.setSelectionAt,
+      addPrefixTrigger = _ref2.addPrefixTrigger,
+      text = _ref2.text,
+      forceFocusOnEditor = _ref2.forceFocusOnEditor;
+    setClosed(true);
+    var fullquery = addPrefixTrigger ? "".concat(triggerHandler.trigger).concat(text) : text;
+    onTextInsert({
+      forceFocusOnEditor: forceFocusOnEditor,
+      setSelectionAt: setSelectionAt,
+      text: fullquery
+    });
+  }, [triggerHandler, onTextInsert]);
+  var insertSelectedItem = (0, _react.useCallback)(function () {
+    var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _typeAhead.SelectItemMode.SELECTED;
+    var view = editorViewRef.current;
+    var _ref3 = (0, _utils.getPluginState)(view.state),
+      selectedIndex = _ref3.selectedIndex;
+    setClosed(true);
+    queueMicrotask(function () {
+      onItemInsert({
+        mode: mode,
+        index: selectedIndex,
+        query: queryRef.current
+      });
+    });
+  }, [onItemInsert]);
+  var showTypeAheadPopupList = (0, _react.useCallback)(function () {}, []);
+  var closePopup = (0, _react.useCallback)(function () {
+    setClosed(true);
+  }, []);
+  (0, _react.useEffect)(function () {
+    var view = editorViewRef.current;
+    var pluginState = (0, _utils.getPluginState)(view.state);
+    if (query.length === 0 || query === (pluginState === null || pluginState === void 0 ? void 0 : pluginState.query) || !(pluginState !== null && pluginState !== void 0 && pluginState.triggerHandler)) {
+      return;
+    }
+    (0, _updateQuery.updateQuery)(query)(view.state, view.dispatch);
+  }, [query, reopenQuery]);
+  (0, _useOnForceSelect.useOnForceSelect)({
+    triggerHandler: triggerHandler,
+    items: items,
+    query: query,
+    editorView: editorView,
+    closePopup: closePopup
+  });
+  if (closed) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_InputQuery.InputQuery, {
+    triggerQueryPrefix: triggerHandler.trigger,
+    onQueryChange: setQuery,
+    onItemSelect: insertSelectedItem,
+    selectNextItem: selectNextItem,
+    selectPreviousItem: selectPreviousItem,
+    onQueryFocus: showTypeAheadPopupList,
+    cancel: cancel,
+    forceFocus: shouldFocusCursorInsideQuery,
+    onUndoRedo: onUndoRedo,
+    reopenQuery: reopenQuery,
+    editorView: editorView,
+    items: items
+  });
+});
+WrapperTypeAhead.displayName = 'WrapperTypeAhead';

package/dist/cjs/ui/hooks/use-item-insert.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useItemInsert = void 0;
+var _react = require("react");
+var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+var _insertTypeAheadItem = require("../../commands/insert-type-ahead-item");
+var _constants = require("../../constants");
+var _closeTypeAhead = require("../../transforms/close-type-ahead");
+var _setSelectionBeforeQuery = require("../../transforms/set-selection-before-query");
+var insertRawQuery = function insertRawQuery(_ref) {
+  var view = _ref.view,
+    setSelectionAt = _ref.setSelectionAt,
+    text = _ref.text,
+    forceFocusOnEditor = _ref.forceFocusOnEditor;
+  var _view$state = view.state,
+    tr = _view$state.tr,
+    schema = _view$state.schema;
+  (0, _closeTypeAhead.closeTypeAhead)(tr);
+  if (text.length > 0) {
+    tr.replaceSelectionWith(schema.text(text));
+    if (setSelectionAt === _constants.CloseSelectionOptions.BEFORE_TEXT_INSERTED) {
+      (0, _setSelectionBeforeQuery.setSelectionBeforeQuery)(text)(tr);
+    }
+  }
+  view.dispatch(tr);
+  if (forceFocusOnEditor) {
+    view.focus();
+  }
+};
+var useItemInsert = exports.useItemInsert = function useItemInsert(triggerHandler, editorView, items) {
+  var editorViewRef = (0, _react.useRef)(editorView);
+  var itemsRef = (0, _react.useRef)(items);
+  var onTextInsert = (0, _react.useCallback)(function (_ref2) {
+    var setSelectionAt = _ref2.setSelectionAt,
+      text = _ref2.text,
+      forceFocusOnEditor = _ref2.forceFocusOnEditor;
+    if (!triggerHandler) {
+      return;
+    }
+    var view = editorViewRef.current;
+    insertRawQuery({
+      view: view,
+      setSelectionAt: setSelectionAt,
+      text: text,
+      forceFocusOnEditor: forceFocusOnEditor
+    });
+  }, [triggerHandler]);
+  var onItemInsert = (0, _react.useCallback)(function (_ref3) {
+    var mode = _ref3.mode,
+      index = _ref3.index,
+      query = _ref3.query;
+    var sourceListItem = itemsRef.current;
+    if (sourceListItem.length === 0 || !triggerHandler) {
+      var text = "".concat(triggerHandler.trigger).concat(query);
+      onTextInsert({
+        forceFocusOnEditor: true,
+        setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED,
+        text: text
+      });
+      return;
+    }
+    var itemToInsert = sourceListItem[index];
+    if (!itemToInsert) {
+      return;
+    }
+    var view = editorViewRef.current;
+    (0, _insertTypeAheadItem.insertTypeAheadItem)(view)({
+      item: itemToInsert,
+      handler: triggerHandler,
+      mode: mode,
+      query: query,
+      sourceListItem: sourceListItem
+    });
+  }, [triggerHandler, onTextInsert]);
+  var onItemMatch = (0, _react.useCallback)(function (_ref4) {
+    var mode = _ref4.mode,
+      query = _ref4.query;
+    var _items = itemsRef.current;
+    if (_items && _items.length > 1) {
+      return false;
+    }
+    if (_items.length === 1) {
+      queueMicrotask(function () {
+        onItemInsert({
+          mode: mode,
+          query: query,
+          index: 0
+        });
+      });
+    } else {
+      var text = "".concat(triggerHandler.trigger).concat(query);
+      queueMicrotask(function () {
+        onTextInsert({
+          forceFocusOnEditor: true,
+          setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED,
+          text: mode === _typeAhead.SelectItemMode.SPACE ? text.concat(' ') : text
+        });
+      });
+    }
+    return true;
+  }, [onItemInsert, triggerHandler, onTextInsert]);
+  (0, _react.useLayoutEffect)(function () {
+    itemsRef.current = items;
+  }, [items]);
+  return [onItemInsert, onTextInsert, onItemMatch];
+};