ultra-design/es/select/option.js

import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
import _pt from 'prop-types';
import 'react';
import { css } from '@emotion/react';
import clsx from 'clsx';
import { fade } from '../utils/fade.js';
import { useMergeProps } from '../utils/mergeProps.js';
import withStyle from '../utils/withStyle.js';
import { jsx } from '@emotion/react/jsx-runtime';

var _templateObject;
var defaultProps = {};

var Option = function Option(p) {
  var props = useMergeProps(defaultProps, p);
  var label = props.label,
      disabled = props.disabled,
      children = props.children,
      onClick = props.onClick,
      onMouseEnter = props.onMouseEnter,
      className = props.className;

  var handleClick = function handleClick(e) {
    if (disabled) return;
    onClick === null || onClick === void 0 ? void 0 : onClick(e);
  };

  return jsx("div", {
    className: clsx('ultra-select-option', disabled && 'ultra-select-option--disabled', className),
    css: optionStyles(props),
    onClick: handleClick,
    onMouseEnter: onMouseEnter,
    children: children || label && jsx("div", {
      children: label
    })
  });
};

Option.propTypes = {
  label: _pt.string,
  value: _pt.oneOfType([_pt.string, _pt.number]),
  disabled: _pt.bool,
  onClick: _pt.func,
  onMouseEnter: _pt.func,
  className: _pt.string
};
Option.displayName = 'UltraSelectOption';
var Option$1 = withStyle(Option);

var optionStyles = function optionStyles(props) {
  var theme = props.theme;
  var primaryColor = theme.style.primaryColor;
  var _theme$theme$mode = theme[theme.mode],
      textColor = _theme$theme$mode.textColor,
      disabledBgColor = _theme$theme$mode.disabledBgColor,
      disabledTextColor = _theme$theme$mode.disabledTextColor,
      reverseBgColor = _theme$theme$mode.reverseBgColor;
  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    padding: 0 12px;\n    min-height: 32px;\n    cursor: pointer;\n    user-select: none;\n\n    &.ultra-select-option--disabled {\n      background-color: ", ";\n      color: ", ";\n      cursor: not-allowed;\n    }\n    &.ultra-select-option--active {\n      background-color: ", ";\n      color: ", ";\n\n      &.ultra-select-option--hover {\n        background-color: ", ";\n      }\n    }\n    &:not(.ultra-select-option--disabled, .ultra-select-option--active).ultra-select-option--hover {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), disabledBgColor, disabledTextColor, fade(primaryColor, 0.1), primaryColor, fade(primaryColor, 0.3), fade(reverseBgColor, 0.1), textColor);
};

export { Option$1 as default };