@companix/formkit 0.0.29 → 0.0.30

package/README.md

@@ -1,58 +1,320 @@
-## Create form primitives
+# @companix/formkit
+
+Формы на React одной декларативной схемой. Поля, раскладка, условия и проверка описываются деревом из обычных вызовов
+функций, а значения формы TypeScript выводит из самой схемы — без ручных интерфейсов, `useState` на каждое поле и
+`register` в разметке.
 
 ```tsx
-const SelectForm = (name: string) => {
-  // select form code
-}
-const InputForm = (name: string) => {
-  // input form code
-}
+const scheme = [
+  Label('Имя')(TextForm('name', { placeholder: 'Иван', $rules: { required: true } })),
+  CheckboxForm('hasCompany', { title: 'Представляю компанию' }),
+  Condition('hasCompany', { canActivate: (checked: boolean) => checked })(
+    Context('company')(Label('Компания')(TextForm('name', { placeholder: 'ООО «Ромашка»' })))
+  )
+]
+
+// onSubmit получит { name: string; hasCompany: boolean; company?: { name: string } }
+```
+
+`TextForm`, `CheckboxForm` и `Label` здесь — свои поле и раскладка проекта: как их завести, показано ниже.
+
+## Почему formkit
+
+- **Форма — данные, а не разметка.** Схема — массив, который собирают функциями: общий блок полей пишется один раз и
+  вставляется в любую форму, вариант формы — другой набор элементов, а не ветвление в JSX.
+- **Типы из схемы.** `onSubmit`, `onChange`, `defaultValues`, `setValue` и `useValue` знают имена и типы полей,
+  вложенные контексты и необязательность полей под условием.
+- **Поле пишется один раз.** `createForm` превращает любой компонент ввода в поле: умолчание, «что считать пустым» и
+  отрисовка ошибки живут в нём, а не в каждой форме.
+- **Условия и вложенность из коробки.** `Condition` показывает поля по значению другого поля, `Context` складывает их
+  в объект; скрытое поле не попадает ни в значения, ни в проверку.
+- **Состояние вне React.** Значения держит менеджер формы: правка поля перерисовывает это поле и тех, кто на него
+  подписан, а не всю форму и не экран вокруг неё.
+- **Изменённость.** Форма знает, что её правили, сообщает об этом и при отправке без изменений вызывает `onEqual`
+  вместо запроса.
+
+## Установка
+
+```sh
+npm i @companix/formkit
 ```
 
