@progress/kendo-react-form 6.1.1 → 7.0.0-develop.1

package/index.mjs

@@ -0,0 +1,409 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as n from "react";
+import * as F from "prop-types";
+import { guid as _, clone as C, getter as U, setter as k, validatePackage as B, cloneObject as E, classNames as b, kendoThemeMaps as T } from "@progress/kendo-react-common";
+const y = n.createContext(null), S = (l) => {
+  const { name: e, component: t, validator: i, children: o, onChange: r, ...d } = l, s = n.useContext(y), a = s ? s.id : "";
+  n.useEffect(
+    () => s ? s.registerField(e, i) : void 0,
+    [e, a, i]
+  );
+  const c = n.useCallback(
+    (u) => {
+      const g = u && (u.value !== void 0 ? u.value : u.target ? u.target.value : u.target);
+      s.onChange(e, { value: g }), r && r.call(void 0, u);
+    },
+    [e, a, r]
+  ), m = n.useCallback(
+    (u) => s.onChange(e, { value: u.target.value }),
+    [e, a]
+  ), f = n.useCallback(
+    () => s.onBlur(e),
+    [e, a]
+  ), v = n.useCallback(
+    () => s.onFocus(e),
+    [e, a]
+  );
+  if (!s)
+    return null;
+  const p = s.valueGetter(e);
+  return typeof t == "string" ? n.createElement(t, {
+    onChange: m,
+    onBlur: f,
+    onFocus: v,
+    value: p,
+    children: o,
+    ...d
+  }) : n.createElement(
+    t,
+    {
+      children: o,
+      ...d,
+      // input
+      onChange: c,
+      onBlur: f,
+      onFocus: v,
+      value: p,
+      // meta
+      validationMessage: s.errors[e],
+      touched: s.touched[e],
+      modified: s.modified[e],
+      visited: s.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: !(s.errors[e] && s.touched[e]),
+      name: e
+    }
+  );
+};
+S.displayName = "KendoReactField";
+const M = {
+  name: "@progress/kendo-react-form",
+  productName: "KendoReact",
+  productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
+  publishDate: 1700493758,
+  version: "",
+  licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
+}, I = 0;
+class A extends n.Component {
+  /**
+   * @hidden
+   */
+  constructor(e) {
+    super(e), this._id = _(), this._touched = {}, this._visited = {}, this._modified = {}, this._validatorsByField = {}, this._values = {}, this._fields = {}, this._unmounted = !1, this._submitted = !1, this.isValid = () => this.isFormValid(this.errors), this.accumulatedForceUpdate = () => {
+      this._accumulatorTimeout && clearTimeout(this._accumulatorTimeout), this._accumulatorTimeout = window.setTimeout(
+        () => {
+          this._accumulatorTimeout = void 0, this.forceUpdate();
+        },
+        I
+      );
+    }, this.resetForm = () => {
+      this.values = C(this.props.initialValues), this._id = _(), this._touched = {}, this._visited = {}, this._modified = {}, this._validatorsByField = {}, this._fields = {}, this._submitted = !1, this.forceUpdate();
+    }, this.onReset = () => this.resetForm(), this.addField = (t) => {
+      this._fields[t] = !0;
+    }, this.onSubmit = (t) => {
+      const i = {}, o = this.fields;
+      t && (typeof t.preventDefault == "function" && t.preventDefault(), typeof t.stopPropagation == "function" && t.stopPropagation()), o.forEach((a) => {
+        i[a] = !0;
+      }), this.visited = { ...i }, this.touched = { ...i };
+      const r = this.values, d = this.isFormValid(this.errors), s = this.isFormModified(this.modified, o);
+      this.props.onSubmitClick && this.props.onSubmitClick.call(void 0, {
+        values: r,
+        isValid: d,
+        isModified: s,
+        event: t
+      }), d && (this.props.ignoreModified || s) && this.props.onSubmit && (this._submitted = !0, this.props.onSubmit.call(void 0, r, t)), this.forceUpdate();
+    }, this.onChange = (t, i) => {
+      const { value: o } = i;
+      this.addField(t), this.modified[t] || (this.modified = { ...this.modified, [t]: !0 }), this.valueSetter(t, o), this.forceUpdate();
+    }, this.onFocus = (t, i) => {
+      this.visited[t] || (this.visited = { ...this.visited, [t]: !0 }, i || this.forceUpdate());
+    }, this.onBlur = (t, i) => {
+      this.touched[t] || (this.onFocus(t, i), this.touched = { ...this.touched, [t]: !0 }, i || this.forceUpdate());
+    }, this.onFieldRegister = (t, i) => {
+      this.addField(t);
+      const o = this.validatorsByField[t] || [], r = o.length;
+      return this.validatorsByField = { ...this.validatorsByField, [t]: [...o, i] }, this.accumulatedForceUpdate(), () => {
+        if (this._unmounted)
+          return;
+        const d = [...this.validatorsByField[t] || []], s = !!d[r];
+        d[r] = void 0, this.validatorsByField = { ...this.validatorsByField, [t]: d }, s && this.accumulatedForceUpdate();
+      };
+    }, this.isFormValid = (t) => !Object.keys(t).some((i) => !!t[i]), this.isFormModified = (t, i) => i.some((o) => t[o]), this.isFormHasNotTouched = (t, i) => i.some((o) => !t[o]), this.isFormTouched = (t, i) => i.some((o) => t[o]), this.isFormVisited = (t, i) => i.some((o) => t[o]), this.valueGetter = (t) => U(t)(this.values), this.valueSetter = (t, i) => k(t)(this.values, i), this.onArrayAction = (t) => {
+      this.addField(t), this.modified[t] || (this.modified = { ...this.modified, [t]: !0 }), this.onBlur(t, !0);
+    }, this.onInsert = (t, i) => {
+      this.onArrayAction(t);
+      const o = [...this.valueGetter(t) || []];
+      o.splice(i.index, 0, i.value), this.valueSetter(t, o), this.forceUpdate();
+    }, this.onUnshift = (t, i) => {
+      this.onInsert(t, {
+        value: i.value,
+        index: 0
+      });
+    }, this.onPush = (t, i) => {
+      this.onArrayAction(t);
+      const o = [...this.valueGetter(t) || [], i.value];
+      this.valueSetter(t, o), this.forceUpdate();
+    }, this.onPop = (t) => {
+      this.onArrayAction(t);
+      const i = [...this.valueGetter(t) || []], o = i.pop();
+      return this.valueSetter(t, i), this.forceUpdate(), o;
+    }, this.onRemove = (t, i) => {
+      this.onArrayAction(t);
+      const o = [...this.valueGetter(t) || []], r = o.splice(i.index, 1);
+      return this.valueSetter(t, o), this.forceUpdate(), r;
+    }, this.onReplace = (t, i) => {
+      this.onArrayAction(t);
+      const o = [...this.valueGetter(t) || []];
+      o.splice(i.index, 1, i.value), this.valueSetter(t, o), this.forceUpdate();
+    }, this.onMove = (t, i) => {
+      this.onArrayAction(t);
+      const o = [...this.valueGetter(t) || []], r = o[i.prevIndex];
+      o.splice(i.prevIndex, 1), o.splice(i.nextIndex, 0, r), this.valueSetter(t, o), this.forceUpdate();
+    }, B(M), this.values = C(e.initialValues);
+  }
+  /**
+   * @hidden
+   */
+  get touched() {
+    return this._touched;
+  }
+  /**
+   * @hidden
+   */
+  set touched(e) {
+    this._touched = e;
+  }
+  /**
+   * @hidden
+   */
+  get visited() {
+    return this._visited;
+  }
+  /**
+   * @hidden
+   */
+  set visited(e) {
+    this._visited = e;
+  }
+  /**
+   * @hidden
+   */
+  get modified() {
+    return this._modified;
+  }
+  /**
+   * @hidden
+   */
+  set modified(e) {
+    this._modified = e;
+  }
+  /**
+   * @hidden
+   */
+  get validatorsByField() {
+    return this._validatorsByField;
+  }
+  /**
+   * @hidden
+   */
+  set validatorsByField(e) {
+    this._validatorsByField = e;
+  }
+  /**
+   * @hidden
+   */
+  get values() {
+    return this._values;
+  }
+  /**
+   * @hidden
+   */
+  set values(e) {
+    this._values = e;
+  }
+  /**
+   * @hidden
+   */
+  get fields() {
+    return Object.keys(this._fields);
+  }
+  /**
+   * @hidden
+   */
+  get formErrors() {
+    if (this.props.validator)
+      return this.props.validator(this.values, this.valueGetter);
+  }
+  /**
+   * @hidden
+   */
+  get errors() {
+    const e = {}, t = this.fields, i = this.validatorsByField;
+    return t.forEach((r) => {
+      if (e[r] = "", i[r]) {
+        const d = [];
+        i[r].forEach((s) => {
+          Array.isArray(s) ? d.push(...s) : d.push(s);
+        }), d.find((s) => {
+          if (s) {
+            const a = s(this.valueGetter(r), this.valueGetter, { name: r });
+            if (a)
+              return e[r] = a, !0;
+          }
+          return !1;
+        });
+      }
+    }), this.formErrors && E(this.formErrors, e), e;
+  }
+  /**
+   * @hidden
+   */
+  componentWillUnmount() {
+    this._unmounted = !0, this._accumulatorTimeout && clearTimeout(this._accumulatorTimeout);
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const { render: e } = this.props, t = this.touched, i = this.visited, o = this.modified, r = this.fields, d = this.errors, s = this.isFormValid(d), a = this.isFormModified(o, r), c = this.isFormTouched(t, r), m = this.isFormVisited(i, r), v = this.isFormHasNotTouched(t, r) && !s || s && (this.props.ignoreModified || a);
+    return /* @__PURE__ */ n.createElement(
+      y.Provider,
+      {
+        key: this._id,
+        value: {
+          id: this._id,
+          valueGetter: this.valueGetter,
+          errors: d,
+          modified: o,
+          touched: t,
+          visited: i,
+          registerField: this.onFieldRegister,
+          onSubmit: this.onSubmit,
+          onChange: this.onChange,
+          onFocus: this.onFocus,
+          onBlur: this.onBlur,
+          onUnshift: this.onUnshift,
+          onPush: this.onPush,
+          onInsert: this.onInsert,
+          onPop: this.onPop,
+          onRemove: this.onRemove,
+          onReplace: this.onReplace,
+          onMove: this.onMove
+        }
+      },
+      e({
+        valid: s,
+        modified: a,
+        touched: c,
+        visited: m,
+        submitted: this._submitted,
+        valueGetter: this.valueGetter,
+        errors: d,
+        allowSubmit: v,
+        onChange: this.onChange,
+        onSubmit: this.onSubmit,
+        onFormReset: this.resetForm
+      })
+    );
+  }
+}
+A.displayName = "KendoReactForm";
+A.propTypes = {
+  initialValues: F.any,
+  onSubmit: F.func,
+  onSubmitClick: F.func,
+  render: F.func.isRequired
+};
+const P = (l) => {
+  const { name: e, component: t, validator: i, type: o, children: r, ...d } = l, s = n.useContext(y), a = s ? s.id : "";
+  n.useEffect(
+    () => s ? s.registerField(e, i) : void 0,
+    [e, a, i]
+  );
+  const c = n.useCallback(
+    (h) => s.onUnshift(e, h),
+    [e, a]
+  ), m = n.useCallback(
+    (h) => s.onPush(e, h),
+    [e, a]
+  ), f = n.useCallback(
+    (h) => s.onInsert(e, h),
+    [e, a]
+  ), v = n.useCallback(
+    () => s.onPop(e),
+    [e, a]
+  ), p = n.useCallback(
+    (h) => s.onRemove(e, h),
+    [e, a]
+  ), u = n.useCallback(
+    (h) => s.onReplace(e, h),
+    [e, a]
+  ), g = n.useCallback(
+    (h) => s.onMove(e, h),
+    [e, a]
+  );
+  if (!s)
+    return null;
+  const R = s.valueGetter(e);
+  return n.createElement(
+    t,
+    {
+      // input
+      value: R,
+      // meta
+      validationMessage: s.errors[e],
+      touched: s.touched[e],
+      modified: s.modified[e],
+      visited: s.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: !(s.errors[e] && s.touched[e]),
+      onUnshift: c,
+      onPush: m,
+      onInsert: f,
+      onPop: v,
+      onRemove: p,
+      onReplace: u,
+      onMove: g,
+      children: r,
+      name: e,
+      ...d
+    }
+  );
+};
+P.displayName = "KendoReactFieldArray";
+const x = (l) => {
+  const e = b(
+    {
+      "k-form-field": !0,
+      "k-rtl": l.dir === "rtl"
+    },
+    l.className
+  );
+  return /* @__PURE__ */ n.createElement("div", { className: e, style: l.style }, l.children);
+};
+x.displayName = "KendoReactFieldWrapper";
+const V = n.forwardRef((l, e) => {
+  const t = {
+    size: "medium",
+    ...l
+  }, i = n.useRef(null), o = n.useRef(null);
+  n.useImperativeHandle(o, () => ({ element: i.current, props: t })), n.useImperativeHandle(e, () => o.current);
+  const r = n.useContext(y), { className: d, style: s, horizontal: a, size: c, ...m } = t, f = b(
+    {
+      "k-form": !0,
+      [`k-form-${T.sizeMap[c] || c}`]: c,
+      "k-form-horizontal": a === !0
+    },
+    d
+  );
+  return /* @__PURE__ */ n.createElement(
+    "form",
+    {
+      ref: i,
+      ...m,
+      style: l.style,
+      className: f,
+      onSubmit: r ? r.onSubmit : void 0
+    },
+    l.children
+  );
+});
+V.displayName = "KendoReactFormElement";
+export {
+  S as Field,
+  P as FieldArray,
+  x as FieldWrapper,
+  A as Form,
+  V as FormElement
+};

