@atlaskit/editor-plugin-type-ahead 1.13.0 → 1.13.2

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

@@ -0,0 +1,271 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import rafSchedule from 'raf-schd';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
+import { QuickInsertPanel } from '@atlaskit/editor-element-browser';
+import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
+import { Pressable, xcss } from '@atlaskit/primitives';
+import { N0, N50A, N60A } from '@atlaskit/theme/colors';
+import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../../pm-plugins/constants';
+import { TypeAheadErrorFallback } from '../TypeAheadErrorFallback';
+var DEFAULT_TYPEAHEAD_MENU_HEIGHT = 520;
+// const DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW = 480;
+
+var ITEM_PADDING = 12;
+var typeAheadContent = css({
+  background: "var(--ds-surface-overlay, ".concat(N0, ")"),
+  borderRadius: "var(--ds-border-radius, 3px)",
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 1px ".concat(N60A, ", 0 4px 8px -2px ").concat(N50A), ")"),
+  padding: "var(--ds-space-050, 4px)".concat(" 0"),
+  width: '280px',
+  maxHeight: '520px' /* ~5.5 visibile items */,
+  overflowY: 'auto',
+  MsOverflowStyle: '-ms-autohiding-scrollbar',
+  position: 'relative'
+});
+// const typeAheadContentOverride = css({
+// 	maxHeight: `${DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW}px`,
+// });
+
+var viewAllButtonStyles = xcss({
+  background: "var(--ds-background-input-pressed, #FFFFFF)",
+  position: 'sticky',
+  bottom: '-4px',
+  width: '100%',
+  height: '40px',
+  color: 'color.text.subtle',
+  fontWeight: "var(--ds-font-weight-medium, 500)",
+  ':hover': {
+    textDecoration: 'underline'
+  },
+  ':active': {
+    color: 'color.text'
+  }
+});
+var OFFSET = [0, 8];
+export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
+  var triggerHandler = props.triggerHandler,
+    anchorElement = props.anchorElement,
+    popupsMountPoint = props.popupsMountPoint,
+    popupsBoundariesElement = props.popupsBoundariesElement,
+    popupsScrollableElement = props.popupsScrollableElement,
+    items = props.items,
+    errorInfo = props.errorInfo,
+    onItemInsert = props.onItemInsert,
+    isEmptyQuery = props.isEmptyQuery,
+    cancel = props.cancel,
+    api = props.api,
+    query = props.query;
+  var ref = useRef(null);
+  var defaultMenuHeight = DEFAULT_TYPEAHEAD_MENU_HEIGHT;
+  var startTime = useMemo(function () {
+    return performance.now();
+  },
+  // In case those props changes
+  // we need to recreate the startTime
+  [items, isEmptyQuery, triggerHandler] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  useEffect(function () {
+    var _api$analytics, _api$analytics2;
+    if (!(api !== null && api !== void 0 && (_api$analytics = api.analytics) !== null && _api$analytics !== void 0 && (_api$analytics = _api$analytics.actions) !== null && _api$analytics !== void 0 && _api$analytics.fireAnalyticsEvent)) {
+      return;
+    }
+    var stopTime = performance.now();
+    var time = stopTime - startTime;
+    api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 || _api$analytics2.fireAnalyticsEvent({
+      action: ACTION.RENDERED,
+      actionSubject: ACTION_SUBJECT.TYPEAHEAD,
+      eventType: EVENT_TYPE.OPERATIONAL,
+      attributes: {
+        time: time,
+        items: items.length,
+        initial: isEmptyQuery
+      }
+    });
+  }, [startTime, items, 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, api]);
+
+  // useEffect(() => {
+  // 	if (!api?.analytics?.actions?.fireAnalyticsEvent) {
+  // 		return;
+  // 	}
+
+  // 	api?.analytics?.actions?.fireAnalyticsEvent({
+  // 		action: ACTION.VIEWED,
+  // 		actionSubject: ACTION_SUBJECT.TYPEAHEAD_ITEM,
+  // 		eventType: EVENT_TYPE.OPERATIONAL,
+  // 		attributes: {
+  // 			index: selectedIndex,
+  // 			items: items.length,
+  // 		},
+  // 	});
+  // }, [
+  // 	items,
+  // 	api,
+  // 	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 = useState(defaultMenuHeight),
+    _useState2 = _slicedToArray(_useState, 2),
+    fitHeight = _useState2[0],
+    setFitHeight = _useState2[1];
+  var getFitHeight = useCallback(function () {
+    if (!anchorElement || !popupsMountPoint) {
+      return;
+    }
+    var target = anchorElement;
+    var _target$getBoundingCl = target.getBoundingClientRect(),
+      targetTop = _target$getBoundingCl.top,
+      targetHeight = _target$getBoundingCl.height;
+    var boundariesElement = popupsBoundariesElement || 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 >= defaultMenuHeight) {
+      return setFitHeight(defaultMenuHeight);
+    }
+
+    // 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 - ITEM_PADDING * 2;
+
+    // Ensure typeahead height is max its default height
+    var minFitHeight = Math.min(defaultMenuHeight, fitHeightWithSpace);
+    return setFitHeight(minFitHeight);
+  }, [anchorElement, defaultMenuHeight, popupsBoundariesElement, popupsMountPoint]);
+  var getFitHeightDebounced = rafSchedule(getFitHeight);
+  useLayoutEffect(function () {
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    var scrollableElement = popupsScrollableElement || findOverflowScrollParent(anchorElement);
+    getFitHeight();
+    // Ignored via go/ees005
+    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+    window.addEventListener('resize', getFitHeightDebounced);
+    if (scrollableElement) {
+      // Ignored via go/ees005
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      scrollableElement.addEventListener('scroll', getFitHeightDebounced);
+    }
+    return function () {
+      // Ignored via go/ees005
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      window.removeEventListener('resize', getFitHeightDebounced);
+      if (scrollableElement) {
+        // Ignored via go/ees005
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        scrollableElement.removeEventListener('scroll', getFitHeightDebounced);
+      }
+    };
+  }, [anchorElement, popupsScrollableElement, getFitHeightDebounced, getFitHeight]);
+  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(TYPE_AHEAD_POPUP_CONTENT_CLASS)) || relatedTarget.closest("[data-type-ahead=\"".concat(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: CloseSelectionOptions.AFTER_TEXT_INSERTED,
+        forceFocusOnEditor: false
+      });
+    };
+    var element = ref.current;
+    // Ignored via go/ees005
+    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+    element === null || element === void 0 || element.addEventListener('focusout', focusOut);
+    return function () {
+      // Ignored via go/ees005
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      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
+  useLayoutEffect(function () {
+    var escape = function escape(event) {
+      if (event.key === 'Escape') {
+        cancel({
+          addPrefixTrigger: true,
+          setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED,
+          forceFocusOnEditor: true
+        });
+      }
+    };
+    var element = ref.current;
+    // Ignored via go/ees005
+    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+    element === null || element === void 0 || element.addEventListener('keydown', escape);
+    return function () {
+      // Ignored via go/ees005
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      element === null || element === void 0 || element.removeEventListener('keydown', escape);
+    };
+  }, [ref, cancel]);
+  return jsx(Popup, {
+    zIndex: akEditorFloatingDialogZIndex,
+    target: anchorElement,
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    fitHeight: fitHeight,
+    fitWidth: 280,
+    offset: OFFSET,
+    ariaLabel: null,
+    preventOverflow: true
+  }, jsx("div", {
+    css: [typeAheadContent]
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: 0
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: TYPE_AHEAD_POPUP_CONTENT_CLASS,
+    ref: ref
+  }, errorInfo ? jsx(TypeAheadErrorFallback, null) : jsx(React.Fragment, null, jsx(QuickInsertPanel, {
+    items: items,
+    onItemInsert: onItemInsert,
+    query: query
+  }), jsx(Pressable, {
+    xcss: viewAllButtonStyles
+    // onClick={() => api?.contextPanel?.actions.showPanel()}
+  }, "View all inserts"))));
+});
+TypeAheadPopup.displayName = 'TypeAheadPopup';

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { TypeAheadPlugin } from '../../typeAheadPluginType';
+import type { PopupMountPointReference, TypeAheadPluginSharedState } from '../../types';
+type TypeAheadMenuType = {
+    typeAheadState: TypeAheadPluginSharedState;
+    editorView: EditorView;
+    popupMountRef: PopupMountPointReference;
+    api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
+};
+export declare const TypeAheadMenu: React.MemoExoticComponent<({ editorView, popupMountRef, typeAheadState, api }: TypeAheadMenuType) => React.JSX.Element | null>;
+export {};

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

