@cube-dev/ui-kit 0.182.0 → 0.184.0

package/docs/modern-form-guide.md

@@ -2,7 +2,7 @@
 
 For a new modern form, start with `Form.useController<Model>()`, bind inputs with `name="email"` or a nested tuple such as `name={['user', 'email']}`, and submit through `<Form onSubmit={...}>` and `<Form.Submit>`. Add subscriptions only where other UI needs to read form state. The input components already subscribe to their own values and errors. `field={form.field(path)}` is an optional alternative when you want model-checked paths, input value compatibility checks, or inferred custom-validator types.
 
-Existing `Form.useForm()` forms and roots without a modern controller use the legacy backend. Follow the [migration checklist](https://github.com/cube-js/cube-ui-kit/blob/main/docs/modern-form-migration.md) when converting one. `DialogForm` still requires a legacy instance; do not pass a modern controller through a cast.
+**The modern implementation is recommended for new forms.** UI Kit also ships a legacy implementation for compatibility. Existing `Form.useForm()` forms and roots without a modern controller use the legacy backend. Follow the [migration checklist](https://github.com/cube-js/cube-ui-kit/blob/main/docs/modern-form-migration.md) when converting one. `DialogForm` also accepts a modern controller and is recommended for new dialog forms; it preserves the legacy implementation when no modern controller is supplied.
 
 Recipes: [API choices](#pick-one-binding-and-one-owner-for-each-concern), [reactive UI](#read-a-value-show-status-or-reveal-a-section), [server data](#load-server-data-refresh-defaults-or-discard-edits), [programmatic edits](#edit-values-from-an-event-handler), [validation](#validate-simple-rules-sibling-fields-or-an-api-response), [conditional fields and wizards](#hide-fields-use-nested-data-or-build-a-wizard), [submission](#submit-display-server-errors-and-reset), and [custom controls](#implement-a-reusable-custom-control).
 
@@ -267,3 +267,24 @@ Use the same field integration as built-in inputs: `FieldBaseProps<Value>`, `use
 The [compiled CustomControl example](https://github.com/cube-js/cube-ui-kit/blob/main/typecheck/consumer/modern-form-examples.tsx) shows the complete pattern. The [component creation guide](https://cube-ui-kit.vercel.app/?path=/docs/getting-started-create-component--docs) explains the shared field wrapper. `Form.Item` / `Field` belongs to the legacy backend; it is not a second way to connect a modern custom input.
 
 For SSR, seed the controller with the same serializable defaults on server and client. Initial hydration uses the creation snapshot before subscribers catch up with client state. Each mounted creator owns its controller; no manual disposal is needed.
+
+## Use a form in a dialog
+
+`DialogForm` selects the same implementation as `Form`: pass a modern controller for new dialogs. Create the controller above the dialog when its draft should survive unmounts, seed defaults in the creation hook, and put save callbacks on the root.
+
+```tsx
+function EditProfileDialog({ initialProfile, save }) {
+  const form = Form.useController<{ email: string | null }>({ defaultValues: initialProfile });
+  return (
+    <DialogTrigger>
+      <Button>Edit profile</Button>
+      <DialogForm form={form} title="Edit profile" onSubmit={(values, { signal }) => save(values, signal)}>
+        <TextInput name="email" label="Email" isRequired />
+        <Form.SubmitError />
+      </DialogForm>
+    </DialogTrigger>
+  );
+}
+```
+
+The dialog closes only after successful submission, including `form.submit()` and controller-configured callbacks. Validation or save errors keep it open. Closing cancels pending submission; late responses cannot close a reopened session. By default, ending the session resets values. Use `preserve` to retain the draft in a controller owned outside the dialog. `preserve` does not keep an unmounted controller alive. See the [DialogForm reference](https://cube-ui-kit.vercel.app/?path=/docs/overlays-dialogform--docs) for custom actions, container lifecycle, and legacy behavior.

package/docs/modern-form-migration.md

@@ -31,7 +31,7 @@ The following API mapping describes migration choices; names are not mechanicall
 | `submit()` | `submit()` returns a tagged result such as `submitted`, `invalid`, or `failed` |
 | `Form.Item` wrapping a custom control | `useFieldProps` plus `wrapWithField` inside that control |
 
-`DialogForm` and Cloud's `NarrowForm` / `SaveableCard` currently expose legacy instance contracts. Keep their callers legacy until the wrapper itself is migrated and verified. Passing a modern controller through a cast does not migrate the wrapper. `Form.Item`, legacy mutable flags, and the legacy `FormContext` instance shape remain compatibility APIs.
+`DialogForm` supports both implementations. Pass a modern controller, move defaults to its creation options, and review dismissal/reset behavior: modern dialogs cancel pending submission and reset when the editing session ends unless `preserve` is set. Keep the controller outside the dialog when preserving drafts across unmounts. Cloud's `NarrowForm` / `SaveableCard` still expose legacy instance contracts; keep their callers legacy until those wrappers are migrated and verified. Passing a modern controller through a cast does not migrate the wrapper. `Form.Item`, legacy mutable flags, and the legacy `FormContext` instance shape remain compatibility APIs.
 
 ## Review the behavior changes
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.182.0",
+  "version": "0.184.0",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -68,6 +68,7 @@
     "prism-react-renderer": "^2.4.1",
     "prismjs": "^1.30.0",
     "react-aria": "^3.45.0",
+    "react-compiler-runtime": "1.0.0",
     "react-focus-lock": "^2.13.5",
     "react-hotkeys-hook": "^5.1.0",
     "react-i18next": "^17.0.8",
@@ -134,7 +135,6 @@
     "playwright": "^1.62.1",
     "prettier": "^3.2.5",
     "react": "^19.1.1",
-    "react-compiler-runtime": "1.0.0",
     "react-dom": "^19.1.1",
     "react-router": "^6.22.3",
     "react-test-renderer": "^19.1.1",
@@ -162,6 +162,10 @@
   "scripts": {
     "start": "pnpm storybook",
     "build": "tsdown",
+    "build:uncompiled": "UIKIT_REACT_COMPILER=off tsdown --out-dir dist-uncompiled",
+    "test:compiled": "vitest run --config vitest.compiled.config.ts",
+    "pack:test": "node scripts/compiler/pack.mjs",
+    "test:package": "vitest run --config vitest.package.config.ts",
     "watch": "tsdown --watch",
     "test": "vitest run",
     "test:form-store": "vitest run --config vitest.form-store.config.ts",
@@ -193,6 +197,7 @@
     "add-icons": "cd src/icons && node add-new-icon.js && pnpm fix",
     "audit-docs": "node scripts/audit-docs.mjs",
     "audit-defaults": "UPDATE_DEFAULTS=1 vitest run src/eslint-plugin/defaults.test.ts && prettier --write src/eslint-plugin/defaults.generated.ts",
+    "diagnostics:compiler": "node scripts/compiler/report.mjs",
     "diagnostics:form": "node scripts/form-diagnostics.mjs",
     "update-tasty": "pnpm add @tenphi/tasty@${npm_config_version:-latest} --save-exact",
     "update-glaze": "pnpm add @tenphi/glaze@${npm_config_version:-latest} --save-exact",