@atlaskit/editor-plugin-type-ahead 6.1.1 → 6.3.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 6.3.0
+
+### Minor Changes
+
+- [`2cfe444a49320`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2cfe444a49320) -
+  [https://product-fabric.atlassian.net/browse/ED-29474](ED-29474) - bump react-virtualized version
+  to 9.22.6
+
+## 6.2.0
+
+### Minor Changes
+
+- [`97586ad447624`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/97586ad447624) -
+  [ux] Add a feature gate to remove the onClick handler from type-ahead InpuQuery to fix the a11y
+  violation
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.1.1
 
 ### Patch Changes

package/dist/cjs/ui/InputQuery.js

@@ -245,6 +245,8 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
       return false;
     }
   }, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state, isEditorControlsEnabled]);
+
+  // Remove when cleaning up platform_editor_a11y_remove_input_query_on_click
   var onClick = (0, _react.useCallback)(function (event) {
     var _inputRef$current;
     event.stopPropagation();
@@ -476,18 +478,13 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
   }, [showPlaceholder, selection]);
   var assistiveHintID = _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID + '__assistiveHint';
   var intl = (0, _reactIntlNext.useIntl)();
-
-  /**
-   When we migrated to emotion from styled component, we started getting this error.
-   jsx-a11y/interactive-supports-focus
-   Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
-  */
   return (0, _react2.jsx)(_react.Fragment, null, triggerQueryPrefix, (0, _react2.jsx)("span", {
     css: [querySpanStyles, isSearchPlaceholderEnabled && queryWithoutPlaceholderStyles, showPlaceholder && placeholderStyles],
     contentEditable: true,
     ref: ref,
     onKeyUp: onKeyUp,
-    onClick: onClick,
+    onClick: (0, _platformFeatureFlags.fg)('platform_editor_a11y_remove_input_query_on_click') ? undefined : onClick,
+    tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_a11y_remove_input_query_on_click') ? -1 : undefined,
     onInput: isSearchPlaceholderEnabled ? onInput : undefined,
     role: "combobox",
     "aria-controls": _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID,

package/dist/cjs/ui/ListRow.js

@@ -4,7 +4,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ListRow = ListRow;
+exports.ListRow = void 0;
 var _react = _interopRequireWildcard(require("react"));
 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); }
 /**
@@ -20,9 +20,9 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * @param root0.onMouseMove
  * @example
  */
-function ListRow(_ref) {
+// The `CellMeasurer` component from react-virtualized expects that his children is a `forwardRef` component.
+var ListRow = exports.ListRow = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
-    registerChild = _ref.registerChild,
     measure = _ref.measure,
     index = _ref.index,
     style = _ref.style,
@@ -30,9 +30,6 @@ function ListRow(_ref) {
     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) {
@@ -50,7 +47,7 @@ function ListRow(_ref) {
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     _react.default.createElement("div", {
-      ref: setListElementRef,
+      ref: ref,
       style: style,
       "data-index": index
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -59,4 +56,4 @@ function ListRow(_ref) {
       onMouseMove: onMouseMove
     }, children))
   );
-}
+});

package/dist/cjs/ui/TypeAheadList.js

@@ -297,10 +297,8 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
       columnIndex: 0,
       rowIndex: index
     }, function (_ref6) {
-      var measure = _ref6.measure,
-        registerChild = _ref6.registerChild;
+      var measure = _ref6.measure;
       return (0, _react2.jsx)(_ListRow.ListRow, {
-        registerChild: registerChild,
         measure: measure,
         index: index
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop

package/dist/es2019/ui/InputQuery.js

@@ -229,6 +229,8 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       return false;
     }
   }, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state, isEditorControlsEnabled]);