package/{dist/npm/interfaces → interfaces}/FieldArrayProps.d.ts

@@ -1,4 +1,7 @@
-/// <reference types="react" />
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
 import { FieldValidatorType } from './FieldValidator';
 /**
  * Represents the props of the FieldArray component that is used inside the KendoReact Form component.

package/{dist/npm/interfaces → interfaces}/FieldArrayRenderProps.d.ts

@@ -1,3 +1,7 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
 /**
  * Represents the props that are passed to the component which is rendered by FieldArray.
  */

package/{dist/npm/interfaces → interfaces}/FieldProps.d.ts

@@ -1,4 +1,7 @@
-/// <reference types="react" />
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
 import { FieldValidatorType } from './FieldValidator';
 /**
  * Represents the props of the Field component that is used inside the KendoReact Form component.

package/{dist/es/interfaces → interfaces}/FieldRenderProps.d.ts

@@ -1,3 +1,7 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
 /**
  * Represents the props that are passed to the component which is rendered by Field.
  */

package/{dist/es/interfaces → interfaces}/FieldValidator.d.ts

@@ -1,3 +1,7 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
 /**
  * The validator function for the Field component. The function arguments are:
  *
@@ -9,6 +13,6 @@
  *
  * Returns `string` to signify error or `undefined` to signify validation success.
  */
