@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 _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
exports.__esModule = true;
exports.default = exports.SelectContainer = void 0;
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 _InputField = require("../InputField");
var _ChevronDown = _interopRequireDefault(require("../icons/ChevronDown"));
var _AlertCircle = _interopRequireDefault(require("../icons/AlertCircle"));
var _InformationCircle = _interopRequireDefault(require("../icons/InformationCircle"));
var _ErrorFormTooltip = _interopRequireDefault(require("../ErrorFormTooltip"));
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"));
var _useRandomId = _interopRequireDefault(require("../hooks/useRandomId"));
const StyledLabel = _styledComponents.default.label.withConfig({
  displayName: "Select__StyledLabel",
  componentId: "sc-2ijy2y-0"
})(["", ""], ({
  $width
}) => (0, _styledComponents.css)(["position:relative;display:block;width:", ";margin-bottom:", ";"], $width, _getSpacingToken.default));
StyledLabel.defaultProps = {
  theme: _defaultTheme.default
};
const StyledInlineLabel = _styledComponents.default.div.withConfig({
  displayName: "Select__StyledInlineLabel",
  componentId: "sc-2ijy2y-1"
})(["", ""], ({
  theme,
  hasFeedback
}) => (0, _styledComponents.css)(["z-index:3;height:100%;display:flex;align-items:center;pointer-events:none;justify-content:center;padding:", ";", "{margin-bottom:0;font-size:", ";line-height:", ";white-space:nowrap;}"], (0, _rtl.rtlSpacing)(`0 0 0 ${hasFeedback ? theme.orbit.spaceXXSmall : theme.orbit.spaceSmall}`), _FormLabel.default, theme.orbit.fontSizeInputNormal, theme.orbit.lineHeightTextNormal));
StyledInlineLabel.defaultProps = {
  theme: _defaultTheme.default
};
const StyledIconWrapper = _styledComponents.default.span.withConfig({
  displayName: "Select__StyledIconWrapper",
  componentId: "sc-2ijy2y-2"
})(["display:flex;"]);
const StyledSelect = (0, _styledComponents.default)( /*#__PURE__*/React.forwardRef(({
  className,
  dataTest,
  children,
  value,
  disabled,
  name,
  error,
  tabIndex,
  onChange,
  onFocus,
  onBlur,
  id,
  dataAttrs,
  readOnly,
  ariaDescribedby,
  ariaInvalid
}, 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
  // @ts-expect-error TODO
  ,
  readOnly: readOnly,
  onBlur: onBlur,
  disabled: disabled,
  name: name,
  tabIndex: tabIndex ? Number(tabIndex) : undefined,
  ref: ref,
  "aria-describedby": ariaDescribedby,
  "aria-invalid": ariaInvalid
}, dataAttrs), children))).withConfig({
  displayName: "Select__StyledSelect",
  componentId: "sc-2ijy2y-3"
})(["", ""], ({
  theme,
  filled,
  customValueText,
  prefix
}) => (0, _styledComponents.css)(["appearance:none;background:transparent;cursor:pointer;color:", ";font-family:", ";font-size:", ";height:", ";padding:", ";outline:none;flex:1 1 20%;width:100%;height:100%;border:0;color:", ";transition:box-shadow ", " ease-in-out;border-radius:", ";", ";> option{color:", ";}&::-ms-expand{display:none;}&::-ms-value{background:transparent;color:", ";color:", ";}&:focus{outline:none;& ~ ", "{", "}}&:disabled{color:", ";cursor:not-allowed;}", ""], filled ? theme.orbit.colorTextInput : theme.orbit.colorPlaceholderInput, theme.orbit.fontFamily, theme.orbit.fontSizeInputNormal, theme.orbit.heightInputNormal, (0, _rtl.rtlSpacing)(prefix ? `0 ${theme.orbit.spaceXXLarge} 0 ${theme.orbit.paddingLeftSelectPrefix}` : `0 ${theme.orbit.spaceXXLarge} 0 ${theme.orbit.spaceSmall}`), customValueText && "transparent !important", theme.orbit.durationFast, theme.orbit.borderRadiusLarge, _mediaQuery.default.tablet((0, _styledComponents.css)(["border-radius:", ";"], theme.orbit.borderRadiusNormal)), theme.orbit.colorTextInput, filled ? theme.orbit.colorTextInput : theme.orbit.colorPlaceholderInput, customValueText && "rgba(255, 255, 255, 0)", _InputField.FakeInput, _formElementFocus.default, theme.orbit.colorTextInputDisabled, customValueText && `
      &:-webkit-autofill,
      &:-internal-autofill-selected {
        -webkit-text-fill-color: transparent;
      }
    `));
