@atlaskit/editor-plugin-type-ahead 1.1.5 → 1.1.7

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 1.1.7
+
+### Patch Changes
+
+-   [#98137](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98137)
+    [`b1ddc8df2070`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b1ddc8df2070) -
+    [ED-23195] Refactor React components to use useRef inside functional components
+-   Updated dependencies
+
+## 1.1.6
+
+### Patch Changes
+
+-   [#97698](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97698)
+    [`1c7b378c0d3b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1c7b378c0d3b) -
+    [HOT-108999] We had an incident where the cursor jumps back a character in table headers for any
+    language triggering composition on an empty line.This was fixed in a patch bump of
+    prosemirror-view. https://github.com/ProseMirror/prosemirror-view/compare/1.33.4...1.33.5
+
 ## 1.1.5
 
 ### Patch Changes

package/dist/cjs/ui/TypeAheadListItem.js

@@ -66,7 +66,40 @@ var FallbackIcon = /*#__PURE__*/_react.default.memo(function (_ref) {
   return (0, _react2.jsx)(_quickInsert.IconFallback, null);
 });
 var noop = function noop() {};
-var TypeAheadListItem = exports.TypeAheadListItem = function TypeAheadListItem(_ref2) {
+var CustomItemComponentWrapper = /*#__PURE__*/_react.default.memo(function (props) {
+  var customRenderItem = props.customRenderItem,
+    isSelected = props.isSelected,
+    ariaLabel = props.ariaLabel,
+    itemsLength = props.itemsLength,
+    customItemRef = props.customItemRef,
+    insertSelectedItem = props.insertSelectedItem,
+    itemIndex = props.itemIndex;
+  var Comp = customRenderItem;
+  var listItemClasses = (0, _react.useMemo)(function () {
+    return [customRenderItemDivStyle, isSelected && selectedStyle];
+  }, [isSelected]);
+  return (0, _react2.jsx)("div", {
+    "aria-selected": isSelected,
+    role: "option",
+    "aria-label": ariaLabel,
+    "aria-setsize": itemsLength,
+    "aria-posinset": itemIndex,
+    tabIndex: 0,
+    css: listItemClasses,
+    className: "ak-typeahead-item ".concat(isSelected ? 'typeahead-selected-item' : '')
+    //CSS classes added for test cases purpose
+    ,
+    ref: customItemRef
+  }, (0, _react2.jsx)("div", {
+    "aria-hidden": true
+  }, (0, _react2.jsx)(Comp, {
+    onClick: insertSelectedItem,
+    isSelected: false //The selection styles are handled in the parent div instead. Hence isSelected is made false always.
+    ,
+    onHover: noop
+  })));
+});
+var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.memo(function (_ref2) {
   var item = _ref2.item,
     itemsLength = _ref2.itemsLength,
     selectedIndex = _ref2.selectedIndex,
@@ -96,9 +129,12 @@ var TypeAheadListItem = exports.TypeAheadListItem = function TypeAheadListItem(_
   var insertSelectedItem = (0, _react.useCallback)(function () {
     onItemClick(_typeAhead.SelectItemMode.SELECTED, itemIndex);
   }, [onItemClick, itemIndex]);
-  var customItemRef = /*#__PURE__*/_react.default.createRef();
-  var buttonItemRef = /*#__PURE__*/_react.default.createRef();
+  var customItemRef = _react.default.useRef(null);
+  var buttonItemRef = _react.default.useRef(null);
   var shouldUpdateFocus = selectedIndex === itemIndex;
+  var listItemClasses = (0, _react.useMemo)(function () {
+    return [selectionFrame, isSelected && selectedStyle];
+  }, [isSelected]);
   (0, _react.useLayoutEffect)(function () {
     if (shouldUpdateFocus) {
       var _customItemRef$curren;
@@ -111,37 +147,17 @@ var TypeAheadListItem = exports.TypeAheadListItem = function TypeAheadListItem(_
       buttonItemRef === null || buttonItemRef === void 0 || (_buttonItemRef$curren = buttonItemRef.current) === null || _buttonItemRef$curren === void 0 || _buttonItemRef$curren.focus();
     }
   }, [buttonItemRef, shouldUpdateFocus]);
-  var customItem = (0, _react.useMemo)(function () {
-    if (!customRenderItem) {
-      return null;
-    }
-    var Comp = customRenderItem;
-    var listItemClasses = [customRenderItemDivStyle, isSelected && selectedStyle];
-    return (0, _react2.jsx)("div", {
-      "aria-selected": isSelected,
-      role: "option",
-      "aria-label": ariaLabel,
-      "aria-setsize": itemsLength,
-      "aria-posinset": itemIndex,
-      tabIndex: 0,
-      css: listItemClasses,
-      className: "ak-typeahead-item ".concat(isSelected ? 'typeahead-selected-item' : '')
-      //CSS classes added for test cases purpose
-      ,
-      ref: customItemRef
-    }, (0, _react2.jsx)("div", {
-      "aria-hidden": true
-    }, (0, _react2.jsx)(Comp, {
-      onClick: insertSelectedItem,
-      isSelected: false //The selection styles are handled in the parent div instead. Hence isSelected is made false always.
-      ,
-      onHover: noop
-    })));
-  }, [customRenderItem, isSelected, ariaLabel, itemsLength, customItemRef, insertSelectedItem, itemIndex]);
-  if (customItem) {
-    return customItem;
+  if (customRenderItem) {
+    return (0, _react2.jsx)(CustomItemComponentWrapper, {
+      customRenderItem: customRenderItem,
+      isSelected: isSelected,
+      ariaLabel: ariaLabel,
+      itemsLength: itemsLength,
+      customItemRef: customItemRef,
+      insertSelectedItem: insertSelectedItem,
+      itemIndex: itemIndex
+    });
   }
-  var listItemClasses = [selectionFrame, isSelected && selectedStyle];
   return (0, _react2.jsx)("span", {
     css: listItemClasses
   }, (0, _react2.jsx)(_menu.ButtonItem, {
@@ -173,4 +189,4 @@ var TypeAheadListItem = exports.TypeAheadListItem = function TypeAheadListItem(_
   }, item.keyshortcut))), (0, _react2.jsx)("div", {
     className: "item-description"
   }, item.description)))));
-};
+});

package/dist/es2019/ui/TypeAheadListItem.js

@@ -84,7 +84,42 @@ const FallbackIcon = /*#__PURE__*/React.memo(({
   return jsx(IconFallback, null);
 });
 const noop = () => {};
-export const TypeAheadListItem = ({
+const CustomItemComponentWrapper = /*#__PURE__*/React.memo(props => {
+  const {
+    customRenderItem,
+    isSelected,
+    ariaLabel,
+    itemsLength,
+    customItemRef,
+    insertSelectedItem,
+    itemIndex
+  } = props;
+  const Comp = customRenderItem;
+  const listItemClasses = useMemo(() => {
+    return [customRenderItemDivStyle, isSelected && selectedStyle];
+  }, [isSelected]);
+  return jsx("div", {
+    "aria-selected": isSelected,
+    role: "option",
+    "aria-label": ariaLabel,
+    "aria-setsize": itemsLength,
+    "aria-posinset": itemIndex,
+    tabIndex: 0,
+    css: listItemClasses,
+    className: `ak-typeahead-item ${isSelected ? 'typeahead-selected-item' : ''}`
+    //CSS classes added for test cases purpose
+    ,
+    ref: customItemRef
+  }, jsx("div", {
+    "aria-hidden": true
+  }, jsx(Comp, {
+    onClick: insertSelectedItem,
+    isSelected: false //The selection styles are handled in the parent div instead. Hence isSelected is made false always.
+    ,
+    onHover: noop
+  })));
+});
+export const TypeAheadListItem = /*#__PURE__*/React.memo(({
   item,
   itemsLength,
   selectedIndex,
@@ -117,9 +152,12 @@ export const TypeAheadListItem = ({
   const insertSelectedItem = useCallback(() => {
     onItemClick(SelectItemMode.SELECTED, itemIndex);
   }, [onItemClick, itemIndex]);
-  const customItemRef = /*#__PURE__*/React.createRef();
-  const buttonItemRef = /*#__PURE__*/React.createRef();
+  const customItemRef = React.useRef(null);
+  const buttonItemRef = React.useRef(null);
   const shouldUpdateFocus = selectedIndex === itemIndex;
+  const listItemClasses = useMemo(() => {
+    return [selectionFrame, isSelected && selectedStyle];
+  }, [isSelected]);
   useLayoutEffect(() => {
     if (shouldUpdateFocus) {
       var _customItemRef$curren;
@@ -132,37 +170,17 @@ export const TypeAheadListItem = ({
       buttonItemRef === null || buttonItemRef === void 0 ? void 0 : (_buttonItemRef$curren = buttonItemRef.current) === null || _buttonItemRef$curren === void 0 ? void 0 : _buttonItemRef$curren.focus();
     }
   }, [buttonItemRef, shouldUpdateFocus]);
-  const customItem = useMemo(() => {
-    if (!customRenderItem) {
-      return null;
-    }
-    const Comp = customRenderItem;
-    const listItemClasses = [customRenderItemDivStyle, isSelected && selectedStyle];
-    return jsx("div", {
-      "aria-selected": isSelected,
-      role: "option",
-      "aria-label": ariaLabel,
-      "aria-setsize": itemsLength,
-      "aria-posinset": itemIndex,
-      tabIndex: 0,
-      css: listItemClasses,
-      className: `ak-typeahead-item ${isSelected ? 'typeahead-selected-item' : ''}`
-      //CSS classes added for test cases purpose
-      ,
-      ref: customItemRef
-    }, jsx("div", {
-      "aria-hidden": true
-    }, jsx(Comp, {
-      onClick: insertSelectedItem,
-      isSelected: false //The selection styles are handled in the parent div instead. Hence isSelected is made false always.
-      ,
-      onHover: noop
-    })));
-  }, [customRenderItem, isSelected, ariaLabel, itemsLength, customItemRef, insertSelectedItem, itemIndex]);
-  if (customItem) {
-    return customItem;
+  if (customRenderItem) {
+    return jsx(CustomItemComponentWrapper, {
+      customRenderItem: customRenderItem,
+      isSelected: isSelected,
+      ariaLabel: ariaLabel,
+      itemsLength: itemsLength,
+      customItemRef: customItemRef,
+      insertSelectedItem: insertSelectedItem,
+      itemIndex: itemIndex
+    });
   }
-  const listItemClasses = [selectionFrame, isSelected && selectedStyle];
   return jsx("span", {
     css: listItemClasses
   }, jsx(ButtonItem, {
@@ -194,4 +212,4 @@ export const TypeAheadListItem = ({
   }, item.keyshortcut))), jsx("div", {
     className: "item-description"
   }, item.description)))));
-};
+});

package/dist/esm/ui/TypeAheadListItem.js

@@ -57,7 +57,40 @@ var FallbackIcon = /*#__PURE__*/React.memo(function (_ref) {
   return jsx(IconFallback, null);
 });
 var noop = function noop() {};
-export var TypeAheadListItem = function TypeAheadListItem(_ref2) {
+var CustomItemComponentWrapper = /*#__PURE__*/React.memo(function (props) {
+  var customRenderItem = props.customRenderItem,
+    isSelected = props.isSelected,
+    ariaLabel = props.ariaLabel,
+    itemsLength = props.itemsLength,
+    customItemRef = props.customItemRef,
+    insertSelectedItem = props.insertSelectedItem,
+    itemIndex = props.itemIndex;
+  var Comp = customRenderItem;
+  var listItemClasses = useMemo(function () {
+    return [customRenderItemDivStyle, isSelected && selectedStyle];
+  }, [isSelected]);
+  return jsx("div", {
+    "aria-selected": isSelected,
+    role: "option",
+    "aria-label": ariaLabel,
+    "aria-setsize": itemsLength,
+    "aria-posinset": itemIndex,
+    tabIndex: 0,
+    css: listItemClasses,
+    className: "ak-typeahead-item ".concat(isSelected ? 'typeahead-selected-item' : '')
+    //CSS classes added for test cases purpose
+    ,
+    ref: customItemRef
+  }, jsx("div", {
+    "aria-hidden": true
+  }, jsx(Comp, {
+    onClick: insertSelectedItem,
+    isSelected: false //The selection styles are handled in the parent div instead. Hence isSelected is made false always.
+    ,
+    onHover: noop
+  })));
+});
+export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref2) {
   var item = _ref2.item,
     itemsLength = _ref2.itemsLength,
     selectedIndex = _ref2.selectedIndex,
@@ -87,9 +120,12 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref2) {
   var insertSelectedItem = useCallback(function () {
     onItemClick(SelectItemMode.SELECTED, itemIndex);
   }, [onItemClick, itemIndex]);
-  var customItemRef = /*#__PURE__*/React.createRef();
-  var buttonItemRef = /*#__PURE__*/React.createRef();
+  var customItemRef = React.useRef(null);
+  var buttonItemRef = React.useRef(null);
   var shouldUpdateFocus = selectedIndex === itemIndex;
+  var listItemClasses = useMemo(function () {
+    return [selectionFrame, isSelected && selectedStyle];
+  }, [isSelected]);
   useLayoutEffect(function () {
     if (shouldUpdateFocus) {
       var _customItemRef$curren;
@@ -102,37 +138,17 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref2) {
       buttonItemRef === null || buttonItemRef === void 0 || (_buttonItemRef$curren = buttonItemRef.current) === null || _buttonItemRef$curren === void 0 || _buttonItemRef$curren.focus();
     }
   }, [buttonItemRef, shouldUpdateFocus]);
-  var customItem = useMemo(function () {
-    if (!customRenderItem) {
-      return null;
-    }
-    var Comp = customRenderItem;
-    var listItemClasses = [customRenderItemDivStyle, isSelected && selectedStyle];
-    return jsx("div", {
-      "aria-selected": isSelected,
-      role: "option",
-      "aria-label": ariaLabel,
-      "aria-setsize": itemsLength,
-      "aria-posinset": itemIndex,
-      tabIndex: 0,
-      css: listItemClasses,
-      className: "ak-typeahead-item ".concat(isSelected ? 'typeahead-selected-item' : '')
-      //CSS classes added for test cases purpose
-      ,
-      ref: customItemRef
-    }, jsx("div", {
-      "aria-hidden": true
-    }, jsx(Comp, {
-      onClick: insertSelectedItem,
-      isSelected: false //The selection styles are handled in the parent div instead. Hence isSelected is made false always.
-      ,
-      onHover: noop
-    })));
-  }, [customRenderItem, isSelected, ariaLabel, itemsLength, customItemRef, insertSelectedItem, itemIndex]);
-  if (customItem) {
-    return customItem;
+  if (customRenderItem) {
+    return jsx(CustomItemComponentWrapper, {
+      customRenderItem: customRenderItem,
+      isSelected: isSelected,
+      ariaLabel: ariaLabel,
+      itemsLength: itemsLength,
+      customItemRef: customItemRef,
+      insertSelectedItem: insertSelectedItem,
+      itemIndex: itemIndex
+    });
   }
-  var listItemClasses = [selectionFrame, isSelected && selectedStyle];
   return jsx("span", {
     css: listItemClasses
   }, jsx(ButtonItem, {
@@ -164,4 +180,4 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref2) {
   }, item.keyshortcut))), jsx("div", {
     className: "item-description"
   }, item.description)))));
-};
+});

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

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import React from 'react';
 import { jsx } from '@emotion/react';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 import type { TypeAheadItem } from '../types';
@@ -10,5 +12,5 @@ type TypeAheadListItemProps = {
     ariaLabel?: string;
     onItemClick: (mode: SelectItemMode, index: number) => void;
 };
-export declare const TypeAheadListItem: ({ item, itemsLength, selectedIndex, onItemClick, itemIndex, ariaLabel, }: TypeAheadListItemProps) => jsx.JSX.Element;
+export declare const TypeAheadListItem: React.MemoExoticComponent<({ item, itemsLength, selectedIndex, onItemClick, itemIndex, ariaLabel, }: TypeAheadListItemProps) => jsx.JSX.Element>;
 export {};

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

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import React from 'react';
 import { jsx } from '@emotion/react';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 import type { TypeAheadItem } from '../types';
@@ -10,5 +12,5 @@ type TypeAheadListItemProps = {
     ariaLabel?: string;
     onItemClick: (mode: SelectItemMode, index: number) => void;
 };
-export declare const TypeAheadListItem: ({ item, itemsLength, selectedIndex, onItemClick, itemIndex, ariaLabel, }: TypeAheadListItemProps) => jsx.JSX.Element;
+export declare const TypeAheadListItem: React.MemoExoticComponent<({ item, itemsLength, selectedIndex, onItemClick, itemIndex, ariaLabel, }: TypeAheadListItemProps) => jsx.JSX.Element>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-type-ahead",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "description": "Type-ahead plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -34,9 +34,9 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.12.2",
     "@atlaskit/analytics-next": "^9.3.0",
-    "@atlaskit/editor-common": "^79.0.0",
+    "@atlaskit/editor-common": "^79.2.0",
     "@atlaskit/editor-plugin-analytics": "^1.1.0",
-    "@atlaskit/editor-prosemirror": "4.0.0",
+    "@atlaskit/editor-prosemirror": "4.0.1",
     "@atlaskit/editor-shared-styles": "^2.10.0",
     "@atlaskit/menu": "^2.2.0",
     "@atlaskit/prosemirror-input-rules": "^3.1.0",