@kiwicom/orbit-components/es/Select/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import * as React from "react";
import styled, { css } from "styled-components";
import defaultTheme from "../defaultTheme";
import FormLabel from "../FormLabel";
import ChevronDown from "../icons/ChevronDown";
import ErrorFormTooltip from "../ErrorFormTooltip";
import SIZE_OPTIONS from "./consts";
import { right, left, rtlSpacing } from "../utils/rtl";
import getSpacingToken from "../common/getSpacingToken";
import getFieldDataState from "../common/getFieldDataState";
import useErrorTooltip from "../ErrorFormTooltip/hooks/useErrorTooltip";
import formElementFocus from "../InputField/helpers/formElementFocus";
import mq from "../utils/mediaQuery";

var getSelectSize = function getSelectSize(_ref) {
  var _tokens;

  var theme = _ref.theme,
      size = _ref.size;
  var tokens = (_tokens = {}, _defineProperty(_tokens, SIZE_OPTIONS.SMALL, theme.orbit.heightInputSmall), _defineProperty(_tokens, SIZE_OPTIONS.NORMAL, theme.orbit.heightInputNormal), _tokens);
  return tokens[size];
};

var Label = styled.label.withConfig({
  displayName: "Select__Label",
  componentId: "sc-6agypz-0"
})(["position:relative;display:block;width:100%;margin-bottom:", ";"], getSpacingToken); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