StyledSelect.defaultProps = {
  theme: _defaultTheme.default
};
const SelectContainer = _styledComponents.default.div.withConfig({
  displayName: "Select__SelectContainer",
  componentId: "sc-2ijy2y-4"
})(["", ""], ({
  theme,
  disabled,
  error
}) => (0, _styledComponents.css)(["position:relative;display:flex;align-items:center;flex-direction:row;justify-content:space-between;width:100%;box-sizing:border-box;height:", ";color:", ";cursor:", ";&:hover > ", "{", ";}"], theme.orbit.heightInputNormal, disabled ? theme.orbit.colorTextInputDisabled : theme.orbit.colorTextInput, disabled ? "not-allowed" : "pointer", _InputField.FakeInput, !disabled && `box-shadow: inset 0 0 0 ${theme.orbit.borderWidthInput} ${error ? theme.orbit.borderColorInputErrorHover : theme.orbit.borderColorInputHover}`));
exports.SelectContainer = SelectContainer;
SelectContainer.defaultProps = {
  theme: _defaultTheme.default
};
const SelectPrefix = _styledComponents.default.div.withConfig({
  displayName: "Select__SelectPrefix",
  componentId: "sc-2ijy2y-5"
})(["", ";"], ({
  theme
}) => (0, _styledComponents.css)(["display:flex;height:100%;align-items:center;position:absolute;padding:0 ", ";pointer-events:none;z-index:3;top:0;"], theme.orbit.spaceSmall));
SelectPrefix.defaultProps = {
  theme: _defaultTheme.default
};
const SelectSuffix = _styledComponents.default.div.withConfig({
  displayName: "Select__SelectSuffix",
  componentId: "sc-2ijy2y-6"
})(["", ";"], ({
  theme,
  disabled
}) => (0, _styledComponents.css)(["position:absolute;display:flex;justify-content:center;align-items:center;top:0;", ":", ";color:", ";pointer-events:none;z-index:3;height:100%;"], _rtl.right, theme.orbit.spaceXSmall, disabled ? theme.orbit.colorTextInputDisabled : theme.orbit.colorTextInput));
SelectSuffix.defaultProps = {
  theme: _defaultTheme.default
};
const StyledCustomValue = _styledComponents.default.div.withConfig({
  displayName: "Select__StyledCustomValue",
  componentId: "sc-2ijy2y-7"
})(["", ""], ({
  theme,
  $filled,
  $disabled,
  $prefix
}) => (0, _styledComponents.css)(["color:", ";display:flex;align-items:center;font-family:", ";font-size:", ";z-index:3;position:absolute;height:100%;top:0;", ":", ";bottom:0;pointer-events:none;"], $disabled && theme.orbit.paletteInkLight || ($filled ? theme.orbit.colorTextInput : theme.orbit.colorPlaceholderInput), theme.orbit.fontFamily, theme.orbit.fontSizeInputNormal, _rtl.left, $prefix ? "48px" : theme.orbit.spaceSmall));
StyledCustomValue.defaultProps = {
  theme: _defaultTheme.default
};
const StyledSelectWrapper = _styledComponents.default.div.withConfig({
  displayName: "Select__StyledSelectWrapper",
  componentId: "sc-2ijy2y-8"
})(["height:100%;width:100%;position:relative;z-index:3;"]);
const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
  const {
    label,
    inlineLabel,
    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 forID = (0, _useRandomId.default)();
  const selectId = id || forID;
  const hasTooltip = Boolean(error || help);
  const {
    tooltipShown,
    tooltipShownHover,
    setTooltipShownHover,
    labelRef,
    iconRef,
    setTooltipShown,
    handleFocus
  } = (0, _useErrorTooltip.default)({
    onFocus,
    hasTooltip
  });
  const inputRef = React.useRef(null);
  const shown = tooltipShown || tooltipShownHover;
  return /*#__PURE__*/React.createElement(StyledLabel, {
    spaceAfter: spaceAfter,
    ref: inputRef,
    $width: width
  }, label && !inlineLabel && /*#__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,
    disabled: disabled,
    error: !!error
  }, label && inlineLabel && /*#__PURE__*/React.createElement(StyledInlineLabel, {
    hasFeedback: !!(error || help),
    ref: labelRef
  }, help && !error && /*#__PURE__*/React.createElement(StyledIconWrapper, {
    ref: iconRef
  }, /*#__PURE__*/React.createElement(_InformationCircle.default, {
    color: "info",
    size: "small"
  })), error && /*#__PURE__*/React.createElement(StyledIconWrapper, {
    ref: iconRef
  }, /*#__PURE__*/React.createElement(_AlertCircle.default, {
    color: "critical",
    size: "small"
  })), /*#__PURE__*/React.createElement(_FormLabel.default, {
    filled: !!value,
    required: required,
    error: !!error,
    help: !!help,
    inlineLabel: inlineLabel
  }, label)), /*#__PURE__*/React.createElement(StyledSelectWrapper, null, prefix && /*#__PURE__*/React.createElement(SelectPrefix, null, prefix), customValueText && /*#__PURE__*/React.createElement(StyledCustomValue, {
    $disabled: disabled,
    $filled: filled,
    $prefix: !!prefix
  }, customValueText), /*#__PURE__*/React.createElement(StyledSelect, {
    dataTest: dataTest,
    disabled: disabled,
    error: error,
    value: value == null ? "" : value,
    prefix: prefix,
    name: name,
    onFocus: handleFocus,
    onBlur: onBlur,
    onChange: onChange,
    filled: filled,
    customValueText: customValueText,
    tabIndex: tabIndex ? Number(tabIndex) : undefined,
    id: selectId,
    readOnly: readOnly,
    required: required,
    ref: ref,
    dataAttrs: dataAttrs,
    ariaDescribedby: shown ? `${selectId}-feedback` : undefined,
    ariaInvalid: error ? true : undefined
  }, placeholder && /*#__PURE__*/React.createElement("option", {
    label: placeholder.toString(),
    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, {
    disabled: disabled
  }, /*#__PURE__*/React.createElement(_ChevronDown.default, {
    color: "secondary"
  })), /*#__PURE__*/React.createElement(_InputField.FakeInput, {
    disabled: disabled,
    error: error
  })), !insideInputGroup && hasTooltip && /*#__PURE__*/React.createElement(_ErrorFormTooltip.default, {
    id: `${selectId}-feedback`,
    help: help,
    error: error,
    helpClosable: helpClosable,
    shown: shown,
    onShown: setTooltipShown,
    inlineLabel: inlineLabel,
    referenceElement: inlineLabel ? iconRef : inputRef
  }));
});

// otherwise Unknown in storybook
Select.displayName = "Select";
var _default = Select;
exports.default = _default;