@atlaskit/editor-core 185.2.7 → 185.2.8

package/dist/esm/ui/ElementBrowser/hooks/use-select-and-focus-on-arrow-navigation.js

@@ -17,6 +17,7 @@ import { useCallback, useEffect, useRef, useReducer } from 'react';
  *      selectedItemIndex,
  *      focusedItemIndex,
  *      focusOnSearch,
+ *      focusOnViewMore,
  *      setFocusedItemIndex,
  *      onKeyDown
  *    } = useSelectAndFocusOnArrowNavigation(list.length - 1, 1);
@@ -56,7 +57,8 @@ var reducer = function reducer(state, action) {
     case ACTIONS.FOCUS_SEARCH:
       return _objectSpread(_objectSpread({}, state), {}, {
         focusedItemIndex: undefined,
-        focusOnSearch: true
+        focusOnSearch: true,
+        focusOnViewMore: false
       });
     case ACTIONS.MOVE:
       return moveReducer(state, action);
@@ -64,55 +66,123 @@ var reducer = function reducer(state, action) {
   return state;
 };
 var moveReducer = function moveReducer(state, action) {
-  var newIndex = state.selectedItemIndex + action.payload.positions;
-
-  // The step payload is only sent for up arrow.
-  // When user presses up arrow on first row, focus on search bar.
-  if (action.payload.step && state.selectedItemIndex < action.payload.step) {
+  var listSize = state.listSize,
+    canFocusViewMore = state.canFocusViewMore;
+  if (state.focusOnSearch) {
+    // up arrow
+    if (action.payload.positions && action.payload.positions <= -1) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        focusOnSearch: false,
+        focusOnViewMore: !!canFocusViewMore,
+        focusedItemIndex: canFocusViewMore ? undefined : listSize,
+        selectedItemIndex: canFocusViewMore ? undefined : listSize
+      });
+    } else {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        focusOnSearch: false,
+        focusOnViewMore: false,
+        focusedItemIndex: 0,
+        selectedItemIndex: 0
+      });
+    }
+  }
+  if (state.focusOnViewMore) {
+    // down arrow
+    if (action.payload.positions === 1) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        focusOnSearch: true,
+        focusOnViewMore: false,
+        focusedItemIndex: undefined,
+        // if search is focused then select first item.
+        selectedItemIndex: 0
+      });
+    } else {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        focusOnSearch: false,
+        focusOnViewMore: false,
+        focusedItemIndex: listSize,
+        selectedItemIndex: listSize
+      });
+    }
+  }
+  var newIndex = state.selectedItemIndex ? state.selectedItemIndex + action.payload.positions : action.payload.positions;
+  var safeIndex = ensureSafeIndex(newIndex, state.listSize);
+  // down arrow key is pressed or right arrow key is pressed.
+  if (state.focusedItemIndex !== undefined && action.payload.positions && action.payload.positions >= 1) {
+    // when multi column element browser is open and we are in last
+    //  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;
+    // 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;
     return _objectSpread(_objectSpread({}, state), {}, {
-      focusOnSearch: true,
-      focusedItemIndex: undefined
+      focusOnSearch: focusOnSearch,
+      focusOnViewMore: focusOnViewMore,
+      selectedItemIndex: selectedItemIndex,
+      focusedItemIndex: isLastItemFocused ? undefined : safeIndex
     });
   }
-  if (newIndex < 0) {
-    return state;
-  }
 
