@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";
"use client";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
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 _getFieldDataState = _interopRequireDefault(require("../common/getFieldDataState"));
var _ErrorFormTooltip = _interopRequireDefault(require("../ErrorFormTooltip"));
var _useErrorTooltip = _interopRequireDefault(require("../ErrorFormTooltip/hooks/useErrorTooltip"));
var _useRandomId = _interopRequireDefault(require("../hooks/useRandomId"));
var _spaceAfter = require("../common/tailwind/spaceAfter");
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
  } = 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("label", {
    className: (0, _clsx.default)("relative block", spaceAfter && _spaceAfter.spaceAfterClasses[spaceAfter]),
    ref: inputRef,
    style: {
      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("div", {
    ref: label ? null : labelRef,
    className: (0, _clsx.default)("orbit-select-container", "relative flex flex-row items-center justify-between", "h-form-box-normal box-border w-full", disabled ? "text-form-element-disabled-foreground cursor-not-allowed" : "text-form-element-filled-foreground cursor-pointer", !disabled && (error ? "[&_.orbit-input-field-fake-input]:hover:shadow-form-element-error-hover" : "[&_.orbit-input-field-fake-input]:hover:shadow-form-element-hover"), "focus-within:outline-none", "[&_.orbit-input-field-fake-input]:focus-within:outline-blue-normal [&_.orbit-input-field-fake-input]:focus-within:outline [&_.orbit-input-field-fake-input]:focus-within:outline-2")
  }, label && inlineLabel && /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)("pointer-events-none z-[3] flex h-full items-center justify-center", error || help ? "ps-xxs" : "ps-sm", "[&_.orbit-form-label]:text-normal [&_.orbit-form-label]:mb-0 [&_.orbit-form-label]:inline-block [&_.orbit-form-label]:max-w-[20ch] [&_.orbit-form-label]:overflow-hidden [&_.orbit-form-label]:text-ellipsis [&_.orbit-form-label]:whitespace-nowrap [&_.orbit-form-label]:leading-normal"),
    ref: labelRef
  }, help && !error && /*#__PURE__*/React.createElement("span", {
    className: "flex",
    ref: iconRef
  }, /*#__PURE__*/React.createElement(_InformationCircle.default, {
    color: "info",
    size: "small"
  })), error && /*#__PURE__*/React.createElement("span", {
    className: "flex",
    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("div", {
    className: "relative z-[3] h-full w-full"
  }, prefix && /*#__PURE__*/React.createElement("div", {
    className: "px-sm pointer-events-none absolute top-0 z-[3] flex h-full items-center"
  }, prefix), customValueText && /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)(disabled && "text-form-element-disabled-foreground" || filled ? "text-form-element-filled-foreground" : "text-form-element-foreground", "text-form-element-normal font-base pointer-events-none absolute bottom-0 top-0 z-[3] flex items-center", prefix ? "ps-[48px]" : "ps-sm")
  }, customValueText), /*#__PURE__*/React.createElement("select", (0, _extends2.default)({
    className: (0, _clsx.default)("cursor-pointer appearance-none bg-transparent outline-none", filled ? "text-form-element-filled-foreground" : "text-form-element-foreground", "font-base text-form-element-normal", "pe-xxl", prefix ? "ps-[48px]" : "ps-sm", "shrink grow basis-1/5", "h-full w-full", "border-0", customValueText && "!text-transparent", "duration-fast transition-shadow ease-in-out", "rounded-large tb:rounded-normal", "[&>option]:text-form-element-filled-foreground", "disabled:text-form-element-disabled-foreground disabled:cursor-not-allowed"),
    "data-test": dataTest,
    "data-state": (0, _getFieldDataState.default)(!!error),
    disabled: disabled,
    value: value == null ? "" : value,
    name: name,
    onFocus: handleFocus,
    onBlur: onBlur,
    onChange: onChange,
    tabIndex: tabIndex ? Number(tabIndex) : undefined,
    id: selectId,
    required: required,
    ref: ref,
    "aria-describedby": shown ? `${selectId}-feedback` : undefined,
    "aria-invalid": error ? true : undefined
  }, dataAttrs), 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("div", {
    className: (0, _clsx.default)("end-xs pointer-events-none absolute top-0 z-[3] flex h-full items-center justify-center", disabled ? "text-form-element-disabled-foreground" : "text-form-element-filled-foreground")
  }, /*#__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;