@progress/kendo-react-form
Version:
React Form is a small and fast package for form state management with zero dependencies. KendoReact Form package
93 lines (92 loc) • 2.64 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as e from "react";
import { useUnstyled as L, classNames as g, uForm as h } from "@progress/kendo-react-common";
import { FormContext as M } from "./FormContext.mjs";
import { innerWidth as O, calculateColumns as T, generateColumnClass as U, calculateGutters as W, generateGuttersStyling as E } from "./utils.mjs";
const c = {
rows: "0px",
cols: "32px"
}, A = e.forwardRef((t, F) => {
const v = {
size: void 0,
...t
}, s = e.useRef(null), y = e.useRef(null);
e.useImperativeHandle(y, () => ({ element: s.current, props: v })), e.useImperativeHandle(F, () => y.current);
const n = e.useContext(M), { className: w, style: H, horizontal: m, size: p, cols: o, gutters: r = c, ...N } = v, C = L(), d = C && C.uForm, [z, R] = e.useState(void 0), [x, f] = e.useState(void 0), S = e.useMemo(() => {
if (m)
return "horizontal";
if (m === !1)
return "vertical";
}, [m]), G = e.useMemo(
() => g(
h.form({
c: d,
size: p,
orientation: S
}),
w
),
[w, d, S, p]
);
return e.useEffect(() => {
if (!o && !r) {
R(void 0);
return;
}
if (!r) {
f(void 0);
return;
}
const b = () => {
let a = 0;
if (s.current ? a = O(s.current) : typeof window != "undefined" && (a = window.innerWidth), o) {
const u = T(o, a);
R(U(u));
}
if (r) {
const u = W(r, a);
f(u ? { gap: E(u, c) } : { gap: E(c, c) });
}
};
b();
let i;
const l = s.current;
return l && typeof window != "undefined" && "ResizeObserver" in window && (i = new ResizeObserver(b), i.observe(l)), () => {
i && l && i.unobserve(l);
};
}, [o, r]), /* @__PURE__ */ e.createElement(
"form",
{
ref: s,
...N,
id: t.id || (n ? n.id : void 0),
style: t.style,
className: G,
onSubmit: n ? n.onSubmit : void 0
},
o ? /* @__PURE__ */ e.createElement(
"div",
{
className: g(
h.formLayout({
c: d
}),
z
),
style: x
},
t.children
) : t.children
);
});
A.displayName = "KendoReactFormElement";
export {
c as DEFAULT_FORM_GUTTERS,
A as FormElement
};