saagie-ui/src/react/core/organisms/dropdown/DropdownSubmenuList.js

Saagie UI from Saagie Design System

/* eslint-env browser */

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import { Popper } from 'react-popper';
import FocusLock from 'react-focus-lock';
import classnames from 'classnames';
import { useDropdownSubmenuContext } from './DropdownSubmenu';
import { ClickAwayListener } from '../../helpers/clickAwayListener/ClickAwayListener';

const propTypes = {
  children: PropTypes.node,
  /**
   * The component used for the root node.
   * Either a string to use a DOM element or a component.
   */
  tag: PropTypes.elementType,
  defaultClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
  className: PropTypes.string,
  popperProps: PropTypes.object,
  clickAwayListenerProps: PropTypes.object,
};

const defaultProps = {
  children: undefined,
  className: '',
  defaultClassName: 'sui-o-dropdown',
  tag: 'div',
  popperProps: { placement: 'right-end', modifiers: { preventOverflow: { enabled: false }, offset: { offset: '62, 9' } } },
  clickAwayListenerProps: {},
};

export const DropdownSubmenuList = ({
  tag: Tag,
  defaultClassName,
  className,
  popperProps,
  clickAwayListenerProps,
  ...attributes
}) => {
  const { isOpen, handleToggle } = useDropdownSubmenuContext();

  const classes = classnames(
    defaultClassName,
    className,
    {
      'as--open': isOpen,
    }
  );

  if (!isOpen) {
    return '';
  }
  return (
    ReactDOM.createPortal((
      <Popper {...popperProps}>
        {({ placement, ref, style }) => (
          <ClickAwayListener onClickOutside={handleToggle} {...clickAwayListenerProps}>
            <FocusLock autoFocus={false}>
              <Tag ref={ref} style={style} data-placement={placement} className={classes} role="menu" {...attributes} />
            </FocusLock>
          </ClickAwayListener>
        )}
      </Popper>
    ), document.body)
  );
};

DropdownSubmenuList.propTypes = propTypes;
DropdownSubmenuList.defaultProps = defaultProps;