-## Create layouts
+Нужен React 18.
+
+## Форма за минуту
 
 ```tsx
-export const Label = createLayout((label: React.ReactNode) => {
-  return ({ children }) => {
-    return <FormGroup label={label}>{children}</FormGroup>
+import { useMemo } from 'react'
+import { createForm, createLayout, useForm, FormLayout } from '@companix/formkit'
+
+// поле: умолчание, проверка обязательности и компонент
+const TextForm = createForm<string, { placeholder: string }>({
+  defaultValue: '',
+  getRequireCheck: () => (value) => {
+    if (value.trim() === '') {
+      throw ''
+    }
+  },
+  getForm: ({ placeholder }) => {
+    return ({ field, error, disabled }) => {
+      return (
+        <div className="field">
+          <input
+            ref={field.ref}
+            value={field.value}
+            placeholder={placeholder}
+            disabled={disabled}
+            onChange={(e) => field.onChange(e.target.value)}
+          />
+          {error?.messages?.map((message) => (
+            <p key={message}>{message}</p>
+          ))}
+        </div>
+      )
+    }
   }
 })
 
-export const Double = createLayout(() => {
+// раскладка: подпись над полем
+const Label = createLayout((text: string) => {
   return ({ children }) => {
-    return <div className="form-double-primitive">{children}</div>
+    return (
+      <label className="label">
+        <span>{text}</span>
+        {children}
+      </label>
+    )
   }
 })
 
-export const Splitter = createLayout(() => {
-  return () => {
-    return <div className="form-splitter" />
+export const ProfileForm = () => {
+  const scheme = useMemo(() => {
+    return [
+      Label('Имя')(TextForm('name', { placeholder: 'Иван', $rules: { required: true } })),
+      Label('Город')(TextForm('city', { placeholder: 'Москва' }))
+    ]
+  }, [])
+
+  const form = useForm(scheme, {
+    defaultValues: { city: 'Москва' },
+    onSubmit: async (values) => {
+      await api.saveProfile(values) // values: { name: string; city: string }
+    }
+  })
+
+  return (
+    <>
+      <FormLayout manager={form.manager} />
+      <button onClick={form.handleSubmit}>Сохранить</button>
+    </>
+  )
+}
+```
+
+Менеджер формы создаётся один раз: схему и `defaultValues` `useForm` читает при первом рендере, поэтому схему держат в
+`useMemo`. `FormLayout` рисует схему и может стоять где угодно — в окне, на странице, в шаге мастера.
+
+## Поле — `createForm`
+
+Поле — это компонент ввода плюс три ответа: какое у него значение по умолчанию, что для него значит «пусто» и как его
+нарисовать по параметрам из схемы.
+
+```tsx
+const SelectForm = <T,>(defaultValue: T | null) => {
+  return createForm<T | null, { options: { value: T; title: string }[] }>({
+    defaultValue,
+    getRequireCheck: () => (value) => {
+      if (value === null) {
+        throw ''
+      }
+    },
+    getForm: ({ options }) => {
+      return ({ field, error }) => (
+        <Select options={options} value={field.value} onChange={field.onChange} error={error} />
+      )
+    }
+  })
+}
+
+SelectForm<'day' | 'night'>('day')('mode', { options: MODES })
+```
+
+Компонент получает `field` (`value`, `onChange`, `ref` для фокуса на ошибке), `error` и `disabled` формы. Умолчание,
+которое зависит от места, задают фабрикой, как у `SelectForm` выше: `NumberInputForm(1)('count', …)`.
+
+## Раскладка — `createLayout`
+
+Раскладка оборачивает поля разметкой. Параметр раскладки — один аргумент; раскладку без параметров вызывают сразу.
+
+```tsx
+const Card = createLayout(({ title, hint }: { title: string; hint?: string }) => {
+  return ({ children }) => (
+    <section className="card">
+      <h3>{title}</h3>
+      {hint && <p>{hint}</p>}
+      {children}
+    </section>
+  )
+})
+
+const Double = createLayout(() => {
+  return ({ children }) => <div className="double">{children}</div>
+})()
+
+Card({ title: 'Контакты', hint: 'Видят только менеджеры' })(
+  Double(TextForm('phone', { placeholder: '+7' }), TextForm('email', { placeholder: 'mail@site.ru' }))
+)
+```
+
+## Схема
+
+| Элемент                                  | Что делает                                                                | В значениях        |
+| ---------------------------------------- | ------------------------------------------------------------------------- | ------------------ |
+| `XForm('name', params)`                  | поле                                                                      | `name: V`          |
+| `Layout(params)(…)`                      | разметка вокруг полей                                                     | поля как есть      |
+| `Context('name')(…)`                     | вложенный объект: имена полей внутри — `name.field`                       | `name: { … }`      |
+| `Condition('field', { canActivate })(…)` | поля показаны, пока `canActivate(значение поля)` верно; имя — полный путь | поля необязательны |
+| `Visablility({ hidden })(…)`             | поля не рисуются, но несут значение из `defaultValues`                    | поля необязательны |
+| `createExtraForm(…)`                     | поля, которые пользователь добавляет и убирает сам                        | поля необязательны |
+
+Значения `onSubmit` и `onChange` выводятся из схемы сами, тип `defaultValues` схемы — `GetDefaultValues<typeof scheme>`.
+
+## Проверка
+
+```tsx
+TextForm('inn', {
+  placeholder: '12 цифр',
+  $rules: {
+    required: true,
+    validate: (value) => {
+      if (!/^\d{12}$/.test(value)) {
+        throw 'ИНН — 12 цифр'
+      }
+    }
   }
 })
 ```
 
-## Create a scheme
+- `required` проверяет поле его же `getRequireCheck`; `validate` — после него. Без `required` `validate` работает,
+  только если поле не пустое.
+- Проверка бросает строку: `throw ''` подсвечивает поле, `throw 'текст'` — с сообщением, массив строк — несколько
+  сообщений. Ошибку рисует компонент поля из `error.messages`.
+- `handleSubmit` проверяет поля, которые форма показывает, и ставит фокус на первое ошибочное. Поле скрытого условия
+  отправку не держит. После первой попытки поля проверяются на каждой правке.
+- Ошибку от сервера ставит `setError` из второго аргумента `onSubmit`: `setError('inn', { message: 'ИНН занят' })`.
 
