@atlaskit/editor-plugin-type-ahead 2.2.0 → 2.2.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 2.2.2
+
+### Patch Changes
+
+- [#132152](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/132152)
+  [`4d3f5ccdc005c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4d3f5ccdc005c) -
+  [https://product-fabric.atlassian.net/browse/ED-26645](ED-26645) - fix typeahead height issue
+- Updated dependencies
+
+## 2.2.1
+
+### Patch Changes
+
+- [#130684](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/130684)
+  [`0656a8915e18f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0656a8915e18f) -
+  updated existing fix for focusOut typeahead trigger duplication to also include IE/Edge
+
 ## 2.2.0
 
 ### Minor Changes

package/dist/cjs/ui/InputQuery.js

@@ -284,15 +284,12 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
         return;
       }
 
-      // See ED-14909: Chrome may emit focusout events where an input
-      // device was not directly responsible. (This rears in react v17+ consumers
-      // where react-managed node removal now appears to propagate focusout events to
-      // our event listener). As this path is strictly for click or other typeahead
-      // dismissals that don't involve typeahead item selection, we carve out an
-      // exception for Chrome-specific events where an input device was not the initiator.
-      if (_browser.browser.chrome && !(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range') &&
+      // Chrome and Edge may emit focusout events without direct input.
+      // This path handles dismissals that don't involve item selection, so we ignore these events.
+      // In Edge this also lead to duplication in the trigger character (@, /, :) as `cancel` would be called twice
+      if ((_browser.browser.ie || _browser.browser.chrome) && !(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range') &&
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      !('sourceCapabilities' in event && event.sourceCapabilities)) {
+      !event.sourceCapabilities) {
         return;
       }
       cancel({

package/dist/cjs/ui/ListRow.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListRow = ListRow;
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ListRow(_ref) {
+  var children = _ref.children,
+    registerChild = _ref.registerChild,
+    measure = _ref.measure,
+    index = _ref.index,
+    style = _ref.style,
+    isVisible = _ref.isVisible,
+    isScrolling = _ref.isScrolling,
+    onMouseMove = _ref.onMouseMove;
+  var childElementRef = (0, _react.useRef)(null);
+  var setListElementRef = function setListElementRef(element) {
+    registerChild === null || registerChild === void 0 || registerChild(element !== null && element !== void 0 ? element : undefined);
+  };
+  (0, _react.useEffect)(function () {
+    // Do not measure if the row is not visible or is scrolling for performance reasons.
+    if (!childElementRef.current || !isVisible || isScrolling) {
+      return;
+    }
+    var observer = new ResizeObserver(function () {
+      return measure();
+    });
+    observer.observe(childElementRef.current);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [isScrolling, isVisible, measure]);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    _react.default.createElement("div", {
+      ref: setListElementRef,
+      style: style,
+      "data-index": index
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      ref: childElementRef,
+      "data-testid": "list-item-height-observed-".concat(index),
+      onMouseMove: onMouseMove
+    }, children))
+  );
+}

package/dist/cjs/ui/TypeAheadList.js

@@ -15,11 +15,13 @@ var _List = require("react-virtualized/dist/commonjs/List");
 var _messages = require("@atlaskit/editor-common/messages");
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 var _menu = require("@atlaskit/menu");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _updateSelectedIndex = require("../pm-plugins/commands/update-selected-index");
 var _constants = require("../pm-plugins/constants");
 var _utils = require("../pm-plugins/utils");
 var _AssistiveText = require("./AssistiveText");
+var _ListRow = require("./ListRow");
 var _TypeAheadListItem = require("./TypeAheadListItem");
 var _ViewMore = require("./ViewMore");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -269,7 +271,9 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     var index = _ref4.index,
       key = _ref4.key,
       style = _ref4.style,
-      parent = _ref4.parent;
+      parent = _ref4.parent,
+      isScrolling = _ref4.isScrolling,
+      isVisible = _ref4.isVisible;
     var currentItem = items[index];
     return (0, _react2.jsx)(_CellMeasurer.CellMeasurer, {
       key: key,
@@ -277,7 +281,35 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
       parent: parent,
       columnIndex: 0,
       rowIndex: index
-    }, (0, _react2.jsx)("div", {
+    }, (0, _platformFeatureFlags.fg)('platform_editor_typeahead_dynamic_height_fix') ? function (_ref5) {
+      var measure = _ref5.measure,
+        registerChild = _ref5.registerChild;
+      return (0, _react2.jsx)(_ListRow.ListRow, {
+        registerChild: registerChild,
+        measure: measure,
+        index: index
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+        ,
+        style: style,
+        isVisible: isVisible,
+        isScrolling: isScrolling,
+        onMouseMove: function onMouseMove(e) {
+          return _onMouseMove(e, index);
+        }
+      }, (0, _react2.jsx)(_TypeAheadListItem.TypeAheadListItem, {
+        key: items[index].title,
+        item: currentItem,
+        firstOnlineSupportedIndex: firstOnlineSupportedRow,
+        itemsLength: itemsLength,
+        itemIndex: index,
+        selectedIndex: selectedIndex,
+        onItemClick: actions.onItemClick,
+        ariaLabel: (0, _utils.getTypeAheadListAriaLabels)(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel,
+        moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
+        api: api
+      }));
+    } : (0, _react2.jsx)("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       style: style,
       "data-index": index
     }, (0, _react2.jsx)("div", {

package/dist/es2019/ui/InputQuery.js

@@ -269,15 +269,12 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         return;
       }
 
-      // See ED-14909: Chrome may emit focusout events where an input
-      // device was not directly responsible. (This rears in react v17+ consumers
-      // where react-managed node removal now appears to propagate focusout events to
-      // our event listener). As this path is strictly for click or other typeahead
-      // dismissals that don't involve typeahead item selection, we carve out an
-      // exception for Chrome-specific events where an input device was not the initiator.
-      if (browser.chrome && !(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range') &&
+      // Chrome and Edge may emit focusout events without direct input.
+      // This path handles dismissals that don't involve item selection, so we ignore these events.
+      // In Edge this also lead to duplication in the trigger character (@, /, :) as `cancel` would be called twice
+      if ((browser.ie || browser.chrome) && !(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range') &&
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      !('sourceCapabilities' in event && event.sourceCapabilities)) {
+      !event.sourceCapabilities) {
         return;
       }
       cancel({

package/dist/es2019/ui/ListRow.js

@@ -0,0 +1,38 @@
+import React, { useEffect, useRef } from 'react';
+export function ListRow({
+  children,
+  registerChild,
+  measure,
+  index,
+  style,
+  isVisible,
+  isScrolling,
+  onMouseMove
+}) {
+  const childElementRef = useRef(null);
+  const setListElementRef = element => {
+    registerChild === null || registerChild === void 0 ? void 0 : registerChild(element !== null && element !== void 0 ? element : undefined);
+  };
+  useEffect(() => {
+    // Do not measure if the row is not visible or is scrolling for performance reasons.
+    if (!childElementRef.current || !isVisible || isScrolling) {
+      return;
+    }
+    const observer = new ResizeObserver(() => measure());
+    observer.observe(childElementRef.current);
+    return () => observer.disconnect();
+  }, [isScrolling, isVisible, measure]);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    React.createElement("div", {
+      ref: setListElementRef,
+      style: style,
+      "data-index": index
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: childElementRef,
+      "data-testid": `list-item-height-observed-${index}`,
+      onMouseMove: onMouseMove
+    }, children))
+  );
+}

package/dist/es2019/ui/TypeAheadList.js

@@ -13,11 +13,13 @@ import { List } from 'react-virtualized/dist/commonjs/List';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
 import { MenuGroup } from '@atlaskit/menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Text, Box } from '@atlaskit/primitives';
 import { updateSelectedIndex } from '../pm-plugins/commands/update-selected-index';
 import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../pm-plugins/constants';
 import { getTypeAheadListAriaLabels, moveSelectedIndex } from '../pm-plugins/utils';
 import { AssistiveText } from './AssistiveText';
+import { ListRow } from './ListRow';
 import { TypeAheadListItem } from './TypeAheadListItem';
 import { ViewMore } from './ViewMore';
 const LIST_ITEM_ESTIMATED_HEIGHT = 64;
@@ -249,7 +251,9 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     index,
     key,
     style,
-    parent
+    parent,
+    isScrolling,
+    isVisible
   }) => {
     const currentItem = items[index];
     return jsx(CellMeasurer, {
@@ -258,7 +262,32 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
       parent: parent,
       columnIndex: 0,
       rowIndex: index
-    }, jsx("div", {
+    }, fg('platform_editor_typeahead_dynamic_height_fix') ? ({
+      measure,
+      registerChild
+    }) => jsx(ListRow, {
+      registerChild: registerChild,
+      measure: measure,
+      index: index
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ,
+      style: style,
+      isVisible: isVisible,
+      isScrolling: isScrolling,
+      onMouseMove: e => onMouseMove(e, index)
+    }, jsx(TypeAheadListItem, {
+      key: items[index].title,
+      item: currentItem,
+      firstOnlineSupportedIndex: firstOnlineSupportedRow,
+      itemsLength: itemsLength,
+      itemIndex: index,
+      selectedIndex: selectedIndex,
+      onItemClick: actions.onItemClick,
+      ariaLabel: getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel,
+      moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
+      api: api
+    })) : jsx("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       style: style,
       "data-index": index
     }, jsx("div", {

package/dist/esm/ui/InputQuery.js

@@ -273,15 +273,12 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
         return;
       }
 
-      // See ED-14909: Chrome may emit focusout events where an input
-      // device was not directly responsible. (This rears in react v17+ consumers
-      // where react-managed node removal now appears to propagate focusout events to
-      // our event listener). As this path is strictly for click or other typeahead
-      // dismissals that don't involve typeahead item selection, we carve out an
-      // exception for Chrome-specific events where an input device was not the initiator.
-      if (browser.chrome && !(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range') &&
+      // Chrome and Edge may emit focusout events without direct input.
+      // This path handles dismissals that don't involve item selection, so we ignore these events.
+      // In Edge this also lead to duplication in the trigger character (@, /, :) as `cancel` would be called twice
+      if ((browser.ie || browser.chrome) && !(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range') &&
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      !('sourceCapabilities' in event && event.sourceCapabilities)) {
+      !event.sourceCapabilities) {
         return;
       }
       cancel({

package/dist/esm/ui/ListRow.js

@@ -0,0 +1,41 @@
+import React, { useEffect, useRef } from 'react';
+export function ListRow(_ref) {
+  var children = _ref.children,
+    registerChild = _ref.registerChild,
+    measure = _ref.measure,
+    index = _ref.index,
+    style = _ref.style,
+    isVisible = _ref.isVisible,
+    isScrolling = _ref.isScrolling,
+    onMouseMove = _ref.onMouseMove;
+  var childElementRef = useRef(null);
+  var setListElementRef = function setListElementRef(element) {
+    registerChild === null || registerChild === void 0 || registerChild(element !== null && element !== void 0 ? element : undefined);
+  };
+  useEffect(function () {
+    // Do not measure if the row is not visible or is scrolling for performance reasons.
+    if (!childElementRef.current || !isVisible || isScrolling) {
+      return;
+    }
+    var observer = new ResizeObserver(function () {
+      return measure();
+    });
+    observer.observe(childElementRef.current);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [isScrolling, isVisible, measure]);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    React.createElement("div", {
+      ref: setListElementRef,
+      style: style,
+      "data-index": index
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: childElementRef,
+      "data-testid": "list-item-height-observed-".concat(index),
+      onMouseMove: onMouseMove
+    }, children))
+  );
+}

package/dist/esm/ui/TypeAheadList.js

@@ -14,11 +14,13 @@ import { List } from 'react-virtualized/dist/commonjs/List';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
 import { MenuGroup } from '@atlaskit/menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Text, Box } from '@atlaskit/primitives';
 import { updateSelectedIndex } from '../pm-plugins/commands/update-selected-index';
 import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../pm-plugins/constants';
 import { getTypeAheadListAriaLabels, moveSelectedIndex } from '../pm-plugins/utils';
 import { AssistiveText } from './AssistiveText';
+import { ListRow } from './ListRow';
 import { TypeAheadListItem } from './TypeAheadListItem';
 import { ViewMore } from './ViewMore';
 var LIST_ITEM_ESTIMATED_HEIGHT = 64;
@@ -259,7 +261,9 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
     var index = _ref4.index,
       key = _ref4.key,
       style = _ref4.style,
-      parent = _ref4.parent;
+      parent = _ref4.parent,
+      isScrolling = _ref4.isScrolling,
+      isVisible = _ref4.isVisible;
     var currentItem = items[index];
     return jsx(CellMeasurer, {
       key: key,
@@ -267,7 +271,35 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
       parent: parent,
       columnIndex: 0,
       rowIndex: index
-    }, jsx("div", {
+    }, fg('platform_editor_typeahead_dynamic_height_fix') ? function (_ref5) {
+      var measure = _ref5.measure,
+        registerChild = _ref5.registerChild;
+      return jsx(ListRow, {
+        registerChild: registerChild,
+        measure: measure,
+        index: index
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+        ,
+        style: style,
+        isVisible: isVisible,
+        isScrolling: isScrolling,
+        onMouseMove: function onMouseMove(e) {
+          return _onMouseMove(e, index);
+        }
+      }, jsx(TypeAheadListItem, {
+        key: items[index].title,
+        item: currentItem,
+        firstOnlineSupportedIndex: firstOnlineSupportedRow,
+        itemsLength: itemsLength,
+        itemIndex: index,
+        selectedIndex: selectedIndex,
+        onItemClick: actions.onItemClick,
+        ariaLabel: getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel,
+        moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
+        api: api
+      }));
+    } : jsx("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       style: style,
       "data-index": index
     }, jsx("div", {

package/dist/types/ui/ListRow.d.ts

@@ -0,0 +1,10 @@
+import React, { type ReactNode, MouseEventHandler } from 'react';
+import { ListRowProps } from 'react-virtualized';
+type Props = {
+    measure: () => void;
+    registerChild?: (element?: Element) => void;
+    onMouseMove: MouseEventHandler<HTMLDivElement>;
+    children: ReactNode;
+} & Pick<ListRowProps, 'index' | 'style' | 'isScrolling' | 'isVisible'>;
+export declare function ListRow({ children, registerChild, measure, index, style, isVisible, isScrolling, onMouseMove, }: Props): React.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/ListRow.d.ts

@@ -0,0 +1,10 @@
+import React, { type ReactNode, MouseEventHandler } from 'react';
+import { ListRowProps } from 'react-virtualized';
+type Props = {
+    measure: () => void;
+    registerChild?: (element?: Element) => void;
+    onMouseMove: MouseEventHandler<HTMLDivElement>;
+    children: ReactNode;
+} & Pick<ListRowProps, 'index' | 'style' | 'isScrolling' | 'isVisible'>;
+export declare function ListRow({ children, registerChild, measure, index, style, isVisible, isScrolling, onMouseMove, }: Props): React.JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-type-ahead",
-	"version": "2.2.0",
+	"version": "2.2.2",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -42,13 +42,13 @@
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/heading": "^5.1.0",
-		"@atlaskit/icon": "^25.0.0",
+		"@atlaskit/icon": "^25.1.0",
 		"@atlaskit/menu": "^3.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.2.0",
 		"@atlaskit/prosemirror-input-rules": "^3.3.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.2.0",
+		"@atlaskit/tmp-editor-statsig": "^4.4.0",
 		"@atlaskit/tokens": "^4.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -100,6 +100,9 @@
 		},
 		"platform_editor_legacy_content_macro_typeahead_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_typeahead_dynamic_height_fix": {
+			"type": "boolean"
 		}
 	}
 }