@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.65 kB
JavaScript
"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 = exports.FakeInput = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _consts = require("./consts");
var _InputTags = _interopRequireDefault(require("./InputTags"));
var _getFieldDataState = _interopRequireDefault(require("../common/getFieldDataState"));
var _useRandomId = _interopRequireDefault(require("../hooks/useRandomId"));
var _ErrorFormTooltip = _interopRequireDefault(require("../ErrorFormTooltip"));
var _AlertCircle = _interopRequireDefault(require("../icons/AlertCircle"));
var _InformationCircle = _interopRequireDefault(require("../icons/InformationCircle"));
var _FormLabel = _interopRequireDefault(require("../FormLabel"));
var _useErrorTooltip = _interopRequireDefault(require("../ErrorFormTooltip/hooks/useErrorTooltip"));
var _tailwind = require("../common/tailwind");
const getDOMType = type => {
if (type === _consts.TYPE_OPTIONS.PASSPORTID) return _consts.TYPE_OPTIONS.TEXT;
return type;
};
const FakeInput = ({
error,
disabled,
readOnly
}) => /*#__PURE__*/React.createElement("div", {
className: (0, _clsx.default)("orbit-input-field-fake-input", "h-form-box-normal text-form-element-normal-font-size z-[1]", "absolute left-0 top-0", "duration-fast transition-all ease-in-out", "rounded-large tb:rounded-normal 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 || readOnly ? "bg-form-element-disabled-background" : ["bg-transparent", error ? "peer-hover:shadow-form-element-error-hover" : "peer-hover:shadow-form-element-hover"])
});
exports.FakeInput = FakeInput;
const Prefix = ({
children
}) => /*#__PURE__*/React.createElement("div", {
className: (0, _clsx.default)("text-form-element-prefix-foreground", "ps-sm pointer-events-none z-[3] flex h-full items-center justify-center", "[&>svg]:text-icon-tertiary-foreground", "[&_*_svg]:w-icon-medium [&>svg]:w-icon-medium", "[&_*_svg]:h-icon-medium [&>svg]:h-icon-medium", "[&_.orbit-button-primitive-icon]:text-icon-secondary-foreground")
}, children);
const Suffix = ({
disabled,
children
}) => /*#__PURE__*/React.createElement("div", {
className: (0, _clsx.default)("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-sm [&_.orbit-service-logo]:h-md", disabled && "pointer-events-none")
}, children);
const InputField = /*#__PURE__*/React.forwardRef((props, ref) => {
const {
disabled,
type = _consts.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,
helpClosable = true,
value,
defaultValue,
tags,
tabIndex = 0,
readOnly,
list,
autoComplete,
ariaAutocomplete,
ariaActiveDescendant,
ariaHasPopup,
ariaExpanded,
ariaControls,
autoFocus,
spaceAfter,
id,
width = "100%",
inputMode,
insideInputGroup,
dataAttrs,
role
} = props;
const forID = (0, _useRandomId.default)();
const inputId = id || forID;
const hasTooltip = Boolean(error || help);
const {
tooltipShown,
tooltipShownHover,
setTooltipShown,
setTooltipShownHover,
labelRef,
iconRef,
handleFocus
} = (0, _useErrorTooltip.default)({
onFocus,
hasTooltip
});
const shown = tooltipShown || tooltipShownHover;
const fieldRef = React.useRef(null);
const Component = label ? "label" : "div";
return /*#__PURE__*/React.createElement(Component, {
className: (0, _clsx.default)("orbit-input-field-field font-base relative block flex-1 basis-full", spaceAfter && _tailwind.spaceAfterClasses[spaceAfter]),
style: {
width
},
ref: fieldRef,
htmlFor: label ? inputId : undefined,
onMouseEnter: () => disabled && inlineLabel ? setTooltipShownHover(true) : undefined,
onMouseLeave: () => disabled && inlineLabel ? setTooltipShownHover(false) : undefined
}, label && !inlineLabel && /*#__PURE__*/React.createElement(_FormLabel.default, {
inlineLabel: inlineLabel,
filled: !!value,
required: required,
error: !!error,
help: !!help,
labelRef: labelRef,
iconRef: iconRef,
onMouseEnter: () => setTooltipShownHover(true),
onMouseLeave: () => setTooltipShownHover(false)
}, label), /*#__PURE__*/React.createElement("div", {
className: (0, _clsx.default)("orbit-input-field-input-container", "flex flex-row items-center justify-between", "relative box-border", "h-form-box-normal text-form-element-normal", disabled ? "cursor-not-allowed" : "cursor-text", disabled || readOnly ? "text-form-element-disabled-foreground" : "text-form-element-filled-foreground"),
ref: label ? null : labelRef
}, inlineLabel && !tags && (error || help) ? /*#__PURE__*/React.createElement(Prefix, null, help && !error && /*#__PURE__*/React.createElement("div", {
className: "flex",
ref: iconRef
}, /*#__PURE__*/React.createElement(_InformationCircle.default, {
color: "info",
size: "small"
})), error && /*#__PURE__*/React.createElement("div", {
className: "flex",
ref: iconRef
}, /*#__PURE__*/React.createElement(_AlertCircle.default, {
color: "critical",
size: "small"
}))) : prefix && /*#__PURE__*/React.createElement(Prefix, null, prefix), label && inlineLabel && /*#__PURE__*/React.createElement("div", {
className: (0, _clsx.default)("flex items-center justify-center", "pointer-events-none h-full", "[&>.orbit-form-label]:mb-0", "[&>.orbit-form-label]:text-form-box-normal [&>.orbit-form-label]:whitespace-nowrap [&>.orbit-form-label]:leading-normal", "[&>.orbit-form-label]:z-[3]", !tags && (error || help) ? "ps-xxs" : "ps-sm"),
ref: labelRef
}, /*#__PURE__*/React.createElement(_FormLabel.default, {
filled: !!value,
required: required,
error: !!error,
help: !!help,
inlineLabel: inlineLabel
}, label)), tags && /*#__PURE__*/React.createElement(_InputTags.default, null, tags), /*#__PURE__*/React.createElement("input", (0, _extends2.default)({
className: (0, _clsx.default)("orbit-input-field-input", "font-base p-form-element-normal-padding", "z-[2] appearance-none border-none shadow-none", "box-border h-full w-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 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 === _consts.TYPE_OPTIONS.PASSPORTID && "tabular-nums tracking-[2px]"),
"data-test": dataTest,
required: required,
"data-state": insideInputGroup && typeof error === "undefined" ? undefined : (0, _getFieldDataState.default)(!!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: minValue,
max: maxValue,
minLength: minLength,
maxLength: maxLength,
ref: ref,
tabIndex: tabIndex !== undefined ? Number(tabIndex) : undefined,
list: list,
"aria-labelledby": !label ? inputId : undefined,
"aria-describedby": shown ? `${inputId}-feedback` : undefined,
"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,
readOnly: readOnly
})), !insideInputGroup && hasTooltip && /*#__PURE__*/React.createElement(_ErrorFormTooltip.default, {
help: help,
id: `${inputId}-feedback`,
shown: shown,
helpClosable: helpClosable,
onShown: setTooltipShown,
error: error,
inlineLabel: inlineLabel,
referenceElement: inlineLabel && !tags ? iconRef : fieldRef
}));
});
InputField.displayName = "InputField";
var _default = InputField;
exports.default = _default;