-```ts
-const scheme = [
-  Label('Имя')(
-    SelectForm('name', {
-      placeholder: 'Введите имя',
-      options: []
-    })
-  ),
-  Splitter(),
-  Double()(
-    Label('Фамилия')(
-      InputForm('surname', {
-        placeholder: 'Введите фамилию'
-      })
-    ),
-    Label('Отчество')(
-      InputForm('patronymic', {
-        placeholder: 'Введите отчество'
-      })
+## Значения, умолчания и условия
+
+У поля два источника начального значения: умолчание компонента (`defaultValue` из `createForm`) и `defaultValues`
+формы. Стартовое значение — `defaultValues`, а без них — умолчание компонента. От стартового значения считается
+изменённость, и с него поле начинает:
+
+- при первом показе;
+- когда условие снова показывает поле: скрытое поле теряет значение и ошибку, вернувшееся — начинает заново со
+  стартового, а не с того, что ввели до скрытия.
+
+Значения формы — `onChange`, `getValues()` и отправка — это то, что форма показывает. Поля скрытых условий в них не
+входят, а поле, которое изменение только что открыло, входит сразу, ещё до монтирования, со стартовым значением.
+
+Отсюда простое правило: `defaultValues` — только данные. Где данных нет, передавайте `undefined`, и поле возьмёт своё
+умолчание; повторять умолчание поля в `defaultValues` не нужно.
+
+```tsx
+defaultValues: {
+  hasEscorts: escorts !== null,
+  escorts: escorts ?? undefined // нет данных — поля начнут со своих умолчаний
+}
+```
+
+## Живая форма и изменённость
+
+```tsx
+const form = useForm(scheme, {
+  defaultValues,
+  // значения после каждой правки — расчёт и подсказки поверх полей, без кнопки отправки
+  onChange: (values) => setDraft(toDraft(values)),
+  // форма изменена или снова стартовая
+  onFormDirty: (isDirty) => setDirty(isDirty),
+  // отправили без изменений
+  onEqual: () => close()
+})
+```
+
+- `onDirty` сообщает о каждом поле, `onFormDirty` — о форме целиком: первое изменение и снятие последнего.
+- `setAsDefault()` делает текущие значения стартовыми — после успешного сохранения.
+- `reset(values)` ставит новые значения и делает их стартовыми; поле, которого нет в `values`, получает умолчание
+  компонента. `reset(values, { asDirty: true })` оставляет новые значения изменением.
+- `setAsDefault()` и `reset(values)` сообщают «чисто» через `onDirty` и `onFormDirty`.
+
+## Управление формой
+
+`useForm` возвращает:
+
+| Метод                         | Что делает                                                             |
+| ----------------------------- | ---------------------------------------------------------------------- |
+| `manager`                     | менеджер для `FormLayout`                                              |
+| `handleSubmit()`              | проверка показанных полей и `onSubmit` (или `onEqual`)                 |
+| `getValues()`                 | значения формы — то, что она показывает                                |
+| `getValue(name)`              | значение поля по полному пути (`company.name`)                         |
+| `setValue(name, value)`       | запись поля, как ввод пользователя                                     |
+| `reset(values, options?)`     | новые значения, по умолчанию — стартовые                               |
+| `setAsDefault()`              | текущие значения — стартовые                                           |
+| `setError(name, { message })` | ошибка поля                                                            |
+| `setFocus(name)`              | фокус на поле                                                          |
+| `subscribe(name, callback)`   | подписка на поле; возвращает отписку                                   |
+| `subscribeAny(callback)`      | подписка на любую правку; возвращает отписку                           |
+| `getNames()`                  | полные пути всех полей схемы                                           |
+| `useValue(name)`              | хук внутри `FormLayout`: значение поля с перерисовкой и типом из схемы |
+
+## Внутри схемы: `useValue` и `useSetValue`
+
+Компоненты раскладок и поля читают и пишут соседние поля по полному пути. Хуки берут форму из контекста, поэтому
+работают внутри `FormLayout`:
+
+```tsx
+// подсказка, которая зависит от выбранной причины
+const ReasonHint = createLayout(() => {
+  return () => {
+    const reason = useValue<Reason | null>('reason')
+
+    return (
+      <p className="hint">
+        {reason === 'scan' ? 'Переснимут только отмеченные' : 'Анкета вернётся на шаг'}
+      </p>
     )
-  )
-]
+  }
+})()
+
+// подстановка из списка в поле контакта
+const ManagerPick = ({ managers }: { managers: Manager[] }) => {
+  const setName = useSetValue<string>('contact.name')
+
+  return <Menu items={managers} onSelect={(manager) => setName(manager.name)} />
+}
+```
+
+Типизированный `useValue` для схемы — `createUseValue<typeof scheme>()`.
+
+## Поля, которые добавляет пользователь
+
+```tsx
+// Removable — своя раскладка с кнопкой удаления, AddMenu — меню ещё не добавленных полей
+const Optional = createExtraForm({
+  getItems: (registry) => [
+    registry('phone')((name, remove) => Removable(remove)(TextForm(name, { placeholder: 'Телефон' }))),
+    registry('email')((name, remove) => Removable(remove)(TextForm(name, { placeholder: 'Почта' })))
+  ],
+  getController: (append, visible) => <AddMenu hidden={visible} onSelect={append} />
+})
 ```
+
+Поле добавлено, пока у него есть значение: в `defaultValues` — показано сразу, убранное — изменение формы.
+
+## 0.0.30
+
+- Поле, снова показанное условием, начинает со стартового значения (`defaultValues`), а не с умолчания компонента.
+- `onChange`, `getValues()` и отправка включают поля, которые изменение только что показало, — со стартовым значением,
+  до монтирования.
+- `handleSubmit` проверяет только показанные поля: скрытое поле отправку не держит. Ошибка скрытого поля сбрасывается.
+- Скрытое условием поле не считается изменённым — изменение несёт поле условия.
+- `setAsDefault()` и `reset()` сообщают «чисто» через `onDirty` и `onFormDirty`.

package/dist/bundle.es.js

@@ -1,17 +1,17 @@
-import { jsx as b, Fragment as q, jsxs as P } from "react/jsx-runtime";
-import { createContext as O, useState as L, useContext as R, useMemo as p, useEffect as $, useCallback as j, useRef as U } from "react";
-import M from "fast-deep-equal";
-const A = O({}), N = (n) => {
-  const [, r] = L([]), e = R(A);
+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)
     throw new Error("useValue cannot be used outside Form context");
-  const s = p(() => {
+  const s = A(() => {
     const t = e.getForm(n);
     if (!t)
       throw new Error(`form with name "${n}" doesnt exist in form`);
     return t;
   }, [e, n]);
-  return $(() => {
+  return m(() => {
     const t = e.subscribeToForm(n, () => {
       r([]);
     });
@@ -19,181 +19,205 @@ const A = O({}), N = (n) => {
       t();
     };
   }, []), s.value;
-}, W = (n) => {
-  const r = R(A);
+}, Y = (n) => {
+  const r = T(D);
   if (!r)
     throw new Error("useSetValue cannot be used outside Form context");
   return (e) => {
     r.setValue(n, e);
   };
-}, X = () => (n) => N(n), _ = ({ canActivate: n, name: r, children: e }) => {
-  const s = N(r);
-  return n(s) ? /* @__PURE__ */ b(q, { children: e }) : null;
-}, z = ({ item: { Form: n }, name: r }) => {
-  const [, e] = L([]), s = R(A), { unregistry: t } = p(() => s.registry(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([]);
-  }), []), f = j(
-    (d) => {
-      if (d && d.focus) {
-        const h = s.getForm(r);
-        h.focus = () => {
-          d.focus();
+  }), []), u = R(
+    (y) => {
+      if (y && y.focus) {
+        const v = s.getForm(r);
+        v.focus = () => {
+          y.focus();
         };
       }
     },
     [r]
   );
-  $(() => () => {
+  m(() => () => {
     t();
   }, []);
-  const { value: y, error: m } = s.getForm(r);
-  return /* @__PURE__ */ b(
+  const { value: d, error: b } = s.getForm(r);
+  return /* @__PURE__ */ g(
     n,
     {
       field: {
-        value: y,
-        onChange: (d) => {
-          s.onChange(r, d);
+        value: d,
+        onChange: (y) => {
+          s.onChange(r, y);
         },
         onBlur: () => {
         },
-        ref: f
+        ref: u
       },
       isDirty: !1,
-      error: m,
+      error: b,
       disabled: s.disabled
     }
   );
-}, G = ({ item: n, path: r }) => {
-  const { getController: e, items: s } = n, t = R(A), f = p(() => {
+}, J = ({ item: n, path: r }) => {
+  const { getController: e, items: s } = n, t = T(D), u = A(() => {
     const l = {};
-    return s.forEach(({ name: i, getForm: x }) => {
-      l[i] = x(i, () => D(i));
+    return s.forEach(({ name: i, getForm: F }) => {
+      l[i] = F(i, () => j(i));
     }), l;
-  }, []), y = j(() => {
+  }, []), d = R(() => {
     const l = [];
     return s.forEach(({ name: i }) => {
       t.getForm([...r, i].join(".")).value !== void 0 && l.push(i);
     }), l;
-  }, []), m = p(() => y(), []), [d, h] = L(m);
-  $(() => {
+  }, []), b = A(() => d(), []), [y, v] = B(b);
+  m(() => {
     const { unregistry: l } = t.registryExtraForm(
       s.map(({ name: i }) => [...r, i].join(".")),
       () => {
-        h(y());
+        v(d());
       }
     );
     return () => {
       l();
     };
   }, []);
-  const v = j(
+  const x = R(
     (l) => {
-      f[l] && !d.includes(l) && h((i) => [...i, l]);
+      u[l] && !y.includes(l) && v((i) => [...i, l]);
     },
-    [d]
-  ), D = j((l) => {
-    h((i) => i.filter((x) => x !== l));
+    [y]
+  ), j = R((l) => {
+    v((i) => i.filter((F) => F !== l));
   }, []);
-  return /* @__PURE__ */ P(q, { children: [
-    d.map((l) => {
-      const i = f[l];
-      return /* @__PURE__ */ b(C, { path: r, scheme: [i] }, `param-form--${l}`);
+  return /* @__PURE__ */ U(N, { children: [
+    y.map((l) => {
+      const i = u[l];
+      return /* @__PURE__ */ g(p, { path: r, scheme: [i] }, `param-form--${l}`);
     }),
-    e(v, d)
+    e(x, y)
   ] });
-}, C = ({ scheme: n, path: r }) => /* @__PURE__ */ b(q, { children: n.map((e, s) => e.type === "layout" ? /* @__PURE__ */ b(e.Layout, { children: /* @__PURE__ */ b(C, { path: r, scheme: e.childs }) }, `layout-form--${s}-${r.length}`) : e.type === "context" ? /* @__PURE__ */ b(
-  C,
+}, 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,
   {
     path: [...r, e.context],
     scheme: e.childs
   },
   `context-form--${s}-${e.context}-${r.length}`
-) : e.type === "condition" ? /* @__PURE__ */ b(
-  _,
+) : e.type === "condition" ? /* @__PURE__ */ g(
+  G,
   {
     name: e.depended,
     canActivate: e.canActivate,
-    children: /* @__PURE__ */ b(C, { path: r, scheme: e.childs })
+    children: /* @__PURE__ */ g(p, { path: r, scheme: e.childs })
   },
   `condition--${s}-${e.depended}-${r.length}`
-) : e.type === "extra" ? /* @__PURE__ */ b(G, { path: r, item: e }, `partial-item--${s}-${r.length}`) : e.type === "visability" ? e.hidden ? null : /* @__PURE__ */ b(C, { path: r, scheme: e.childs }, `visability--${s}-${r.length}`) : /* @__PURE__ */ b(
-  z,
+) : 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,
   {
     name: [...r, e.name].join("."),
     item: e
   },
   `form-item--${s}-${e.name}-${r.length}`
-)) }), S = (n, r, e, s) => {
+)) }), $ = (n, r, e, s) => {
   n.forEach((t) => {
     if (t.type === "form" && s(t, [...r, t.name].join("."), e[t.name]), t.type === "context") {
-      S(t.childs, [...r, t.context], e[t.context] ?? {}, s);
+      $(t.childs, [...r, t.context], e[t.context] ?? {}, s);
       return;
     }
     if (t.type === "layout" || t.type === "condition" || t.type === "visability") {
-      S(t.childs, r, e, s);
+      $(t.childs, r, e, s);
       return;
     }
-    t.type === "extra" && t.items.forEach(({ getForm: f, name: y }) => {
-      S([f(y, () => {
+    t.type === "extra" && t.items.forEach(({ getForm: u, name: d }) => {
+      $([u(d, () => {
       })], r, e, s);
     });
   });
-}, E = ({ scheme: n, values: r, path: e, forms: s }) => {
+}, C = (n, r, e, s) => {
   n.forEach((t) => {
-    if (t.type === "form") {
-      const f = [...e, t.name].join(".");
-      s[f].value !== void 0 && (r[t.name] = s[f].value);
+    if (t.type === "form" && s([...r, t.name].join(".")), t.type === "context") {
+      C(t.childs, [...r, t.context], e, s);
+      return;
+    }
+    if (t.type === "layout") {
+      C(t.childs, r, e, s);
+      return;
+    }
+    if (t.type === "visability" && !t.hidden) {
+      C(t.childs, r, e, s);
+      return;
     }
-    if (t.type === "context") {
-      r[t.context] = {}, E({
-        scheme: t.childs,
-        path: [...e, t.context],
-        values: r[t.context],
-        forms: s
+    if (t.type === "condition" && t.canActivate(e[t.depended]?.value)) {
+      C(t.childs, r, e, 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);
+    });
+  });
+}, S = ({ scheme: n, values: r, path: e, 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);
+    }
+    if (u.type === "context") {
+      r[u.context] = {}, S({
+        scheme: u.childs,
+        path: [...e, u.context],
+        values: r[u.context],
+        forms: s,
+        shown: t
       });
       return;
     }
-    if (t.type === "layout") {
-      E({ scheme: t.childs, path: e, values: r, forms: s });
+    if (u.type === "layout") {
+      S({ scheme: u.childs, path: e, values: r, forms: s, shown: t });
       return;
     }
-    if (t.type === "visability") {
-      E({ scheme: t.childs, path: e, values: r, forms: s });
+    if (u.type === "visability") {
+      S({ scheme: u.childs, path: e, values: r, forms: s, shown: t && !u.hidden });
       return;
     }
-    if (t.type === "condition") {
-      const f = s[t.depended]?.value;
-      if (t.canActivate(f)) {
-        E({ scheme: t.childs, path: e, values: r, forms: s });
+    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 });
         return;
       }
     }
-    t.type === "extra" && t.items.forEach(({ getForm: f, name: y }) => {
-      E({ scheme: [f(y, () => {
-      })], path: e, values: r, forms: s });
+    u.type === "extra" && u.items.forEach(({ getForm: d, name: b }) => {
+      S({ scheme: [d(b, () => {
+      })], path: e, values: r, forms: s, shown: !1 });
     });
   });
-}, T = (n, r) => {
+}, L = (n, r) => {
   const e = {};
-  return E({ scheme: n, path: [], values: e, forms: r }), e;
-}, H = (n, r) => {
-  const { onSubmit: e, onChange: s, onEqual: t, disabled: f, onDirty: y, onFormDirty: m, onChangeEvent: d, defaultValues: h } = r, v = { onSubmit: e }, D = { onChange: s }, l = {
+  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 = {
     isActive: !1,
     isSubmitted: !1,
     dirtyCount: 0
-  }, i = {}, x = /* @__PURE__ */ new Set(), V = {
+  }, i = {}, F = /* @__PURE__ */ new Set(), E = {
     subscribers: [],
     names: {}
   };
-  S(n, [], h ?? {}, (o, c, u) => {
-    i[c] = {
+  $(n, [], v ?? {}, (o, a, c) => {
+    i[a] = {
       error: null,
       isDirty: !1,
-      value: u,
-      // текущее (динамическое) состояние поля. Значение равно переданному дефолтному, либо: определяется как дефолтное значение компонента формы в момент его монтирования, а до этого - undefined.
-      startValue: u ?? o.defaultValue,
-      // начальное (стартовое) значение (равно переданному дефолтному, либо значению формы по умолчанию). Исходя из сравнения текущего значения со стартовым, можно понять, модифицированно ли поле
+      value: c,
+      // текущее (динамическое) состояние поля. Значение равно переданному дефолтному, либо: определяется как стартовое значение в момент монтирования поля, а до этого - undefined. Поле, которое скрыло условие, значения не имеет.
+      startValue: c ?? o.defaultValue,
+      // начальное (стартовое) значение (равно переданному дефолтному, либо значению формы по умолчанию). С него начинает поле при монтировании, в том числе снова показанное условием; исходя из сравнения текущего значения со стартовым, можно понять, модифицированно ли поле
       defaultValue: o.defaultValue,
       // дефолтное значение компонента формы
       rerender: () => {
@@ -202,98 +226,100 @@ const A = O({}), N = (n) => {
       validate: o.validate
     };
   });
-  const B = (o, c) => {
-    y?.({ name: o, isDirty: c }), c && l.dirtyCount === 0 && m?.(!0), !c && l.dirtyCount === 1 && m?.(!1), l.dirtyCount += c ? 1 : -1;
+  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 = () => {
+    for (const o in i)
+      i[o].isDirty && (q(o, !1), i[o].isDirty = !1);
   };
   return {
-    submitRef: v,
-    changeRef: D,
+    submitRef: x,
+    changeRef: j,
     scheme: n,
-    disabled: f,
+    disabled: u,
     activate() {
       l.isActive = !0;
     },
     disactivate() {
       l.isActive = !1;
     },
-    setError(o, c) {
-      const u = this.getForm(o);
-      u && (u.error = {
+    setError(o, a) {
+      const c = this.getForm(o);
+      c && (c.error = {
         error: !0,
-        messages: [c.message]
-      }, u.rerender());
+        messages: [a.message]
+      }, c.rerender());
     },
     setFocus(o) {
-      const c = this.getForm(o);
-      c && c.focus && c.focus();
+      const a = this.getForm(o);
+      a && a.focus && a.focus();
     },
-    setValue(o, c) {
-      const u = this.getForm(o);
-      u && u.value !== c && this.onChange(o, c);
+    setValue(o, a) {
+      const c = this.getForm(o);
+      c && c.value !== a && this.onChange(o, a);
     },
     getValues() {
-      return T(n, i);
+      return L(n, i);
     },
     async handleSubmit() {
-      if (f)
+      if (u)
         return;
       l.isSubmitted = !0;
-      let o = !1, c = !1;
-      for (const u in i) {
-        const a = i[u];
-        if (a.value !== void 0) {
-          const g = a.validate(a.value);
-          g && (c = !0, a.error = g, a.rerender(), !o && a.focus && (a.focus(), o = !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));
         }
-      }
-      if (!c) {
+      }), !a) {
         if (l.dirtyCount === 0 && t) {
           t();
           return;
         }
-        if (!v.onSubmit)
+        if (!x.onSubmit)
           return;
-        const u = T(n, i);
-        await v.onSubmit(u, {
-          setError: (a, g) => {
-            const F = this.getForm(a);
-            F.error = {
+        const c = L(n, i);
+        await x.onSubmit(c, {
+          setError: (f, h) => {
+            const V = this.getForm(f);
+            V.error = {
               error: !0,
-              messages: [g.message]
-            }, F.rerender();
+              messages: [h.message]
+            }, V.rerender();
           }
-        }).catch((a) => {
-          console.log("[formkit] submit exception:", a);
+        }).catch((f) => {
+          console.log("[formkit] submit exception:", f);
         });
       }
     },
-    reset(o, { asDirty: c }) {
-      S(n, [], o, (u, a, g) => {
-        if (g === void 0 && i[a].value === void 0)
+    reset(o, { asDirty: a }) {
+      $(n, [], o, (c, f, h) => {
+        if (h === void 0 && i[f].value === void 0)
           return;
-        if (V.names[a] && g === void 0) {
-          i[a].value = void 0;
+        if (E.names[f] && h === void 0) {
+          i[f].value = void 0;
           return;
         }
-        const F = g ?? u.defaultValue;
-        c || (i[a].startValue = F, i[a].isDirty = !1), i[a].value !== F && this.onChange(a, F);
-      }), c || (l.dirtyCount = 0, l.isSubmitted = !1), V.subscribers.forEach(({ visualizeEvalueatedForms: u }) => {
-        u();
+        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 }) => {
+        c();
       });
     },
     setAsDefault() {
-      S(n, [], {}, (o, c) => {
-        i[c].startValue = i[c].value, i[c].isDirty = !1;
-      }), l.dirtyCount = 0, l.isSubmitted = !1;
+      $(n, [], {}, (o, a) => {
+        i[a].startValue = i[a].value ?? i[a].defaultValue;
+      }), P(), l.isSubmitted = !1;
     },
-    registry(o, c) {
-      return i[o].rerender = c, i[o].value === void 0 && (i[o].value = i[o].defaultValue), {
+    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].value = void 0;
-            const u = !M(i[o].startValue, i[o].defaultValue);
-            i[o].isDirty !== u && B(o, u), i[o].isDirty = u;
+            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;
           }
         }
       };
@@ -301,52 +327,52 @@ const A = O({}), N = (n) => {
     getForm(o) {
       return i[o];
     },
-    subscribeToForm(o, c) {
-      const u = { callback: c }, a = this.getForm(o);
-      return a.subscribers.push(u), () => {
-        a.subscribers = a.subscribers.filter((g) => g !== u);
+    subscribeToForm(o, a) {
+      const c = { callback: a }, f = this.getForm(o);
+      return f.subscribers.push(c), () => {
+        f.subscribers = f.subscribers.filter((h) => h !== c);
       };
     },
     subscribeToAny(o) {
-      return x.add(o), () => {
-        x.delete(o);
+      return F.add(o), () => {
+        F.delete(o);
       };
     },
     getNames() {
       return Object.keys(i);
     },
-    registryExtraForm(o, c) {
-      const u = { visualizeEvalueatedForms: c };
-      return o.forEach((a) => {
-        V.names[a] = !0;
-      }), V.subscribers.push(u), {
+    registryExtraForm(o, a) {
+      const c = { visualizeEvalueatedForms: a };
+      return o.forEach((f) => {
+        E.names[f] = !0;
+      }), E.subscribers.push(c), {
         unregistry() {
-          V.subscribers = V.subscribers.filter((a) => a !== u);
+          E.subscribers = E.subscribers.filter((f) => f !== c);
         }
       };
     },
-    onChange(o, c) {
-      const u = this.getForm(o), a = !M(c, u.startValue);
-      u.isDirty !== a && B(o, a), u.isDirty = a, d?.({ name: o, value: c }), (u.error || l.isSubmitted) && (u.error = u.validate(c) || null);
-      const g = u.value;
-      u.value = c, u.rerender(), u.subscribers.forEach(({ callback: F }) => {
-        F(c, g);
-      }), x.forEach((F) => {
-        F();
-      }), D.onChange?.(T(n, i));
+    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;
+      c.value = a, c.rerender(), c.subscribers.forEach(({ callback: V }) => {
+        V(a, h);
+      }), F.forEach((V) => {
+        V();
+      }), j.onChange?.(L(n, i));
     }
   };
-}, Y = (n, r) => {
-  const e = U(null);
-  e.current === null && (e.current = H(n, r));
+}, k = (n, r) => {
+  const e = z(null);
+  e.current === null && (e.current = K(n, r));
   const s = e.current;
-  return $(() => {
+  return m(() => {
     e.current && (e.current.submitRef.onSubmit = r.onSubmit, e.current.changeRef.onChange = r.onChange);
   }, [r.onSubmit, r.onChange]), {
     manager: s,
-    useValue: (t) => N(t),
-    reset: (t, f = {}) => {
-      s.reset(t, f);
+    useValue: (t) => M(t),
+    reset: (t, u = {}) => {
+      s.reset(t, u);
     },
     setAsDefault: () => {
       s.setAsDefault();
@@ -354,11 +380,11 @@ const A = O({}), N = (n) => {
     setFocus: (t) => {
       s.setFocus(t);
     },
-    setError: (t, f) => {
-      s.setError(t, f);
+    setError: (t, u) => {
+      s.setError(t, u);
     },
-    setValue: (t, f) => {
-      s.setValue(t, f);
+    setValue: (t, u) => {
+      s.setValue(t, u);
     },
     getValue: (t) => s.getForm(t).value,
     getValues: () => s.getValues(),
@@ -366,17 +392,17 @@ const A = O({}), N = (n) => {
       await s.handleSubmit();
     },
     // prettier-ignore
-    subscribe: (t, f) => s.subscribeToForm(t, f),
+    subscribe: (t, u) => s.subscribeToForm(t, u),
     // подписка на любое изменение значений формы (для гейтов поверх всех полей)
     subscribeAny: (t) => s.subscribeToAny(t),
     // плоский список имён всех полей (dotted-пути; вложенные context раскрыты)
     getNames: () => s.getNames()
   };
-}, Z = ({ manager: n }) => (p(() => {
+}, I = ({ manager: n }) => (A(() => {
   n.activate();
-}, []), $(() => () => {
+}, []), m(() => () => {
   n.disactivate();
-}, []), /* @__PURE__ */ b(A.Provider, { value: n, children: /* @__PURE__ */ b(C, { scheme: n.scheme, path: [] }) })), w = (n) => {
+}, []), /* @__PURE__ */ g(D.Provider, { value: n, children: /* @__PURE__ */ g(p, { scheme: n.scheme, path: [] }) })), w = (n) => {
   try {
     n();
   } catch (r) {
@@ -390,67 +416,67 @@ const A = O({}), N = (n) => {
       error: !0
     };
   }
-}, k = (n) => (r, e) => {
-  const s = n.getRequireCheck(e), { $rules: t = {}, ...f } = e, { validate: y, required: m } = t;
+}, rr = (n) => (r, e) => {
+  const s = n.getRequireCheck(e), { $rules: t = {}, ...u } = e, { validate: d, required: b } = t;
   return {
     type: "form",
     name: r,
     defaultValue: n.defaultValue,
-    Form: n.getForm(f),
-    validate: (d) => {
-      if (m) {
-        const h = w(() => s(d));
-        if (h)
-          return h;
-        if (y) {
-          const v = w(() => y(d));
-          if (v)
-            return v;
+    Form: n.getForm(u),
+    validate: (y) => {
+      if (b) {
+        const v = w(() => s(y));
+        if (v)
+          return v;
+        if (d) {
+          const x = w(() => d(y));
+          if (x)
+            return x;
         }
         return;
       }
-      if (y && !w(() => s(d))) {
-        const v = w(() => y(d));
-        if (v)
-          return v;
+      if (d && !w(() => s(y))) {
+        const x = w(() => d(y));
+        if (x)
+          return x;
       }
     }
   };
-}, I = (n) => (r) => (...e) => ({
+}, er = (n) => (r) => (...e) => ({
   type: "layout",
   Layout: n(r),
   childs: e
-}), rr = ({
+}), tr = ({
   getItems: n,
   getController: r
 }) => ({
   type: "extra",
   items: n((e) => (s) => ({ type: "registry", name: e, getForm: s })),
   getController: r
-}), er = (n) => (...r) => ({
+}), sr = (n) => (...r) => ({
   type: "context",
   context: n,
   childs: r
-}), tr = (n, r) => (...e) => ({
+}), nr = (n, r) => (...e) => ({
   type: "condition",
   depended: n,
   canActivate: r.canActivate,
   childs: e
-}), sr = ({ hidden: n }) => (...r) => ({
+}), or = ({ hidden: n }) => (...r) => ({
   type: "visability",
   hidden: n ?? !1,
   childs: r
 });
 export {
-  tr as Condition,
-  er as Context,
-  Z as FormLayout,
-  sr as Visablility,
-  rr as createExtraForm,
-  k as createForm,
-  I as createLayout,
-  X as createUseValue,
-  Y as useForm,
-  W as useSetValue,
-  N as useValue
+  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,
+  M as useValue
 };

package/dist/manager/read-scheme.d.ts

@@ -1,5 +1,8 @@
+import { Forms } from './manager';
 import { FieldValues } from '../types';
 import { SchemeItems } from '../core/types';
 type cb = (item: SchemeItems.Form, name: string, value?: any) => void;
+type shownCb = (name: string) => void;
 declare const readScheme: (scheme: SchemeItems.All[], path: string[], values: FieldValues, callback: cb) => void;
-export { readScheme };
+declare const readShown: (scheme: SchemeItems.All[], path: string[], forms: Forms, callback: shownCb) => void;
+export { readScheme, readShown };

package/package.json

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