@atlaskit/select/dist/esm/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 _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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';
var 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
var getPrimaryColor = function getPrimaryColor(_ref) {
  var isActive = _ref.isActive,
    isDisabled = _ref.isDisabled,
    isFocused = _ref.isFocused,
    isSelected = _ref.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
var getSecondaryColor = function getSecondaryColor(_ref2) {
  var isDisabled = _ref2.isDisabled,
    isSelected = _ref2.isSelected;
  if (isDisabled && isSelected) {
    return "var(--ds-text-disabled, #080F214A)";
  } else if (!isSelected) {
    return 'transparent';
  }
  return "var(--ds-surface, #FFFFFF)";
};
var iconStyles = {
  inherit: "_1u9j1r31 _1gqp1r31",
  default: "_1u9j1ihb _1gqp1ihb"
};
var baseIconStyles = null;
var baseOptionStyles = null;
export var ControlOption = function ControlOption(props) {
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isActive = _useState2[0],
    setIsActive = _useState2[1];
  var onMouseDown = useCallback(function () {
    return setIsActive(true);
  }, []);
  var onMouseUp = useCallback(function () {
    return setIsActive(false);
  }, []);
  var Icon = props.Icon,
    children = props.children,
    innerProps = props.innerProps,
    innerRef = props.innerRef,
    cx = props.cx,
    className = props.className,
    isDisabled = props.isDisabled,
    isSelected = props.isSelected,
    isFocused = props.isFocused;
  var classNames = useMemo(function () {
    return 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: isDisabled,
      isSelected: isSelected,
      isFocused: isFocused,
      isActive: isActive
    }),
    secondaryColor: getSecondaryColor({
      isDisabled: isDisabled,
      isSelected: isSelected
    }),
    isFacadeDisabled: true
  }) : null), /*#__PURE__*/React.createElement("div", {
    className: ax(["_16jlkb7n _1reo15vq _1bto1l2s _o5721q9c"])
  }, children));
};