@companix/formkit 0.0.30 → 0.0.31

package/README.md

@@ -8,7 +8,7 @@
 const scheme = [
   Label('Имя')(TextForm('name', { placeholder: 'Иван', $rules: { required: true } })),
   CheckboxForm('hasCompany', { title: 'Представляю компанию' }),
-  Condition('hasCompany', { canActivate: (checked: boolean) => checked })(
+  OptionalCondition('hasCompany', { canActivate: (checked: boolean) => checked })(
     Context('company')(Label('Компания')(TextForm('name', { placeholder: 'ООО «Ромашка»' })))
   )
 ]
@@ -26,8 +26,9 @@ const scheme = [
   вложенные контексты и необязательность полей под условием.
 - **Поле пишется один раз.** `createForm` превращает любой компонент ввода в поле: умолчание, «что считать пустым» и
   отрисовка ошибки живут в нём, а не в каждой форме.
-- **Условия и вложенность из коробки.** `Condition` показывает поля по значению другого поля, `Context` складывает их
-  в объект; скрытое поле не попадает ни в значения, ни в проверку.
+- **Условия и вложенность из коробки.** `OptionalCondition` показывает поля по значению другого поля, `Context`
+  складывает их в объект; скрытое поле не попадает ни в значения, ни в проверку, а под `NullableCondition` приходит
+  `null`.
 - **Состояние вне React.** Значения держит менеджер формы: правка поля перерисовывает это поле и тех, кто на него
   подписан, а не всю форму и не экран вокруг неё.
 - **Изменённость.** Форма знает, что её правили, сообщает об этом и при отправке без изменений вызывает `onEqual`
@@ -168,14 +169,15 @@ Card({ title: 'Контакты', hint: 'Видят только менедже
 
 ## Схема
 
-| Элемент                                  | Что делает                                                                | В значениях        |
-| ---------------------------------------- | ------------------------------------------------------------------------- | ------------------ |
-| `XForm('name', params)`                  | поле                                                                      | `name: V`          |
-| `Layout(params)(…)`                      | разметка вокруг полей                                                     | поля как есть      |
-| `Context('name')(…)`                     | вложенный объект: имена полей внутри — `name.field`                       | `name: { … }`      |
-| `Condition('field', { canActivate })(…)` | поля показаны, пока `canActivate(значение поля)` верно; имя — полный путь | поля необязательны |
-| `Visablility({ hidden })(…)`             | поля не рисуются, но несут значение из `defaultValues`                    | поля необязательны |
-| `createExtraForm(…)`                     | поля, которые пользователь добавляет и убирает сам                        | поля необязательны |
+| Элемент                                          | Что делает                                                                | В значениях        |
+| ------------------------------------------------ | ------------------------------------------------------------------------- | ------------------ |
+| `XForm('name', params)`                          | поле                                                                      | `name: V`          |
+| `Layout(params)(…)`                              | разметка вокруг полей                                                     | поля как есть      |
+| `Context('name')(…)`                             | вложенный объект: имена полей внутри — `name.field`                       | `name: { … }`      |
+| `OptionalCondition('field', { canActivate })(…)` | поля показаны, пока `canActivate(значение поля)` верно; имя — полный путь | поля необязательны |
+| `NullableCondition('field', { canActivate })(…)` | как `OptionalCondition`, но скрытая ветка отдаёт `null` своим именам      | `name: V \| null`  |
+| `Visablility({ hidden })(…)`                     | поля не рисуются, но несут значение из `defaultValues`                    | поля необязательны |
+| `createExtraForm(…)`                             | поля, которые пользователь добавляет и убирает сам                        | поля необязательны |
 
 Значения `onSubmit` и `onChange` выводятся из схемы сами, тип `defaultValues` схемы — `GetDefaultValues<typeof scheme>`.
 
@@ -226,6 +228,42 @@ defaultValues: {
 }
 ```
 
+### Данные или `null` — `NullableCondition`
+
+Часто включаемый блок в данных — объект или `null`: выключенное условие хранится как `null`, а не отдельным флажком.
+`OptionalCondition` даёт такому блоку `undefined` — скрытая ветка пропадает из значений. `NullableCondition` ведёт себя
+так же, но скрытая ветка отдаёт `null` своим именам — полям и контекстам уровня ветки; раскладки и вложенные условия
+внутри неё прозрачны. Имена — как `.optional()` и `.nullable()` в zod: `name?: V` против `name: V | null`.
+
+```tsx
+const scheme = [
+  CheckboxForm('hasCompany', { title: 'Представляю компанию' }),
+  NullableCondition('hasCompany', { canActivate: (checked: boolean) => checked })(
+    Context('company')(Label('Компания')(TextForm('name', { placeholder: 'ООО «Ромашка»' })))
+  )
+]
+
+// onSubmit получит { hasCompany: boolean; company: { name: string } | null }
+```
+
+`null` у такого имени в `defaultValues` — отсутствие данных, как `undefined`: поля ветки начнут с умолчаний своих
+компонентов. Блок из данных передаётся как есть, флажок выводится из него:
+
+```tsx
+const form = useForm(scheme, {
+  defaultValues: {
+    hasCompany: profile.company !== null,
+    company: profile.company // { name: string } | null
+  },
+  onSubmit: async (values) => {
+    await api.saveProfile(values) // company — как в данных: объект или null
+  }
+})
+```
+
+Ветка из одного поля, у которого `null` — своё значение (стёртое число, дата без выбора), отдаёт `null` и скрытой, и
+пустой: различает их флажок.
+
 ## Живая форма и изменённость
 
 ```tsx
@@ -310,6 +348,12 @@ const Optional = createExtraForm({
 
 Поле добавлено, пока у него есть значение: в `defaultValues` — показано сразу, убранное — изменение формы.
 
+## 0.0.31
+
+- `Condition` переименован в `OptionalCondition`: имя говорит, что скрытая ветка пропадает из значений.
+- `NullableCondition`: скрытая ветка отдаёт `null` своим полям и контекстам, а не пропадает из значений; `null` у них
+  в `defaultValues` — отсутствие данных.
+
 ## 0.0.30
 
 - Поле, снова показанное условием, начинает со стартового значения (`defaultValues`), а не с умолчания компонента.

package/dist/ConditionBranch.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    name: string;
+    canActivate: (value: any) => boolean;
+    children: React.ReactNode;
+}
+export declare const ConditionBranch: ({ canActivate, name, children }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/bundle.es.js

@@ -1,208 +1,222 @@
-import { jsx as g, Fragment as N, jsxs as U } from "react/jsx-runtime";
-import { createContext as _, useState as B, useContext as T, useMemo as A, useEffect as m, useCallback as R, useRef as z } from "react";
-import O from "fast-deep-equal";
-const D = _({}), M = (n) => {
-  const [, r] = B([]), e = T(D);
-  if (!e)
+import { jsx as b, Fragment as L, jsxs as _ } from "react/jsx-runtime";
+import { createContext as z, useState as B, useContext as N, useMemo as $, useEffect as D, useCallback as m, useRef as G } from "react";
+import P from "fast-deep-equal";
+const w = z({}), M = (n) => {
+  const [, e] = B([]), r = N(w);
+  if (!r)
     throw new Error("useValue cannot be used outside Form context");
-  const s = A(() => {
-    const t = e.getForm(n);
+  const s = $(() => {
+    const t = r.getForm(n);
     if (!t)
       throw new Error(`form with name "${n}" doesnt exist in form`);
     return t;
-  }, [e, n]);
-  return m(() => {
-    const t = e.subscribeToForm(n, () => {
-      r([]);
+  }, [r, n]);
+  return D(() => {
+    const t = r.subscribeToForm(n, () => {
+      e([]);
     });
     return () => {
       t();
     };
   }, []), s.value;
-}, Y = (n) => {
-  const r = T(D);
-  if (!r)
+}, k = (n) => {
+  const e = N(w);
+  if (!e)
     throw new Error("useSetValue cannot be used outside Form context");
-  return (e) => {
-    r.setValue(n, e);
+  return (r) => {
+    e.setValue(n, r);
   };
-}, Z = () => (n) => M(n), G = ({ canActivate: n, name: r, children: e }) => {
-  const s = M(r);
-  return n(s) ? /* @__PURE__ */ g(N, { children: e }) : null;
-}, H = ({ item: { Form: n }, name: r }) => {
-  const [, e] = B([]), s = T(D), { unregistry: t } = A(() => s.registry(r, () => {
-    e([]);
-  }), []), u = R(
+}, I = () => (n) => M(n), H = ({ canActivate: n, name: e, children: r }) => {
+  const s = M(e);
+  return n(s) ? /* @__PURE__ */ b(L, { children: r }) : null;
+}, J = ({ item: { Form: n }, name: e }) => {
+  const [, r] = B([]), s = N(w), { unregistry: t } = $(() => s.registry(e, () => {
+    r([]);
+  }), []), u = m(
     (y) => {
       if (y && y.focus) {
-        const v = s.getForm(r);
+        const v = s.getForm(e);
         v.focus = () => {
           y.focus();
         };
       }
     },
-    [r]
+    [e]
   );
-  m(() => () => {
+  D(() => () => {
     t();
   }, []);
-  const { value: d, error: b } = s.getForm(r);
-  return /* @__PURE__ */ g(
+  const { value: d, error: h } = s.getForm(e);
+  return /* @__PURE__ */ b(
     n,
     {
       field: {
         value: d,
         onChange: (y) => {
-          s.onChange(r, y);
+          s.onChange(e, y);
         },
         onBlur: () => {
         },
         ref: u
       },
       isDirty: !1,
-      error: b,
+      error: h,
       disabled: s.disabled
     }
   );
-}, J = ({ item: n, path: r }) => {
-  const { getController: e, items: s } = n, t = T(D), u = A(() => {
-    const l = {};
+}, K = ({ item: n, path: e }) => {
+  const { getController: r, items: s } = n, t = N(w), u = $(() => {
+    const f = {};
     return s.forEach(({ name: i, getForm: F }) => {
-      l[i] = F(i, () => j(i));
-    }), l;
-  }, []), d = R(() => {
-    const l = [];
+      f[i] = F(i, () => j(i));
+    }), f;
+  }, []), d = m(() => {
+    const f = [];
     return s.forEach(({ name: i }) => {
-      t.getForm([...r, i].join(".")).value !== void 0 && l.push(i);
-    }), l;
-  }, []), b = A(() => d(), []), [y, v] = B(b);
-  m(() => {
-    const { unregistry: l } = t.registryExtraForm(
-      s.map(({ name: i }) => [...r, i].join(".")),
+      t.getForm([...e, i].join(".")).value !== void 0 && f.push(i);
+    }), f;
+  }, []), h = $(() => d(), []), [y, v] = B(h);
+  D(() => {
+    const { unregistry: f } = t.registryExtraForm(
+      s.map(({ name: i }) => [...e, i].join(".")),
       () => {
         v(d());
       }
     );
     return () => {
-      l();
+      f();
     };
   }, []);
-  const x = R(
-    (l) => {
-      u[l] && !y.includes(l) && v((i) => [...i, l]);
+  const x = m(
+    (f) => {
+      u[f] && !y.includes(f) && v((i) => [...i, f]);
     },
     [y]
-  ), j = R((l) => {
-    v((i) => i.filter((F) => F !== l));
+  ), j = m((f) => {
+    v((i) => i.filter((F) => F !== f));
   }, []);
-  return /* @__PURE__ */ U(N, { children: [
-    y.map((l) => {
-      const i = u[l];
-      return /* @__PURE__ */ g(p, { path: r, scheme: [i] }, `param-form--${l}`);
+  return /* @__PURE__ */ _(L, { children: [
+    y.map((f) => {
+      const i = u[f];
+      return /* @__PURE__ */ b(A, { path: e, scheme: [i] }, `param-form--${f}`);
     }),
-    e(x, y)
+    r(x, y)
   ] });
-}, p = ({ scheme: n, path: r }) => /* @__PURE__ */ g(N, { children: n.map((e, s) => e.type === "layout" ? /* @__PURE__ */ g(e.Layout, { children: /* @__PURE__ */ g(p, { path: r, scheme: e.childs }) }, `layout-form--${s}-${r.length}`) : e.type === "context" ? /* @__PURE__ */ g(
-  p,
+}, A = ({ scheme: n, path: e }) => /* @__PURE__ */ b(L, { children: n.map((r, s) => r.type === "layout" ? /* @__PURE__ */ b(r.Layout, { children: /* @__PURE__ */ b(A, { path: e, scheme: r.childs }) }, `layout-form--${s}-${e.length}`) : r.type === "context" ? /* @__PURE__ */ b(
+  A,
   {
-    path: [...r, e.context],
-    scheme: e.childs
+    path: [...e, r.context],
+    scheme: r.childs
   },
-  `context-form--${s}-${e.context}-${r.length}`
-) : e.type === "condition" ? /* @__PURE__ */ g(
-  G,
+  `context-form--${s}-${r.context}-${e.length}`
+) : r.type === "condition" ? /* @__PURE__ */ b(
+  H,
   {
-    name: e.depended,
-    canActivate: e.canActivate,
-    children: /* @__PURE__ */ g(p, { path: r, scheme: e.childs })
+    name: r.depended,
+    canActivate: r.canActivate,
+    children: /* @__PURE__ */ b(A, { path: e, scheme: r.childs })
   },
-  `condition--${s}-${e.depended}-${r.length}`
-) : e.type === "extra" ? /* @__PURE__ */ g(J, { path: r, item: e }, `partial-item--${s}-${r.length}`) : e.type === "visability" ? e.hidden ? null : /* @__PURE__ */ g(p, { path: r, scheme: e.childs }, `visability--${s}-${r.length}`) : /* @__PURE__ */ g(
-  H,
+  `condition--${s}-${r.depended}-${e.length}`
+) : r.type === "extra" ? /* @__PURE__ */ b(K, { path: e, item: r }, `partial-item--${s}-${e.length}`) : r.type === "visability" ? r.hidden ? null : /* @__PURE__ */ b(A, { path: e, scheme: r.childs }, `visability--${s}-${e.length}`) : /* @__PURE__ */ b(
+  J,
   {
-    name: [...r, e.name].join("."),
-    item: e
+    name: [...e, r.name].join("."),
+    item: r
   },
-  `form-item--${s}-${e.name}-${r.length}`
-)) }), $ = (n, r, e, s) => {
+  `form-item--${s}-${r.name}-${e.length}`
+)) }), Q = (n) => {
+  const e = {};
+  for (const r in n)
+    n[r] !== null && (e[r] = n[r]);
+  return e;
+}, p = (n, e, r, s) => {
   n.forEach((t) => {
-    if (t.type === "form" && s(t, [...r, t.name].join("."), e[t.name]), t.type === "context") {
-      $(t.childs, [...r, t.context], e[t.context] ?? {}, s);
+    if (t.type === "form" && s(t, [...e, t.name].join("."), r[t.name]), t.type === "context") {
+      p(t.childs, [...e, t.context], r[t.context] ?? {}, s);
       return;
     }
-    if (t.type === "layout" || t.type === "condition" || t.type === "visability") {
-      $(t.childs, r, e, s);
+    if (t.type === "layout" || t.type === "visability") {
+      p(t.childs, e, r, s);
+      return;
+    }
+    if (t.type === "condition") {
+      p(t.childs, e, t.nullable ? Q(r) : r, s);
       return;
     }
     t.type === "extra" && t.items.forEach(({ getForm: u, name: d }) => {
-      $([u(d, () => {
-      })], r, e, s);
+      p([u(d, () => {
+      })], e, r, s);
     });
   });
-}, C = (n, r, e, s) => {
+}, C = (n, e, r, s) => {
   n.forEach((t) => {
-    if (t.type === "form" && s([...r, t.name].join(".")), t.type === "context") {
-      C(t.childs, [...r, t.context], e, s);
+    if (t.type === "form" && s([...e, t.name].join(".")), t.type === "context") {
+      C(t.childs, [...e, t.context], r, s);
       return;
     }
     if (t.type === "layout") {
-      C(t.childs, r, e, s);
+      C(t.childs, e, r, s);
       return;
     }
     if (t.type === "visability" && !t.hidden) {
-      C(t.childs, r, e, s);
+      C(t.childs, e, r, s);
       return;
     }
-    if (t.type === "condition" && t.canActivate(e[t.depended]?.value)) {
-      C(t.childs, r, e, s);
+    if (t.type === "condition" && t.canActivate(r[t.depended]?.value)) {
+      C(t.childs, e, r, s);
       return;
     }
     t.type === "extra" && t.items.forEach(({ getForm: u, name: d }) => {
-      e[[...r, d].join(".")]?.value !== void 0 && C([u(d, () => {
-      })], r, e, s);
+      r[[...e, d].join(".")]?.value !== void 0 && C([u(d, () => {
+      })], e, r, s);
     });
   });
-}, S = ({ scheme: n, values: r, path: e, forms: s, shown: t }) => {
+}, U = (n, e) => {
+  n.forEach((r) => {
+    r.type === "form" && (e[r.name] = null), r.type === "context" && (e[r.context] = null), (r.type === "layout" || r.type === "condition" || r.type === "visability") && U(r.childs, e);
+  });
+}, S = ({ scheme: n, values: e, path: r, forms: s, shown: t }) => {
   n.forEach((u) => {
     if (u.type === "form") {
-      const { value: d, startValue: b } = s[[...e, u.name].join(".")];
-      d !== void 0 && (r[u.name] = d), d === void 0 && t && (r[u.name] = b);
+      const { value: d, startValue: h } = s[[...r, u.name].join(".")];
+      d !== void 0 && (e[u.name] = d), d === void 0 && t && (e[u.name] = h);
     }
     if (u.type === "context") {
-      r[u.context] = {}, S({
+      e[u.context] = {}, S({
         scheme: u.childs,
-        path: [...e, u.context],
-        values: r[u.context],
+        path: [...r, u.context],
+        values: e[u.context],
         forms: s,
         shown: t
       });
       return;
     }
     if (u.type === "layout") {
-      S({ scheme: u.childs, path: e, values: r, forms: s, shown: t });
+      S({ scheme: u.childs, path: r, values: e, forms: s, shown: t });
       return;
     }
     if (u.type === "visability") {
-      S({ scheme: u.childs, path: e, values: r, forms: s, shown: t && !u.hidden });
+      S({ scheme: u.childs, path: r, values: e, forms: s, shown: t && !u.hidden });
       return;
     }
     if (u.type === "condition") {
       const d = s[u.depended]?.value;
       if (u.canActivate(d)) {
-        S({ scheme: u.childs, path: e, values: r, forms: s, shown: t });
+        S({ scheme: u.childs, path: r, values: e, forms: s, shown: t });
         return;
       }
+      u.nullable && U(u.childs, e);
     }
-    u.type === "extra" && u.items.forEach(({ getForm: d, name: b }) => {
-      S({ scheme: [d(b, () => {
-      })], path: e, values: r, forms: s, shown: !1 });
+    u.type === "extra" && u.items.forEach(({ getForm: d, name: h }) => {
+      S({ scheme: [d(h, () => {
+      })], path: r, values: e, forms: s, shown: !1 });
     });
   });
-}, L = (n, r) => {
-  const e = {};
-  return S({ scheme: n, path: [], values: e, forms: r, shown: !0 }), e;
-}, K = (n, r) => {
-  const { onSubmit: e, onChange: s, onEqual: t, disabled: u, onDirty: d, onFormDirty: b, onChangeEvent: y, defaultValues: v } = r, x = { onSubmit: e }, j = { onChange: s }, l = {
+}, q = (n, e) => {
+  const r = {};
+  return S({ scheme: n, path: [], values: r, forms: e, shown: !0 }), r;
+}, W = (n, e) => {
+  const { onSubmit: r, onChange: s, onEqual: t, disabled: u, onDirty: d, onFormDirty: h, onChangeEvent: y, defaultValues: v } = e, x = { onSubmit: r }, j = { onChange: s }, f = {
     isActive: !1,
     isSubmitted: !1,
     dirtyCount: 0
@@ -210,7 +224,7 @@ const D = _({}), M = (n) => {
     subscribers: [],
     names: {}
   };
-  $(n, [], v ?? {}, (o, a, c) => {
+  p(n, [], v ?? {}, (o, a, c) => {
     i[a] = {
       error: null,
       isDirty: !1,
@@ -226,11 +240,11 @@ const D = _({}), M = (n) => {
       validate: o.validate
     };
   });
-  const q = (o, a) => {
-    d?.({ name: o, isDirty: a }), a && l.dirtyCount === 0 && b?.(!0), !a && l.dirtyCount === 1 && b?.(!1), l.dirtyCount += a ? 1 : -1;
-  }, P = () => {
+  const T = (o, a) => {
+    d?.({ name: o, isDirty: a }), a && f.dirtyCount === 0 && h?.(!0), !a && f.dirtyCount === 1 && h?.(!1), f.dirtyCount += a ? 1 : -1;
+  }, O = () => {
     for (const o in i)
-      i[o].isDirty && (q(o, !1), i[o].isDirty = !1);
+      i[o].isDirty && (T(o, !1), i[o].isDirty = !1);
   };
   return {
     submitRef: x,
@@ -238,10 +252,10 @@ const D = _({}), M = (n) => {
     scheme: n,
     disabled: u,
     activate() {
-      l.isActive = !0;
+      f.isActive = !0;
     },
     disactivate() {
-      l.isActive = !1;
+      f.isActive = !1;
     },
     setError(o, a) {
       const c = this.getForm(o);
@@ -259,67 +273,67 @@ const D = _({}), M = (n) => {
       c && c.value !== a && this.onChange(o, a);
     },
     getValues() {
-      return L(n, i);
+      return q(n, i);
     },
     async handleSubmit() {
       if (u)
         return;
-      l.isSubmitted = !0;
+      f.isSubmitted = !0;
       let o = !1, a = !1;
       if (C(n, [], i, (c) => {
-        const f = i[c];
-        if (f.value !== void 0) {
-          const h = f.validate(f.value);
-          h && (a = !0, f.error = h, f.rerender(), !o && f.focus && (f.focus(), o = !0));
+        const l = i[c];
+        if (l.value !== void 0) {
+          const g = l.validate(l.value);
+          g && (a = !0, l.error = g, l.rerender(), !o && l.focus && (l.focus(), o = !0));
         }
       }), !a) {
-        if (l.dirtyCount === 0 && t) {
+        if (f.dirtyCount === 0 && t) {
           t();
           return;
         }
         if (!x.onSubmit)
           return;
-        const c = L(n, i);
+        const c = q(n, i);
         await x.onSubmit(c, {
-          setError: (f, h) => {
-            const V = this.getForm(f);
+          setError: (l, g) => {
+            const V = this.getForm(l);
             V.error = {
               error: !0,
-              messages: [h.message]
+              messages: [g.message]
             }, V.rerender();
           }
-        }).catch((f) => {
-          console.log("[formkit] submit exception:", f);
+        }).catch((l) => {
+          console.log("[formkit] submit exception:", l);
         });
       }
     },
     reset(o, { asDirty: a }) {
-      $(n, [], o, (c, f, h) => {
-        if (h === void 0 && i[f].value === void 0)
+      p(n, [], o, (c, l, g) => {
+        if (g === void 0 && i[l].value === void 0)
           return;
-        if (E.names[f] && h === void 0) {
-          i[f].value = void 0;
+        if (E.names[l] && g === void 0) {
+          i[l].value = void 0;
           return;
         }
-        const V = h ?? c.defaultValue;
-        a || (i[f].startValue = V), i[f].value !== V && this.onChange(f, V);
-      }), a || (P(), l.isSubmitted = !1), E.subscribers.forEach(({ visualizeEvalueatedForms: c }) => {
+        const V = g ?? c.defaultValue;
+        a || (i[l].startValue = V), i[l].value !== V && this.onChange(l, V);
+      }), a || (O(), f.isSubmitted = !1), E.subscribers.forEach(({ visualizeEvalueatedForms: c }) => {
         c();
       });
     },
     setAsDefault() {
-      $(n, [], {}, (o, a) => {
+      p(n, [], {}, (o, a) => {
         i[a].startValue = i[a].value ?? i[a].defaultValue;
-      }), P(), l.isSubmitted = !1;
+      }), O(), f.isSubmitted = !1;
     },
     registry(o, a) {
       return i[o].rerender = a, i[o].value === void 0 && (i[o].value = E.names[o] ? i[o].defaultValue : i[o].startValue), {
         unregistry() {
           if (i[o].rerender = () => {
-          }, i[o].focus = void 0, l.isActive) {
+          }, i[o].focus = void 0, f.isActive) {
             i[o].value = void 0, i[o].error = null;
-            const c = E.names[o] ? !O(i[o].startValue, i[o].defaultValue) : !1;
-            i[o].isDirty !== c && q(o, c), i[o].isDirty = c;
+            const c = E.names[o] ? !P(i[o].startValue, i[o].defaultValue) : !1;
+            i[o].isDirty !== c && T(o, c), i[o].isDirty = c;
           }
         }
       };
@@ -328,9 +342,9 @@ const D = _({}), M = (n) => {
       return i[o];
     },
     subscribeToForm(o, a) {
-      const c = { callback: a }, f = this.getForm(o);
-      return f.subscribers.push(c), () => {
-        f.subscribers = f.subscribers.filter((h) => h !== c);
+      const c = { callback: a }, l = this.getForm(o);
+      return l.subscribers.push(c), () => {
+        l.subscribers = l.subscribers.filter((g) => g !== c);
       };
     },
     subscribeToAny(o) {
@@ -343,32 +357,32 @@ const D = _({}), M = (n) => {
     },
     registryExtraForm(o, a) {
       const c = { visualizeEvalueatedForms: a };
-      return o.forEach((f) => {
-        E.names[f] = !0;
+      return o.forEach((l) => {
+        E.names[l] = !0;
       }), E.subscribers.push(c), {
         unregistry() {
-          E.subscribers = E.subscribers.filter((f) => f !== c);
+          E.subscribers = E.subscribers.filter((l) => l !== c);
         }
       };
     },
     onChange(o, a) {
-      const c = this.getForm(o), f = !O(a, c.startValue);
-      c.isDirty !== f && q(o, f), c.isDirty = f, y?.({ name: o, value: a }), (c.error || l.isSubmitted) && (c.error = c.validate(a) || null);
-      const h = c.value;
+      const c = this.getForm(o), l = !P(a, c.startValue);
+      c.isDirty !== l && T(o, l), c.isDirty = l, y?.({ name: o, value: a }), (c.error || f.isSubmitted) && (c.error = c.validate(a) || null);
+      const g = c.value;
       c.value = a, c.rerender(), c.subscribers.forEach(({ callback: V }) => {
-        V(a, h);
+        V(a, g);
       }), F.forEach((V) => {
         V();
-      }), j.onChange?.(L(n, i));
+      }), j.onChange?.(q(n, i));
     }
   };
-}, k = (n, r) => {
-  const e = z(null);
-  e.current === null && (e.current = K(n, r));
-  const s = e.current;
-  return m(() => {
-    e.current && (e.current.submitRef.onSubmit = r.onSubmit, e.current.changeRef.onChange = r.onChange);
-  }, [r.onSubmit, r.onChange]), {
+}, rr = (n, e) => {
+  const r = G(null);
+  r.current === null && (r.current = W(n, e));
+  const s = r.current;
+  return D(() => {
+    r.current && (r.current.submitRef.onSubmit = e.onSubmit, r.current.changeRef.onChange = e.onChange);
+  }, [e.onSubmit, e.onChange]), {
     manager: s,
     useValue: (t) => M(t),
     reset: (t, u = {}) => {
@@ -398,85 +412,93 @@ const D = _({}), M = (n) => {
     // плоский список имён всех полей (dotted-пути; вложенные context раскрыты)
     getNames: () => s.getNames()
   };
-}, I = ({ manager: n }) => (A(() => {
+}, er = ({ manager: n }) => ($(() => {
   n.activate();
-}, []), m(() => () => {
+}, []), D(() => () => {
   n.disactivate();
-}, []), /* @__PURE__ */ g(D.Provider, { value: n, children: /* @__PURE__ */ g(p, { scheme: n.scheme, path: [] }) })), w = (n) => {
+}, []), /* @__PURE__ */ b(w.Provider, { value: n, children: /* @__PURE__ */ b(A, { scheme: n.scheme, path: [] }) })), R = (n) => {
   try {
     n();
-  } catch (r) {
-    return r && typeof r == "string" ? {
+  } catch (e) {
+    return e && typeof e == "string" ? {
       error: !0,
-      messages: [r]
-    } : r instanceof Array && r.every((e) => e && typeof e == "string") ? {
+      messages: [e]
+    } : e instanceof Array && e.every((r) => r && typeof r == "string") ? {
       error: !0,
-      messages: r
+      messages: e
     } : {
       error: !0
     };
   }
-}, rr = (n) => (r, e) => {
-  const s = n.getRequireCheck(e), { $rules: t = {}, ...u } = e, { validate: d, required: b } = t;
+}, tr = (n) => (e, r) => {
+  const s = n.getRequireCheck(r), { $rules: t = {}, ...u } = r, { validate: d, required: h } = t;
   return {
     type: "form",
-    name: r,
+    name: e,
     defaultValue: n.defaultValue,
     Form: n.getForm(u),
     validate: (y) => {
-      if (b) {
-        const v = w(() => s(y));
+      if (h) {
+        const v = R(() => s(y));
         if (v)
           return v;
         if (d) {
-          const x = w(() => d(y));
+          const x = R(() => d(y));
           if (x)
             return x;
         }
         return;
       }
-      if (d && !w(() => s(y))) {
-        const x = w(() => d(y));
+      if (d && !R(() => s(y))) {
+        const x = R(() => d(y));
         if (x)
           return x;
       }
     }
   };
-}, er = (n) => (r) => (...e) => ({
+}, nr = (n) => (e) => (...r) => ({
   type: "layout",
-  Layout: n(r),
-  childs: e
-}), tr = ({
+  Layout: n(e),
+  childs: r
+}), sr = ({
   getItems: n,
-  getController: r
+  getController: e
 }) => ({
   type: "extra",
-  items: n((e) => (s) => ({ type: "registry", name: e, getForm: s })),
-  getController: r
-}), sr = (n) => (...r) => ({
+  items: n((r) => (s) => ({ type: "registry", name: r, getForm: s })),
+  getController: e
+}), or = (n) => (...e) => ({
   type: "context",
   context: n,
+  childs: e
+}), ir = (n, e) => (...r) => ({
+  type: "condition",
+  depended: n,
+  canActivate: e.canActivate,
+  nullable: !1,
   childs: r
-}), nr = (n, r) => (...e) => ({
+}), ur = (n, e) => (...r) => ({
   type: "condition",
   depended: n,
-  canActivate: r.canActivate,
-  childs: e
-}), or = ({ hidden: n }) => (...r) => ({
+  canActivate: e.canActivate,
+  nullable: !0,
+  childs: r
+}), cr = ({ hidden: n }) => (...e) => ({
   type: "visability",
   hidden: n ?? !1,
-  childs: r
+  childs: e
 });
 export {
-  nr as Condition,
-  sr as Context,
-  I as FormLayout,
-  or as Visablility,
-  tr as createExtraForm,
-  rr as createForm,
-  er as createLayout,
-  Z as createUseValue,
-  k as useForm,
-  Y as useSetValue,
+  or as Context,
+  er as FormLayout,
+  ur as NullableCondition,
+  ir as OptionalCondition,
+  cr as Visablility,
+  sr as createExtraForm,
+  tr as createForm,
+  nr as createLayout,
+  I as createUseValue,
+  rr as useForm,
+  k as useSetValue,
   M as useValue
 };

package/dist/core/builders/syntax.d.ts

@@ -1,8 +1,11 @@
 import { SchemeItems } from '../types';
-export declare const Context: <N extends string>(context: N) => <T extends SchemeItems.All[]>(...childs: T) => SchemeItems.Context<N, T>;
-export declare const Condition: (depended: string, props: {
+interface ConditionProps {
     canActivate: (value: any) => boolean;
-}) => <T extends SchemeItems.All[]>(...childs: T) => SchemeItems.Condition<T>;
+}
+export declare const Context: <N extends string>(context: N) => <T extends SchemeItems.All[]>(...childs: T) => SchemeItems.Context<N, T>;
+export declare const OptionalCondition: (depended: string, props: ConditionProps) => <T extends SchemeItems.All[]>(...childs: T) => SchemeItems.Condition<T, false>;
+export declare const NullableCondition: (depended: string, props: ConditionProps) => <T extends SchemeItems.All[]>(...childs: T) => SchemeItems.Condition<T, true>;
 export declare const Visablility: ({ hidden }: {
     hidden?: boolean;
 }) => <T extends SchemeItems.All[]>(...childs: T) => SchemeItems.Visablility<T>;
+export {};

package/dist/core/extract.d.ts

@@ -1,10 +1,13 @@
 import { SchemeItems } from './types';
 import { Compute, UnionToIntersection } from '../utils/typescript';
+type OrNull<T> = {
+    [K in keyof T]: T[K] | null;
+};
 type ExtractValue<T> = T extends SchemeItems.Form<infer N, infer V> ? {
     [K in N]: V;
 } : T extends SchemeItems.Layout<infer C> ? ExtractValue<C[number]> : T extends SchemeItems.Context<infer N, infer C> ? {
     [K in N]: Compute<UnionToIntersection<ExtractValue<C[number]>>>;
-} : T extends SchemeItems.Condition<infer C> ? Partial<ExtractValue<C[number]>> : T extends SchemeItems.Visablility<infer C> ? Partial<ExtractValue<C[number]>> : T extends SchemeItems.Extra<string, infer C> ? Partial<ExtractValue<ReturnType<C[number]['getForm']>>> : never;
+} : T extends SchemeItems.Condition<infer C, true> ? OrNull<ExtractValue<C[number]>> : T extends SchemeItems.Condition<infer C> ? Partial<ExtractValue<C[number]>> : T extends SchemeItems.Visablility<infer C> ? Partial<ExtractValue<C[number]>> : T extends SchemeItems.Extra<string, infer C> ? Partial<ExtractValue<ReturnType<C[number]['getForm']>>> : never;
 type ExtractValues<T> = Compute<UnionToIntersection<ExtractValue<T>>>;
 type ExtractFlatValue<T, A extends string | null> = T extends SchemeItems.Form<infer N, infer V> ? {
     [K in A extends null ? N : `${A}.${N}`]: V;

package/dist/core/types.d.ts

@@ -33,10 +33,11 @@ export declare namespace SchemeItems {
         name: N;
         getForm: <Q extends N>(name: Q, remove: () => void) => T;
     }
-    interface Condition<T extends All[] = All[]> {
+    interface Condition<T extends All[] = All[], Nullable extends boolean = boolean> {
         type: 'condition';
         depended: string;
         canActivate: (value: any) => boolean;
+        nullable: Nullable;
         childs: T;
     }
     interface Visablility<T extends All[] = All[]> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@companix/formkit",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "module": "./dist/bundle.es.js",
   "types": "./dist/index.d.ts",
   "type": "module",

package/dist/Condition.d.ts

@@ -1,7 +0,0 @@
-interface Props {
-    name: string;
-    canActivate: (value: any) => boolean;
-    children: React.ReactNode;
-}
-export declare const Condition: ({ canActivate, name, children }: Props) => import("react/jsx-runtime").JSX.Element | null;
-export {};