@atlaskit/editor-plugin-type-ahead 16.1.15 → 17.0.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 17.0.0
+
+### Patch Changes
+
+- [`b15691abab5dc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b15691abab5dc) -
+  Clean up feature gate `platform_editor_quick_insert_placeholder`
+- [`82fd62dcd2841`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/82fd62dcd2841) -
+  Add the experiment-gated registry-native Element Browser treatment for
+  `platform_editor_slash_command`.
+
+  `QuickInsertProvider` values must now provide a `surface` of either `typeahead` or
+  `element-browser`.
+
+  Prepare surface-specific Quick Insert item renderers for the `platform_editor_slash_command`
+  experiment.
+
+  Fix the registry Element Browser opening from View more and localize its accessibility labels.
+
+- Updated dependencies
+
+## 16.1.16
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 16.1.15
 
 ### Patch Changes

package/dist/cjs/ui/InputQuery.js

@@ -14,12 +14,10 @@ var _w3cKeyname = require("w3c-keyname");
 var _browser = require("@atlaskit/editor-common/browser");
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 var _ui = require("@atlaskit/editor-common/ui");
-var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _constants = require("../pm-plugins/constants");
-var _utils2 = require("../pm-plugins/utils");
+var _utils = require("../pm-plugins/utils");
 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
@@ -28,23 +26,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 
-var placeholderStyles = (0, _react2.css)({
-  '&::after': {
-    content: 'attr(data-place-holder)',
-    color: "var(--ds-text-subtlest, #6B6E76)",
-    position: 'relative',
-    padding: "var(--ds-space-025, 2px)",
-    left: "var(--ds-space-negative-050, -4px)",
-    backgroundColor: "var(--ds-background-neutral, #0515240F)",
-    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
-    borderRadius: "var(--ds-radius-small, 3px)"
-  }
-});
-var queryWithoutPlaceholderStyles = (0, _react2.css)({
-  '&::after': {
-    content: "''"
-  }
-});
 var querySpanStyles = (0, _react2.css)({
   outline: 'none',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -117,16 +98,6 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
     query = _useState2[0],
     setQuery = _useState2[1];
   var isEditorControlsEnabled = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
-  var isSearchPlaceholderEnabled = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _fg.fg)('platform_editor_quick_insert_placeholder');
-  var selection = editorView.state.selection;
-  var table = editorView.state.schema.nodes.table;
-  var _useState3 = (0, _react.useState)(isSearchPlaceholderEnabled && triggerQueryPrefix === '/' &&
-    // When triggered in very narrow table column, placeholder becomes ellipsis only
-    // hence we disable it for now and revisit this scenario in ED-27480
-    !(0, _utils.findParentNodeOfType)(table)(selection)),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    showPlaceholder = _useState4[0],
-    setShowPlaceholder = _useState4[1];
   var cleanedInputContent = (0, _react.useCallback)(function () {
     var _ref$current;
     var raw = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.textContent) || '';
@@ -136,15 +107,10 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
     var text = cleanedInputContent();
     onQueryChange(text);
   }, [onQueryChange, cleanedInputContent]);
-  var onInput = (0, _react.useCallback)(function () {
-    if (cleanedInputContent()) {
-      setShowPlaceholder(false);
-    }
-  }, [cleanedInputContent]);
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    isInFocus = _useState6[0],
-    setInFocus = _useState6[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isInFocus = _useState4[0],
+    setInFocus = _useState4[1];
   var checkKeyEvent = (0, _react.useCallback)(function (event) {
     var _ref$current2;
     var key = (0, _w3cKeyname.keyName)(event);
@@ -152,7 +118,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
     var raw = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.textContent) || '';
     var text = cleanedInputContent();
     var stopDefault = false;
-    var _ref3 = (0, _utils2.getPluginState)(editorView.state) || {},
+    var _ref3 = (0, _utils.getPluginState)(editorView.state) || {},
       selectedIndex = _ref3.selectedIndex,
       removePrefixTriggerOnCancel = _ref3.removePrefixTriggerOnCancel;
     setInFocus(true);
@@ -241,7 +207,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
     }
     var browser = (0, _browser.getBrowserInfo)();
     var element = ref.current;
-    var _ref4 = (0, _utils2.getPluginState)(editorView.state) || {},
+    var _ref4 = (0, _utils.getPluginState)(editorView.state) || {},
       removePrefixTriggerOnCancel = _ref4.removePrefixTriggerOnCancel;
     var onFocusIn = function onFocusIn(_event) {
       onQueryFocus();
@@ -277,10 +243,10 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
         event.preventDefault();
 
         // insert the plain text into the type-ahead input field
-        var _selection = window.getSelection();
-        if (_selection && ref.current) {
-          if (_selection.rangeCount > 0) {
-            var range = _selection.getRangeAt(0);
+        var selection = window.getSelection();
+        if (selection && ref.current) {
+          if (selection.rangeCount > 0) {
+            var range = selection.getRangeAt(0);
             range.deleteContents();
             range.insertNode(document.createTextNode(plainText));
             range.collapse(false);
@@ -439,29 +405,14 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
       });
     }
   }, [forceFocus, reopenQuery]);
-  var classNames = (0, _react.useMemo)(function () {
-    var classes = [];
-    if (showPlaceholder) {
-      // to avoid the placeholder wrapped to next line when triggered at the end of the line
-      // see placeholderWrapStyles in editor-core/src/ui/ContentStyles/index.tsx
-      classes.push('placeholder-decoration-wrap');
-      if (selection.$from.depth > 1) {
-        // to hide placeholder overflow as ellipsis
-        // see placeholderWrapStyles in editor-core/src/ui/ContentStyles/index.tsx
-        classes.push('placeholder-decoration-hide-overflow');
-      }
-    }
-    return classes.join(' ');
-  }, [showPlaceholder, selection]);
   var assistiveHintID = _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID + '__assistiveHint';
   var intl = (0, _reactIntl.useIntl)();
   return (0, _react2.jsx)(_react.Fragment, null, triggerQueryPrefix, (0, _react2.jsx)("span", {
-    css: [querySpanStyles, isSearchPlaceholderEnabled && queryWithoutPlaceholderStyles, showPlaceholder && placeholderStyles],
+    css: [querySpanStyles],
     contentEditable: true,
     ref: ref,
     onKeyUp: onKeyUp,
     tabIndex: -1,
-    onInput: isSearchPlaceholderEnabled ? onInput : undefined,
     role: "combobox",
     "aria-activedescendant": activeDescendantId,
     "aria-controls": listId !== null && listId !== void 0 ? listId : _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID,
@@ -469,10 +420,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
     "aria-expanded": resolvedOptionCount !== 0,
     "aria-labelledby": assistiveHintID,
     suppressContentEditableWarning: true,
-    "data-query-prefix": triggerQueryPrefix
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    ,
-    className: classNames,
+    "data-query-prefix": triggerQueryPrefix,
     "data-place-holder": intl.formatMessage(_typeAhead.typeAheadListMessages.quickInsertInputPlaceholderLabel)
   }, query === null ? (0, _react2.jsx)("input", {
     ref: inputRef,

package/dist/cjs/ui/registered-menu/quick-insert/TypeAheadQuickInsertItem.js

@@ -23,6 +23,7 @@ var TypeAheadQuickInsertItem = exports.TypeAheadQuickInsertItem = function TypeA
       isOffline: quickInsertContext.isOffline,
       menuOpenId: quickInsertContext.menuOpenId,
       surfaceContext: quickInsertContext.surfaceContext,
+      surface: 'typeahead',
       item: {
         id: id,
         isSelected: isSelected

package/dist/cjs/ui/registered-menu/quick-insert/TypeAheadQuickInsertProvider.js

@@ -46,6 +46,11 @@ var TypeAheadQuickInsertProvider = exports.TypeAheadQuickInsertProvider = functi
       editorView: editorView,
       isOffline: isOffline,
       menuOpenId: menuOpenId,
+      item: {
+        id: 'typeahead-quick-insert',
+        isSelected: false
+      },
+      surface: 'typeahead',
       select: select,
       surfaceContext: surfaceContext
     };

package/dist/es2019/ui/InputQuery.js

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { Fragment, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useLayoutEffect, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
@@ -11,29 +11,10 @@ import { keyName as keyNameNormalized } from 'w3c-keyname';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
 import { AssistiveText } from '@atlaskit/editor-common/ui';
-import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_ELEMENT_ID, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../pm-plugins/constants';
 import { getPluginState } from '../pm-plugins/utils';
-const placeholderStyles = css({
-  '&::after': {
-    content: 'attr(data-place-holder)',
-    color: "var(--ds-text-subtlest, #6B6E76)",
-    position: 'relative',
-    padding: "var(--ds-space-025, 2px)",
-    left: "var(--ds-space-negative-050, -4px)",
-    backgroundColor: "var(--ds-background-neutral, #0515240F)",
-    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
-    borderRadius: "var(--ds-radius-small, 3px)"
-  }
-});
-const queryWithoutPlaceholderStyles = css({
-  '&::after': {
-    content: `''`
-  }
-});
 const querySpanStyles = css({
   outline: 'none',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -104,15 +85,6 @@ export const InputQuery = /*#__PURE__*/React.memo(({
   const inputRef = useRef(null);
   const [query, setQuery] = useState(null);
   const isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
-  const isSearchPlaceholderEnabled = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder');
-  const selection = editorView.state.selection;
-  const {
-    table
-  } = editorView.state.schema.nodes;
-  const [showPlaceholder, setShowPlaceholder] = useState(isSearchPlaceholderEnabled && triggerQueryPrefix === '/' &&
-  // When triggered in very narrow table column, placeholder becomes ellipsis only
-  // hence we disable it for now and revisit this scenario in ED-27480
-  !findParentNodeOfType(table)(selection));
   const cleanedInputContent = useCallback(() => {
     var _ref$current;
     const raw = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.textContent) || '';
@@ -122,11 +94,6 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     const text = cleanedInputContent();
     onQueryChange(text);
   }, [onQueryChange, cleanedInputContent]);
-  const onInput = useCallback(() => {
-    if (cleanedInputContent()) {
-      setShowPlaceholder(false);
-    }
-  }, [cleanedInputContent]);
   const [isInFocus, setInFocus] = useState(false);
   const checkKeyEvent = useCallback(event => {
     var _ref$current2;
@@ -432,29 +399,14 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       });
     }
   }, [forceFocus, reopenQuery]);
-  const classNames = useMemo(() => {
-    const classes = [];
-    if (showPlaceholder) {
-      // to avoid the placeholder wrapped to next line when triggered at the end of the line
-      // see placeholderWrapStyles in editor-core/src/ui/ContentStyles/index.tsx
-      classes.push('placeholder-decoration-wrap');
-      if (selection.$from.depth > 1) {
-        // to hide placeholder overflow as ellipsis
-        // see placeholderWrapStyles in editor-core/src/ui/ContentStyles/index.tsx
-        classes.push('placeholder-decoration-hide-overflow');
-      }
-    }
-    return classes.join(' ');
-  }, [showPlaceholder, selection]);
   const assistiveHintID = TYPE_AHEAD_DECORATION_ELEMENT_ID + '__assistiveHint';
   const intl = useIntl();
   return jsx(Fragment, null, triggerQueryPrefix, jsx("span", {
-    css: [querySpanStyles, isSearchPlaceholderEnabled && queryWithoutPlaceholderStyles, showPlaceholder && placeholderStyles],
+    css: [querySpanStyles],
     contentEditable: true,
     ref: ref,
     onKeyUp: onKeyUp,
     tabIndex: -1,
-    onInput: isSearchPlaceholderEnabled ? onInput : undefined,
     role: "combobox",
     "aria-activedescendant": activeDescendantId,
     "aria-controls": listId !== null && listId !== void 0 ? listId : TYPE_AHEAD_DECORATION_ELEMENT_ID,
@@ -462,10 +414,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     "aria-expanded": resolvedOptionCount !== 0,
     "aria-labelledby": assistiveHintID,
     suppressContentEditableWarning: true,
-    "data-query-prefix": triggerQueryPrefix
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    ,
-    className: classNames,
+    "data-query-prefix": triggerQueryPrefix,
     "data-place-holder": intl.formatMessage(typeAheadListMessages.quickInsertInputPlaceholderLabel)
   }, query === null ? jsx("input", {
     ref: inputRef,

package/dist/es2019/ui/registered-menu/quick-insert/TypeAheadQuickInsertItem.js

@@ -15,6 +15,7 @@ export const TypeAheadQuickInsertItem = ({
     isOffline: quickInsertContext.isOffline,
     menuOpenId: quickInsertContext.menuOpenId,
     surfaceContext: quickInsertContext.surfaceContext,
+    surface: 'typeahead',
     item: {
       id,
       isSelected

package/dist/es2019/ui/registered-menu/quick-insert/TypeAheadQuickInsertProvider.js

@@ -39,6 +39,11 @@ export const TypeAheadQuickInsertProvider = ({
     editorView,
     isOffline,
     menuOpenId,
+    item: {
+      id: 'typeahead-quick-insert',
+      isSelected: false
+    },
+    surface: 'typeahead',
     select,
     surfaceContext
   }), [editorView, isOffline, menuOpenId, select, surfaceContext]);

package/dist/esm/ui/InputQuery.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { Fragment, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useLayoutEffect, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
@@ -12,29 +12,10 @@ import { keyName as keyNameNormalized } from 'w3c-keyname';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
 import { AssistiveText } from '@atlaskit/editor-common/ui';
-import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_ELEMENT_ID, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../pm-plugins/constants';
 import { getPluginState } from '../pm-plugins/utils';
-var placeholderStyles = css({
-  '&::after': {
-    content: 'attr(data-place-holder)',
-    color: "var(--ds-text-subtlest, #6B6E76)",
-    position: 'relative',
-    padding: "var(--ds-space-025, 2px)",
-    left: "var(--ds-space-negative-050, -4px)",
-    backgroundColor: "var(--ds-background-neutral, #0515240F)",
-    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
-    borderRadius: "var(--ds-radius-small, 3px)"
-  }
-});
-var queryWithoutPlaceholderStyles = css({
-  '&::after': {
-    content: "''"
-  }
-});
 var querySpanStyles = css({
   outline: 'none',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -107,16 +88,6 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     query = _useState2[0],
     setQuery = _useState2[1];
   var isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
-  var isSearchPlaceholderEnabled = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder');
-  var selection = editorView.state.selection;
-  var table = editorView.state.schema.nodes.table;
-  var _useState3 = useState(isSearchPlaceholderEnabled && triggerQueryPrefix === '/' &&
-    // When triggered in very narrow table column, placeholder becomes ellipsis only
-    // hence we disable it for now and revisit this scenario in ED-27480
-    !findParentNodeOfType(table)(selection)),
-    _useState4 = _slicedToArray(_useState3, 2),
-    showPlaceholder = _useState4[0],
-    setShowPlaceholder = _useState4[1];
   var cleanedInputContent = useCallback(function () {
     var _ref$current;
     var raw = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.textContent) || '';
@@ -126,15 +97,10 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     var text = cleanedInputContent();
     onQueryChange(text);
   }, [onQueryChange, cleanedInputContent]);
-  var onInput = useCallback(function () {
-    if (cleanedInputContent()) {
-      setShowPlaceholder(false);
-    }
-  }, [cleanedInputContent]);
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isInFocus = _useState6[0],
-    setInFocus = _useState6[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isInFocus = _useState4[0],
+    setInFocus = _useState4[1];
   var checkKeyEvent = useCallback(function (event) {
     var _ref$current2;
     var key = keyNameNormalized(event);
@@ -267,10 +233,10 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
         event.preventDefault();
 
         // insert the plain text into the type-ahead input field
-        var _selection = window.getSelection();
-        if (_selection && ref.current) {
-          if (_selection.rangeCount > 0) {
-            var range = _selection.getRangeAt(0);
+        var selection = window.getSelection();
+        if (selection && ref.current) {
+          if (selection.rangeCount > 0) {
+            var range = selection.getRangeAt(0);
             range.deleteContents();
             range.insertNode(document.createTextNode(plainText));
             range.collapse(false);
@@ -429,29 +395,14 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
       });
     }
   }, [forceFocus, reopenQuery]);
-  var classNames = useMemo(function () {
-    var classes = [];
-    if (showPlaceholder) {
-      // to avoid the placeholder wrapped to next line when triggered at the end of the line
-      // see placeholderWrapStyles in editor-core/src/ui/ContentStyles/index.tsx
-      classes.push('placeholder-decoration-wrap');
-      if (selection.$from.depth > 1) {
-        // to hide placeholder overflow as ellipsis
-        // see placeholderWrapStyles in editor-core/src/ui/ContentStyles/index.tsx
-        classes.push('placeholder-decoration-hide-overflow');
-      }
-    }
-    return classes.join(' ');
-  }, [showPlaceholder, selection]);
   var assistiveHintID = TYPE_AHEAD_DECORATION_ELEMENT_ID + '__assistiveHint';
   var intl = useIntl();
   return jsx(Fragment, null, triggerQueryPrefix, jsx("span", {
-    css: [querySpanStyles, isSearchPlaceholderEnabled && queryWithoutPlaceholderStyles, showPlaceholder && placeholderStyles],
+    css: [querySpanStyles],
     contentEditable: true,
     ref: ref,
     onKeyUp: onKeyUp,
     tabIndex: -1,
-    onInput: isSearchPlaceholderEnabled ? onInput : undefined,
     role: "combobox",
     "aria-activedescendant": activeDescendantId,
     "aria-controls": listId !== null && listId !== void 0 ? listId : TYPE_AHEAD_DECORATION_ELEMENT_ID,
@@ -459,10 +410,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     "aria-expanded": resolvedOptionCount !== 0,
     "aria-labelledby": assistiveHintID,
     suppressContentEditableWarning: true,
-    "data-query-prefix": triggerQueryPrefix
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    ,
-    className: classNames,
+    "data-query-prefix": triggerQueryPrefix,
     "data-place-holder": intl.formatMessage(typeAheadListMessages.quickInsertInputPlaceholderLabel)
   }, query === null ? jsx("input", {
     ref: inputRef,

package/dist/esm/ui/registered-menu/quick-insert/TypeAheadQuickInsertItem.js

@@ -15,6 +15,7 @@ export var TypeAheadQuickInsertItem = function TypeAheadQuickInsertItem(_ref) {
       isOffline: quickInsertContext.isOffline,
       menuOpenId: quickInsertContext.menuOpenId,
       surfaceContext: quickInsertContext.surfaceContext,
+      surface: 'typeahead',
       item: {
         id: id,
         isSelected: isSelected

package/dist/esm/ui/registered-menu/quick-insert/TypeAheadQuickInsertProvider.js

@@ -38,6 +38,11 @@ export var TypeAheadQuickInsertProvider = function TypeAheadQuickInsertProvider(
       editorView: editorView,
       isOffline: isOffline,
       menuOpenId: menuOpenId,
+      item: {
+        id: 'typeahead-quick-insert',
+        isSelected: false
+      },
+      surface: 'typeahead',
       select: select,
       surfaceContext: surfaceContext
     };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-type-ahead",
-	"version": "16.1.15",
+	"version": "17.0.0",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -21,13 +21,13 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^57.0.0",
+		"@atlaskit/adf-schema": "^57.1.0",
 		"@atlaskit/css": "^1.0.0",
-		"@atlaskit/editor-plugin-analytics": "^15.0.0",
-		"@atlaskit/editor-plugin-connectivity": "^15.0.0",
-		"@atlaskit/editor-plugin-context-panel": "^17.0.0",
-		"@atlaskit/editor-plugin-metrics": "^16.0.0",
-		"@atlaskit/editor-plugin-ui-control-registry": "^9.0.0",
+		"@atlaskit/editor-plugin-analytics": "^16.0.0",
+		"@atlaskit/editor-plugin-connectivity": "^16.0.0",
+		"@atlaskit/editor-plugin-context-panel": "^18.0.0",
+		"@atlaskit/editor-plugin-metrics": "^17.0.0",
+		"@atlaskit/editor-plugin-ui-control-registry": "^10.0.0",
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/editor-shared-styles": "^4.0.0",
 		"@atlaskit/editor-ui-control-model": "^2.8.0",
@@ -41,7 +41,7 @@
 		"@atlaskit/primitives": "^22.4.0",
 		"@atlaskit/prosemirror-history": "^1.2.0",
 		"@atlaskit/prosemirror-input-rules": "^4.0.0",
-		"@atlaskit/tmp-editor-statsig": "^159.0.0",
+		"@atlaskit/tmp-editor-statsig": "^160.0.0",
 		"@atlaskit/tokens": "^16.8.0",
 		"@atlaskit/visually-hidden": "^4.3.0",
 		"@babel/runtime": "^7.0.0",
@@ -53,7 +53,7 @@
 		"w3c-keyname": "^2.1.8"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^119.16.0",
+		"@atlaskit/editor-common": "^120.0.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -90,9 +90,6 @@
 		}
 	},
 	"platform-feature-flags": {
-		"platform_editor_quick_insert_placeholder": {
-			"type": "boolean"
-		},
 		"platform_editor_ease_of_use_metrics": {
 			"type": "boolean"
 		},