@atlaskit/editor-plugin-type-ahead 1.4.4 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 1.5.0
+
+### Minor Changes
+
+- [#122895](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/122895)
+  [`a2c733eaa3214`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a2c733eaa3214) -
+  [ED-24348] Change icon size for quick insert tyeahead to 32x32 when
+  platform_editor_more_elements_in_quick_insert_view is on
+- [#122895](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/122895)
+  [`49b8c7658f3b5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/49b8c7658f3b5) -
+  [ED-24173] bump @atlaskit/adf-schema to 40.3.0 and @atlassian/adf-schema-json to 1.18.0
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.4.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.4.4
 
 ### Patch Changes

package/dist/cjs/ui/AssistiveText.js

@@ -16,7 +16,10 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var statusDebounceMillis = 1400;
 var assitiveTextStyles = (0, _react2.css)({
   border: 0,

package/dist/cjs/ui/InputQuery.js

@@ -19,7 +19,10 @@ var _utils2 = require("../utils");
 var _AssistiveText = require("./AssistiveText");
 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 && Object.prototype.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; }
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/ui/TypeAheadList.js

@@ -21,7 +21,10 @@ var _AssistiveText = require("./AssistiveText");
 var _TypeAheadListItem = require("./TypeAheadListItem");
 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 && Object.prototype.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; }
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
@@ -49,7 +52,8 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     intl = _ref2.intl,
     fitHeight = _ref2.fitHeight,
     decorationElement = _ref2.decorationElement,
-    triggerHandler = _ref2.triggerHandler;
+    triggerHandler = _ref2.triggerHandler,
+    moreElementsInQuickInsertViewEnabled = _ref2.moreElementsInQuickInsertViewEnabled;
   var listRef = (0, _react.useRef)();
   var listContainerRef = (0, _react.useRef)(null);
   var lastVisibleIndexes = (0, _react.useRef)({
@@ -252,7 +256,8 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
       itemIndex: index,
       selectedIndex: selectedIndex,
       onItemClick: actions.onItemClick,
-      ariaLabel: (0, _utils.getTypeAheadListAriaLabels)(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel
+      ariaLabel: (0, _utils.getTypeAheadListAriaLabels)(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel,
+      moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled
     }))));
   };
   var popupAriaLabel = (0, _utils.getTypeAheadListAriaLabels)(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl).popupAriaLabel;

package/dist/cjs/ui/TypeAheadListItem.js

@@ -18,7 +18,10 @@ var _menu = require("@atlaskit/menu");
 var _colors = require("@atlaskit/theme/colors");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5; // Disabling for ED-21403 fixing accessibility issue.
 /* eslint-disable jsx-a11y/role-supports-aria-props */
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 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 && Object.prototype.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; }
@@ -39,6 +42,23 @@ var itemIcon = exports.itemIcon = (0, _react2.css)({
     height: "var(--ds-space-500, 40px)"
   }
 });
+var itemIconSize = (0, _react2.css)({
+  width: "var(--ds-space-400, 32px)",
+  height: "var(--ds-space-400, 32px)",
+  // Icon svgs may contain nested svg, which are likely smaller than 32px
+  // Hence only change the parent svg
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  'svg:first-of-type': {
+    width: "var(--ds-space-400, 32px)",
+    height: "var(--ds-space-400, 32px)"
+  },
+  // AI icons may contain div as container of the icon
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  div: {
+    width: "var(--ds-space-400, 32px)",
+    height: "var(--ds-space-400, 32px)"
+  }
+});
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 var itemBody = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\tflex-direction: row;\n\tflex-wrap: nowrap;\n\tjustify-content: space-between;\n"])));
@@ -122,7 +142,8 @@ var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.
     selectedIndex = _ref2.selectedIndex,
     onItemClick = _ref2.onItemClick,
     itemIndex = _ref2.itemIndex,
-    ariaLabel = _ref2.ariaLabel;
+    ariaLabel = _ref2.ariaLabel,
+    moreElementsInQuickInsertViewEnabled = _ref2.moreElementsInQuickInsertViewEnabled;
   /**
    * To select and highlight the first Item when no item is selected
    * However selectedIndex remains -1, So that user does not skip the first item when down arrow key is used from typeahead query(inputQuery.tsx)
@@ -138,11 +159,11 @@ var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.
     customRenderItem = item.render;
   var elementIcon = (0, _react.useMemo)(function () {
     return (0, _react2.jsx)("div", {
-      css: itemIcon
+      css: [itemIcon, moreElementsInQuickInsertViewEnabled && itemIconSize]
     }, icon ? icon() : (0, _react2.jsx)(FallbackIcon, {
       label: title
     }));
-  }, [icon, title]);
+  }, [icon, title, moreElementsInQuickInsertViewEnabled]);
   var insertSelectedItem = (0, _react.useCallback)(function () {
     onItemClick(_typeAhead.SelectItemMode.SELECTED, itemIndex);
   }, [onItemClick, itemIndex]);

package/dist/cjs/ui/TypeAheadPopup.js

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
@@ -18,7 +20,10 @@ var _constants = require("../constants");
 var _TypeAheadList = require("./TypeAheadList");
 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 && Object.prototype.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; }
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
@@ -58,6 +63,8 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     cancel = props.cancel,
     api = props.api;
   var ref = (0, _react.useRef)(null);
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['featureFlags']),
+    featureFlagsState = _useSharedPluginState.featureFlagsState;
   var startTime = (0, _react.useMemo)(function () {
     return performance.now();
   },
@@ -234,7 +241,8 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     fitHeight: fitHeight,
     editorView: editorView,
     decorationElement: anchorElement,
-    triggerHandler: triggerHandler
+    triggerHandler: triggerHandler,
+    moreElementsInQuickInsertViewEnabled: (featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.moreElementsInQuickInsertView) && triggerHandler.id === _typeAhead.TypeAheadAvailableNodes.QUICK_INSERT
   })));
 });
 TypeAheadPopup.displayName = 'TypeAheadPopup';

package/dist/es2019/ui/AssistiveText.js

@@ -1,5 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 import React from 'react';
 

package/dist/es2019/ui/InputQuery.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { Fragment, useCallback, useLayoutEffect, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/es2019/ui/TypeAheadList.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
@@ -38,7 +41,8 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   intl,
   fitHeight,
   decorationElement,
-  triggerHandler
+  triggerHandler,
+  moreElementsInQuickInsertViewEnabled
 }) => {
   var _decorationElement$qu2;
   const listRef = useRef();
@@ -233,7 +237,8 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
       itemIndex: index,
       selectedIndex: selectedIndex,
       onItemClick: actions.onItemClick,
-      ariaLabel: getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel
+      ariaLabel: getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel,
+      moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled
     }))));
   };
   const popupAriaLabel = getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl).popupAriaLabel;

package/dist/es2019/ui/TypeAheadListItem.js

@@ -1,6 +1,9 @@
 // Disabling for ED-21403 fixing accessibility issue.
 /* eslint-disable jsx-a11y/role-supports-aria-props */
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { useCallback, useLayoutEffect, useMemo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -29,6 +32,23 @@ export const itemIcon = css({
     height: "var(--ds-space-500, 40px)"
   }
 });
+const itemIconSize = css({
+  width: "var(--ds-space-400, 32px)",
+  height: "var(--ds-space-400, 32px)",
+  // Icon svgs may contain nested svg, which are likely smaller than 32px
+  // Hence only change the parent svg
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  'svg:first-of-type': {
+    width: "var(--ds-space-400, 32px)",
+    height: "var(--ds-space-400, 32px)"
+  },
+  // AI icons may contain div as container of the icon
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  div: {
+    width: "var(--ds-space-400, 32px)",
+    height: "var(--ds-space-400, 32px)"
+  }
+});
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 const itemBody = css`
@@ -143,7 +163,8 @@ export const TypeAheadListItem = /*#__PURE__*/React.memo(({
   selectedIndex,
   onItemClick,
   itemIndex,
-  ariaLabel
+  ariaLabel,
+  moreElementsInQuickInsertViewEnabled
 }) => {
   /**
    * To select and highlight the first Item when no item is selected
@@ -162,11 +183,11 @@ export const TypeAheadListItem = /*#__PURE__*/React.memo(({
   } = item;
   const elementIcon = useMemo(() => {
     return jsx("div", {
-      css: itemIcon
+      css: [itemIcon, moreElementsInQuickInsertViewEnabled && itemIconSize]
     }, icon ? icon() : jsx(FallbackIcon, {
       label: title
     }));
-  }, [icon, title]);
+  }, [icon, title, moreElementsInQuickInsertViewEnabled]);
   const insertSelectedItem = useCallback(() => {
     onItemClick(SelectItemMode.SELECTED, itemIndex);
   }, [onItemClick, itemIndex]);

package/dist/es2019/ui/TypeAheadPopup.js

@@ -1,10 +1,15 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
 import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
@@ -49,6 +54,9 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     api
   } = props;
   const ref = useRef(null);
+  const {
+    featureFlagsState
+  } = useSharedPluginState(api, ['featureFlags']);
   const startTime = useMemo(() => performance.now(),
   // In case those props changes
   // we need to recreate the startTime
@@ -228,7 +236,8 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     fitHeight: fitHeight,
     editorView: editorView,
     decorationElement: anchorElement,
-    triggerHandler: triggerHandler
+    triggerHandler: triggerHandler,
+    moreElementsInQuickInsertViewEnabled: (featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.moreElementsInQuickInsertView) && triggerHandler.id === TypeAheadAvailableNodes.QUICK_INSERT
   })));
 });
 TypeAheadPopup.displayName = 'TypeAheadPopup';

