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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.SelectContainer = void 0;

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var React = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));

var _FormLabel = _interopRequireDefault(require("../FormLabel"));

var _ChevronDown = _interopRequireDefault(require("../icons/ChevronDown"));

var _ErrorFormTooltip = _interopRequireDefault(require("../ErrorFormTooltip"));

var _consts = _interopRequireDefault(require("./consts"));

var _rtl = require("../utils/rtl");

var _getSpacingToken = _interopRequireDefault(require("../common/getSpacingToken"));

var _getFieldDataState = _interopRequireDefault(require("../common/getFieldDataState"));

var _useErrorTooltip = _interopRequireDefault(require("../ErrorFormTooltip/hooks/useErrorTooltip"));

var _formElementFocus = _interopRequireDefault(require("../InputField/helpers/formElementFocus"));

var _mediaQuery = _interopRequireDefault(require("../utils/mediaQuery"));

const _excluded = ["prefix", "theme", "size", "filled", "disabled"];

const getSelectSize = ({
  theme,
  size
}) => {
  const tokens = {
    [_consts.default.SMALL]: theme.orbit.heightInputSmall,
    [_consts.default.NORMAL]: theme.orbit.heightInputNormal
  };
  return tokens[size];
};

const Label = _styledComponents.default.label.withConfig({
  displayName: "Select__Label",
  componentId: "sc-19y5dzg-0"
})(["", ""], ({
  $width
}) => (0, _styledComponents.css)(["position:relative;display:block;width:", ";margin-bottom:", ";"], $width, _getSpacingToken.default)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


Label.defaultProps = {
  theme: _defaultTheme.default
};
const StyledSelect = (0, _styledComponents.default)( /*#__PURE__*/React.forwardRef(({
  className,
  dataTest,
  children,
  value,
  disabled,
  name,
  error,
  tabIndex,
  onChange,
  onFocus,
  onBlur,
  id,
  dataAttrs,
  readOnly
}, ref) => /*#__PURE__*/React.createElement("select", (0, _extends2.default)({
  id: id,
  "data-test": dataTest,
  "data-state": (0, _getFieldDataState.default)(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-19y5dzg-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 ", ";}}", ""], ({
  theme
}) => theme.orbit.backgroundInput, ({
  theme,
  filled
}) => filled ? theme.orbit.colorTextInput : theme.orbit.colorPlaceholderInput, ({
  theme
}) => theme.orbit.fontFamily, ({
  theme,
  size
}) => size === _consts.default.SMALL ? theme.orbit.fontSizeInputSmall : theme.orbit.fontSizeInputNormal, getSelectSize, ({
  theme,
  size,
  prefix
}) => (0, _rtl.rtlSpacing)(size === _consts.default.SMALL && !prefix && `0 ${theme.orbit.spaceXLarge} 0 ${theme.orbit.spaceSmall}` || size === _consts.default.SMALL && prefix && `0 ${theme.orbit.spaceXLarge} 0 ${theme.orbit.paddingLeftSelectPrefix}` || prefix && `0 ${theme.orbit.spaceXXLarge} 0 ${theme.orbit.paddingLeftSelectPrefix}` || `0 ${theme.orbit.spaceXXLarge} 0 ${theme.orbit.spaceSmall}`), ({
  customValueText
}) => customValueText && "transparent !important", ({
  theme
}) => theme.orbit.durationFast, _mediaQuery.default.tablet((0, _styledComponents.css)(["border-radius:", ";"], ({
  theme
}) => theme.orbit.borderRadiusNormal)), ({
  theme
}) => theme.orbit.colorTextInput, ({
  theme,
  filled
}) => filled ? theme.orbit.colorTextInput : theme.orbit.colorPlaceholderInput, ({
  customValueText
}) => customValueText && "rgba(255, 255, 255, 0)", ({
  theme,
  error
}) => `${theme.orbit.borderWidthInput} ${error ? theme.orbit.borderColorInputError : theme.orbit.borderColorInput}`, ({
  theme,
  error
}) => `${theme.orbit.borderWidthInput} ${error ? theme.orbit.borderColorInputErrorHover : theme.orbit.borderColorInputHover}`, _formElementFocus.default, ({
  theme
}) => theme.orbit.colorTextInputDisabled, ({
  theme
}) => theme.orbit.backgroundInputDisabled, ({
  theme
}) => theme.orbit.borderColorInput, ({
  customValueText
}) => customValueText && `
    &:-webkit-autofill,
    &:-internal-autofill-selected {
      -webkit-text-fill-color: transparent;
    }
  `); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledSelect.defaultProps = {
  theme: _defaultTheme.default
};

const SelectContainer = _styledComponents.default.div.withConfig({
  displayName: "Select__SelectContainer",
  componentId: "sc-19y5dzg-2"
})(["position:relative;display:flex;align-items:center;background:", ";width:100%;box-sizing:border-box;cursor:pointer;"], ({
  theme
}) => theme.orbit.backgroundInput); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


exports.SelectContainer = SelectContainer;
SelectContainer.defaultProps = {
  theme: _defaultTheme.default
};

const SelectPrefix = _styledComponents.default.div.withConfig({
  displayName: "Select__SelectPrefix",
  componentId: "sc-19y5dzg-3"
})(["display:flex;align-items:center;position:absolute;padding:", ";pointer-events:none;z-index:3;top:0;height:", ";"], ({
  theme
}) => `0 ${theme.orbit.spaceSmall}`, getSelectSize); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


SelectPrefix.defaultProps = {
  theme: _defaultTheme.default
};

const SelectSuffix = _styledComponents.default.div.withConfig({
  displayName: "Select__SelectSuffix",
  componentId: "sc-19y5dzg-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:", ";}"], _rtl.right, ({
  theme
}) => theme.orbit.spaceXSmall, ({
  theme,
  disabled
}) => disabled ? theme.orbit.colorTextInputDisabled : theme.orbit.colorTextInput, ({
  theme,
  size
}) => size === _consts.default.SMALL && theme.orbit.widthIconSmall, ({
  theme,
  size
}) => size === _consts.default.SMALL && theme.orbit.heightIconSmall, ({
  size,
  theme
}) => size === _consts.default.SMALL && theme.orbit.spaceXXXSmall); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


SelectSuffix.defaultProps = {
  theme: _defaultTheme.default
};
const StyledCustomValue = (0, _styledComponents.default)((_ref) => {
  let {
    prefix,
    theme,
    size,
    filled,
    disabled
  } = _ref,
      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  return /*#__PURE__*/React.createElement("div", props);
}).withConfig({
  displayName: "Select__StyledCustomValue",
  componentId: "sc-19y5dzg-5"
})(["color:", ";font-family:", ";font-size:", ";z-index:3;position:absolute;height:100%;line-height:", ";top:0;", ":", ";bottom:0;pointer-events:none;"], ({
  theme,
  filled,
  disabled
}) => disabled && theme.orbit.paletteInkLighter || (filled ? theme.orbit.colorTextInput : theme.orbit.colorPlaceholderInput), ({
  theme
}) => theme.orbit.fontFamily, ({
  theme,
  size
}) => size === _consts.default.SMALL ? theme.orbit.fontSizeInputSmall : theme.orbit.fontSizeInputNormal, getSelectSize, _rtl.left, ({
  prefix,
  theme
}) => prefix ? "48px" : theme.orbit.spaceSmall); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledCustomValue.defaultProps = {
  theme: _defaultTheme.default
};
const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
  const {
    size = _consts.default.NORMAL,
    label,
    placeholder,
    value,
    disabled = false,
    error,
    help,
    name,
    onChange,
    onBlur,
    onFocus,
    width = "100%",
    options,
    tabIndex,
    id,
    required,
    helpClosable = true,
    dataTest,
    prefix,
    spaceAfter,
    customValueText,
    insideInputGroup,
    dataAttrs,
    readOnly
  } = props;
  const filled = !(value == null || value === "");
  const {
    tooltipShown,
    tooltipShownHover,
    setTooltipShownHover,
    labelRef,
    iconRef,
    setTooltipShown,
    handleFocus
  } = (0, _useErrorTooltip.default)({
    onFocus
  });
  const inputRef = React.useRef(null);
  const shown = tooltipShown || tooltipShownHover;
  return /*#__PURE__*/React.createElement(Label, {
    spaceAfter: spaceAfter,
    ref: inputRef,
    $width: width
  }, label && /*#__PURE__*/React.createElement(_FormLabel.default, {
    filled: !!filled,
    error: !!error,
    help: !!help,
    disabled: disabled,
    labelRef: labelRef,
    iconRef: iconRef,
    onMouseEnter: () => setTooltipShownHover(true),
    onMouseLeave: () => 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(option => /*#__PURE__*/React.createElement("option", {
    key: `option-${option.key || option.value}`,
    value: option.value,
    disabled: option.disabled
  }, option.label))), /*#__PURE__*/React.createElement(SelectSuffix, {
    size: size,
    disabled: disabled
  }, /*#__PURE__*/React.createElement(_ChevronDown.default, {
    color: "secondary"
  }))), !insideInputGroup && /*#__PURE__*/React.createElement(_ErrorFormTooltip.default, {
    help: help,
    error: error,
    inputSize: size,
    helpClosable: helpClosable,
    shown: shown,
    onShown: setTooltipShown,
    referenceElement: inputRef
  }));
}); // otherwise Unknown in storybook

Select.displayName = "Select";
var _default = Select;
exports.default = _default;