@atlaskit/editor-common 96.1.0 → 96.2.0

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/extensibility/ExtensionComponent.js

@@ -6,7 +6,7 @@ import memoizeOne from 'memoize-one';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getExtensionModuleNodePrivateProps, getNodeRenderer } from '../extensions';
-import { getExtensionRenderer, nodeToJSON } from '../utils';
+import { getExtensionRenderer, nodeToJSON, toJSON } from '../utils';
 import Extension from './Extension/Extension';
 import InlineExtension from './Extension/InlineExtension';
 import MultiBodiedExtension from './MultiBodiedExtension';
@@ -28,6 +28,13 @@ const isEmptyBodiedMacro = node => {
   const isEmptyWithNoContent = !firstGrandChildNode && node.childCount === 1;
   return isEmptyWithPlacholder || isEmptyWithNoContent;
 };
+const getBodiedExtensionContent = node => {
+  const bodiedExtensionContent = [];
+  node.content.forEach(childNode => {
+    bodiedExtensionContent.push(nodeToJSON(childNode));
+  });
+  return !!bodiedExtensionContent.length ? bodiedExtensionContent : node.attrs.text;
+};
 export class ExtensionComponentOld extends Component {
   constructor(...args) {
     super(...args);
@@ -94,7 +101,8 @@ export class ExtensionComponentOld extends Component {
       var _pmNode$marks, _pmNode$marks$find, _pmNode$marks$find$at;
       const {
         extensionHandlers,
-        editorView
+        editorView,
+        rendererExtensionHandlers
       } = this.props;
       const {
         showBodiedExtensionRendererView
@@ -110,22 +118,23 @@ export class ExtensionComponentOld extends Component {
         return;
       }
       const fragmentLocalId = pmNode === null || pmNode === void 0 ? void 0 : (_pmNode$marks = pmNode.marks) === null || _pmNode$marks === void 0 ? void 0 : (_pmNode$marks$find = _pmNode$marks.find(m => m.type.name === 'fragment')) === null || _pmNode$marks$find === void 0 ? void 0 : (_pmNode$marks$find$at = _pmNode$marks$find.attrs) === null || _pmNode$marks$find$at === void 0 ? void 0 : _pmNode$marks$find$at.localId;
-      const nodeContent = [];
-      if (isBodiedExtension) {
-        var _pmNode$content;
-        pmNode === null || pmNode === void 0 ? void 0 : (_pmNode$content = pmNode.content) === null || _pmNode$content === void 0 ? void 0 : _pmNode$content.forEach(childNode => {
-          nodeContent.push(childNode);
-        });
-      }
+      const content = isBodiedExtension ? getBodiedExtensionContent(pmNode) : text;
       const node = {
         type: pmNode.type.name,
         extensionType,
         extensionKey,
         parameters,
-        content: isBodiedExtension ? nodeContent.length ? nodeContent : text : text,
+        content,
         localId: pmNode.attrs.localId,
         fragmentLocalId
       };
+      if (isBodiedExtension) {
+        const rendererExtensionHandler = rendererExtensionHandlers === null || rendererExtensionHandlers === void 0 ? void 0 : rendererExtensionHandlers[extensionType];
+        if (!rendererExtensionHandler) {
+          return null;
+        }
+        return getExtensionRenderer(rendererExtensionHandler)(node, toJSON(editorView.state.doc));
+      }
       let result;
       if (extensionHandlers && extensionHandlers[extensionType]) {
         const render = getExtensionRenderer(extensionHandlers[extensionType]);
@@ -361,7 +370,8 @@ class ExtensionComponentInner extends Component {
       const {
         extensionHandlers,
         editorView,
-        showBodiedExtensionRendererView
+        showBodiedExtensionRendererView,
+        rendererExtensionHandlers
       } = this.props;
       const {
         extensionType,
@@ -374,22 +384,23 @@ class ExtensionComponentInner extends Component {
         return;
       }
       const fragmentLocalId = pmNode === null || pmNode === void 0 ? void 0 : (_pmNode$marks2 = pmNode.marks) === null || _pmNode$marks2 === void 0 ? void 0 : (_pmNode$marks2$find = _pmNode$marks2.find(m => m.type.name === 'fragment')) === null || _pmNode$marks2$find === void 0 ? void 0 : (_pmNode$marks2$find$a = _pmNode$marks2$find.attrs) === null || _pmNode$marks2$find$a === void 0 ? void 0 : _pmNode$marks2$find$a.localId;
-      const nodeContent = [];
-      if (isBodiedExtension) {
-        var _pmNode$content2;
-        pmNode === null || pmNode === void 0 ? void 0 : (_pmNode$content2 = pmNode.content) === null || _pmNode$content2 === void 0 ? void 0 : _pmNode$content2.forEach(childNode => {
-          nodeContent.push(childNode);
-        });
-      }
+      const content = isBodiedExtension ? getBodiedExtensionContent(pmNode) : text;
       const node = {
         type: pmNode.type.name,
         extensionType,
         extensionKey,
         parameters,
-        content: isBodiedExtension ? nodeContent.length ? nodeContent : text : text,
+        content,
         localId: pmNode.attrs.localId,
         fragmentLocalId
       };
+      if (isBodiedExtension) {
+        const rendererExtensionHandler = rendererExtensionHandlers === null || rendererExtensionHandlers === void 0 ? void 0 : rendererExtensionHandlers[extensionType];
+        if (!rendererExtensionHandler) {
+          return null;
+        }
+        return getExtensionRenderer(rendererExtensionHandler)(node, toJSON(editorView.state.doc));
+      }
       let result;
       if (extensionHandlers && extensionHandlers[extensionType]) {
         const render = getExtensionRenderer(extensionHandlers[extensionType]);

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/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.1.0";
+const packageVersion = "96.2.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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/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.1.0";
+const packageVersion = "96.2.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

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();

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

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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).
@@ -78,12 +78,27 @@ var moveReducer = function moveReducer(state, action) {
         selectedItemIndex: canFocusViewMore ? undefined : listSize
       });
     } else {
-      return _objectSpread(_objectSpread({}, state), {}, {
-        focusOnSearch: false,
-        focusOnViewMore: false,
-        focusedItemIndex: 0,
-        selectedItemIndex: 0
-      });
+      if (fg('platform_editor_is_disabled_state_element_browser')) {
+        var _action$payload$step;
+        var _newIndex = action.payload.positions ? action.payload.positions - ((_action$payload$step = action.payload.step) !== null && _action$payload$step !== void 0 ? _action$payload$step : 1) : 0;
+        var _safeIndex = ensureSafeIndex(_newIndex, state.listSize);
+        var isLastItemFocused = _newIndex > listSize;
+        var focusOnSearch = isLastItemFocused && !canFocusViewMore;
+        var focusOnViewMore = isLastItemFocused && !!canFocusViewMore;
+        return _objectSpread(_objectSpread({}, state), {}, {
+          focusOnSearch: focusOnSearch,
+          focusOnViewMore: focusOnViewMore,
+          focusedItemIndex: _safeIndex,
+          selectedItemIndex: _safeIndex
+        });
+      } else {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          focusOnSearch: false,
+          focusOnViewMore: false,
+          focusedItemIndex: 0,
+          selectedItemIndex: 0
+        });
+      }
     }
   }
   if (state.focusOnViewMore) {
@@ -113,17 +128,17 @@ var moveReducer = function moveReducer(state, action) {
     //  row then newIndex will be greater than listSize when
     //  down arrow key is pressed.
     // Or when last item is focused and down or right arrow key is pressed.
-    var isLastItemFocused = newIndex > listSize;
-    var focusOnSearch = isLastItemFocused && !canFocusViewMore;
-    var focusOnViewMore = isLastItemFocused && !!canFocusViewMore;
+    var _isLastItemFocused = newIndex > listSize;
+    var _focusOnSearch = _isLastItemFocused && !canFocusViewMore;
+    var _focusOnViewMore = _isLastItemFocused && !!canFocusViewMore;
     // if search is focused, then select first item.
     // otherwise if view more is focused then select item should be undefined.
-    var selectedItemIndex = focusOnSearch ? 0 : focusOnViewMore ? undefined : safeIndex;
+    var selectedItemIndex = _focusOnSearch ? 0 : _focusOnViewMore ? undefined : safeIndex;
     return _objectSpread(_objectSpread({}, state), {}, {
-      focusOnSearch: focusOnSearch,
-      focusOnViewMore: focusOnViewMore,
+      focusOnSearch: _focusOnSearch,
+      focusOnViewMore: _focusOnViewMore,
       selectedItemIndex: selectedItemIndex,
-      focusedItemIndex: isLastItemFocused ? undefined : safeIndex
+      focusedItemIndex: _isLastItemFocused ? undefined : safeIndex
     });
   }
 
@@ -166,7 +181,40 @@ var getInitialState = function getInitialState(listSize, canFocusViewMore) {
     });
   };
 };