package/dist/esm/ui/AssistiveText.js

@@ -7,7 +7,10 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 import React from 'react';
 

package/dist/esm/ui/InputQuery.js

@@ -1,5 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { Fragment, useCallback, useLayoutEffect, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/esm/ui/TypeAheadList.js

@@ -1,5 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
@@ -39,7 +42,8 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
     intl = _ref2.intl,
     fitHeight = _ref2.fitHeight,
     decorationElement = _ref2.decorationElement,
-    triggerHandler = _ref2.triggerHandler;
+    triggerHandler = _ref2.triggerHandler,
+    moreElementsInQuickInsertViewEnabled = _ref2.moreElementsInQuickInsertViewEnabled;
   var listRef = useRef();
   var listContainerRef = useRef(null);
   var lastVisibleIndexes = useRef({
@@ -242,7 +246,8 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
       itemIndex: index,
       selectedIndex: selectedIndex,
       onItemClick: actions.onItemClick,
-      ariaLabel: getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel
+      ariaLabel: getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel,
+      moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled
     }))));
   };
   var popupAriaLabel = getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl).popupAriaLabel;

package/dist/esm/ui/TypeAheadListItem.js

@@ -2,7 +2,10 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 // Disabling for ED-21403 fixing accessibility issue.
 /* eslint-disable jsx-a11y/role-supports-aria-props */
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { useCallback, useLayoutEffect, useMemo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -31,6 +34,23 @@ export var itemIcon = css({
     height: "var(--ds-space-500, 40px)"
   }
 });
