@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.
107 lines (106 loc) • 4.16 kB
JavaScript
;
"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 _ErrorFormTooltip = _interopRequireDefault(require("../ErrorFormTooltip"));
var _FormLabel = _interopRequireDefault(require("../FormLabel"));
var _consts = require("./consts");
var _useErrorTooltip = _interopRequireDefault(require("../ErrorFormTooltip/hooks/useErrorTooltip"));
var _getFieldDataState = _interopRequireDefault(require("../common/getFieldDataState"));
var _useRandomId = _interopRequireDefault(require("../hooks/useRandomId"));
var _tailwind = require("../common/tailwind");
const Textarea = /*#__PURE__*/React.forwardRef((props, ref) => {
const {
disabled,
resize = _consts.RESIZE_OPTIONS.VERTICAL,
dataTest,
id,
spaceAfter,
fullHeight,
defaultValue,
value,
label,
name,
error,
placeholder,
helpClosable = true,
maxLength,
onChange,
onFocus,
onBlur,
tabIndex,
help,
rows,
readOnly,
required,
dataAttrs
} = 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;
return /*#__PURE__*/React.createElement("label", {
className: (0, _clsx.default)("font-base relative flex w-full flex-col", fullHeight && "h-full flex-1", spaceAfter && (0, _tailwind.getSpaceAfterClasses)(spaceAfter)),
ref: labelRef
}, label && /*#__PURE__*/React.createElement(_FormLabel.default, {
filled: !!value,
error: !!error,
help: !!help,
required: required,
disabled: disabled,
iconRef: iconRef,
onMouseEnter: () => setTooltipShownHover(true),
onMouseLeave: () => setTooltipShownHover(false)
}, label), /*#__PURE__*/React.createElement("textarea", (0, _extends2.default)({
className: (0, _clsx.default)("w-full appearance-none", "font-base text-normal p-sm leading-normal", "rounded-normal relative box-border block overflow-auto", "min-h-form-box-normal", "duration-fast transition-shadow ease-in-out", "border border-transparent",
// TODO: remove when will be migrated from tmp-folder
resize === _consts.RESIZE_OPTIONS.VERTICAL ? "resize-y" : "resize-none", "text-normal p-sm leading-normal", error ? "shadow-form-element-error" : "shadow-form-element", disabled ? "cursor-not-allowed" : "cursor-text", fullHeight && "h-full flex-1", disabled || readOnly ? "bg-form-element-disabled-background" : ["bg-form-element-background", error ? "hover:shadow-form-element-error-hover" : "hover:bg-form-element-hover"], "[&::placeholder]:text-form-element-foreground"),
"data-state": (0, _getFieldDataState.default)(!!error),
"data-test": dataTest,
"aria-required": !!required,
id: inputId,
name: name,
value: value,
defaultValue: defaultValue,
disabled: disabled,
placeholder: String(placeholder),
maxLength: maxLength,
onChange: onChange,
rows: rows,
onFocus: handleFocus,
onBlur: onBlur,
tabIndex: tabIndex ? Number(tabIndex) : undefined,
readOnly: readOnly,
ref: ref,
"aria-describedby": shown ? `${inputId}-feedback` : undefined,
"aria-invalid": error ? true : undefined
}, dataAttrs)), hasTooltip && /*#__PURE__*/React.createElement(_ErrorFormTooltip.default, {
id: `${inputId}-feedback`,
help: help,
helpClosable: helpClosable,
error: error,
onShown: setTooltipShown,
shown: shown,
referenceElement: labelRef
}));
});
Textarea.displayName = "Textarea";
var _default = Textarea;
exports.default = _default;