@progress/kendo-react-inputs/input/Input.mjs

React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import * as r from "react";
import a from "prop-types";
import { applyDefaultProps as J, useUnstyled as Q, useId as W, classNames as X, uInput as Y, createPropsContext as Z } from "@progress/kendo-react-common";
import { FloatingLabel as _ } from "@progress/kendo-react-labels";
const C = r.forwardRef((I, L) => {
  const M = r.useContext($).call(void 0, I), [, P] = r.useReducer((t) => t, !0), n = J(M, ee), {
    className: x,
    label: o,
    labelClassName: E,
    id: N,
    validationMessage: p,
    defaultValue: R,
    valid: f,
    unstyled: V,
    // Removed to support direct use in Form Field component
    visited: ae,
    touched: re,
    modified: ne,
    autoFocus: k,
    ariaLabelledBy: w,
    ariaDescribedBy: F,
    validityStyles: y,
    style: m,
    ariaLabel: U,
    ...B
  } = n, D = Q(), u = V || D, O = u && u.uInput, S = W(), [T, q] = r.useState({
    value: R
  }), g = N || S, e = r.useRef(null), s = r.useRef(void 0), d = r.useRef(null), A = () => {
    e.current && e.current.focus();
  }, c = () => s.current !== void 0 ? s.current : n.value !== void 0 ? n.value : T.value, l = () => {
    const t = {
      badInput: e.current ? e.current.validity.badInput : !1,
      patternMismatch: e.current ? e.current.validity.patternMismatch : !1,
      rangeOverflow: e.current ? e.current.validity.rangeOverflow : !1,
      rangeUnderflow: e.current ? e.current.validity.rangeUnderflow : !1,
      stepMismatch: e.current ? e.current.validity.stepMismatch : !1,
      tooLong: e.current ? e.current.validity.tooLong : !1,
      typeMismatch: e.current ? e.current.validity.typeMismatch : !1,
      valueMissing: e.current ? e.current.validity.valueMissing : !1
    };
    return {
      ...t,
      customError: p !== void 0,
      valid: f !== void 0 ? f : e.current ? !G(t) : !0
    };
  };
  r.useImperativeHandle(d, () => ({
    element: e.current,
    props: n,
    get value() {
      return c();
    },
    name: n.name,
    get validity() {
      return l();
    },
    focus: A
  })), r.useImperativeHandle(L, () => d.current);
  const G = (t) => {
    let i = !1;
    for (const h in t)
      t.hasOwnProperty(h) && (i = i || !!t[h]);
    return i;
  }, v = !y || l().valid, H = X(
    x,
    Y.input({
      c: O,
      invalid: !v,
      disabled: n.disabled
    })
  ), K = () => {
    e.current && e.current.setCustomValidity && (l().valid || !y ? e.current.classList.remove("k-invalid") : e.current.classList.add("k-invalid"), e.current.setCustomValidity(l().valid ? "" : p || ""));
  }, j = (t) => {
    q({
      value: t.target.value
    }), s.current = t.target.value, n.onChange && n.onChange.call(void 0, {
      syntheticEvent: t,
      nativeEvent: t.nativeEvent,
      value: t.target.value,
      target: d.current
    }), s.current = void 0;
  }, z = (t) => {
    if (t.animationName === "autoFillStart") {
      const i = t.target.parentNode;
      i && i.classList.contains("k-empty") && i.classList.remove("k-empty");
    }
  };
  r.useEffect(() => {
    P();
  }, []), r.useEffect(() => {
    K();
  });
  const b = /* @__PURE__ */ r.createElement(
    "input",
    {
      "aria-labelledby": w,
      "aria-describedby": F,
      "aria-disabled": n.disabled || void 0,
      "aria-invalid": !v || void 0,
      "aria-label": U || void 0,
      ...B,
      style: o ? void 0 : m,
      value: c(),
      id: g,
      autoFocus: k,
      className: H,
      onChange: j,
      onAnimationStart: z,
      ref: e
    }
  );
  return o ? /* @__PURE__ */ r.createElement(
    _,
    {
      label: o,
      labelClassName: E,
      editorId: g,
      editorValue: String(c()),
      editorValid: v,
      editorDisabled: n.disabled,
      editorPlaceholder: n.placeholder,
      children: b,
      style: m,
      dir: n.dir,
      unstyled: u
    }
  ) : b;
}), $ = Z(), ee = {
  defaultValue: "",
  required: !1,
  validityStyles: !0,
  autoFocus: !1
};
C.displayName = "KendoReactInput";
C.propTypes = {
  label: a.node,
  labelClassName: a.string,
  validationMessage: a.string,
  required: a.bool,
  validate: a.bool,
  id: a.string,
  ariaLabelledBy: a.string,
  ariaDescribedBy: a.string,
  ariaLabel: a.string,
  autoFocus: a.bool,
  value: a.oneOfType([a.string, a.number, a.array])
};
export {
  C as Input,
  $ as InputPropsContext
};