+
+  // Remove when cleaning up platform_editor_a11y_remove_input_query_on_click
   const onClick = useCallback(event => {
     var _inputRef$current;
     event.stopPropagation();
@@ -469,18 +471,13 @@ export const InputQuery = /*#__PURE__*/React.memo(({
   }, [showPlaceholder, selection]);
   const assistiveHintID = TYPE_AHEAD_DECORATION_ELEMENT_ID + '__assistiveHint';
   const intl = useIntl();
-
-  /**
-   When we migrated to emotion from styled component, we started getting this error.
-   jsx-a11y/interactive-supports-focus
-   Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
-  */
   return jsx(Fragment, null, triggerQueryPrefix, jsx("span", {
     css: [querySpanStyles, isSearchPlaceholderEnabled && queryWithoutPlaceholderStyles, showPlaceholder && placeholderStyles],
     contentEditable: true,
     ref: ref,
     onKeyUp: onKeyUp,
-    onClick: onClick,
+    onClick: fg('platform_editor_a11y_remove_input_query_on_click') ? undefined : onClick,
+    tabIndex: fg('platform_editor_a11y_remove_input_query_on_click') ? -1 : undefined,
     onInput: isSearchPlaceholderEnabled ? onInput : undefined,
     role: "combobox",
     "aria-controls": TYPE_AHEAD_DECORATION_ELEMENT_ID,

package/dist/es2019/ui/ListRow.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, forwardRef } from 'react';
 /**
  *
  * @param root0
@@ -12,20 +12,17 @@ import React, { useEffect, useRef } from 'react';
  * @param root0.onMouseMove
  * @example
  */
-export function ListRow({
+// The `CellMeasurer` component from react-virtualized expects that his children is a `forwardRef` component.
+export const ListRow = /*#__PURE__*/forwardRef(({
   children,
-  registerChild,
   measure,
   index,
   style,
   isVisible,
   isScrolling,
   onMouseMove
-}) {
+}, ref) => {
   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) {
@@ -39,7 +36,7 @@ export function ListRow({
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     React.createElement("div", {
-      ref: setListElementRef,
+      ref: ref,
       style: style,
       "data-index": index
     }, /*#__PURE__*/React.createElement("div", {
@@ -48,4 +45,4 @@ export function ListRow({
       onMouseMove: onMouseMove
     }, children))
   );
-}
+});

package/dist/es2019/ui/TypeAheadList.js

@@ -280,10 +280,8 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
       columnIndex: 0,
       rowIndex: index
     }, ({
-      measure,
-      registerChild
+      measure
     }) => jsx(ListRow, {
-      registerChild: registerChild,
       measure: measure,
       index: index
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop

package/dist/esm/ui/InputQuery.js

@@ -235,6 +235,8 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
       return false;
     }
   }, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state, isEditorControlsEnabled]);
+
+  // Remove when cleaning up platform_editor_a11y_remove_input_query_on_click
   var onClick = useCallback(function (event) {
     var _inputRef$current;
     event.stopPropagation();
@@ -466,18 +468,13 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
   }, [showPlaceholder, selection]);
   var assistiveHintID = TYPE_AHEAD_DECORATION_ELEMENT_ID + '__assistiveHint';
   var intl = useIntl();
-
-  /**
-   When we migrated to emotion from styled component, we started getting this error.
-   jsx-a11y/interactive-supports-focus
-   Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
-  */
   return jsx(Fragment, null, triggerQueryPrefix, jsx("span", {
     css: [querySpanStyles, isSearchPlaceholderEnabled && queryWithoutPlaceholderStyles, showPlaceholder && placeholderStyles],
     contentEditable: true,
     ref: ref,
     onKeyUp: onKeyUp,
-    onClick: onClick,
+    onClick: fg('platform_editor_a11y_remove_input_query_on_click') ? undefined : onClick,
+    tabIndex: fg('platform_editor_a11y_remove_input_query_on_click') ? -1 : undefined,
     onInput: isSearchPlaceholderEnabled ? onInput : undefined,
     role: "combobox",
     "aria-controls": TYPE_AHEAD_DECORATION_ELEMENT_ID,

package/dist/esm/ui/ListRow.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, forwardRef } from 'react';
 /**
  *
  * @param root0
@@ -12,9 +12,9 @@ import React, { useEffect, useRef } from 'react';
  * @param root0.onMouseMove
  * @example
  */
-export function ListRow(_ref) {
+// The `CellMeasurer` component from react-virtualized expects that his children is a `forwardRef` component.
+export var ListRow = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
-    registerChild = _ref.registerChild,
     measure = _ref.measure,
     index = _ref.index,
     style = _ref.style,
@@ -22,9 +22,6 @@ export function ListRow(_ref) {
     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) {
@@ -42,7 +39,7 @@ export function ListRow(_ref) {
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     React.createElement("div", {
-      ref: setListElementRef,
+      ref: ref,
       style: style,
       "data-index": index
     }, /*#__PURE__*/React.createElement("div", {
@@ -51,4 +48,4 @@ export function ListRow(_ref) {
       onMouseMove: onMouseMove
     }, children))
   );
-}
+});

package/dist/esm/ui/TypeAheadList.js

@@ -288,10 +288,8 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
       columnIndex: 0,
       rowIndex: index
     }, function (_ref6) {
-      var measure = _ref6.measure,
-        registerChild = _ref6.registerChild;
+      var measure = _ref6.measure;
       return jsx(ListRow, {
-        registerChild: registerChild,
         measure: measure,
         index: index
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop

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

@@ -1,11 +1,5 @@
 import React, { type ReactNode, type MouseEventHandler } from 'react';
 import { type ListRowProps } from 'react-virtualized';
-type Props = {
-    children: ReactNode;
-    measure: () => void;
-    onMouseMove: MouseEventHandler<HTMLDivElement>;
-    registerChild?: (element?: Element) => void;
-} & Pick<ListRowProps, 'index' | 'style' | 'isScrolling' | 'isVisible'>;
 /**
  *
  * @param root0
@@ -19,5 +13,8 @@ type Props = {
  * @param root0.onMouseMove
  * @example
  */
-export declare function ListRow({ children, registerChild, measure, index, style, isVisible, isScrolling, onMouseMove, }: Props): React.JSX.Element;
-export {};
+export declare const ListRow: React.ForwardRefExoticComponent<{
+    children: ReactNode;
+    measure: () => void;
+    onMouseMove: MouseEventHandler<HTMLDivElement>;
+} & Pick<ListRowProps, "index" | "style" | "isScrolling" | "isVisible"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,11 +1,5 @@
 import React, { type ReactNode, type MouseEventHandler } from 'react';
 import { type ListRowProps } from 'react-virtualized';
-type Props = {
-    children: ReactNode;
-    measure: () => void;
-    onMouseMove: MouseEventHandler<HTMLDivElement>;
-    registerChild?: (element?: Element) => void;
-} & Pick<ListRowProps, 'index' | 'style' | 'isScrolling' | 'isVisible'>;
 /**
  *
  * @param root0
@@ -19,5 +13,8 @@ type Props = {
  * @param root0.onMouseMove
  * @example
  */
-export declare function ListRow({ children, registerChild, measure, index, style, isVisible, isScrolling, onMouseMove, }: Props): React.JSX.Element;
-export {};
+export declare const ListRow: React.ForwardRefExoticComponent<{
+    children: ReactNode;
+    measure: () => void;
+    onMouseMove: MouseEventHandler<HTMLDivElement>;
+} & Pick<ListRowProps, "index" | "style" | "isScrolling" | "isVisible"> & React.RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-type-ahead",
-	"version": "6.1.1",
+	"version": "6.3.0",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,25 +38,25 @@
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.6.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^28.3.0",
+		"@atlaskit/icon": "^28.4.0",
 		"@atlaskit/insm": "^0.1.0",
 		"@atlaskit/menu": "^8.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.15.0",
 		"@atlaskit/prosemirror-input-rules": "^3.4.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.0.0",
+		"@atlaskit/tmp-editor-statsig": "^13.4.0",
 		"@atlaskit/tokens": "^6.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"lodash": "^4.17.21",
 		"raf-schd": "^4.0.3",
-		"react-virtualized": "^9.8.0",
+		"react-virtualized": "^9.22.6",
 		"uuid": "^3.1.0",
 		"w3c-keyname": "^2.1.8"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.4.0",
+		"@atlaskit/editor-common": "^110.7.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -108,6 +108,9 @@
 		},
 		"platform_editor_ai_rovo_rebrand": {
 			"type": "boolean"
+		},
+		"platform_editor_a11y_remove_input_query_on_click": {
+			"type": "boolean"
 		}
 	}
 }