@atlaskit/select/dist/es2019/components/control-option.js

Select allows users to make a single selection or multiple selections from a list of options.

/* control-option.tsx generated by @compiled/babel-plugin v3.0.2 */
import _extends from "@babel/runtime/helpers/extends";
import "./control-option.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { useCallback, useMemo, useState } from 'react';
import { fg } from '@atlaskit/platform-feature-flags/fg';
const optionStyles = {
  default: "_1e0c1txw _4cvr1h6o _1bsb1osq _uiztglyw _18ql1j7p _vchhusvi _85i51b66 _1q511b66 _bozgpxbi _y4tiutpp _bfhk1j28 _16qs1kw7 _syaz1kw7 _1di6fcek",
  focused: "_bfhk1dpa _16qsgkog _112e5u6v",
  finesseFocused: "_16qsglyw _112eglyw",
  disabled: "_syaz1gmx",
  motion: "_v564hxmd _o7kshxmd _1ggl87vo"
};

// state of the parent option

// the primary color represents the outer or background element
const getPrimaryColor = ({
  isActive,
  isDisabled,
  isFocused,
  isSelected
}) => {
  if (isDisabled) {
    return "var(--ds-background-disabled, #0515240F)";
  } else if (isSelected && isActive) {
    return "var(--ds-background-selected-bold-pressed, #123263)";
  } else if (isActive) {
    return "var(--ds-background-selected-pressed, #8FB8F6)";
  } else if (isFocused && isSelected) {
    return "var(--ds-background-selected-bold-hovered, #1558BC)";
  } else if (isFocused) {
    return "var(--ds-surface, #FFFFFF)";
  } else if (isSelected) {
    return "var(--ds-background-selected-bold, #1868DB)";
  }
  return "var(--ds-background-neutral, #0515240F)";
};

// the secondary color represents the radio dot or checkmark
const getSecondaryColor = ({
  isDisabled,
  isSelected
}) => {
  if (isDisabled && isSelected) {
    return "var(--ds-text-disabled, #080F214A)";
  } else if (!isSelected) {
    return 'transparent';
  }
  return "var(--ds-surface, #FFFFFF)";
};
const iconStyles = {
  inherit: "_1u9j1r31 _1gqp1r31",
  default: "_1u9j1ihb _1gqp1ihb"
};
const baseIconStyles = null;
const baseOptionStyles = null;
export const ControlOption = props => {
  const [isActive, setIsActive] = useState(false);
  const onMouseDown = useCallback(() => setIsActive(true), []);
  const onMouseUp = useCallback(() => setIsActive(false), []);
  const {
    Icon,
    children,
    innerProps,
    innerRef,
    cx,
    className,
    isDisabled,
    isSelected,
    isFocused
  } = props;
  const classNames = useMemo(() => cx({
    option: true,
    'option--is-disabled': isDisabled,
    'option--is-focused': isFocused,
    'option--is-selected': isSelected
  }, className), [cx, isDisabled, isFocused, isSelected, className]);
  return /*#__PURE__*/React.createElement("div", _extends({
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
    className: ax([optionStyles.default, !isDisabled && fg('platform-dst-motion-uplift-list-item') && optionStyles.motion, isFocused && optionStyles.focused, isFocused && fg('platform-dst-tokens-finesse') && optionStyles.finesseFocused, isDisabled && optionStyles.disabled, classNames]),
    ref: innerRef,
    onMouseDown: onMouseDown,
    onMouseUp: onMouseUp
    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
    ,
    onMouseLeave: onMouseUp
  }, innerProps), /*#__PURE__*/React.createElement("div", {
    className: ax(["_1e0c1txw _4cvr1h6o _1o9zidpf _y4ti1b66 _16cu892t _1xci892t _59qxe4h9 _8y3xe4h9", isSelected || isActive || isDisabled ? iconStyles.inherit : iconStyles.default])
  }, !!Icon ? /*#__PURE__*/React.createElement(Icon, {
    label: "",
    primaryColor: getPrimaryColor({
      isDisabled,
      isSelected,
      isFocused,
      isActive
    }),
    secondaryColor: getSecondaryColor({
      isDisabled,
      isSelected
    }),
    isFacadeDisabled: true
  }) : null), /*#__PURE__*/React.createElement("div", {
    className: ax(["_16jlkb7n _1reo15vq _1bto1l2s _o5721q9c"])
  }, children));
};