-export declare type FieldValidatorType = (value: any, valueGetter: (name: string) => any, fieldProps: {
+export type FieldValidatorType = (value: any, valueGetter: (name: string) => any, fieldProps: {
     name: string;
 }) => string | undefined;

package/{dist/es/interfaces → interfaces}/FormProps.d.ts

@@ -1,4 +1,7 @@
-/// <reference types="react" />
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
 import { FormRenderProps } from './FormRenderProps';
 import { FormValidatorType } from './FormValidator';
 import { FormSubmitClickEvent } from './FormSubmitClickEvent';

package/{dist/npm/interfaces → interfaces}/FormRenderProps.d.ts

@@ -1,4 +1,7 @@
-/// <reference types="react" />
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
 import { KeyValue } from './KeyValue';
 /**
  * Represents the props that are passed to the `render` option component of the Form.

package/{dist/npm/interfaces → interfaces}/FormSubmitClickEvent.d.ts

@@ -1,4 +1,7 @@
-/// <reference types="react" />
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
 /**
  * The FormSubmitClick event.
  */

package/interfaces/FormValidator.d.ts

@@ -0,0 +1,14 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+import { KeyValue } from './KeyValue';
+/**
+ * The validator function for the Form component.
+ *
+ * * values - The current values of the form.
+ * * valueGetter - Function which can be used to get field value. Supports field paths.
+ *
+ * Returns key-value pair with errors if such are present. The key is the field path, where the value is the error message.
+ */
+export type FormValidatorType = (values: any, valueGetter: (name: string) => any) => KeyValue<string> | undefined;

package/interfaces/KeyValue.d.ts

@@ -0,0 +1,10 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ *
+ */
+export interface KeyValue<ValueType> {
+    [name: string]: ValueType;
+}

package/package-metadata.d.ts

@@ -0,0 +1,9 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PackageMetadata } from '@progress/kendo-licensing';
+/**
+ * @hidden
+ */
+export declare const packageMetadata: PackageMetadata;

package/package.json

@@ -1,20 +1,28 @@
 {
   "name": "@progress/kendo-react-form",
+  "version": "7.0.0-develop.1",
   "description": "React Form is a small and fast package for form state management with zero dependencies. KendoReact Form package",
-  "version": "6.1.1",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/telerik/kendo-react.git"
+  "author": "Progress",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "homepage": "https://www.telerik.com/kendo-react-ui",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  },
+  "sideEffects": false,
+  "peerDependencies": {
+    "@progress/kendo-licensing": "^1.3.0",
+    "@progress/kendo-react-common": "7.0.0-develop.1",
+    "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
   },
-  "main": "dist/npm/main.js",
-  "types": "dist/npm/main.d.ts",
-  "module": "dist/es/main.js",
-  "jsnext:main": "dist/es/main.js",
-  "scripts": {
-    "test": "cd ../../ && npm run test -- --testPathPattern=/packages/form/.*",
-    "build-package": "gulp build-package"
+  "dependencies": {
+    "prop-types": "^15.6.0"
   },
-  "homepage": "https://www.telerik.com/kendo-react-ui",
   "keywords": [
     "Kendo UI",
     "React",
@@ -27,39 +35,15 @@
     "React component",
     "Telerik"
   ],
-  "peerDependencies": {
-    "@progress/kendo-licensing": "^1.3.0",
-    "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
-  },
-  "dependencies": {
-    "@progress/kendo-react-common": "6.1.1",
-    "prop-types": "^15.6.0"
-  },
   "@progress": {
     "friendlyName": "Form",
     "framework": "KendoReact"
   },
-  "author": "Progress",
-  "license": "SEE LICENSE IN LICENSE.md",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/telerik/kendo-react.git"
+  },
   "publishConfig": {
     "access": "public"
-  },
-  "devDependencies": {
-    "@progress/kendo-data-query": "^1.0.0",
-    "@progress/kendo-date-math": "^1.4.1",
-    "@progress/kendo-drawing": "^1.17.2",
-    "@progress/kendo-licensing": "^1.3.0",
-    "@progress/kendo-react-buttons": "6.1.1",
-    "@progress/kendo-react-data-tools": "6.1.1",
-    "@progress/kendo-react-dateinputs": "6.1.1",
-    "@progress/kendo-react-dropdowns": "6.1.1",
-    "@progress/kendo-react-grid": "6.1.1",
-    "@progress/kendo-react-inputs": "6.1.1",
-    "@progress/kendo-react-intl": "6.1.1",
-    "@progress/kendo-react-labels": "6.1.1",
-    "@progress/kendo-react-layout": "6.1.1",
-    "@progress/kendo-react-upload": "6.1.1"
-  },
-  "sideEffects": false
-}
+  }
+}

package/about.md

@@ -1,3 +0,0 @@
-<a href="https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-form&utm_content=banner" target="_blank">
-<img src="https://www.telerik.com/kendo-react-ui/components/npm-banner.svg" alt="KendoReact NPM Banner">
-</a>