-  // Set focus position to first item when moving forward or backward from searchbar
-  if (state.focusedItemIndex == null || state.focusOnSearch) {
+  // up arrow key is pressed or left arrow key is pressed.
+  if (state.focusedItemIndex !== undefined && action.payload.positions && action.payload.positions <= -1) {
+    // if arrow up key is pressed when focus is in first row,
+    //  or, arrow left key is pressed when first item is focused,
+    //  then newIndex will become less than zero.
+    // In this case, focus search, and, kept previously selected item.
+    var isFirstRowFocused = newIndex < 0;
+    // if focus goes to search then kept last selected item in first row.
+    var _selectedItemIndex = isFirstRowFocused ? state.selectedItemIndex : safeIndex;
     return _objectSpread(_objectSpread({}, state), {}, {
-      focusOnSearch: false,
-      focusedItemIndex: 0,
-      selectedItemIndex: 0
+      // focus search if first item is focused on up or left arrow key
+      focusOnSearch: isFirstRowFocused,
+      focusOnViewMore: false,
+      focusedItemIndex: isFirstRowFocused ? undefined : safeIndex,
+      selectedItemIndex: _selectedItemIndex
     });
   }
-  var safeIndex = ensureSafeIndex(newIndex, state.listSize);
   return _objectSpread(_objectSpread({}, state), {}, {
-    focusedItemIndex: safeIndex,
-    selectedItemIndex: safeIndex
+    focusOnSearch: false,
+    focusOnViewMore: false,
+    selectedItemIndex: safeIndex,
+    focusedItemIndex: safeIndex
   });
 };
 var initialState = {
   focusOnSearch: true,
+  focusOnViewMore: false,
   selectedItemIndex: 0,
   focusedItemIndex: undefined,
   listSize: 0
 };
