@kiwicom/orbit-components/lib/InputField/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 = 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
}) => /*#__PURE__*/React.createElement("div", {
  className: (0, _clsx.default)("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"])
});
exports.FakeInput = FakeInput;
const Prefix = ({
  children
}) => /*#__PURE__*/React.createElement("span", {
  className: (0, _clsx.default)("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: (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-300 [&_.orbit-service-logo]:h-400", disabled && "pointer-events-none")
}, children);
const InputField = props => {
  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,
    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 = (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 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: (0, _clsx.default)("orbit-input-field-field font-base relative block flex-1 basis-full", spaceAfter && _tailwind.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.default, {
    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: (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-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.default, {
    color: "info",
    size: "small",
    ariaHidden: true
  })), error && /*#__PURE__*/React.createElement("span", {
    className: "flex",
    ref: iconRef
  }, /*#__PURE__*/React.createElement(_AlertCircle.default, {
    color: "critical",
    size: "small",
    ariaHidden: true
  }))) : prefix && /*#__PURE__*/React.createElement(Prefix, null, prefix), label && inlineLabel && /*#__PURE__*/React.createElement("span", {
    className: (0, _clsx.default)("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.default, {
    required: required,
    error: !!error,
    help: !!help,
    labelRef: labelRef,
    inlineLabel: true
  }, 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 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 === _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: type === _consts.TYPE_OPTIONS.NUMBER ? minValue : undefined,
    max: type === _consts.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.default, {
    help: help,
    id: tooltipId,
    shown: shown,
    onShown: setTooltipShown,
    error: error,
    inlineLabel: inlineLabel,
    referenceElement: inlineLabel && !tags ? iconRef : fieldRef
  }));
};
var _default = exports.default = InputField;