+var itemIconSize = css({
+  width: "var(--ds-space-400, 32px)",
+  height: "var(--ds-space-400, 32px)",
+  // Icon svgs may contain nested svg, which are likely smaller than 32px
+  // Hence only change the parent svg
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  'svg:first-of-type': {
+    width: "var(--ds-space-400, 32px)",
+    height: "var(--ds-space-400, 32px)"
+  },
+  // AI icons may contain div as container of the icon
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  div: {
+    width: "var(--ds-space-400, 32px)",
+    height: "var(--ds-space-400, 32px)"
+  }
+});
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 var itemBody = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tdisplay: flex;\n\tflex-direction: row;\n\tflex-wrap: nowrap;\n\tjustify-content: space-between;\n"])));
@@ -114,7 +134,8 @@ export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref2) {
     selectedIndex = _ref2.selectedIndex,
     onItemClick = _ref2.onItemClick,
     itemIndex = _ref2.itemIndex,
-    ariaLabel = _ref2.ariaLabel;
+    ariaLabel = _ref2.ariaLabel,
+    moreElementsInQuickInsertViewEnabled = _ref2.moreElementsInQuickInsertViewEnabled;
   /**
    * To select and highlight the first Item when no item is selected
    * However selectedIndex remains -1, So that user does not skip the first item when down arrow key is used from typeahead query(inputQuery.tsx)
@@ -130,11 +151,11 @@ export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref2) {
     customRenderItem = item.render;
   var elementIcon = useMemo(function () {
     return jsx("div", {
-      css: itemIcon
+      css: [itemIcon, moreElementsInQuickInsertViewEnabled && itemIconSize]
     }, icon ? icon() : jsx(FallbackIcon, {
       label: title
     }));
-  }, [icon, title]);
+  }, [icon, title, moreElementsInQuickInsertViewEnabled]);
   var insertSelectedItem = useCallback(function () {
     onItemClick(SelectItemMode.SELECTED, itemIndex);
   }, [onItemClick, itemIndex]);

package/dist/esm/ui/TypeAheadPopup.js

@@ -1,11 +1,16 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
 import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
@@ -47,6 +52,8 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     cancel = props.cancel,
     api = props.api;
   var ref = useRef(null);
+  var _useSharedPluginState = useSharedPluginState(api, ['featureFlags']),
+    featureFlagsState = _useSharedPluginState.featureFlagsState;
   var startTime = useMemo(function () {
     return performance.now();
   },
@@ -223,7 +230,8 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     fitHeight: fitHeight,
     editorView: editorView,
     decorationElement: anchorElement,
-    triggerHandler: triggerHandler
+    triggerHandler: triggerHandler,
+    moreElementsInQuickInsertViewEnabled: (featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.moreElementsInQuickInsertView) && triggerHandler.id === TypeAheadAvailableNodes.QUICK_INSERT
   })));
 });
 TypeAheadPopup.displayName = 'TypeAheadPopup';

package/dist/types/types.d.ts

@@ -2,6 +2,7 @@ import type { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 import type { Command, NextEditorPlugin, OptionalPlugin, TypeAheadForceSelect, TypeAheadHandler, TypeAheadInsert, TypeAheadItem, TypeAheadItemRenderProps, TypeAheadSelectItem, TypeAheadStats, UiComponentFactoryParams } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { EditorState, ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { CloseSelectionOptions } from './constants';
@@ -99,7 +100,7 @@ export interface TypeAheadPluginSharedState {
  */
 export type TypeAheadPlugin = NextEditorPlugin<'typeAhead', {
     pluginConfiguration: TypeAheadPluginOptions | undefined;
-    dependencies: [OptionalPlugin<AnalyticsPlugin>];
+    dependencies: [OptionalPlugin<AnalyticsPlugin>, OptionalPlugin<FeatureFlagsPlugin>];
     sharedState: TypeAheadPluginSharedState;
     actions: {
         isOpen: (editorState: EditorState) => boolean;

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 /// <reference types="lodash" />
 import React from 'react';
 import { jsx } from '@emotion/react';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
@@ -12,6 +15,7 @@ export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlP
     fitHeight: number;
     decorationElement: HTMLElement;
     triggerHandler?: TypeAheadHandler | undefined;
+    moreElementsInQuickInsertViewEnabled?: boolean | undefined;
 } & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<{
         items: Array<TypeAheadItem>;
@@ -21,5 +25,6 @@ export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlP
         fitHeight: number;
         decorationElement: HTMLElement;
         triggerHandler?: TypeAheadHandler | undefined;
+        moreElementsInQuickInsertViewEnabled?: boolean | undefined;
     } & WrappedComponentProps>;
 };

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
@@ -11,6 +14,7 @@ type TypeAheadListItemProps = {
     selectedIndex: number;
     ariaLabel?: string;
     onItemClick: (mode: SelectItemMode, index: number) => void;
+    moreElementsInQuickInsertViewEnabled?: boolean;
 };
-export declare const TypeAheadListItem: React.MemoExoticComponent<({ item, itemsLength, selectedIndex, onItemClick, itemIndex, ariaLabel, }: TypeAheadListItemProps) => jsx.JSX.Element>;
+export declare const TypeAheadListItem: React.MemoExoticComponent<({ item, itemsLength, selectedIndex, onItemClick, itemIndex, ariaLabel, moreElementsInQuickInsertViewEnabled, }: TypeAheadListItemProps) => jsx.JSX.Element>;
 export {};

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import { jsx } from '@emotion/react';
 import type { SelectItemMode } from '@atlaskit/editor-common/type-ahead';

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

@@ -2,6 +2,7 @@ import type { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 import type { Command, NextEditorPlugin, OptionalPlugin, TypeAheadForceSelect, TypeAheadHandler, TypeAheadInsert, TypeAheadItem, TypeAheadItemRenderProps, TypeAheadSelectItem, TypeAheadStats, UiComponentFactoryParams } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { EditorState, ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { CloseSelectionOptions } from './constants';
@@ -100,7 +101,8 @@ export interface TypeAheadPluginSharedState {
 export type TypeAheadPlugin = NextEditorPlugin<'typeAhead', {
     pluginConfiguration: TypeAheadPluginOptions | undefined;
     dependencies: [
-        OptionalPlugin<AnalyticsPlugin>
+        OptionalPlugin<AnalyticsPlugin>,
+        OptionalPlugin<FeatureFlagsPlugin>
     ];
     sharedState: TypeAheadPluginSharedState;
     actions: {

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

@@ -1,5 +1,8 @@
 /// <reference types="lodash" />
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import { jsx } from '@emotion/react';
 import debounce from 'lodash/debounce';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
@@ -12,6 +15,7 @@ export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlP
     fitHeight: number;
     decorationElement: HTMLElement;
     triggerHandler?: TypeAheadHandler | undefined;
+    moreElementsInQuickInsertViewEnabled?: boolean | undefined;
 } & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<{
         items: Array<TypeAheadItem>;
@@ -21,5 +25,6 @@ export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlP
         fitHeight: number;
         decorationElement: HTMLElement;
         triggerHandler?: TypeAheadHandler | undefined;
+        moreElementsInQuickInsertViewEnabled?: boolean | undefined;
     } & WrappedComponentProps>;
 };

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
@@ -11,6 +14,7 @@ type TypeAheadListItemProps = {
     selectedIndex: number;
     ariaLabel?: string;
     onItemClick: (mode: SelectItemMode, index: number) => void;
+    moreElementsInQuickInsertViewEnabled?: boolean;
 };
-export declare const TypeAheadListItem: React.MemoExoticComponent<({ item, itemsLength, selectedIndex, onItemClick, itemIndex, ariaLabel, }: TypeAheadListItemProps) => jsx.JSX.Element>;
+export declare const TypeAheadListItem: React.MemoExoticComponent<({ item, itemsLength, selectedIndex, onItemClick, itemIndex, ariaLabel, moreElementsInQuickInsertViewEnabled, }: TypeAheadListItemProps) => jsx.JSX.Element>;
 export {};

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import { jsx } from '@emotion/react';
 import type { SelectItemMode } from '@atlaskit/editor-common/type-ahead';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-type-ahead",
-	"version": "1.4.4",
+	"version": "1.5.0",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,15 +32,15 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^39.0.3",
-		"@atlaskit/editor-common": "^85.0.0",
-		"@atlaskit/editor-plugin-analytics": "^1.4.0",
+		"@atlaskit/adf-schema": "^40.3.0",
+		"@atlaskit/editor-common": "^86.7.0",
+		"@atlaskit/editor-plugin-analytics": "^1.5.0",
 		"@atlaskit/editor-prosemirror": "4.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/menu": "^2.8.0",
 		"@atlaskit/prosemirror-input-rules": "^3.1.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.54.0",
+		"@atlaskit/tokens": "^1.56.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"lodash": "^4.17.21",