-function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, isFocusSearch) {
+
+// Get the offset forwards - skip items that are disabled
+var skipForwardOffsetToSafeItem = function skipForwardOffsetToSafeItem(currentIndex, listSize, stepSize, itemIsDisabled) {
+  if (currentIndex === undefined) {
+    return undefined;
+  }
+  // Iterate through the list starting from the next item
+  for (var 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
+var skipBackwardOffsetToSafeItem = function skipBackwardOffsetToSafeItem(currentIndex, stepSize, itemIsDisabled) {
+  if (currentIndex === undefined) {
+    return undefined;
+  }
+
+  // Iterate backwards starting from the previous item
+  for (var 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) {
   var _useReducer = useReducer(reducer, initialState, getInitialState(listSize, canFocusViewMore)),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],
@@ -266,15 +314,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;
+            var itemIndex = focusOnSearch ? -1 : selectedItemIndex;
+            var 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;
+            var _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;
+            var _itemIndex = focusOnSearch ? -step : selectedItemIndex;
+            var _nextItem2 = (_skipForwardOffsetToS2 = skipForwardOffsetToSafeItem(_itemIndex, listSize, step, itemIsDisabled)) !== null && _skipForwardOffsetToS2 !== void 0 ? _skipForwardOffsetToS2 : step;
+            return move(e, +_nextItem2, step);
+          } else {
+            return move(e, +step);
+          }
+        }
       case 'ArrowUp':
-        return move(e, -step, step);
+        {
+          if (fg('platform_editor_is_disabled_state_element_browser')) {
+            var _skipBackwardOffsetTo2;
+            var _nextItem3 = (_skipBackwardOffsetTo2 = skipBackwardOffsetToSafeItem(selectedItemIndex, step, itemIsDisabled)) !== null && _skipBackwardOffsetTo2 !== void 0 ? _skipBackwardOffsetTo2 : step;
+            return move(e, Math.min(-_nextItem3, -step), step);
+          } else {
+            return move(e, -step, step);
+          }
+        }
     }
-  }, [focusOnSearch, setFocusOnSearch, move, step]);
+  }, [focusOnSearch, setFocusOnSearch, move, selectedItemIndex, itemIsDisabled, listSize, step]);
   useEffect(function () {
     // To reset selection when user filters
     reset(listSize);