-var getInitialState = function getInitialState(listSize) {
+var getInitialState = function getInitialState(listSize, canFocusViewMore) {
   return function (initialState) {
     return _objectSpread(_objectSpread({}, initialState), {}, {
-      listSize: listSize
+      listSize: listSize,
+      canFocusViewMore: canFocusViewMore
     });
   };
 };
-function useSelectAndFocusOnArrowNavigation(listSize, step) {
-  var _useReducer = useReducer(reducer, initialState, getInitialState(listSize)),
+function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore) {
+  var _useReducer = useReducer(reducer, initialState, getInitialState(listSize, canFocusViewMore)),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],
     dispatch = _useReducer2[1];
+  useEffect(function () {
+    dispatch({
+      type: ACTIONS.UPDATE_STATE,
+      payload: {
+        canFocusViewMore: canFocusViewMore
+      }
+    });
+  }, [canFocusViewMore]);
   var selectedItemIndex = state.selectedItemIndex,
     focusedItemIndex = state.focusedItemIndex,
-    focusOnSearch = state.focusOnSearch;
+    focusOnSearch = state.focusOnSearch,
+    focusOnViewMore = state.focusOnViewMore;
   var reset = useCallback(function (listSize) {
     var payload = _objectSpread(_objectSpread({}, initialState), {}, {
       listSize: listSize
@@ -126,7 +196,8 @@ function useSelectAndFocusOnArrowNavigation(listSize, step) {
     var payload = {
       focusedItemIndex: index,
       selectedItemIndex: index,
-      focusOnSearch: false
+      focusOnSearch: false,
+      focusOnViewMore: false
     };
     dispatch({
       type: ACTIONS.UPDATE_STATE,
@@ -162,7 +233,7 @@ function useSelectAndFocusOnArrowNavigation(listSize, step) {
   var onKeyDown = useCallback(function (e) {
     var avoidKeysWhileSearching = ['/',
     // While already focused on search bar, let users type in.
-    'ArrowRight', 'ArrowLeft', 'ArrowUp'];
+    'ArrowRight', 'ArrowLeft'];
     if (focusOnSearch && avoidKeysWhileSearching.includes(e.key)) {
       return;
     }
@@ -189,6 +260,7 @@ function useSelectAndFocusOnArrowNavigation(listSize, step) {
     selectedItemIndex: selectedItemIndex,
     onKeyDown: onKeyDown,
     focusOnSearch: focusOnSearch,
+    focusOnViewMore: focusOnViewMore,
     setFocusOnSearch: setFocusOnSearch,
     focusedItemIndex: focusedItemIndex,
     setFocusedItemIndex: removeFocusFromSearchAndSetOnItem

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "185.2.7";
+export var version = "185.2.8";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "185.2.7",
+	"version": "185.2.8",
 	"sideEffects": false
 }

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

@@ -12,6 +12,7 @@ export interface Props {
     showCategories: boolean;
     defaultCategory?: string;
     emptyStateHandler?: EmptyStateHandler;
+    viewMoreItem?: QuickInsertItem;
 }
 export interface State {
     items: QuickInsertItem[];

package/dist/types/ui/ElementBrowser/ViewMore.d.ts

@@ -0,0 +1,6 @@
+import { jsx } from '@emotion/react';
+import { QuickInsertItem } from '@atlaskit/editor-common/provider-factory';
+export declare const ViewMore: ({ item, focus, }: {
+    item: QuickInsertItem;
+    focus: boolean;
+}) => jsx.JSX.Element;

package/dist/types/ui/ElementBrowser/components/StatelessElementBrowser.d.ts

@@ -17,6 +17,7 @@ export type StatelessElementBrowserProps = {
     mode: keyof typeof Modes;
     searchTerm?: string;
     emptyStateHandler?: EmptyStateHandler;
+    viewMoreItem?: QuickInsertItem;
 } & WithAnalyticsEventsProps;
-declare const MemoizedElementBrowser: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<Omit<StatelessElementBrowserProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "key" | "mode" | "analyticsContext" | "items" | "emptyStateHandler" | "selectedCategory" | "searchTerm" | "onInsertItem" | "categories" | "onSelectCategory" | "onSearch" | "onSelectItem" | "showCategories" | "showSearch"> & React.RefAttributes<any>>>;
+declare const MemoizedElementBrowser: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<Omit<StatelessElementBrowserProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "key" | "mode" | "analyticsContext" | "items" | "emptyStateHandler" | "selectedCategory" | "searchTerm" | "onInsertItem" | "categories" | "onSelectCategory" | "onSearch" | "onSelectItem" | "viewMoreItem" | "showCategories" | "showSearch"> & React.RefAttributes<any>>>;
 export default MemoizedElementBrowser;

package/dist/types/ui/ElementBrowser/hooks/use-select-and-focus-on-arrow-navigation.d.ts

@@ -12,6 +12,7 @@ import React from 'react';
  *      selectedItemIndex,
  *      focusedItemIndex,
  *      focusOnSearch,
+ *      focusOnViewMore,
  *      setFocusedItemIndex,
  *      onKeyDown
  *    } = useSelectAndFocusOnArrowNavigation(list.length - 1, 1);
@@ -39,9 +40,11 @@ import React from 'react';
  */
 type ReducerState = {
     focusOnSearch: boolean;
-    selectedItemIndex: number;
+    focusOnViewMore: boolean;
+    selectedItemIndex?: number;
     focusedItemIndex?: number;
     listSize: number;
+    canFocusViewMore?: boolean;
 };
 export declare enum ACTIONS {
     FOCUS_SEARCH = "focusOnSearch",
@@ -56,13 +59,14 @@ export type ReducerAction = {
     };
 };
 export type useSelectAndFocusReturnType = {
-    selectedItemIndex: number;
+    selectedItemIndex?: number;
     onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
     focusOnSearch: boolean;
+    focusOnViewMore: boolean;
     focusedItemIndex?: number;
     setFocusedItemIndex: (index?: number) => void;
     setFocusOnSearch: () => void;
 };
-declare function useSelectAndFocusOnArrowNavigation(listSize: number, step: number): useSelectAndFocusReturnType;
+declare function useSelectAndFocusOnArrowNavigation(listSize: number, step: number, canFocusViewMore: boolean): useSelectAndFocusReturnType;
 export declare const ensureSafeIndex: (index: number, listSize: number) => number;
 export default useSelectAndFocusOnArrowNavigation;

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

@@ -12,7 +12,7 @@ export declare enum Modes {
     inline = "inline"
 }
 export type SelectedItemProps = {
-    selectedItemIndex: number;
+    selectedItemIndex?: number;
     focusedItemIndex?: number;
 };
 export interface InsertMenuProps {

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

@@ -12,6 +12,7 @@ export interface Props {
     showCategories: boolean;
     defaultCategory?: string;
     emptyStateHandler?: EmptyStateHandler;
+    viewMoreItem?: QuickInsertItem;
 }
 export interface State {
     items: QuickInsertItem[];

package/dist/types-ts4.5/ui/ElementBrowser/ViewMore.d.ts

@@ -0,0 +1,6 @@
+import { jsx } from '@emotion/react';
+import { QuickInsertItem } from '@atlaskit/editor-common/provider-factory';
+export declare const ViewMore: ({ item, focus, }: {
+    item: QuickInsertItem;
+    focus: boolean;
+}) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/ElementBrowser/components/StatelessElementBrowser.d.ts

@@ -17,6 +17,7 @@ export type StatelessElementBrowserProps = {
     mode: keyof typeof Modes;
     searchTerm?: string;
     emptyStateHandler?: EmptyStateHandler;
+    viewMoreItem?: QuickInsertItem;
 } & WithAnalyticsEventsProps;
-declare const MemoizedElementBrowser: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<Omit<StatelessElementBrowserProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "key" | "mode" | "analyticsContext" | "items" | "emptyStateHandler" | "selectedCategory" | "searchTerm" | "onInsertItem" | "categories" | "onSelectCategory" | "onSearch" | "onSelectItem" | "showCategories" | "showSearch"> & React.RefAttributes<any>>>;
+declare const MemoizedElementBrowser: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<Omit<StatelessElementBrowserProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "key" | "mode" | "analyticsContext" | "items" | "emptyStateHandler" | "selectedCategory" | "searchTerm" | "onInsertItem" | "categories" | "onSelectCategory" | "onSearch" | "onSelectItem" | "viewMoreItem" | "showCategories" | "showSearch"> & React.RefAttributes<any>>>;
 export default MemoizedElementBrowser;

package/dist/types-ts4.5/ui/ElementBrowser/hooks/use-select-and-focus-on-arrow-navigation.d.ts

@@ -12,6 +12,7 @@ import React from 'react';
  *      selectedItemIndex,
  *      focusedItemIndex,
  *      focusOnSearch,
+ *      focusOnViewMore,
  *      setFocusedItemIndex,
  *      onKeyDown
  *    } = useSelectAndFocusOnArrowNavigation(list.length - 1, 1);
@@ -39,9 +40,11 @@ import React from 'react';
  */
 type ReducerState = {
     focusOnSearch: boolean;
-    selectedItemIndex: number;
+    focusOnViewMore: boolean;
+    selectedItemIndex?: number;
     focusedItemIndex?: number;
     listSize: number;
+    canFocusViewMore?: boolean;
 };
 export declare enum ACTIONS {
     FOCUS_SEARCH = "focusOnSearch",
@@ -56,13 +59,14 @@ export type ReducerAction = {
     };
 };
 export type useSelectAndFocusReturnType = {
-    selectedItemIndex: number;
+    selectedItemIndex?: number;
     onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
     focusOnSearch: boolean;
+    focusOnViewMore: boolean;
     focusedItemIndex?: number;
     setFocusedItemIndex: (index?: number) => void;
     setFocusOnSearch: () => void;
 };
-declare function useSelectAndFocusOnArrowNavigation(listSize: number, step: number): useSelectAndFocusReturnType;
+declare function useSelectAndFocusOnArrowNavigation(listSize: number, step: number, canFocusViewMore: boolean): useSelectAndFocusReturnType;
 export declare const ensureSafeIndex: (index: number, listSize: number) => number;
 export default useSelectAndFocusOnArrowNavigation;

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

@@ -12,7 +12,7 @@ export declare enum Modes {
     inline = "inline"
 }
 export type SelectedItemProps = {
-    selectedItemIndex: number;
+    selectedItemIndex?: number;
     focusedItemIndex?: number;
 };
 export interface InsertMenuProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "185.2.7",
+  "version": "185.2.8",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -181,7 +181,7 @@
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@atlassian/link-picker-plugins": "^22.2.0",
+    "@atlassian/link-picker-plugins": "^22.3.0",
     "@atlassian/search-provider": "2.4.6",
     "@atlassian/ufo": "^0.2.0",
     "@emotion/jest": "^11.8.0",