@atlaskit/select/dist/cjs/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 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ControlOption = void 0;
require("./control-option.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _fg = require("@atlaskit/platform-feature-flags/fg");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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;
var ControlOption = exports.ControlOption = function ControlOption(props) {
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    isActive = _useState2[0],
    setIsActive = _useState2[1];
  var onMouseDown = (0, _react.useCallback)(function () {
    return setIsActive(true);
  }, []);
  var onMouseUp = (0, _react.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 = (0, _react.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", (0, _extends2.default)({
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
    className: (0, _runtime.ax)([optionStyles.default, !isDisabled && (0, _fg.fg)('platform-dst-motion-uplift-list-item') && optionStyles.motion, isFocused && optionStyles.focused, isFocused && (0, _fg.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: (0, _runtime.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: (0, _runtime.ax)(["_16jlkb7n _1reo15vq _1bto1l2s _o5721q9c"])
  }, children));
};