@atlaskit/editor-plugin-type-ahead 6.5.11 → 6.5.13

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

@@ -1,312 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { css, jsx } from '@emotion/react';
-import rafSchedule from 'raf-schd';
-import { useIntl } from 'react-intl-next';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { elementInsertSidePanel } from '@atlaskit/editor-common/messages';
-import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
-import { SideInsertPanel, QuickInsertPanel } from '@atlaskit/editor-element-browser';
-import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
-import AddIcon from '@atlaskit/icon/core/add';
-import { fg } from '@atlaskit/platform-feature-flags';
-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 INSERT_PANEL_WIDTH = 320;
-var typeAheadContent = css({
-  background: "var(--ds-surface-overlay, ".concat(N0, ")"),
-  borderRadius: "var(--ds-radius-small, 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 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,
-    setSelectedItem = props.setSelectedItem;
-  var ref = useRef(null);
-  var _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
-  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;
-      }
-
-      // Handles cases like emoji and @ typeaheads that open new typeaheads
-      var isTextSelected = ((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range';
-      var innerEditor = anchorElement.closest('.extension-editable-area');
-      if (innerEditor) {
-        // When there is no related target, we default to not closing the popup
-        var newFocusInsideCurrentEditor = !relatedTarget;
-        if (relatedTarget instanceof HTMLElement) {
-          // check if the new focus is inside inner editor, keep popup opens
-          newFocusInsideCurrentEditor = innerEditor.contains(relatedTarget);
-        }
-        if (!isTextSelected && newFocusInsideCurrentEditor) {
-          return;
-        }
-      } else {
-        // if the current focus in outer editor, keep the existing behaviour, do not close the pop up if text is not selected
-        if (!isTextSelected) {
-          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, anchorElement]);
-
-  // TODO: 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]);
-  var handleViewAllItemsClick = useCallback(function () {
-    var _api$contextPanel;
-    var showContextPanel = api === null || api === void 0 || (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 || (_api$contextPanel = _api$contextPanel.actions) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.showPanel;
-    if (!showContextPanel || !items) {
-      return;
-    }
-
-    // Opens main editor controls side panel
-    showContextPanel({
-      id: 'editor-element-insert-sidebar-panel',
-      headerComponentElements: {
-        headerLabel: elementInsertSidePanel.title,
-        HeaderIcon: function HeaderIcon() {
-          return jsx(AddIcon, {
-            label: formatMessage(elementInsertSidePanel.title)
-          });
-        }
-      },
-      BodyComponent: function BodyComponent() {
-        return jsx(SideInsertPanel, {
-          items: items,
-          onItemInsert: onItemInsert
-        });
-      }
-    }, 'push', INSERT_PANEL_WIDTH);
-
-    // Closes typeahead
-    cancel({
-      addPrefixTrigger: true,
-      setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED,
-      forceFocusOnEditor: true
-    });
-  }, [api, cancel, formatMessage, items, onItemInsert]);
-  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],
-    tabIndex: fg('platform_editor_a11y_fix_typeahead_tabindex') ? undefined : 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,
-    setSelectedItem: setSelectedItem,
-    onViewAllItemsClick: Boolean(api === null || api === void 0 ? void 0 : api.contextPanel) ? handleViewAllItemsClick : undefined
-  }))));
-});
-TypeAheadPopup.displayName = 'TypeAheadPopup';

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

@@ -1,13 +0,0 @@
-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 = {
-    api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
-    editorView: EditorView;
-    popupMountRef: PopupMountPointReference;
-    typeAheadState: Omit<TypeAheadPluginSharedState, 'isOpen' | 'isAllowed' | 'selectedIndex'>;
-};
-export declare const TypeAheadMenu: React.MemoExoticComponent<({ editorView, popupMountRef, typeAheadState, api }: TypeAheadMenuType) => React.JSX.Element | null>;
-export {};

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

@@ -1,37 +0,0 @@
-/**
- * @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 = {
-    anchorElement: HTMLElement;
-    api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
-    cancel: (params: {
-        addPrefixTrigger: boolean;
-        forceFocusOnEditor: boolean;
-        setSelectionAt: CloseSelectionOptions;
-    }) => void;
-    decorationSet: DecorationSet;
-    editorView: EditorView;
-    errorInfo: TypeAheadErrorInfo;
-    isEmptyQuery: boolean;
-    items: Array<TypeAheadItem>;
-    onItemInsert: (mode: SelectItemMode, index: number) => void;
-    popupsBoundariesElement?: HTMLElement;
-    popupsMountPoint?: HTMLElement;
-    popupsScrollableElement?: HTMLElement;
-    query: string;
-    setSelectedItem?: (props: {
-        index: number;
-    }) => void;
-    triggerHandler: TypeAheadHandler;
-};
-export declare const TypeAheadPopup: React.MemoExoticComponent<(props: TypeAheadPopupProps) => jsx.JSX.Element>;
-export {};

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

@@ -1,13 +0,0 @@
-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 = {
-    api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
-    editorView: EditorView;
-    popupMountRef: PopupMountPointReference;
-    typeAheadState: Omit<TypeAheadPluginSharedState, 'isOpen' | 'isAllowed' | 'selectedIndex'>;
-};
-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

@@ -1,37 +0,0 @@
-/**
- * @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 = {
-    anchorElement: HTMLElement;
-    api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
-    cancel: (params: {
-        addPrefixTrigger: boolean;
-        forceFocusOnEditor: boolean;
-        setSelectionAt: CloseSelectionOptions;
-    }) => void;
-    decorationSet: DecorationSet;
-    editorView: EditorView;
-    errorInfo: TypeAheadErrorInfo;
-    isEmptyQuery: boolean;
-    items: Array<TypeAheadItem>;
-    onItemInsert: (mode: SelectItemMode, index: number) => void;
-    popupsBoundariesElement?: HTMLElement;
-    popupsMountPoint?: HTMLElement;
-    popupsScrollableElement?: HTMLElement;
-    query: string;
-    setSelectedItem?: (props: {
-        index: number;
-    }) => void;
-    triggerHandler: TypeAheadHandler;
-};
-export declare const TypeAheadPopup: React.MemoExoticComponent<(props: TypeAheadPopupProps) => jsx.JSX.Element>;
-export {};