@equinor/eds-core-react/dist/esm/components/Menu/MenuItem.js

The React implementation of the Equinor Design System

import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { menu } from './Menu.tokens.js';
import { mergeRefs, typographyTemplate, spacingsTemplate, outlineTemplate } from '@equinor/eds-utils';
import { useMenu } from './Menu.context.js';
import { jsx } from 'react/jsx-runtime';

const {
  typography,
  entities: {
    item: {
      states: {
        active: activeToken,
        focus,
        hover,
        disabled: disabledToken
      }
    },
    icon
  }
} = menu;
const Item = styled.button.attrs(({
  $isFocused
}) => ({
  role: 'menuitem',
  tabIndex: $isFocused ? -1 : 0
})).withConfig({
  displayName: "MenuItem__Item",
  componentId: "sc-1g9fpbe-0"
})(["border:0;background-color:transparent;width:auto;position:relative;z-index:2;text-decoration:none;", " ", " ", " ", ""], typographyTemplate(typography), ({
  theme
}) => spacingsTemplate(theme.entities.item.spacings), ({
  $active
}) => $active && css(["background:", ";*{color:", ";}"], activeToken.background, activeToken.typography.color), ({
  disabled
}) => disabled ? css(["*{color:", ";}svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{cursor:not-allowed;}}"], disabledToken.typography.color, icon.states.disabled.typography.color) : css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;background:", ";}}&:focus-visible{z-index:3;", "}"], hover.background, outlineTemplate(focus.outline)));
const Content = styled.div.withConfig({
  displayName: "MenuItem__Content",
  componentId: "sc-1g9fpbe-1"
})(["width:auto;display:grid;grid-gap:16px;grid-auto-flow:column;grid-auto-columns:max-content auto max-content;align-items:center;"]);
const MenuItem = /*#__PURE__*/forwardRef(function MenuItem({
  children,
  disabled,
  active,
  index = 0,
  as = 'button',
  onClick,
  closeMenuOnClick = true,
  ...rest
}, ref) {
  const {
    focusedIndex,
    setFocusedIndex,
    onClose
  } = useMenu();
  const toggleFocus = index_ => {
    if (focusedIndex !== index_) {
      setFocusedIndex(index_);
    }
  };
  const isFocused = index === focusedIndex;
  const props = {
    ...rest,
    as,
    disabled,
    $isFocused: isFocused
  };
  return /*#__PURE__*/jsx(Item, {
    ...props,
    $active: active,
    type: "button",
    ref: mergeRefs(ref, el => {
      if (isFocused) {
        requestAnimationFrame(() => {
          if (el !== null) el.focus();
        });
      }
    }),
    onFocus: () => toggleFocus(index),
    onClick: e => {
      if (onClick) {
        onClick(e);
      }
      if (onClose !== null && closeMenuOnClick) {
        onClose(e);
      }
    },
    children: /*#__PURE__*/jsx(Content, {
      children: children
    })
  });
});
MenuItem.displayName = 'MenuItem';

export { MenuItem };