@@ -0,0 +1,34 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import type { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import type { ExtractInjectionAPI, TypeAheadItem, TypeAheadHandler } from '@atlaskit/editor-common/types';
+import type { DecorationSet, EditorView } from '@atlaskit/editor-prosemirror/view';
+import { CloseSelectionOptions } from '../../pm-plugins/constants';
+import type { TypeAheadPlugin } from '../../typeAheadPluginType';
+import type { TypeAheadErrorInfo } from '../../types';
+type TypeAheadPopupProps = {
+    triggerHandler: TypeAheadHandler;
+    editorView: EditorView;
+    anchorElement: HTMLElement;
+    popupsMountPoint?: HTMLElement;
+    popupsBoundariesElement?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+    items: Array<TypeAheadItem>;
+    errorInfo: TypeAheadErrorInfo;
+    decorationSet: DecorationSet;
+    isEmptyQuery: boolean;
+    query: string;
+    onItemInsert: (mode: SelectItemMode, index: number) => void;
+    cancel: (params: {
+        setSelectionAt: CloseSelectionOptions;
+        addPrefixTrigger: boolean;
+        forceFocusOnEditor: boolean;
+    }) => void;
+    api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
+};
+export declare const TypeAheadPopup: React.MemoExoticComponent<(props: TypeAheadPopupProps) => jsx.JSX.Element>;
+export {};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { TypeAheadPlugin } from '../../typeAheadPluginType';
+import type { PopupMountPointReference, TypeAheadPluginSharedState } from '../../types';
+type TypeAheadMenuType = {
+    typeAheadState: TypeAheadPluginSharedState;
+    editorView: EditorView;
+    popupMountRef: PopupMountPointReference;
+    api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
+};
+export declare const TypeAheadMenu: React.MemoExoticComponent<({ editorView, popupMountRef, typeAheadState, api }: TypeAheadMenuType) => React.JSX.Element | null>;
+export {};

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

@@ -0,0 +1,34 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import type { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import type { ExtractInjectionAPI, TypeAheadItem, TypeAheadHandler } from '@atlaskit/editor-common/types';
+import type { DecorationSet, EditorView } from '@atlaskit/editor-prosemirror/view';
+import { CloseSelectionOptions } from '../../pm-plugins/constants';
+import type { TypeAheadPlugin } from '../../typeAheadPluginType';
+import type { TypeAheadErrorInfo } from '../../types';
+type TypeAheadPopupProps = {
+    triggerHandler: TypeAheadHandler;
+    editorView: EditorView;
+    anchorElement: HTMLElement;
+    popupsMountPoint?: HTMLElement;
+    popupsBoundariesElement?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+    items: Array<TypeAheadItem>;
+    errorInfo: TypeAheadErrorInfo;
+    decorationSet: DecorationSet;
+    isEmptyQuery: boolean;
+    query: string;
+    onItemInsert: (mode: SelectItemMode, index: number) => void;
+    cancel: (params: {
+        setSelectionAt: CloseSelectionOptions;
+        addPrefixTrigger: boolean;
+        forceFocusOnEditor: boolean;
+    }) => void;
+    api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
+};
+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": "1.13.0",
+	"version": "1.13.2",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,10 +31,11 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^46.1.0",
-		"@atlaskit/editor-common": "^99.10.0",
+		"@atlaskit/adf-schema": "^47.2.1",
+		"@atlaskit/editor-common": "^99.14.0",
+		"@atlaskit/editor-element-browser": "^0.0.1",
 		"@atlaskit/editor-plugin-analytics": "^1.12.0",
-		"@atlaskit/editor-plugin-connectivity": "^1.2.0",
+		"@atlaskit/editor-plugin-connectivity": "^1.3.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.2.0",
 		"@atlaskit/heading": "^4.1.0",
@@ -43,6 +44,7 @@
 		"@atlaskit/primitives": "^13.5.0",
 		"@atlaskit/prosemirror-input-rules": "^3.3.0",
 		"@atlaskit/theme": "^15.0.0",
+		"@atlaskit/tmp-editor-statsig": "^2.46.0",
 		"@atlaskit/tokens": "^3.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -92,9 +94,6 @@
 		"platform_editor_react18_phase2_v2": {
 			"type": "boolean"
 		},
-		"platform_editor_react18_plugin_portalprovider": {
-			"type": "boolean"
-		},
 		"platform_editor_offline_editing_ga": {
 			"type": "boolean"
 		}