@atlaskit/editor-plugin-type-ahead 2.2.1 → 2.2.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 2.2.3
+
+### Patch Changes
+
+- [#132892](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/132892)
+  [`6db8f28318224`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6db8f28318224) -
+  update type ahead locale, add key to ai preview react list child
+- Updated dependencies
+
+## 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

package/dist/cjs/pm-plugins/decorations.js

@@ -12,6 +12,7 @@ var _w3cKeyname = require("w3c-keyname");
 var _history = require("@atlaskit/editor-prosemirror/history");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _WrapperTypeAhead = require("../ui/WrapperTypeAhead");
@@ -93,7 +94,8 @@ var factoryDecorations = exports.factoryDecorations = function factoryDecoration
       nodeViewPortalProviderAPI.render(function () {
         var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
         return /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
-          locale: intl.locale || 'en',
+          defaultLocale: (0, _platformFeatureFlags.fg)('platform_editor_update_type_ahead_locale') ? intl.defaultLocale || 'en-US' : undefined,
+          locale: intl.locale || ((0, _platformFeatureFlags.fg)('platform_editor_update_type_ahead_locale') ? 'en-US' : 'en'),
           messages: intl.messages,
           formats: intl.formats
         }, /*#__PURE__*/_react.default.createElement(_WrapperTypeAhead.WrapperTypeAhead, {

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/pm-plugins/decorations.js

@@ -5,6 +5,7 @@ import { keyName as keyNameNormalized } from 'w3c-keyname';
 import { redo, undo } from '@atlaskit/editor-prosemirror/history';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B400 } from '@atlaskit/theme/colors';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { WrapperTypeAhead } from '../ui/WrapperTypeAhead';
@@ -92,7 +93,8 @@ export const factoryDecorations = ({
       nodeViewPortalProviderAPI.render(() => {
         var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
         return /*#__PURE__*/React.createElement(IntlProvider, {
-          locale: intl.locale || 'en',
+          defaultLocale: fg('platform_editor_update_type_ahead_locale') ? intl.defaultLocale || 'en-US' : undefined,
+          locale: intl.locale || (fg('platform_editor_update_type_ahead_locale') ? 'en-US' : 'en'),
           messages: intl.messages,
           formats: intl.formats
         }, /*#__PURE__*/React.createElement(WrapperTypeAhead, {

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/pm-plugins/decorations.js

@@ -5,6 +5,7 @@ import { keyName as keyNameNormalized } from 'w3c-keyname';
 import { redo, undo } from '@atlaskit/editor-prosemirror/history';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B400 } from '@atlaskit/theme/colors';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { WrapperTypeAhead } from '../ui/WrapperTypeAhead';
@@ -86,7 +87,8 @@ export var factoryDecorations = function factoryDecorations(_ref) {
       nodeViewPortalProviderAPI.render(function () {
         var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
         return /*#__PURE__*/React.createElement(IntlProvider, {
-          locale: intl.locale || 'en',
+          defaultLocale: fg('platform_editor_update_type_ahead_locale') ? intl.defaultLocale || 'en-US' : undefined,
+          locale: intl.locale || (fg('platform_editor_update_type_ahead_locale') ? 'en-US' : 'en'),
           messages: intl.messages,
           formats: intl.formats
         }, /*#__PURE__*/React.createElement(WrapperTypeAhead, {

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.1",
+	"version": "2.2.3",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -42,8 +42,8 @@
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/heading": "^5.1.0",
-		"@atlaskit/icon": "^25.0.0",
-		"@atlaskit/menu": "^3.1.0",
+		"@atlaskit/icon": "^25.2.0",
+		"@atlaskit/menu": "^3.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.2.0",
 		"@atlaskit/prosemirror-input-rules": "^3.3.0",
@@ -95,11 +95,17 @@
 		}
 	},
 	"platform-feature-flags": {
+		"platform_editor_update_type_ahead_locale": {
+			"type": "boolean"
+		},
 		"platform_editor_offline_editing_ga": {
 			"type": "boolean"
 		},
 		"platform_editor_legacy_content_macro_typeahead_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_typeahead_dynamic_height_fix": {
+			"type": "boolean"
 		}
 	}
 }