@progress/kendo-react-form/Field.mjs

React Form is a small and fast package for form state management with zero dependencies. KendoReact Form 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 t from "react";
import { FormContext as v } from "./FormContext.mjs";
const p = (m) => {
  const { name: e, component: r, validator: s, children: l, onChange: i, ...u } = m, o = t.useContext(v), a = o ? o.id : "";
  t.useEffect(() => o ? o.registerField(e, s) : void 0, [e, a, s]);
  const f = t.useCallback(
    (n) => {
      const F = n && (n.value !== void 0 ? n.value : n.target ? n.target.value : n.target);
      o.onChange(e, { value: F }), i && i.call(void 0, n);
    },
    [e, a, i]
  ), C = t.useCallback(
    (n) => o.onChange(e, { value: n.target.value }),
    [e, a]
  ), c = t.useCallback(() => o.onBlur(e), [e, a]), d = t.useCallback(() => o.onFocus(e), [e, a]);
  if (!o)
    return null;
  const g = o.valueGetter(e);
  if (typeof r == "string")
    return t.createElement(r, {
      onChange: C,
      onBlur: c,
      onFocus: d,
      value: g,
      children: l,
      ...u
    });
  const h = {
    children: l,
    ...u,
    // input
    onChange: f,
    onBlur: c,
    onFocus: d,
    value: g,
    // meta
    validationMessage: o.errors[e],
    touched: o.touched[e],
    modified: o.modified[e],
    visited: o.visited[e],
    // Our `valid` implementation requires double submit to show html5 validation errors,
    // however it's NOT recommended to show html5 validation errors at all as:
    // - There is no standard way to change validation look and feel with CSS.
    // - Look different in each browser / OS
    // - You can have a page in one language but an error message displayed in another language (not localizable)
    valid: !(o.errors[e] && o.touched[e]),
    name: e
  };
  return l || delete h.children, t.createElement(r, h);
};
p.displayName = "KendoReactField";
export {
  p as Field
};