@atlaskit/editor-plugin-type-ahead 8.0.5 → 8.0.6

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 8.0.6
+
+### Patch Changes
+
+- [`1f132a3204f7b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1f132a3204f7b) -
+  Fix Safari cursor jumping to start when hovering over typeahead menu items
+- Updated dependencies
+
 ## 8.0.5
 
 ### Patch Changes

package/dist/cjs/ui/MoreOptions.js

@@ -1,14 +1,17 @@
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MoreOptions = void 0;
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
+var _browser = require("@atlaskit/editor-common/browser");
 var _menu = require("@atlaskit/menu");
 var _colors = require("@atlaskit/theme/colors");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -31,13 +34,18 @@ var MoreOptions = exports.MoreOptions = function MoreOptions(_ref) {
     isFocused = _ref.isFocused,
     title = _ref.title,
     ariaLabel = _ref.ariaLabel,
-    iconBefore = _ref.iconBefore;
+    iconBefore = _ref.iconBefore,
+    lastInputMethodRef = _ref.lastInputMethodRef;
   var ref = (0, _react.useRef)(null);
+  var isSafari = (0, _browser.getBrowserInfo)().safari;
   (0, _react.useEffect)(function () {
     if (isFocused && ref.current) {
-      ref.current.focus();
+      var skipFocusOnSafariHover = isSafari && (lastInputMethodRef === null || lastInputMethodRef === void 0 ? void 0 : lastInputMethodRef.current) === 'mouse' && (0, _expValEquals.expValEquals)('platform_safari_cursor_typeahead_fix', 'isEnabled', true);
+      if (!skipFocusOnSafariHover) {
+        ref.current.focus();
+      }
     }
-  }, [isFocused]);
+  }, [isFocused, lastInputMethodRef, isSafari]);
   (0, _react.useEffect)(function () {
     if (!ref.current) {
       return;
@@ -71,6 +79,11 @@ var MoreOptions = exports.MoreOptions = function MoreOptions(_ref) {
     css: buttonStyles
   }, (0, _react2.jsx)(_menu.ButtonItem, {
     ref: ref,
+    onMouseDown: function onMouseDown(e) {
+      if (isSafari && (0, _expValEquals.expValEquals)('platform_safari_cursor_typeahead_fix', 'isEnabled', true)) {
+        e.preventDefault();
+      }
+    },
     onClick: onClick,
     iconBefore: iconBefore,
     "aria-label": ariaLabel,

package/dist/cjs/ui/TypeAheadList.js

@@ -71,6 +71,8 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     onMoreOptionsClicked = _ref2.onMoreOptionsClicked;
   var listRef = (0, _react.useRef)();
   var listContainerRef = (0, _react.useRef)(null);
+  var lastInputMethodRef = (0, _react.useRef)('keyboard');
+  var mouseMovedRef = (0, _react.useRef)(false);
   var lastVisibleIndexes = (0, _react.useRef)({
     overscanStartIndex: 0,
     overscanStopIndex: 0,
@@ -169,8 +171,17 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     if (selectedIndex === index) {
       return;
     }
+    mouseMovedRef.current = true;
+    lastInputMethodRef.current = 'mouse';
     (0, _updateSelectedIndex.updateSelectedIndex)(index, api)(editorView.state, editorView.dispatch);
   };
+  (0, _react.useLayoutEffect)(function () {
+    if (mouseMovedRef.current) {
+      mouseMovedRef.current = false;
+    } else {
+      lastInputMethodRef.current = 'keyboard';
+    }
+  }, [selectedIndex]);
   (0, _react.useLayoutEffect)(function () {
     if (!listRef.current) {
       return;
@@ -225,6 +236,7 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
      */
     var handleKeyDown = function handleKeyDown(event) {
       if (isNavigationKey(event)) {
+        lastInputMethodRef.current = 'keyboard';
         switch (event.key) {
           case 'ArrowDown':
             selectNextItem();
@@ -328,7 +340,8 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
         },
         ariaLabel: (0, _utils.getTypeAheadListAriaLabels)(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel,
         moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
-        api: api
+        api: api,
+        lastInputMethodRef: lastInputMethodRef
       }));
     });
   };
@@ -392,7 +405,8 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     ariaLabel: config.ariaLabel,
     onClick: handleClick,
     isFocused: selectedIndex === itemsLength,
-    iconBefore: config.iconBefore
+    iconBefore: config.iconBefore,
+    lastInputMethodRef: lastInputMethodRef
   }), (0, _react2.jsx)(TypeaheadAssistiveTextPureComponent, {
     numberOfResults: itemsLength.toString()
   })));

package/dist/cjs/ui/TypeAheadListItem.js

@@ -10,6 +10,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
+var _browser = require("@atlaskit/editor-common/browser");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
@@ -18,6 +19,7 @@ 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 _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -166,7 +168,9 @@ var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.
     ariaLabel = _ref.ariaLabel,
     moreElementsInQuickInsertViewEnabled = _ref.moreElementsInQuickInsertViewEnabled,
     api = _ref.api,
-    firstOnlineSupportedIndex = _ref.firstOnlineSupportedIndex;
+    firstOnlineSupportedIndex = _ref.firstOnlineSupportedIndex,
+    lastInputMethodRef = _ref.lastInputMethodRef;
+  var isSafari = (0, _browser.getBrowserInfo)().safari;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['connectivity'], function (states) {
       var _states$connectivityS;
       return {
@@ -220,16 +224,22 @@ var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.
   }, [isSelected, itemIsDisabled]);
   (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();
+      var skipFocusOnSafariHover = isSafari && (lastInputMethodRef === null || lastInputMethodRef === void 0 ? void 0 : lastInputMethodRef.current) === 'mouse' && (0, _expValEquals.expValEquals)('platform_safari_cursor_typeahead_fix', 'isEnabled', true);
+      if (!skipFocusOnSafariHover) {
+        var _customItemRef$curren;
+        customItemRef === null || customItemRef === void 0 || (_customItemRef$curren = customItemRef.current) === null || _customItemRef$curren === void 0 || _customItemRef$curren.focus();
+      }
     }
-  }, [customItemRef, shouldUpdateFocus]);
+  }, [customItemRef, shouldUpdateFocus, lastInputMethodRef, isSafari]);
   (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();
+      var skipFocusOnSafariHover = isSafari && (lastInputMethodRef === null || lastInputMethodRef === void 0 ? void 0 : lastInputMethodRef.current) === 'mouse' && (0, _expValEquals.expValEquals)('platform_safari_cursor_typeahead_fix', 'isEnabled', true);
+      if (!skipFocusOnSafariHover) {
+        var _buttonItemRef$curren;
+        buttonItemRef === null || buttonItemRef === void 0 || (_buttonItemRef$curren = buttonItemRef.current) === null || _buttonItemRef$curren === void 0 || _buttonItemRef$curren.focus();
+      }
     }
-  }, [buttonItemRef, shouldUpdateFocus]);
+  }, [buttonItemRef, shouldUpdateFocus, lastInputMethodRef, isSafari]);
   if (customRenderItem) {
     return (0, _react2.jsx)(CustomItemComponentWrapper, {
       itemIsDisabled: itemIsDisabled,

package/dist/es2019/ui/MoreOptions.js

@@ -2,10 +2,11 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
+import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { ButtonItem, Section } from '@atlaskit/menu';
 import { N30 } from '@atlaskit/theme/colors';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -24,14 +25,19 @@ export const MoreOptions = ({
   isFocused,
   title,
   ariaLabel,
-  iconBefore
+  iconBefore,
+  lastInputMethodRef
 }) => {
   const ref = useRef(null);
+  const isSafari = getBrowserInfo().safari;
   useEffect(() => {
     if (isFocused && ref.current) {
-      ref.current.focus();
+      const skipFocusOnSafariHover = isSafari && (lastInputMethodRef === null || lastInputMethodRef === void 0 ? void 0 : lastInputMethodRef.current) === 'mouse' && expValEquals('platform_safari_cursor_typeahead_fix', 'isEnabled', true);
+      if (!skipFocusOnSafariHover) {
+        ref.current.focus();
+      }
     }
-  }, [isFocused]);
+  }, [isFocused, lastInputMethodRef, isSafari]);
   useEffect(() => {
     if (!ref.current) {
       return;
@@ -67,6 +73,11 @@ export const MoreOptions = ({
     css: buttonStyles
   }, jsx(ButtonItem, {
     ref: ref,
+    onMouseDown: e => {
+      if (isSafari && expValEquals('platform_safari_cursor_typeahead_fix', 'isEnabled', true)) {
+        e.preventDefault();
+      }
+    },
     onClick: onClick,
     iconBefore: iconBefore,
     "aria-label": ariaLabel,

package/dist/es2019/ui/TypeAheadList.js

@@ -63,6 +63,8 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   var _triggerHandler$getMo, _decorationElement$qu2;
   const listRef = useRef();
   const listContainerRef = useRef(null);
+  const lastInputMethodRef = useRef('keyboard');
+  const mouseMovedRef = useRef(false);
   const lastVisibleIndexes = useRef({
     overscanStartIndex: 0,
     overscanStopIndex: 0,
@@ -150,8 +152,17 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     if (selectedIndex === index) {
       return;
     }
+    mouseMovedRef.current = true;
+    lastInputMethodRef.current = 'mouse';
     updateSelectedIndex(index, api)(editorView.state, editorView.dispatch);
   };
+  useLayoutEffect(() => {
+    if (mouseMovedRef.current) {
+      mouseMovedRef.current = false;
+    } else {
+      lastInputMethodRef.current = 'keyboard';
+    }
+  }, [selectedIndex]);
   useLayoutEffect(() => {
     if (!listRef.current) {
       return;
@@ -208,6 +219,7 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
      */
     const handleKeyDown = event => {
       if (isNavigationKey(event)) {
+        lastInputMethodRef.current = 'keyboard';
         switch (event.key) {
           case 'ArrowDown':
             selectNextItem();
@@ -309,7 +321,8 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
       },
       ariaLabel: getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel,
       moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
-      api: api
+      api: api,
+      lastInputMethodRef: lastInputMethodRef
     })));
   };
   const popupAriaLabel = getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl).popupAriaLabel;
@@ -372,7 +385,8 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     ariaLabel: config.ariaLabel,
     onClick: handleClick,
     isFocused: selectedIndex === itemsLength,
-    iconBefore: config.iconBefore
+    iconBefore: config.iconBefore,
+    lastInputMethodRef: lastInputMethodRef
   }), jsx(TypeaheadAssistiveTextPureComponent, {
     numberOfResults: itemsLength.toString()
   })));

package/dist/es2019/ui/TypeAheadListItem.js

@@ -7,6 +7,7 @@ import React, { useCallback, useLayoutEffect, useMemo } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
+import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { IconFallback } from '@atlaskit/editor-common/quick-insert';
 import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
@@ -15,6 +16,7 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { ButtonItem } from '@atlaskit/menu';
 import { B400, N30, N800 } from '@atlaskit/theme/colors';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -175,8 +177,10 @@ export const TypeAheadListItem = /*#__PURE__*/React.memo(({
   ariaLabel,
   moreElementsInQuickInsertViewEnabled,
   api,
-  firstOnlineSupportedIndex
+  firstOnlineSupportedIndex,
+  lastInputMethodRef
 }) => {
+  const isSafari = getBrowserInfo().safari;
   const {
     connectivityMode
   } = useSharedPluginStateWithSelector(api, ['connectivity'], states => {
@@ -233,16 +237,22 @@ export const TypeAheadListItem = /*#__PURE__*/React.memo(({
   }, [isSelected, itemIsDisabled]);
   useLayoutEffect(() => {
     if (shouldUpdateFocus) {
-      var _customItemRef$curren;
-      customItemRef === null || customItemRef === void 0 ? void 0 : (_customItemRef$curren = customItemRef.current) === null || _customItemRef$curren === void 0 ? void 0 : _customItemRef$curren.focus();
+      const skipFocusOnSafariHover = isSafari && (lastInputMethodRef === null || lastInputMethodRef === void 0 ? void 0 : lastInputMethodRef.current) === 'mouse' && expValEquals('platform_safari_cursor_typeahead_fix', 'isEnabled', true);
+      if (!skipFocusOnSafariHover) {
+        var _customItemRef$curren;
+        customItemRef === null || customItemRef === void 0 ? void 0 : (_customItemRef$curren = customItemRef.current) === null || _customItemRef$curren === void 0 ? void 0 : _customItemRef$curren.focus();
+      }
     }
-  }, [customItemRef, shouldUpdateFocus]);
+  }, [customItemRef, shouldUpdateFocus, lastInputMethodRef, isSafari]);
   useLayoutEffect(() => {
     if (shouldUpdateFocus) {
-      var _buttonItemRef$curren;
-      buttonItemRef === null || buttonItemRef === void 0 ? void 0 : (_buttonItemRef$curren = buttonItemRef.current) === null || _buttonItemRef$curren === void 0 ? void 0 : _buttonItemRef$curren.focus();
+      const skipFocusOnSafariHover = isSafari && (lastInputMethodRef === null || lastInputMethodRef === void 0 ? void 0 : lastInputMethodRef.current) === 'mouse' && expValEquals('platform_safari_cursor_typeahead_fix', 'isEnabled', true);
+      if (!skipFocusOnSafariHover) {
+        var _buttonItemRef$curren;
+        buttonItemRef === null || buttonItemRef === void 0 ? void 0 : (_buttonItemRef$curren = buttonItemRef.current) === null || _buttonItemRef$curren === void 0 ? void 0 : _buttonItemRef$curren.focus();
+      }
     }
-  }, [buttonItemRef, shouldUpdateFocus]);
+  }, [buttonItemRef, shouldUpdateFocus, lastInputMethodRef, isSafari]);
   if (customRenderItem) {
     return jsx(CustomItemComponentWrapper, {
       itemIsDisabled: itemIsDisabled,

package/dist/esm/ui/MoreOptions.js

@@ -2,10 +2,11 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
+import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { ButtonItem, Section } from '@atlaskit/menu';
 import { N30 } from '@atlaskit/theme/colors';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -24,13 +25,18 @@ export var MoreOptions = function MoreOptions(_ref) {
     isFocused = _ref.isFocused,
     title = _ref.title,
     ariaLabel = _ref.ariaLabel,
-    iconBefore = _ref.iconBefore;
+    iconBefore = _ref.iconBefore,
+    lastInputMethodRef = _ref.lastInputMethodRef;
   var ref = useRef(null);
+  var isSafari = getBrowserInfo().safari;
   useEffect(function () {
     if (isFocused && ref.current) {
-      ref.current.focus();
+      var skipFocusOnSafariHover = isSafari && (lastInputMethodRef === null || lastInputMethodRef === void 0 ? void 0 : lastInputMethodRef.current) === 'mouse' && expValEquals('platform_safari_cursor_typeahead_fix', 'isEnabled', true);
+      if (!skipFocusOnSafariHover) {
+        ref.current.focus();
+      }
     }
-  }, [isFocused]);
+  }, [isFocused, lastInputMethodRef, isSafari]);
   useEffect(function () {
     if (!ref.current) {
       return;
@@ -64,6 +70,11 @@ export var MoreOptions = function MoreOptions(_ref) {
     css: buttonStyles
   }, jsx(ButtonItem, {
     ref: ref,
+    onMouseDown: function onMouseDown(e) {
+      if (isSafari && expValEquals('platform_safari_cursor_typeahead_fix', 'isEnabled', true)) {
+        e.preventDefault();
+      }
+    },
     onClick: onClick,
     iconBefore: iconBefore,
     "aria-label": ariaLabel,

package/dist/esm/ui/TypeAheadList.js

@@ -62,6 +62,8 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
     onMoreOptionsClicked = _ref2.onMoreOptionsClicked;
   var listRef = useRef();
   var listContainerRef = useRef(null);
+  var lastInputMethodRef = useRef('keyboard');
+  var mouseMovedRef = useRef(false);
   var lastVisibleIndexes = useRef({
     overscanStartIndex: 0,
     overscanStopIndex: 0,
@@ -160,8 +162,17 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
     if (selectedIndex === index) {
       return;
     }
+    mouseMovedRef.current = true;
+    lastInputMethodRef.current = 'mouse';
     updateSelectedIndex(index, api)(editorView.state, editorView.dispatch);
   };
+  useLayoutEffect(function () {
+    if (mouseMovedRef.current) {
+      mouseMovedRef.current = false;
+    } else {
+      lastInputMethodRef.current = 'keyboard';
+    }
+  }, [selectedIndex]);
   useLayoutEffect(function () {
     if (!listRef.current) {
       return;
@@ -216,6 +227,7 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
      */
     var handleKeyDown = function handleKeyDown(event) {
       if (isNavigationKey(event)) {
+        lastInputMethodRef.current = 'keyboard';
         switch (event.key) {
           case 'ArrowDown':
             selectNextItem();
@@ -319,7 +331,8 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
         },
         ariaLabel: getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel,
         moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
-        api: api
+        api: api,
+        lastInputMethodRef: lastInputMethodRef
       }));
     });
   };
@@ -383,7 +396,8 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
     ariaLabel: config.ariaLabel,
     onClick: handleClick,
     isFocused: selectedIndex === itemsLength,
-    iconBefore: config.iconBefore
+    iconBefore: config.iconBefore,
+    lastInputMethodRef: lastInputMethodRef
   }), jsx(TypeaheadAssistiveTextPureComponent, {
     numberOfResults: itemsLength.toString()
   })));

package/dist/esm/ui/TypeAheadListItem.js

@@ -9,6 +9,7 @@ import React, { useCallback, useLayoutEffect, useMemo } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
+import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { IconFallback } from '@atlaskit/editor-common/quick-insert';
 import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
@@ -17,6 +18,7 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { ButtonItem } from '@atlaskit/menu';
 import { B400, N30, N800 } from '@atlaskit/theme/colors';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -158,7 +160,9 @@ export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref) {
     ariaLabel = _ref.ariaLabel,
     moreElementsInQuickInsertViewEnabled = _ref.moreElementsInQuickInsertViewEnabled,
     api = _ref.api,
-    firstOnlineSupportedIndex = _ref.firstOnlineSupportedIndex;
+    firstOnlineSupportedIndex = _ref.firstOnlineSupportedIndex,
+    lastInputMethodRef = _ref.lastInputMethodRef;
+  var isSafari = getBrowserInfo().safari;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['connectivity'], function (states) {
       var _states$connectivityS;
       return {
@@ -212,16 +216,22 @@ export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref) {
   }, [isSelected, itemIsDisabled]);
   useLayoutEffect(function () {
     if (shouldUpdateFocus) {
-      var _customItemRef$curren;
-      customItemRef === null || customItemRef === void 0 || (_customItemRef$curren = customItemRef.current) === null || _customItemRef$curren === void 0 || _customItemRef$curren.focus();
+      var skipFocusOnSafariHover = isSafari && (lastInputMethodRef === null || lastInputMethodRef === void 0 ? void 0 : lastInputMethodRef.current) === 'mouse' && expValEquals('platform_safari_cursor_typeahead_fix', 'isEnabled', true);
+      if (!skipFocusOnSafariHover) {
+        var _customItemRef$curren;
+        customItemRef === null || customItemRef === void 0 || (_customItemRef$curren = customItemRef.current) === null || _customItemRef$curren === void 0 || _customItemRef$curren.focus();
+      }
     }
-  }, [customItemRef, shouldUpdateFocus]);
+  }, [customItemRef, shouldUpdateFocus, lastInputMethodRef, isSafari]);
   useLayoutEffect(function () {
     if (shouldUpdateFocus) {
-      var _buttonItemRef$curren;
-      buttonItemRef === null || buttonItemRef === void 0 || (_buttonItemRef$curren = buttonItemRef.current) === null || _buttonItemRef$curren === void 0 || _buttonItemRef$curren.focus();
+      var skipFocusOnSafariHover = isSafari && (lastInputMethodRef === null || lastInputMethodRef === void 0 ? void 0 : lastInputMethodRef.current) === 'mouse' && expValEquals('platform_safari_cursor_typeahead_fix', 'isEnabled', true);
+      if (!skipFocusOnSafariHover) {
+        var _buttonItemRef$curren;
+        buttonItemRef === null || buttonItemRef === void 0 || (_buttonItemRef$curren = buttonItemRef.current) === null || _buttonItemRef$curren === void 0 || _buttonItemRef$curren.focus();
+      }
     }
-  }, [buttonItemRef, shouldUpdateFocus]);
+  }, [buttonItemRef, shouldUpdateFocus, lastInputMethodRef, isSafari]);
   if (customRenderItem) {
     return jsx(CustomItemComponentWrapper, {
       itemIsDisabled: itemIsDisabled,

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

@@ -1,10 +1,16 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
 import { jsx } from '@emotion/react';
 type Props = {
     ariaLabel?: string;
     iconBefore?: React.ReactNode;
     isFocused: boolean;
+    lastInputMethodRef?: React.MutableRefObject<'mouse' | 'keyboard'>;
     onClick: () => void;
     title: string;
 };
-export declare const MoreOptions: ({ onClick, isFocused, title, ariaLabel, iconBefore, }: Props) => jsx.JSX.Element;
+export declare const MoreOptions: ({ onClick, isFocused, title, ariaLabel, iconBefore, lastInputMethodRef, }: Props) => jsx.JSX.Element;
 export {};

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

@@ -15,9 +15,10 @@ type TypeAheadListItemProps = {
     item: TypeAheadItem;
     itemIndex: number;
     itemsLength: number;
+    lastInputMethodRef?: React.MutableRefObject<'mouse' | 'keyboard'>;
     moreElementsInQuickInsertViewEnabled?: boolean;
     onItemClick: (mode: SelectItemMode, index: number) => void;
     selectedIndex: number;
 };
-export declare const TypeAheadListItem: React.MemoExoticComponent<({ item, itemsLength, selectedIndex, onItemClick, itemIndex, ariaLabel, moreElementsInQuickInsertViewEnabled, api, firstOnlineSupportedIndex, }: TypeAheadListItemProps) => jsx.JSX.Element>;
+export declare const TypeAheadListItem: React.MemoExoticComponent<({ item, itemsLength, selectedIndex, onItemClick, itemIndex, ariaLabel, moreElementsInQuickInsertViewEnabled, api, firstOnlineSupportedIndex, lastInputMethodRef, }: TypeAheadListItemProps) => jsx.JSX.Element>;
 export {};

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

@@ -1,10 +1,16 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
 import { jsx } from '@emotion/react';
 type Props = {
     ariaLabel?: string;
     iconBefore?: React.ReactNode;
     isFocused: boolean;
+    lastInputMethodRef?: React.MutableRefObject<'mouse' | 'keyboard'>;
     onClick: () => void;
     title: string;
 };
-export declare const MoreOptions: ({ onClick, isFocused, title, ariaLabel, iconBefore, }: Props) => jsx.JSX.Element;
+export declare const MoreOptions: ({ onClick, isFocused, title, ariaLabel, iconBefore, lastInputMethodRef, }: Props) => jsx.JSX.Element;
 export {};

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

@@ -15,9 +15,10 @@ type TypeAheadListItemProps = {
     item: TypeAheadItem;
     itemIndex: number;
     itemsLength: number;
+    lastInputMethodRef?: React.MutableRefObject<'mouse' | 'keyboard'>;
     moreElementsInQuickInsertViewEnabled?: boolean;
     onItemClick: (mode: SelectItemMode, index: number) => void;
     selectedIndex: number;
 };
-export declare const TypeAheadListItem: React.MemoExoticComponent<({ item, itemsLength, selectedIndex, onItemClick, itemIndex, ariaLabel, moreElementsInQuickInsertViewEnabled, api, firstOnlineSupportedIndex, }: TypeAheadListItemProps) => jsx.JSX.Element>;
+export declare const TypeAheadListItem: React.MemoExoticComponent<({ item, itemsLength, selectedIndex, onItemClick, itemIndex, ariaLabel, moreElementsInQuickInsertViewEnabled, api, firstOnlineSupportedIndex, lastInputMethodRef, }: TypeAheadListItemProps) => jsx.JSX.Element>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-type-ahead",
-	"version": "8.0.5",
+	"version": "8.0.6",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,7 +29,7 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^52.3.0",
+		"@atlaskit/adf-schema": "^52.4.0",
 		"@atlaskit/editor-plugin-analytics": "^8.0.0",
 		"@atlaskit/editor-plugin-connectivity": "^8.0.0",
 		"@atlaskit/editor-plugin-context-panel": "^10.0.0",
@@ -45,7 +45,7 @@
 		"@atlaskit/prosemirror-history": "^0.2.0",
 		"@atlaskit/prosemirror-input-rules": "^3.6.0",
 		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tmp-editor-statsig": "^40.0.0",
+		"@atlaskit/tmp-editor-statsig": "^40.7.0",
 		"@atlaskit/tokens": "^11.1.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -57,7 +57,7 @@
 		"w3c-keyname": "^2.1.8"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^112.4.0",
+		"@atlaskit/editor-common": "^112.6.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"