@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.
216 lines (215 loc) • 9.29 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from "react";
import cx from "clsx";
import { TYPE_OPTIONS } from "./consts";
import InputTags from "./InputTags";
import getFieldDataState from "../common/getFieldDataState";
import useRandomId from "../hooks/useRandomId";
import ErrorFormTooltip from "../ErrorFormTooltip";
import AlertCircle from "../icons/AlertCircle";
import InformationCircle from "../icons/InformationCircle";
import FormLabel from "../FormLabel";
import useErrorTooltip from "../ErrorFormTooltip/hooks/useErrorTooltip";
import { spaceAfterClasses } from "../common/tailwind";
const getDOMType = type => {
if (type === TYPE_OPTIONS.PASSPORTID) return TYPE_OPTIONS.TEXT;
return type;
};
export const FakeInput = ({
error,
disabled
}) => /*#__PURE__*/React.createElement("div", {
className: cx("orbit-input-field-fake-input", "h-form-box-normal text-form-element-large z-default", "absolute left-0 top-0", "duration-fast transition-all ease-in-out", "rounded-200 box-border w-full", "peer-focus:outline-blue-normal peer-focus:outline peer-focus:outline-2", error ? "shadow-form-element-error" : "shadow-form-element", disabled ? "bg-form-element-disabled-background" : ["bg-form-element-background", error ? "peer-hover:shadow-form-element-error-hover" : "peer-hover:shadow-form-element-hover"])
});
const Prefix = ({
children
}) => /*#__PURE__*/React.createElement("span", {
className: cx("text-form-element-prefix-foreground", "ps-300 pointer-events-none z-[3] flex h-full items-center justify-center", "[&>svg]:text-icon-tertiary-foreground", "[&_svg]:size-icon-medium", "[&_.orbit-button-primitive-icon]:text-icon-secondary-foreground")
}, children);
const Suffix = ({
disabled,
children
}) => /*#__PURE__*/React.createElement("div", {
className: cx("h-form-box-normal text-form-element-prefix-foreground", "z-[3] flex shrink-0 items-center justify-center", "[&_.orbit-button-primitive-icon]:text-icon-secondary-foreground", "[&_.orbit-service-logo]:pe-300 [&_.orbit-service-logo]:h-400", disabled && "pointer-events-none")
}, children);
const InputField = props => {
const {
disabled,
type = TYPE_OPTIONS.TEXT,
label,
inlineLabel,
dataTest,
required,
error,
name,
prefix,
onChange,
onFocus,
onBlur,
onSelect,
onMouseUp,
onMouseDown,
onKeyUp,
onKeyDown,
placeholder,
minValue = -Infinity,
maxValue = Infinity,
minLength,
maxLength,
suffix,
help,
value,
defaultValue,
tags,
tabIndex = 0,
readOnly,
list,
autoComplete,
ariaLabel,
ariaLabelledby,
ariaAutocomplete,
ariaActiveDescendant,
ariaHasPopup,
ariaExpanded,
ariaControls,
ariaDescribedby,
autoFocus,
spaceAfter,
id,
width = "100%",
inputMode,
insideInputGroup,
dataAttrs,
role,
ref
} = props;
const forID = useRandomId();
const inputId = id || forID;
const hasTooltip = Boolean(error || help);
const {
tooltipShown,
tooltipShownHover,
setTooltipShown,
setTooltipShownHover,
labelRef,
iconRef,
handleFocus
} = useErrorTooltip({
onFocus,
hasTooltip
});
const shown = tooltipShown || tooltipShownHover;
const fieldRef = React.useRef(null);
const InlineLabelElement = inlineLabel && (error || help || label) ? "label" : "div";
const tooltipId = shown ? `${inputId}-feedback` : undefined;
const ariaDescribedbyValue = insideInputGroup ? ariaDescribedby : [ariaDescribedby, tooltipId].filter(Boolean).join(" ") || undefined;
return /*#__PURE__*/React.createElement("div", {
className: cx("orbit-input-field-field font-base relative block flex-1 basis-full", spaceAfter && spaceAfterClasses[spaceAfter]),
ref: fieldRef,
style: {
width
},
onMouseEnter: () => disabled && inlineLabel ? setTooltipShownHover(true) : undefined,
onMouseLeave: () => disabled && inlineLabel ? setTooltipShownHover(false) : undefined
}, !inlineLabel && label && /*#__PURE__*/React.createElement("label", {
className: "block",
ref: fieldRef,
htmlFor: inputId
}, /*#__PURE__*/React.createElement(FormLabel, {
required: required,
error: !!error,
help: !!help,
labelRef: labelRef,
iconRef: iconRef,
onMouseEnter: () => hasTooltip ? setTooltipShownHover(true) : undefined,
onMouseLeave: () => hasTooltip ? setTooltipShownHover(false) : undefined
}, label)), /*#__PURE__*/React.createElement("div", {
className: cx("orbit-input-field-input-container", "flex flex-row items-center justify-between", "relative box-border", "h-form-box-normal text-form-element-large", disabled ? "cursor-not-allowed" : "cursor-text", disabled || readOnly ? "text-form-element-disabled-foreground" : "text-form-element-filled-foreground")
}, /*#__PURE__*/React.createElement(InlineLabelElement, {
className: "relative z-[2] flex items-center",
ref: fieldRef,
htmlFor: InlineLabelElement === "label" ? inputId : undefined
}, inlineLabel && !tags && (error || help) ? /*#__PURE__*/React.createElement(Prefix, null, help && !error && /*#__PURE__*/React.createElement("span", {
className: "flex",
ref: iconRef
}, /*#__PURE__*/React.createElement(InformationCircle, {
color: "info",
size: "small",
ariaHidden: true
})), error && /*#__PURE__*/React.createElement("span", {
className: "flex",
ref: iconRef
}, /*#__PURE__*/React.createElement(AlertCircle, {
color: "critical",
size: "small",
ariaHidden: true
}))) : prefix && /*#__PURE__*/React.createElement(Prefix, null, prefix), label && inlineLabel && /*#__PURE__*/React.createElement("span", {
className: cx("flex items-center justify-center", "pointer-events-none h-full", "[&>.orbit-form-label]:mb-0", "[&>.orbit-form-label]:text-form-element-large [&>.orbit-form-label]:whitespace-nowrap [&>.orbit-form-label]:leading-normal", "[&>.orbit-form-label]:z-[3]", !tags && (error || help) ? "ps-100" : "ps-300")
}, /*#__PURE__*/React.createElement(FormLabel, {
required: required,
error: !!error,
help: !!help,
labelRef: labelRef,
inlineLabel: true
}, label))), tags && /*#__PURE__*/React.createElement(InputTags, null, tags), /*#__PURE__*/React.createElement("input", _extends({
className: cx("orbit-input-field-input", "font-base p-form-element-normal-padding", "z-[2] appearance-none border-none shadow-none", "box-border size-full min-w-0", "bg-transparent", "flex-1 basis-1/5", "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", "[&::-webkit-inner-spin-button]:m-0 [&::-webkit-outer-spin-button]:m-0", "[&[data-com-onepassword-filled]]:!bg-inherit", "peer", insideInputGroup ? "focus:outline-blue-normal focus:rounded-200 duration-fast transition-all ease-in-out focus:outline-2 focus:-outline-offset-1" : "focus:outline-none", "[&::placeholder]:opacity-100", "[&::placeholder]:text-form-element-foreground", "[&::-ms-input-placeholder]:text-form-element-foreground", "[&::-ms-clear]:hidden [&::-ms-reveal]:hidden", disabled && "cursor-not-allowed", (disabled || readOnly) && "[-webkit-text-fill-color:theme(textColor.form-element-disabled-foreground)]", inlineLabel ? "font-medium" : "font-normal", type === TYPE_OPTIONS.PASSPORTID && "tabular-nums tracking-[2px]"),
"data-test": dataTest,
required: required,
"data-state": insideInputGroup && typeof error === "undefined" ? undefined : getFieldDataState(!!error),
onChange: onChange,
onFocus: handleFocus,
onBlur: onBlur,
onKeyUp: onKeyUp,
onKeyDown: onKeyDown,
onSelect: onSelect,
onMouseUp: onMouseUp,
onMouseDown: onMouseDown,
name: name,
type: getDOMType(type),
value: value,
defaultValue: defaultValue,
placeholder: placeholder,
disabled: disabled,
min: type === TYPE_OPTIONS.NUMBER ? minValue : undefined,
max: type === TYPE_OPTIONS.NUMBER ? maxValue : undefined,
minLength: minLength,
maxLength: maxLength,
ref: ref,
tabIndex: tabIndex !== undefined ? Number(tabIndex) : undefined,
list: list,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
"aria-describedby": ariaDescribedbyValue,
"aria-invalid": error ? true : undefined,
"aria-autocomplete": ariaAutocomplete,
"aria-haspopup": ariaHasPopup,
"aria-expanded": ariaExpanded,
"aria-controls": ariaControls,
"aria-activedescendant": ariaActiveDescendant,
readOnly: readOnly,
autoCapitalize: "off",
autoCorrect: "off",
role: role,
autoComplete: autoComplete
// eslint-disable-next-line jsx-a11y/no-autofocus
,
autoFocus: autoFocus,
id: inputId,
inputMode: inputMode
}, dataAttrs)), suffix && /*#__PURE__*/React.createElement(Suffix, {
disabled: disabled
}, suffix), /*#__PURE__*/React.createElement(FakeInput, {
error: error,
disabled: disabled
})), !insideInputGroup && hasTooltip && /*#__PURE__*/React.createElement(ErrorFormTooltip, {
help: help,
id: tooltipId,
shown: shown,
onShown: setTooltipShown,
error: error,
inlineLabel: inlineLabel,
referenceElement: inlineLabel && !tags ? iconRef : fieldRef
}));
};
export default InputField;