pouncejs/dist/esm/components/utils/MenuItem/MenuItem.js

A collection of UI components from Panther labs

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React from 'react';
import Box from '../../Box';

/**
 * A MenuItem is simply an entry in a list of menu options or dropdown options. In general, this
 * should be used only on autocompletes, comboboxes & menus.
 */
var MenuItem = function MenuItem(_ref) {
  var selected = _ref.selected,
      disabled = _ref.disabled,
      nested = _ref.nested,
      _ref$backgroundColor = _ref.backgroundColor,
      backgroundColor = _ref$backgroundColor === void 0 ? 'navyblue-300' : _ref$backgroundColor,
      _ref$selectedBackgrou = _ref.selectedBackgroundColor,
      selectedBackgroundColor = _ref$selectedBackgrou === void 0 ? 'navyblue-500' : _ref$selectedBackgrou,
      withCheckMark = _ref.withCheckMark,
      children = _ref.children,
      rest = _objectWithoutPropertiesLoose(_ref, ["selected", "disabled", "nested", "backgroundColor", "selectedBackgroundColor", "withCheckMark", "children"]);

  var bgColor = backgroundColor;

  if (selected) {
    bgColor = selectedBackgroundColor;
  }

  return /*#__PURE__*/React.createElement(Box, _extends({
    cursor: "pointer",
    fontSize: "medium",
    py: 4,
    pr: 4,
    pl: nested ? 22 : 4,
    transition: "background-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms",
    position: "relative",
    backgroundColor: bgColor,
    "aria-disabled": disabled,
    _selected: {
      backgroundColor: 'navyblue-400'
    },
    wordBreak: "break-all"
  }, withCheckMark && {
    pr: 10,
    _after: {
      content: selected ? "url( 'data:image/svg+xml; utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 20 18\" fill=\"white\"><path d=\"M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42L7 14.17z\" /></svg>' )" : "\"\"",
      border: '1px solid',
      borderColor: selected ? 'blue-400' : 'navyblue-100',
      borderRadius: 'small',
      position: 'absolute',
      width: '20px',
      height: '20px',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      top: 0,
      right: 4,
      bottom: 0,
      margin: 'auto 0'
    }
  }, rest), children);
};

export default /*#__PURE__*/React.memo(MenuItem);