@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
150 lines (148 loc) • 6.71 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from "react";
import cx from "clsx";
import FormLabel from "../FormLabel";
import { FakeInput } from "../InputField";
import ChevronDown from "../icons/ChevronDown";
import AlertCircle from "../icons/AlertCircle";
import InformationCircle from "../icons/InformationCircle";
import getFieldDataState from "../common/getFieldDataState";
import ErrorFormTooltip from "../ErrorFormTooltip";
import useErrorTooltip from "../ErrorFormTooltip/hooks/useErrorTooltip";
import useRandomId from "../hooks/useRandomId";
import { spaceAfterClasses } from "../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 = useRandomId();
const selectId = id || forID;
const hasTooltip = Boolean(error || help);
const {
tooltipShown,
tooltipShownHover,
setTooltipShownHover,
labelRef,
iconRef,
setTooltipShown,
handleFocus
} = useErrorTooltip({
onFocus,
hasTooltip
});
const inputRef = React.useRef(null);
const shown = tooltipShown || tooltipShownHover;
return /*#__PURE__*/React.createElement("label", {
className: cx("relative block", spaceAfter && spaceAfterClasses[spaceAfter]),
ref: inputRef,
style: {
width
}
}, label && !inlineLabel && /*#__PURE__*/React.createElement(FormLabel, {
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: cx("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: cx("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, {
color: "info",
size: "small"
})), error && /*#__PURE__*/React.createElement("span", {
className: "flex",
ref: iconRef
}, /*#__PURE__*/React.createElement(AlertCircle, {
color: "critical",
size: "small"
})), /*#__PURE__*/React.createElement(FormLabel, {
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: cx(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", _extends({
className: cx("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": getFieldDataState(!!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: cx("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, {
color: "secondary"
})), /*#__PURE__*/React.createElement(FakeInput, {
disabled: disabled,
error: error
})), !insideInputGroup && hasTooltip && /*#__PURE__*/React.createElement(ErrorFormTooltip, {
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";
export default Select;