@atlaskit/dropdown-menu/dist/es2019/internal/utils/handle-focus.js

A dropdown menu displays a list of actions or options to a user.

import { KEY_DOWN, KEY_END, KEY_HOME, KEY_TAB, KEY_UP } from '@atlaskit/ds-lib/keycodes';
import { fg } from '@atlaskit/platform-feature-flags';
import { PREFIX } from './use-generated-id';
const actionMap = {
  [KEY_DOWN]: 'next',
  [KEY_UP]: 'prev',
  [KEY_HOME]: 'first',
  [KEY_END]: 'last'
};

/**
 * `currentFocusedIdx + 1` will not work if the next focusable element
 * is disabled. So, we need to iterate through the following menu items
 * to find one that isn't disabled. If all following elements are disabled,
 * return undefined.
 */
const getNextFocusableElement = (refs, currentFocusedIdx) => {
  for (let i = 0; i < refs.length - 1; i++) {
    if (currentFocusedIdx + 1 === refs.length) {
      currentFocusedIdx = 0;
    } else {
      currentFocusedIdx++;
    }
    const {
      current: element
    } = refs[currentFocusedIdx];
    const isValid = !!element && !element.hasAttribute('disabled');
    if (isValid) {
      return element;
    }
  }
};

/**
 * `currentFocusedIdx - 1` will not work if the prev focusable element
 * is disabled. So, we need to iterate through the previous menu items
 * to find one that isn't disabled. If all previous elements are disabled,
 * return undefined.
 */
const getPrevFocusableElement = (refs, currentFocusedIdx) => {
  for (let i = 0; i < refs.length - 1; i++) {
    if (currentFocusedIdx === 0) {
      currentFocusedIdx = refs.length - 1;
    } else {
      currentFocusedIdx--;
    }
    const {
      current: element
    } = refs[currentFocusedIdx];
    const isValid = !!element && !element.hasAttribute('disabled');
    if (isValid) {
      return element;
    }
  }
};
export default function handleFocus(refs, isLayerDisabled, onClose) {
  return e => {
    var _refs$current;
    const currentRefs = (_refs$current = refs.current) !== null && _refs$current !== void 0 ? _refs$current : [];
    const currentFocusedIdx = currentRefs.findIndex(({
      current: el
    }) => {
      var _document$activeEleme;
      return el && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.isSameNode(el));
    });
    if (fg('platform_dst_popup-disable-focuslock')) {
      var _document$activeEleme2;
      // if we use a popup as a nested dropdown, we must prevent the dropdown from closing.
      const isNestedDropdown = !!((_document$activeEleme2 = document.activeElement) !== null && _document$activeEleme2 !== void 0 && _document$activeEleme2.closest(`[id^=${PREFIX}]`));
      if (isLayerDisabled() && isNestedDropdown) {
        if (e.key === KEY_TAB && !e.shiftKey) {
          onClose(e);
        }

        // if it is a nested dropdown and the level of the given dropdown is not the current level,
        // we don't need to have focus on it
        return;
      }
    } else {
      if (isLayerDisabled()) {
        if (e.key === KEY_TAB && !e.shiftKey) {
          onClose(e);
        }

        // if it is a nested dropdown and the level of the given dropdown is not the current level,
        // we don't need to have focus on it
        return;
      }
    }
    const action = actionMap[e.key];
    switch (action) {
      case 'next':
        // Always cancelling the event to prevent scrolling
        e.preventDefault();
        const nextFocusableElement = getNextFocusableElement(currentRefs, currentFocusedIdx);
        nextFocusableElement === null || nextFocusableElement === void 0 ? void 0 : nextFocusableElement.focus();
        break;
      case 'prev':
        // Always cancelling the event to prevent scrolling
        e.preventDefault();
        const prevFocusableElement = getPrevFocusableElement(currentRefs, currentFocusedIdx);
        prevFocusableElement === null || prevFocusableElement === void 0 ? void 0 : prevFocusableElement.focus();
        break;
      case 'first':
        e.preventDefault();
        // Search for first non-disabled element if first element is disabled
        const firstFocusableElement = getNextFocusableElement(currentRefs, -1);
        firstFocusableElement === null || firstFocusableElement === void 0 ? void 0 : firstFocusableElement.focus();
        break;
      case 'last':
        e.preventDefault();
        // Search for last non-disabled element if last element is disabled
        const lastFocusableElement = getPrevFocusableElement(currentRefs, currentRefs.length);
        lastFocusableElement === null || lastFocusableElement === void 0 ? void 0 : lastFocusableElement.focus();
        break;
      default:
        return;
    }
  };
}