Label.defaultProps = {
  theme: defaultTheme
};
var StyledSelect = styled( /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
  var className = _ref2.className,
      dataTest = _ref2.dataTest,
      children = _ref2.children,
      value = _ref2.value,
      disabled = _ref2.disabled,
      name = _ref2.name,
      error = _ref2.error,
      tabIndex = _ref2.tabIndex,
      onChange = _ref2.onChange,
      onFocus = _ref2.onFocus,
      onBlur = _ref2.onBlur,
      id = _ref2.id,
      dataAttrs = _ref2.dataAttrs,
      readOnly = _ref2.readOnly;
  return /*#__PURE__*/React.createElement("select", _extends({
    id: id,
    "data-test": dataTest,
    "data-state": getFieldDataState(error),
    value: value,
    className: className,
    onChange: onChange,
    onFocus: onFocus,
    readOnly: readOnly,
    onBlur: onBlur,
    disabled: disabled,
    name: name,
    tabIndex: tabIndex,
    ref: ref
  }, dataAttrs), children);
})).withConfig({
  displayName: "Select__StyledSelect",
  componentId: "sc-6agypz-1"
})(["appearance:none;background:", ";cursor:pointer;color:", ";font-family:", ";font-size:", ";height:", ";padding:", ";outline:none;width:100%;color:", ";transition:box-shadow ", " ease-in-out;z-index:2;border-radius:6px;", ";> option{color:", ";}&::-ms-expand{display:none;}&::-ms-value{background:transparent;color:", ";color:", ";}border:0;box-shadow:inset 0 0 0 ", ";&:hover{box-shadow:inset 0 0 0 ", ";}&:focus{", "}&:disabled{color:", ";background:", ";cursor:not-allowed;&:hover{box-shadow:inset 0 0 0 1px ", ";}}", ""], function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.backgroundInput;
}, function (_ref4) {
  var theme = _ref4.theme,
      filled = _ref4.filled;
  return filled ? theme.orbit.colorTextInput : theme.orbit.colorPlaceholderInput;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.orbit.fontFamily;
}, function (_ref6) {
  var theme = _ref6.theme,
      size = _ref6.size;
  return size === SIZE_OPTIONS.SMALL ? theme.orbit.fontSizeInputSmall : theme.orbit.fontSizeInputNormal;
}, getSelectSize, function (_ref7) {
  var theme = _ref7.theme,
      size = _ref7.size,
      prefix = _ref7.prefix;
  return rtlSpacing(size === SIZE_OPTIONS.SMALL && !prefix && "0 ".concat(theme.orbit.spaceXLarge, " 0 ").concat(theme.orbit.spaceSmall) || size === SIZE_OPTIONS.SMALL && prefix && "0 ".concat(theme.orbit.spaceXLarge, " 0 ").concat(theme.orbit.paddingLeftSelectPrefix) || prefix && "0 ".concat(theme.orbit.spaceXXLarge, " 0 ").concat(theme.orbit.paddingLeftSelectPrefix) || "0 ".concat(theme.orbit.spaceXXLarge, " 0 ").concat(theme.orbit.spaceSmall));
}, function (_ref8) {
  var customValueText = _ref8.customValueText;
  return customValueText && "transparent !important";
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.orbit.durationFast;
}, mq.tablet(css(["border-radius:", ";"], function (_ref10) {
  var theme = _ref10.theme;
  return theme.orbit.borderRadiusNormal;
})), function (_ref11) {
  var theme = _ref11.theme;
  return theme.orbit.colorTextInput;
}, function (_ref12) {
  var theme = _ref12.theme,
      filled = _ref12.filled;
  return filled ? theme.orbit.colorTextInput : theme.orbit.colorPlaceholderInput;
}, function (_ref13) {
  var customValueText = _ref13.customValueText;
  return customValueText && "rgba(255, 255, 255, 0)";
}, function (_ref14) {
  var theme = _ref14.theme,
      error = _ref14.error;
  return "".concat(theme.orbit.borderWidthInput, " ").concat(error ? theme.orbit.borderColorInputError : theme.orbit.borderColorInput);
}, function (_ref15) {
  var theme = _ref15.theme,
      error = _ref15.error;
  return "".concat(theme.orbit.borderWidthInput, " ").concat(error ? theme.orbit.borderColorInputErrorHover : theme.orbit.borderColorInputHover);
}, formElementFocus, function (_ref16) {
  var theme = _ref16.theme;
  return theme.orbit.colorTextInputDisabled;
}, function (_ref17) {
  var theme = _ref17.theme;
  return theme.orbit.backgroundInputDisabled;
}, function (_ref18) {
  var theme = _ref18.theme;
  return theme.orbit.borderColorInput;
}, function (_ref19) {
  var customValueText = _ref19.customValueText;
  return customValueText && "\n    &:-webkit-autofill,\n    &:-internal-autofill-selected {\n      -webkit-text-fill-color: transparent;\n    }\n  ";
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledSelect.defaultProps = {
  theme: defaultTheme
};
export var SelectContainer = styled.div.withConfig({
  displayName: "Select__SelectContainer",
  componentId: "sc-6agypz-2"
})(["position:relative;display:flex;align-items:center;background:", ";width:100%;box-sizing:border-box;cursor:pointer;"], function (_ref20) {
  var theme = _ref20.theme;
  return theme.orbit.backgroundInput;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

SelectContainer.defaultProps = {
  theme: defaultTheme
};
var SelectPrefix = styled.div.withConfig({
  displayName: "Select__SelectPrefix",
  componentId: "sc-6agypz-3"
})(["display:flex;align-items:center;position:absolute;padding:", ";pointer-events:none;z-index:3;top:0;height:", ";"], function (_ref21) {
  var theme = _ref21.theme;
  return "0 ".concat(theme.orbit.spaceSmall);
}, getSelectSize); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

SelectPrefix.defaultProps = {
  theme: defaultTheme
};
var SelectSuffix = styled.div.withConfig({
  displayName: "Select__SelectSuffix",
  componentId: "sc-6agypz-4"
})(["position:absolute;display:flex;justify-content:center;align-items:center;top:0;", ":", ";color:", ";pointer-events:none;z-index:3;height:100%;& > *{width:", ";height:", ";margin-bottom:", ";}"], right, function (_ref22) {
  var theme = _ref22.theme;
  return theme.orbit.spaceXSmall;
}, function (_ref23) {
  var theme = _ref23.theme,
      disabled = _ref23.disabled;
  return disabled ? theme.orbit.colorTextInputDisabled : theme.orbit.colorTextInput;
}, function (_ref24) {
  var theme = _ref24.theme,
      size = _ref24.size;
  return size === SIZE_OPTIONS.SMALL && theme.orbit.widthIconSmall;
}, function (_ref25) {
  var theme = _ref25.theme,
      size = _ref25.size;
  return size === SIZE_OPTIONS.SMALL && theme.orbit.heightIconSmall;
}, function (_ref26) {
  var size = _ref26.size,
      theme = _ref26.theme;
  return size === SIZE_OPTIONS.SMALL && theme.orbit.spaceXXXSmall;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

SelectSuffix.defaultProps = {
  theme: defaultTheme
};
var StyledCustomValue = styled(function (_ref27) {
  var prefix = _ref27.prefix,
      theme = _ref27.theme,
      size = _ref27.size,
      filled = _ref27.filled,
      disabled = _ref27.disabled,
      props = _objectWithoutProperties(_ref27, ["prefix", "theme", "size", "filled", "disabled"]);

  return /*#__PURE__*/React.createElement("div", props);
}).withConfig({
  displayName: "Select__StyledCustomValue",
  componentId: "sc-6agypz-5"
})(["color:", ";font-family:", ";font-size:", ";z-index:3;position:absolute;height:100%;line-height:", ";top:0;", ":", ";bottom:0;pointer-events:none;"], function (_ref28) {
  var theme = _ref28.theme,
      filled = _ref28.filled,
      disabled = _ref28.disabled;
  return disabled && theme.orbit.paletteInkLighter || (filled ? theme.orbit.colorTextInput : theme.orbit.colorPlaceholderInput);
}, function (_ref29) {
  var theme = _ref29.theme;
  return theme.orbit.fontFamily;
}, function (_ref30) {
  var theme = _ref30.theme,
      size = _ref30.size;
  return size === SIZE_OPTIONS.SMALL ? theme.orbit.fontSizeInputSmall : theme.orbit.fontSizeInputNormal;
}, getSelectSize, left, function (_ref31) {
  var prefix = _ref31.prefix,
      theme = _ref31.theme;
  return prefix ? "48px" : theme.orbit.spaceSmall;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledCustomValue.defaultProps = {
  theme: defaultTheme
};
var Select = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var _props$size = props.size,
      size = _props$size === void 0 ? SIZE_OPTIONS.NORMAL : _props$size,
      label = props.label,
      placeholder = props.placeholder,
      value = props.value,
      _props$disabled = props.disabled,
      disabled = _props$disabled === void 0 ? false : _props$disabled,
      error = props.error,
      help = props.help,
      name = props.name,
      onChange = props.onChange,
      onBlur = props.onBlur,
      onFocus = props.onFocus,
      options = props.options,
      tabIndex = props.tabIndex,
      id = props.id,
      required = props.required,
      dataTest = props.dataTest,
      prefix = props.prefix,
      spaceAfter = props.spaceAfter,
      customValueText = props.customValueText,
      insideInputGroup = props.insideInputGroup,
      dataAttrs = props.dataAttrs,
      readOnly = props.readOnly;
  var filled = !(value == null || value === "");

  var _useErrorTooltip = useErrorTooltip({
    onFocus: onFocus
  }),
      tooltipShown = _useErrorTooltip.tooltipShown,
      tooltipShownHover = _useErrorTooltip.tooltipShownHover,
      setTooltipShownHover = _useErrorTooltip.setTooltipShownHover,
      labelRef = _useErrorTooltip.labelRef,
      iconRef = _useErrorTooltip.iconRef,
      setTooltipShown = _useErrorTooltip.setTooltipShown,
      handleFocus = _useErrorTooltip.handleFocus;

  var inputRef = React.useRef(null);
  var shown = tooltipShown || tooltipShownHover;
  return /*#__PURE__*/React.createElement(Label, {
    spaceAfter: spaceAfter,
    ref: inputRef
  }, label && /*#__PURE__*/React.createElement(FormLabel, {
    filled: !!filled,
    error: !!error,
    help: !!help,
    disabled: disabled,
    labelRef: labelRef,
    iconRef: iconRef,
    onMouseEnter: function onMouseEnter() {
      return setTooltipShownHover(true);
    },
    onMouseLeave: function onMouseLeave() {
      return setTooltipShownHover(false);
    },
    required: required
  }, label), /*#__PURE__*/React.createElement(SelectContainer, {
    ref: label ? null : labelRef
  }, prefix && /*#__PURE__*/React.createElement(SelectPrefix, {
    prefix: prefix,
    size: size
  }, prefix), customValueText && /*#__PURE__*/React.createElement(StyledCustomValue, {
    disabled: disabled,
    filled: filled,
    size: size,
    prefix: prefix
  }, customValueText), /*#__PURE__*/React.createElement(StyledSelect, {
    dataTest: dataTest,
    size: size,
    disabled: disabled,
    error: error,
    value: value == null ? "" : value,
    prefix: prefix,
    name: name,
    onFocus: handleFocus,
    onBlur: onBlur,
    onChange: onChange,
    filled: filled,
    customValueText: customValueText,
    tabIndex: tabIndex,
    id: id,
    readOnly: readOnly,
    required: required,
    ref: ref,
    dataAttrs: dataAttrs
  }, placeholder && /*#__PURE__*/React.createElement("option", {
    label: placeholder,
    value: ""
  }, placeholder), options.map(function (option) {
    return /*#__PURE__*/React.createElement("option", {
      key: "option-".concat(option.key || option.value),
      value: option.value,
      disabled: option.disabled
    }, option.label);
  })), /*#__PURE__*/React.createElement(SelectSuffix, {
    size: size,
    disabled: disabled
  }, /*#__PURE__*/React.createElement(ChevronDown, null))), !insideInputGroup && /*#__PURE__*/React.createElement(ErrorFormTooltip, {
    help: help,
    error: error,
    inputSize: size,
    shown: shown,
    onShown: setTooltipShown,
    referenceElement: inputRef
  }));
}); // otherwise Unknown in storybook

Select.displayName = "Select";
export default Select;