@atlaskit/editor-common 96.0.2 → 96.1.1

package/dist/es2019/element-browser/components/ElementList/ElementList.js

@@ -530,7 +530,8 @@ export function ElementItem({
     icon,
     title,
     description,
-    keyshortcut
+    keyshortcut,
+    isDisabled
   } = item;
   return jsx(Tooltip, {
     content: description,
@@ -545,7 +546,8 @@ export function ElementItem({
     "aria-describedby": title,
     ref: ref,
     testId: `element-item-${index}`,
-    id: `searched-item-${index}`
+    id: `searched-item-${index}`,
+    isDisabled: isDisabled
   }, jsx(ItemContent
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
   , {
@@ -553,7 +555,8 @@ export function ElementItem({
     tabIndex: 0,
     title: title,
     description: description,
-    keyshortcut: keyshortcut
+    keyshortcut: keyshortcut,
+    isDisabled: isDisabled
   })));
 }
 
@@ -571,7 +574,8 @@ const ElementBefore = /*#__PURE__*/memo(({
 const ItemContent = /*#__PURE__*/memo(({
   title,
   description,
-  keyshortcut
+  keyshortcut,
+  isDisabled
 }) => {
   if (fg('platform_editor_typography_ugc')) {
     return (
@@ -586,13 +590,14 @@ const ItemContent = /*#__PURE__*/memo(({
       }, jsx("div", {
         css: itemTitleWrapper
       }, jsx(Text, {
+        color: isDisabled ? 'color.text.disabled' : undefined,
         maxLines: 1
       }, title), jsx("div", {
         css: itemAfter
       }, keyshortcut && jsx("div", {
         css: shortcutStyle
       }, keyshortcut))), description && jsx(Text, {
-        color: "color.text.subtle",
+        color: isDisabled ? 'color.text.disabled' : 'color.text.subtle',
         size: "small",
         maxLines: 2
       }, description))))
@@ -608,13 +613,15 @@ const ItemContent = /*#__PURE__*/memo(({
       }, jsx("div", {
         css: itemTitleWrapper
       }, jsx("p", {
-        css: itemTitle
+        css: isDisabled ? itemTitleDisabled : itemTitle
       }, title), jsx("div", {
         css: itemAfter
       }, keyshortcut && jsx("div", {
         css: shortcutStyle
-      }, keyshortcut))), description && jsx("p", {
-        css: itemDescription
+      }, keyshortcut))), description &&
+      // eslint-disable-next-line @atlaskit/design-system/use-primitives-text
+      jsx("p", {
+        css: isDisabled ? itemDescriptionDisabled : itemDescription
       }, description)))
     );
   }
@@ -694,6 +701,15 @@ const itemDescription = css(multilineStyle, {
   color: "var(--ds-text-subtle, #44546F)",
   marginTop: "var(--ds-space-025, 2px)"
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+const itemDescriptionDisabled = css(multilineStyle, {
+  overflow: 'hidden',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  fontSize: relativeFontSizeToBase16(11.67),
+  color: "var(--ds-text-disabled, #091E424F)",
+  marginTop: "var(--ds-space-025, 2px)"
+});
 const itemText = css({
   width: 'inherit',
   whiteSpace: 'initial'
@@ -708,6 +724,13 @@ const itemTitle = css({
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis'
 });
+const itemTitleDisabled = css({
+  width: '100%',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  color: "var(--ds-text-disabled, #091E424F)"
+});
 const itemAfter = css({
   flex: '0 0 auto',
   paddingTop: "var(--ds-space-025, 2px)",

package/dist/es2019/element-browser/components/StatelessElementBrowser.js

@@ -145,6 +145,10 @@ function StatelessElementBrowser(props) {
     // After user pick some category the category should stay focused.
     isFocusSearch = !categoryBeenChosen.current || !isEmptySearchTerm;
   }
+  const itemIsDisabled = useCallback(index => {
+    var _items$index$isDisabl, _items$index;
+    return (_items$index$isDisabl = (_items$index = items[index]) === null || _items$index === void 0 ? void 0 : _items$index.isDisabled) !== null && _items$index$isDisabl !== void 0 ? _items$index$isDisabl : false;
+  }, [items]);
   const {
     selectedItemIndex,
     focusedItemIndex,
@@ -155,7 +159,7 @@ function StatelessElementBrowser(props) {
     focusOnViewMore,
     onKeyDown,
     setFocusOnSearch
-  } = useSelectAndFocusOnArrowNavigation(items.length - 1, columnCount, !!viewMoreItem, isFocusSearch);
+  } = useSelectAndFocusOnArrowNavigation(items.length - 1, columnCount, !!viewMoreItem, itemIsDisabled, isFocusSearch);
   useEffect(() => {
     fireAnalyticsEvent(props.createAnalyticsEvent)({
       payload: {
@@ -186,6 +190,7 @@ function StatelessElementBrowser(props) {
    */
   const selectedItem = selectedItemIndex !== undefined ? items[selectedItemIndex] : null;
   const onItemsEnterTabKeyPress = useCallback(e => {
+    var _selectedItem$isDisab;
     if (e.key !== 'Enter' && (e.key !== 'Tab' || !showCategories)) {
       return;
     }
@@ -195,7 +200,7 @@ function StatelessElementBrowser(props) {
       e.preventDefault();
       return;
     }
-    if (onInsertItem && selectedItem != null) {
+    if (onInsertItem && selectedItem != null && !((_selectedItem$isDisab = selectedItem.isDisabled) !== null && _selectedItem$isDisab !== void 0 ? _selectedItem$isDisab : false)) {
       onInsertItem(selectedItem);
     }
     e.preventDefault();

package/dist/es2019/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useReducer, useRef } from 'react';
-
+import { fg } from '@atlaskit/platform-feature-flags';
 /**
  * a custom hook that handles keyboard navigation for Arrow keys based on a
  * given listSize, and a step (for up and down arrows).
@@ -81,13 +81,29 @@ const moveReducer = (state, action) => {
         selectedItemIndex: canFocusViewMore ? undefined : listSize
       };
     } else {
-      return {
-        ...state,
-        focusOnSearch: false,
-        focusOnViewMore: false,
-        focusedItemIndex: 0,
-        selectedItemIndex: 0
-      };
+      if (fg('platform_editor_is_disabled_state_element_browser')) {
+        var _action$payload$step;
+        const newIndex = action.payload.positions ? action.payload.positions - ((_action$payload$step = action.payload.step) !== null && _action$payload$step !== void 0 ? _action$payload$step : 1) : 0;
+        const safeIndex = ensureSafeIndex(newIndex, state.listSize);
+        const isLastItemFocused = newIndex > listSize;
+        const focusOnSearch = isLastItemFocused && !canFocusViewMore;
+        const focusOnViewMore = isLastItemFocused && !!canFocusViewMore;
+        return {
+          ...state,
+          focusOnSearch: focusOnSearch,
+          focusOnViewMore: focusOnViewMore,
+          focusedItemIndex: safeIndex,
+          selectedItemIndex: safeIndex
+        };
+      } else {
+        return {
+          ...state,
+          focusOnSearch: false,
+          focusOnViewMore: false,
+          focusedItemIndex: 0,
+          selectedItemIndex: 0
+        };
+      }
     }
   }
   if (state.focusOnViewMore) {
@@ -172,7 +188,40 @@ const getInitialState = (listSize, canFocusViewMore) => initialState => ({
   listSize,
   canFocusViewMore
 });
-function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, isFocusSearch) {
+
+// Get the offset forwards - skip items that are disabled
+const skipForwardOffsetToSafeItem = (currentIndex, listSize, stepSize, itemIsDisabled) => {
+  if (currentIndex === undefined) {
+    return undefined;
+  }
+  // Iterate through the list starting from the next item
+  for (let offset = 1; currentIndex + offset * stepSize <= listSize; offset++) {
+    if (!itemIsDisabled(currentIndex + offset * stepSize)) {
+      return offset * stepSize;
+    }
+  }
+
+  // Move to the last place if possible
+  return listSize - currentIndex + 1;
+};
+
+// Get the offset backwards - skip items that are disabled
+const skipBackwardOffsetToSafeItem = (currentIndex, stepSize, itemIsDisabled) => {
+  if (currentIndex === undefined) {
+    return undefined;
+  }
+
+  // Iterate backwards starting from the previous item
+  for (let offset = 1; currentIndex - offset * stepSize >= -1; offset++) {
+    if (!itemIsDisabled(currentIndex - offset * stepSize) || currentIndex - offset * stepSize === -1) {
+      return offset * stepSize;
+    }
+  }
+
+  // Move to search if no available index
+  return currentIndex + 1;
+};
+function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, itemIsDisabled, isFocusSearch) {
   const [state, dispatch] = useReducer(reducer, initialState, getInitialState(listSize, canFocusViewMore));
   useEffect(() => {
     dispatch({
@@ -272,15 +321,49 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, is
         e.stopPropagation();
         return setFocusOnSearch();
       case 'ArrowRight':
-        return move(e, +1);
+        {
+          if (fg('platform_editor_is_disabled_state_element_browser')) {
+            var _skipForwardOffsetToS;
+            const itemIndex = focusOnSearch ? -1 : selectedItemIndex;
+            const nextItem = (_skipForwardOffsetToS = skipForwardOffsetToSafeItem(itemIndex, listSize, 1, itemIsDisabled)) !== null && _skipForwardOffsetToS !== void 0 ? _skipForwardOffsetToS : 1;
+            return move(e, nextItem);
+          } else {
+            return move(e, +1);
+          }
+        }
       case 'ArrowLeft':
-        return move(e, -1);
+        {
+          if (fg('platform_editor_is_disabled_state_element_browser')) {
+            var _skipBackwardOffsetTo;
+            const nextItem = (_skipBackwardOffsetTo = skipBackwardOffsetToSafeItem(selectedItemIndex, 1, itemIsDisabled)) !== null && _skipBackwardOffsetTo !== void 0 ? _skipBackwardOffsetTo : 1;
+            return move(e, -nextItem);
+          } else {
+            return move(e, -1);
+          }
+        }
       case 'ArrowDown':
-        return move(e, +step);
+        {
+          if (fg('platform_editor_is_disabled_state_element_browser')) {
+            var _skipForwardOffsetToS2;
+            const itemIndex = focusOnSearch ? -step : selectedItemIndex;
+            const nextItem = (_skipForwardOffsetToS2 = skipForwardOffsetToSafeItem(itemIndex, listSize, step, itemIsDisabled)) !== null && _skipForwardOffsetToS2 !== void 0 ? _skipForwardOffsetToS2 : step;
+            return move(e, +nextItem, step);
+          } else {
+            return move(e, +step);
+          }
+        }
       case 'ArrowUp':
-        return move(e, -step, step);
+        {
+          if (fg('platform_editor_is_disabled_state_element_browser')) {
+            var _skipBackwardOffsetTo2;
+            const nextItem = (_skipBackwardOffsetTo2 = skipBackwardOffsetToSafeItem(selectedItemIndex, step, itemIsDisabled)) !== null && _skipBackwardOffsetTo2 !== void 0 ? _skipBackwardOffsetTo2 : step;
+            return move(e, Math.min(-nextItem, -step), step);
+          } else {
+            return move(e, -step, step);
+          }
+        }
     }
-  }, [focusOnSearch, setFocusOnSearch, move, step]);
+  }, [focusOnSearch, setFocusOnSearch, move, selectedItemIndex, itemIsDisabled, listSize, step]);
   useEffect(() => {
     // To reset selection when user filters
     reset(listSize);

package/dist/es2019/insert/index.js

@@ -305,6 +305,24 @@ export function contentAllowedInCodeBlock(state) {
   return isAllowedChild;
 }
 
+/**
+ * 	Check if a fragment contains a particular node by iterating through all the nodes in the fragment.
+ *  If the node type is found will stop looking and return true.
+ *  If the node type is not found, it will return false.
+ */
+export function fragmentContainsNodeType(fragment, nodeType) {
+  let doesContainNodeType = false;
+  fragment.descendants(node => {
+    if (node.type === nodeType) {
+      doesContainNodeType = true;
+      // Stop looking
+      return false;
+    }
+    return true;
+  });
+  return doesContainNodeType;
+}
+
 // For platform_editor_element_level_templates experiment only
 // clean up ticket ED-24873
 const insertTemplateFragment = ({

package/dist/es2019/lazy-node-view/index.js

@@ -52,6 +52,7 @@ const resolvedNodesPerEditorView = new WeakMap();
  */
 const debounceToEditorViewMap = new WeakMap();
 const testOnlyIgnoreLazyNodeViewSet = new WeakSet();
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
 /**
  * 🧱 Internal: Editor FE Platform
  *

package/dist/es2019/messages/insert-block.js

@@ -170,6 +170,11 @@ export const toolbarInsertBlockMessages = defineMessages({
     defaultMessage: 'Structure your page using sections',
     description: 'Create a multi column section or layout'
   },
+  columnsDescriptionAdvancedLayout: {
+    id: 'fabric.editor.columns.advanced.layout.description',
+    defaultMessage: 'Insert {numberOfColumns} equal columns',
+    description: 'Create a multi column section or layout'
+  },
   status: {
     id: 'fabric.editor.status',
     defaultMessage: 'Status',

package/dist/es2019/messages/layout.js

@@ -10,19 +10,29 @@ export const toolbarMessages = defineMessages({
     defaultMessage: 'Two columns layout',
     description: 'Layout with two columns of equal width'
   },
+  twoColumnsAdvancedLayout: {
+    id: 'fabric.editor.twoColumns',
+    defaultMessage: '2 Column layout',
+    description: 'Layout with two columns of equal width'
+  },
   threeColumns: {
     id: 'fabric.editor.threeColumns',
     defaultMessage: 'Three columns layout',
     description: 'Layout with three columns of equal width'
   },
+  threeColumnsAdvancedLayout: {
+    id: 'fabric.editor.threeColumns',
+    defaultMessage: '3 Column layout',
+    description: 'Layout with three columns of equal width'
+  },
   fourColumns: {
     id: 'fabric.editor.fourColumns',
-    defaultMessage: 'Four columns layout',
+    defaultMessage: '4 Column layout',
     description: 'Layout with four columns of equal width'
   },
   fiveColumns: {
     id: 'fabric.editor.fiveColumns',
-    defaultMessage: 'Five columns layout',
+    defaultMessage: '5 Column layout',
     description: 'Layout with five columns of equal width'
   },
   rightSidebar: {
@@ -62,7 +72,7 @@ export const toolbarMessages = defineMessages({
   },
   columnOption: {
     id: 'fabric.editor.layout.columnOption',
-    defaultMessage: '{count, plural, one {-column} other {{count}-columns}}',
+    defaultMessage: '{count, plural, one { Column} other {{count} Columns}}',
     description: 'column option text for layout'
   }
 });

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "96.0.2";
+const packageVersion = "96.1.1";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/preset/builder.js

@@ -528,6 +528,7 @@ import { EventDispatcher } from '../event-dispatcher';
  */
 export class EditorPresetBuilder {
   constructor(...more) {
+    // eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
     /**
      * @deprecated Use `apiResolver` instead
      */

package/dist/es2019/preset/core-plugin/index.js

@@ -1,4 +1,4 @@
-import { processRawFragmentValue, processRawValue } from '../../../src/utils/processRawValue';
+import { processRawFragmentValue, processRawValue } from '../../utils/processRawValue';
 import { editorCommandToPMCommand } from '../editor-commands';
 import { scheduleDocumentRequest } from './requestDocument';
 

package/dist/es2019/rank.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
 // @deprecated
 // @private This rank is not stable and should not be trusted. If you need to change this file, please let the Editor lego team know about it
 export const rankEditorPlugins = {
@@ -28,6 +29,7 @@ export const rankEditorPlugins = {
   'unsupportedMark', 'unsupportedNodeAttribute']
 };
 
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
 // @deprecated
 // @private This rank is not stable and should not be trusted. If you need to change this file, please let the Editor lego team know about it
 export function sortByOrder(item) {
@@ -41,6 +43,7 @@ export function sortByOrder(item) {
 // function avoided that whole mess. If someone can think of a better way to implement
 // the above and below into a single function please do so
 
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
 // @deprecated
 // @private This rank is not stable and should not be trusted. If you need to change this file, please let the Editor lego team know about it
 export function sortByOrderWithTypeName(item) {

package/dist/es2019/types/index.js

@@ -10,10 +10,12 @@ export let SortOrder = /*#__PURE__*/function (SortOrder) {
 export { AnnotationUpdateEmitter, AnnotationUpdateEvent } from './annotation/emitter';
 export { ToolbarSize, ToolbarWidths, ToolbarWidthsNext, ToolbarWidthsFullPage, ToolbarWidthsFullPageNext } from './toolbar';
 
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
 /**
  *  @deprecated
  */
 
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
 /**
  * @deprecated
  *

package/dist/es2019/types/toolbar.js

@@ -8,6 +8,7 @@ export let ToolbarSize = /*#__PURE__*/function (ToolbarSize) {
   return ToolbarSize;
 }({});
 
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
 /** @deprecated
  * To be removed as part of ED-25129 in favour of ToolbarWidthsNext along with references
  * to platform_editor_toolbar_responsive_fixes feature gate
@@ -29,6 +30,7 @@ export let ToolbarWidthsNext = /*#__PURE__*/function (ToolbarWidthsNext) {
   return ToolbarWidthsNext;
 }({});
 
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
 /** @deprecated
  * To be removed as part of ED-25129 in favour of ToolbarWidthsFullPageNext along with references
  * to platform_editor_toolbar_responsive_fixes feature gate

package/dist/es2019/ui/DropList/index.js

@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "96.0.2";
+const packageVersion = "96.1.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/es2019/ui-react/with-react-editor-view-outer-listeners.js

@@ -17,7 +17,9 @@ class WithOutsideClick extends PureComponent {
       if (!this.props.isActiveComponent || !this.props.handleClickOutside) {
         return;
       }
-      const domNode = fg('platform_editor_replace_finddomnode_in_common') ? (_this$props$outsideCl = this.props.outsideClickTargetRef.current) === null || _this$props$outsideCl === void 0 ? void 0 : _this$props$outsideCl.deref() : ReactDOM.findDOMNode(this);
+      const domNode = fg('platform_editor_replace_finddomnode_in_common') ? (_this$props$outsideCl = this.props.outsideClickTargetRef.current) === null || _this$props$outsideCl === void 0 ? void 0 : _this$props$outsideCl.deref() :
+      // eslint-disable-next-line react/no-find-dom-node -- Ignored via go/ED-25883
+      ReactDOM.findDOMNode(this);
       if (!domNode || evt.target instanceof Node && !domNode.contains(evt.target)) {
         var _this$props$editorVie;
         this.props.handleClickOutside(evt);

package/dist/es2019/utils/dom.js

@@ -72,6 +72,7 @@ export function closest(node, s) {
   return null;
 }
 
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
 /*
  * @deprecated - Use HTMLElement.protoype.closest instead
  */

package/dist/es2019/utils/index.js

@@ -126,6 +126,7 @@ export { hasMergedCell, calcTableColumnWidths, convertProsemirrorTableNodeToArra
 export { createCompareNodes } from './compareNodes';
 export { compose } from './compose';
 export { isTextInput } from './is-text-input';
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
 /**
  * @deprecated - [ED-23844] moving to own entry point @atlaskit/editor-common/whitespace
  */

package/dist/es2019/utils/performance/measure.js

@@ -1,6 +1,7 @@
 import { isPerformanceAPIAvailable } from './is-performance-api-available';
 const measureMap = new Map();
 
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
 /**
  * @deprecated use 'startMeasure' from '@atlaskit/editor-common/performance-measures'
  */
@@ -12,6 +13,7 @@ export function startMeasure(measureName) {
   measureMap.set(measureName, performance.now());
 }
 
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
 /**
  * @deprecated use 'stopMeasure' from '@atlaskit/editor-common/performance-measures'
  */
@@ -36,6 +38,7 @@ export function stopMeasure(measureName, onMeasureComplete) {
   }
 }
 
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
 /**
  * @deprecated use 'clearMeasure' from '@atlaskit/editor-common/performance-measures'
  */

package/dist/es2019/utils/scroll-gutter.js

@@ -1,4 +1,5 @@
 export const GUTTER_SIZE_IN_PX = 120; // Default gutter size
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
 /**
  * @deprecated - [ED-23844] only used in Editor Core
  */

package/dist/esm/commands/index.js

@@ -159,6 +159,7 @@ export function findCutBefore($pos) {
   return null;
 }
 
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
 /**
  * @deprecated
  *

package/dist/esm/element-browser/components/ElementList/ElementList.js

@@ -535,7 +535,8 @@ export function ElementItem(_ref10) {
   var icon = item.icon,
     title = item.title,
     description = item.description,
-    keyshortcut = item.keyshortcut;
+    keyshortcut = item.keyshortcut,
+    isDisabled = item.isDisabled;
   return jsx(Tooltip, {
     content: description,
     testId: "element-item-tooltip-".concat(index)
@@ -549,7 +550,8 @@ export function ElementItem(_ref10) {
     "aria-describedby": title,
     ref: ref,
     testId: "element-item-".concat(index),
-    id: "searched-item-".concat(index)
+    id: "searched-item-".concat(index),
+    isDisabled: isDisabled
   }, jsx(ItemContent
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
   , {
@@ -557,7 +559,8 @@ export function ElementItem(_ref10) {
     tabIndex: 0,
     title: title,
     description: description,
-    keyshortcut: keyshortcut
+    keyshortcut: keyshortcut,
+    isDisabled: isDisabled
   })));
 }
 
@@ -576,7 +579,8 @@ var ElementBefore = /*#__PURE__*/memo(function (_ref11) {
 var ItemContent = /*#__PURE__*/memo(function (_ref12) {
   var title = _ref12.title,
     description = _ref12.description,
-    keyshortcut = _ref12.keyshortcut;
+    keyshortcut = _ref12.keyshortcut,
+    isDisabled = _ref12.isDisabled;
   if (fg('platform_editor_typography_ugc')) {
     return (
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -590,13 +594,14 @@ var ItemContent = /*#__PURE__*/memo(function (_ref12) {
       }, jsx("div", {
         css: itemTitleWrapper
       }, jsx(Text, {
+        color: isDisabled ? 'color.text.disabled' : undefined,
         maxLines: 1
       }, title), jsx("div", {
         css: itemAfter
       }, keyshortcut && jsx("div", {
         css: shortcutStyle
       }, keyshortcut))), description && jsx(Text, {
-        color: "color.text.subtle",
+        color: isDisabled ? 'color.text.disabled' : 'color.text.subtle',
         size: "small",
         maxLines: 2
       }, description))))
@@ -612,13 +617,15 @@ var ItemContent = /*#__PURE__*/memo(function (_ref12) {
       }, jsx("div", {
         css: itemTitleWrapper
       }, jsx("p", {
-        css: itemTitle
+        css: isDisabled ? itemTitleDisabled : itemTitle
       }, title), jsx("div", {
         css: itemAfter
       }, keyshortcut && jsx("div", {
         css: shortcutStyle
-      }, keyshortcut))), description && jsx("p", {
-        css: itemDescription
+      }, keyshortcut))), description &&
+      // eslint-disable-next-line @atlaskit/design-system/use-primitives-text
+      jsx("p", {
+        css: isDisabled ? itemDescriptionDisabled : itemDescription
       }, description)))
     );
   }
@@ -698,6 +705,15 @@ var itemDescription = css(multilineStyle, {
   color: "var(--ds-text-subtle, #44546F)",
   marginTop: "var(--ds-space-025, 2px)"
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+var itemDescriptionDisabled = css(multilineStyle, {
+  overflow: 'hidden',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  fontSize: relativeFontSizeToBase16(11.67),
+  color: "var(--ds-text-disabled, #091E424F)",
+  marginTop: "var(--ds-space-025, 2px)"
+});
 var itemText = css({
   width: 'inherit',
   whiteSpace: 'initial'
@@ -712,6 +728,13 @@ var itemTitle = css({
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis'
 });
+var itemTitleDisabled = css({
+  width: '100%',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  color: "var(--ds-text-disabled, #091E424F)"
+});
 var itemAfter = css({
   flex: '0 0 auto',
   paddingTop: "var(--ds-space-025, 2px)",

package/dist/esm/element-browser/components/StatelessElementBrowser.js

@@ -146,7 +146,11 @@ function StatelessElementBrowser(props) {
     // After user pick some category the category should stay focused.
     isFocusSearch = !categoryBeenChosen.current || !isEmptySearchTerm;
   }
-  var _useSelectAndFocusOnA = useSelectAndFocusOnArrowNavigation(items.length - 1, columnCount, !!viewMoreItem, isFocusSearch),
+  var itemIsDisabled = useCallback(function (index) {
+    var _items$index$isDisabl, _items$index;
+    return (_items$index$isDisabl = (_items$index = items[index]) === null || _items$index === void 0 ? void 0 : _items$index.isDisabled) !== null && _items$index$isDisabl !== void 0 ? _items$index$isDisabl : false;
+  }, [items]);
+  var _useSelectAndFocusOnA = useSelectAndFocusOnArrowNavigation(items.length - 1, columnCount, !!viewMoreItem, itemIsDisabled, isFocusSearch),
     selectedItemIndex = _useSelectAndFocusOnA.selectedItemIndex,
     focusedItemIndex = _useSelectAndFocusOnA.focusedItemIndex,
     setFocusedItemIndex = _useSelectAndFocusOnA.setFocusedItemIndex,
@@ -186,6 +190,7 @@ function StatelessElementBrowser(props) {
    */
   var selectedItem = selectedItemIndex !== undefined ? items[selectedItemIndex] : null;
   var onItemsEnterTabKeyPress = useCallback(function (e) {
+    var _selectedItem$isDisab;
     if (e.key !== 'Enter' && (e.key !== 'Tab' || !showCategories)) {
       return;
     }
@@ -195,7 +200,7 @@ function StatelessElementBrowser(props) {
       e.preventDefault();
       return;
     }
-    if (onInsertItem && selectedItem != null) {
+    if (onInsertItem && selectedItem != null && !((_selectedItem$isDisab = selectedItem.isDisabled) !== null && _selectedItem$isDisab !== void 0 ? _selectedItem$isDisab : false)) {
       onInsertItem(selectedItem);
     }
     e.preventDefault();