@cube-dev/ui-kit 0.0.0-canary-08f0089 → 0.0.0-canary-0ff010b

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0ff010b | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { useEffect } from "react";
 import { useFocusVisible } from "react-aria";

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0ff010b | Cube Dev Team */
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef } from "react";
 
 //#region src/utils/react/useEventBus.ts

package/dist/utils/react/useId.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0ff010b | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useEffect, useRef, useState } from "react";
 import { useSSRSafeId } from "@react-aria/ssr";

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0ff010b | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useIsDarwin.ts

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0ff010b | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { useMemo } from "react";
 

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0ff010b | Cube Dev Team */
 import * as React$1 from "react";
 
 //#region src/utils/react/useLayoutEffect.tsx

package/dist/utils/react/useLocalStorage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0ff010b | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useCallback, useSyncExternalStore } from "react";
 

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0ff010b | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 

package/dist/utils/react/useOverlayEscapeGuard.js

@@ -0,0 +1,41 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0ff010b | Cube Dev Team */
+import { useEvent } from "../../_internal/hooks/use-event.js";
+
+//#region src/utils/react/useOverlayEscapeGuard.ts
+/**
+* Stops a CLOSED overlay from answering for `Escape` (CUB-4839).
+*
+* `useOverlay`'s `Escape` handler calls `stopPropagation()` and
+* `preventDefault()` for every `Escape` it sees, and only THEN asks whether
+* this overlay is the topmost one allowed to act on it — unlike
+* `onInteractOutside`, which it gates on `isOpen` up front. An overlay that has
+* already closed therefore consumes the key and does nothing with it, so the
+* `Escape` meant for the Dialog around it closes nothing at all.
+*
+* That is reachable here because our overlays stay mounted for their exit
+* transition while still holding DOM focus: pick an option from a list inside a
+* Dialog and the very next `Escape` lands in the closing list.
+*
+* Passing `useOverlay` an `isKeyboardDismissDisabled` of its own does NOT work,
+* and that is the reason this exists. `DisplayTransition` preserves content
+* across an exit by replaying the children it stored while the overlay was
+* open, so every value that subtree captured — `isKeyboardDismissDisabled`
+* included — stays frozen at its open-state reading for exactly the window
+* this has to guard. `useEvent` gets around it by returning a handler whose
+* identity never changes while its body always runs the latest render's
+* closure, so the frozen copy still sees the current `isOpen`.
+*/
+function useOverlayEscapeGuard(overlayProps, isOpen) {
+	const onKeyDown = useEvent((event) => {
+		if (event.key === "Escape" && !isOpen) return;
+		overlayProps.onKeyDown?.(event);
+	});
+	return {
+		...overlayProps,
+		onKeyDown
+	};
+}
+
+//#endregion
+export { useOverlayEscapeGuard };
+//# sourceMappingURL=useOverlayEscapeGuard.js.map

package/dist/utils/react/useOverlayEscapeGuard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverlayEscapeGuard.js","names":[],"sources":["../../../src/utils/react/useOverlayEscapeGuard.ts"],"sourcesContent":["import { useEvent } from '../../_internal';\n\nimport type { DOMAttributes, KeyboardEvent } from 'react';\n\ntype OverlayDOMProps = DOMAttributes<any>;\n\n/**\n * Stops a CLOSED overlay from answering for `Escape` (CUB-4839).\n *\n * `useOverlay`'s `Escape` handler calls `stopPropagation()` and\n * `preventDefault()` for every `Escape` it sees, and only THEN asks whether\n * this overlay is the topmost one allowed to act on it — unlike\n * `onInteractOutside`, which it gates on `isOpen` up front. An overlay that has\n * already closed therefore consumes the key and does nothing with it, so the\n * `Escape` meant for the Dialog around it closes nothing at all.\n *\n * That is reachable here because our overlays stay mounted for their exit\n * transition while still holding DOM focus: pick an option from a list inside a\n * Dialog and the very next `Escape` lands in the closing list.\n *\n * Passing `useOverlay` an `isKeyboardDismissDisabled` of its own does NOT work,\n * and that is the reason this exists. `DisplayTransition` preserves content\n * across an exit by replaying the children it stored while the overlay was\n * open, so every value that subtree captured — `isKeyboardDismissDisabled`\n * included — stays frozen at its open-state reading for exactly the window\n * this has to guard. `useEvent` gets around it by returning a handler whose\n * identity never changes while its body always runs the latest render's\n * closure, so the frozen copy still sees the current `isOpen`.\n */\nexport function useOverlayEscapeGuard<T extends OverlayDOMProps>(\n  overlayProps: T,\n  isOpen: boolean | undefined,\n): T {\n  const onKeyDown = useEvent((event: KeyboardEvent<any>) => {\n    // Decline it, so it reaches whoever can actually act on it.\n    if (event.key === 'Escape' && !isOpen) return;\n\n    overlayProps.onKeyDown?.(event);\n  });\n\n  return { ...overlayProps, onKeyDown };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAgB,sBACd,cACA,QACG;CACH,MAAM,YAAY,UAAU,UAA8B;AAExD,MAAI,MAAM,QAAQ,YAAY,CAAC,OAAQ;AAEvC,eAAa,YAAY,MAAM;GAC/B;AAEF,QAAO;EAAE,GAAG;EAAc;EAAW"}

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0ff010b | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { useCallback, useContext, useEffect, useRef } from "react";
 

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0ff010b | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useScheme.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0ff010b | Cube Dev Team */
 import { useSyncExternalStore } from "react";
 
 //#region src/utils/react/useScheme.ts

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0ff010b | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useViewportSize.ts

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0ff010b | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0ff010b | Cube Dev Team */
 //#region src/utils/selection.ts
 /**
 * Deduplicate/toggle keys in a selection: if a key appears twice it is

package/dist/utils/styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0ff010b | Cube Dev Team */
 //#region src/utils/styles.ts
 /**
 * Split properties into style and non-style properties.

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0ff010b | Cube Dev Team */
 //#region src/utils/tree.ts
 function toFlatTree(tree, includingFolders) {
 	return tree.reduce((result, node) => {

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0ff010b | Cube Dev Team */
 import { isDevEnvOrTest } from "./is-dev-env.js";
 
 //#region src/utils/warnings.ts

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0ff010b | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.0.0-canary-08f0089";
+const VERSION = "0.0.0-canary-0ff010b";
 const TASTY_VERSION = "3.9.2";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/FieldProperties.md

@@ -4,12 +4,12 @@ All input components in UI Kit (`TextInput`, `Select`, `ComboBox`, `Checkbox`, `
 
 When used inside a [Form](./components/form/Form.md), these properties are automatically inherited from the form context and can be overridden at the field level.
 
-For modern forms, follow the [use-case guide](./components/form/ModernForm.md). Bind with `name` and put validation options on the input, or choose `field={form.field(path, options)}` for model-aware type checking and validator inference. Keep presentation props on the input. These binding styles are alternatives; descriptors are not required for nested data.
+For modern forms, follow the [use-case guide](./components/form/ModernForm.md). Put binding and validation options on `form.field(path, options)` and presentation props on the input. The prop reference below also covers `name` bindings for shared controls and legacy forms; these are alternatives to the typed descriptor, not additional required setup.
 
 ## Identity & Form Integration
 
 - **`field`** `FormField<Value>` — Typed modern binding created by `form.field(path, options)`. Supports nested paths and takes precedence over `form` and `name`. Built-in bindings accept `null` and `undefined` alongside their normal model value; display fallbacks do not replace stored nulls.
-- **`name`** `string | readonly (string | number)[]` — Field name when a descriptor is not supplied. Modern forms accept literal strings or nested tuple paths, such as `['users', 0, 'email']`. Legacy forms accept strings only and retain dot notation.
+- **`name`** `string` — Field name for form data binding when a descriptor is not supplied.
 - **`form`** `CubeFormInstance | FormController<T>` — Legacy instance or modern controller. Automatically provided when inside a Form context. Pass it explicitly to link an input to a form it is not nested in, or to override the surrounding form.
 - **`defaultValue`** `any` — Initial field value. Modern controller values/defaults take precedence, including explicit `null` and `undefined`.
 - **`preserve`** `boolean` (modern default: `true`) — Retain the value after the last input for this field unmounts.
@@ -122,15 +122,14 @@ function ExampleForm() {
   return (
     <Form form={form}>
       <TextInput
-        name="name"
-        rules={[{ min: 2 }]}
+        field={form.field('name', { rules: [{ min: 2 }] })}
         label="Full Name"
         description="As it appears on your ID"
         isRequired
       />
 
       <Select
-        name="role"
+        field={form.field('role')}
         label="Role"
         tooltip="Your primary role in the organization"
         necessityIndicator="label"

package/docs/Usage.md

@@ -458,7 +458,7 @@ DataTable also accepts nested column definitions for already-shaped pivot result
 
 ### Modern forms
 
-For a new modern form, create a typed controller, put defaults on the controller, and bind inputs with `name`. Modern names accept strings and nested tuples; `field` is an optional typed binding:
+For a new modern form, create a typed controller, put defaults on the controller, and bind inputs with descriptors:
 
 ```tsx
 const form = Form.useController<{ email: string | null }>({
@@ -466,7 +466,7 @@ const form = Form.useController<{ email: string | null }>({
 });
 
 <Form form={form} onSubmit={(values, { signal }) => save(values, signal)}>
-  <TextInput name="email" label="Email" isRequired />
+  <TextInput field={form.field('email')} label="Email" isRequired />
   <Form.SubmitError />
   <Form.Submit>Save</Form.Submit>
 </Form>
@@ -482,4 +482,4 @@ Inputs subscribe to their own values and errors. For other reactive UI, use `For
 
 ### Shared field integration
 
-Built-in inputs have field support; they do not need a `Field` wrapper. Modern `name` and `field` bindings, and legacy string `name` bindings, connect through `useFieldProps`. Custom controls use that hook and `wrapWithField`. [Field Properties](./FieldProperties.md) documents shared labels, validation, state, and presentation props.
+Built-in inputs have field support; they do not need a `Field` wrapper. Modern descriptors and legacy `name` bindings both connect through `useFieldProps`. Custom controls use that hook and `wrapWithField`. [Field Properties](./FieldProperties.md) documents shared labels, validation, state, and presentation props.

package/docs/components/fields/FileInput.md

@@ -87,10 +87,6 @@ The `mods` property accepts the following modifiers you can override:
 />
 ```
 
-### Form Values and Resets
-
-When bound to a legacy or modern form, resetting updates the displayed filename and clears any obsolete native file selection. This also allows choosing the same file again. A nonempty string value can display a filename, but it cannot restore file bytes; the user must select the file again. With `type="text"`, the form stores the file's text content.
-
 ### With Validation
 
 Pass `isValid` or `isInvalid` to tint the border and show the matching state icon.

package/docs/components/form/Form.md

@@ -14,7 +14,7 @@ function EmailForm() {
 
   return (
     <Form form={form} onSubmit={(values, { signal }) => save(values, signal)}>
-      <TextInput name="email" label="Email" isRequired />
+      <TextInput field={form.field('email')} label="Email" isRequired />
       <Form.SubmitError />
       <Form.Submit>Save</Form.Submit>
     </Form>
@@ -22,8 +22,6 @@ function EmailForm() {
 }
 ```
 
-`name` is sufficient to bind an input. Modern forms also accept `name={['user', 'email']}` for nested data; `field={form.field(path)}` is optional and adds model-aware type checking and validator inference.
-
 `Form.useForm()` and roots without a modern controller keep the legacy backend. Existing forms need no API changes when upgrading. Use the [migration checklist](https://github.com/cube-js/cube-ui-kit/blob/main/docs/modern-form-migration.md) before converting one; `DialogForm` and `Form.Item` still require legacy forms.
 
 **The reference and examples below describe the legacy backend.** Its instance methods, root `defaultValues`, and dot-separated paths do not apply to modern controllers. Shared layout and field presentation props work with both backends. See [Modern Form](./ModernForm.md) for modern defaults and commands.

package/docs/components/form/ModernForm.md

@@ -1,6 +1,6 @@
 # Modern Form: choose the API for the job
 
-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.
+For a new modern form, start with `Form.useController<Model>()`, bind inputs with `field={form.field(path)}`, 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.
 
 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.
 
@@ -29,12 +29,13 @@ function ProfileForm({
   return (
     <Form form={form} onSubmit={(values, { signal }) => save(values, signal)}>
       <TextInput
-        name="email"
-        rules={[{ type: 'email', message: 'Enter a valid email' }]}
+        field={form.field('email', {
+          rules: [{ type: 'email', message: 'Enter a valid email' }],
+        })}
         label="Email"
         isRequired
       />
-      <Switch name="notifications" label="Notifications" />
+      <Switch field={form.field('notifications')} label="Notifications" />
       <Form.SubmitError />
       <Form.Submit>Save</Form.Submit>
       <Form.Reset>Reset</Form.Reset>
@@ -51,17 +52,15 @@ The model describes possible values, including API `null`s. A text input display
 
 | Concern | Start here | Use the alternative when… |
 | --- | --- | --- |
-| Connect an input | `name="email"` for a literal name, or `name={['user', 'email']}` for a nested modern path | `field={form.field(path, options)}` adds model-checked paths, input value compatibility, and validator inference. Neither binding requires the other. |
+| Connect an input | `field={form.field(path, options)}` | `name="email"` keeps a shared legacy/modern wrapper working. Names are not checked against the controller's model. |
 | Locate the controller | Use the controller you created, or pass it as a prop | `Form.useControllerContext<Model>()` avoids prop threading in a descendant. It reads context without subscribing. |
-| Configure a field | With `name`, put `rules`, dependencies, and retention on the input | With `field`, put these options and typed `validate` on the descriptor. Avoid configuring the same option in both places. |
+| Configure a field | Put `rules`, `validate`, dependencies, and retention on the descriptor | Input-level registration props support reusable controls with their own defaults and legacy callers. Avoid configuring the same option in both places. |
 | Present a field | Input props such as `label`, `description`, `isRequired` | `rules: [{ required: true }]` is useful when required validation needs a custom message or no visible required marker. |
 | Handle submit/change/failure | Callbacks on the owning `<Form>` | Hook callbacks let a controller own behavior independently of a root, or provide defaults to a wrapper. Choose one location per callback. |
 | Initialize values | Controller `defaultValues` | Field `defaultValue` supplies a fallback for a reusable field missing from the controller's data. |
 
 `Form.Submit`, `Form.Reset`, and `Form.SubmitError` are aliases of the exported `SubmitButton`, `ResetButton`, and `SubmitError` components. This guide uses the `Form.*` names consistently; importing a standalone name does not select a different implementation.
 
-`name` uses the surrounding form, or an explicit `form={form}` outside it. Tuple names accept string and numeric segments and readonly arrays; inline tuples do not need memoization. Names are not checked against the surrounding controller's model because React context cannot infer its type. Tuple names require a modern controller; legacy forms retain string names and dot notation.
-
 A descriptor is pure configuration, so creating it inline is expected. It neither reads state nor registers a field; the mounted input registers after commit. It supplies the controller and path even outside the root, so adding `form` or `name` to the same input is unnecessary. If both are present, the descriptor wins. Descriptor options override only matching options they supply. In particular, descriptor `rules` or `validate` replaces input-level `rules`; put built-in rules and a custom validator together on the descriptor to run both.
 
 Controller values and defaults take precedence over field defaults, including explicit `null` and `undefined`. Root callbacks override the corresponding hook callback while mounted; omitted or undefined root callbacks fall back to the hook callback. Business callbacks update after every committed render. Defaults, `errorPolicy`, and diagnostic handlers are creation options; update values through commands and override error policy per field when needed.
@@ -172,7 +171,7 @@ Use `setValue(path, value)` for one path and `setValues(partial)` for several to
 | Validation case | Start here |
 | --- | --- |
 | Required field with a visible marker | Input `isRequired`; it adds required validation too. |
-| Email, length, range, pattern, or enum | Input `rules` using the built-in constraints, or descriptor `rules` when using `field`. |
+| Email, length, range, pattern, or enum | Descriptor `rules` using the built-in constraints. |
 | Custom domain check | Descriptor `validate(value, context)` for an inferred field value and checked reads. |
 | Several custom rules or existing shared rule objects | `rules: [{ validator(rule, value, context) { ... } }]`; use `ModernValidationRule` for strict modern rule typing. |
 | Validation depends on another form value | `dependsOn: ['password']`, or nested tuples such as `dependsOn: [['account', 'password']]`. |
@@ -236,7 +235,7 @@ Unmounting the last input at a path removes it from `activeValues` immediately a
 
 For a wizard, validate a step before unmounting it and choose `submitValues="all"` if previous steps belong in the final payload. That does not revalidate unmounted steps. If final submission must validate every step against the latest data, keep the relevant inputs mounted or perform whole-payload validation explicitly. A form with no active fields is invalid.
 
-Bind nested leaves directly with `name={['rows', index, 'email']}`. The optional typed equivalent is `field={form.field(['rows', index, 'email'])}`. A string such as `'user.email'` is one literal key, not dot notation. Numeric indices and numeric string segments address the same path. Removing an array path does not shift the other indices. Registering a parent object makes its complete value active; register leaf paths when only selected children belong in the active payload. Descriptor and controller-command literal paths are checked against the model; `name` accepts dynamic paths without those checks. The declaration surface requires TypeScript 5.4 or newer.
+Bind nested leaves with tuples: `field={form.field(['rows', index, 'email'])}`. A string such as `'user.email'` is one literal key, not dot notation. Numeric indices and numeric string segments address the same path. Removing an array path does not shift the other indices. Registering a parent object makes its complete value active; register leaf paths when only selected children belong in the active payload. Known literal paths are typechecked; widened dynamic paths are supported. The declaration surface requires TypeScript 5.4 or newer.
 
 `getValues()` / `state.values` contains all retained data; `getActiveValues()` / `state.activeValues` contains registered paths. Dirty/touched metadata includes retained fields, while validity concerns active fields.
 

package/docs/modern-form-guide.md

@@ -1,6 +1,6 @@
 # Modern Form: choose the API for the job
 
-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.
+For a new modern form, start with `Form.useController<Model>()`, bind inputs with `field={form.field(path)}`, 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.
 
 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.
 
@@ -29,12 +29,13 @@ function ProfileForm({
   return (
     <Form form={form} onSubmit={(values, { signal }) => save(values, signal)}>
       <TextInput
-        name="email"
-        rules={[{ type: 'email', message: 'Enter a valid email' }]}
+        field={form.field('email', {
+          rules: [{ type: 'email', message: 'Enter a valid email' }],
+        })}
         label="Email"
         isRequired
       />
-      <Switch name="notifications" label="Notifications" />
+      <Switch field={form.field('notifications')} label="Notifications" />
       <Form.SubmitError />
       <Form.Submit>Save</Form.Submit>
       <Form.Reset>Reset</Form.Reset>
@@ -51,17 +52,15 @@ The model describes possible values, including API `null`s. A text input display
 
 | Concern | Start here | Use the alternative when… |
 | --- | --- | --- |
-| Connect an input | `name="email"` for a literal name, or `name={['user', 'email']}` for a nested modern path | `field={form.field(path, options)}` adds model-checked paths, input value compatibility, and validator inference. Neither binding requires the other. |
+| Connect an input | `field={form.field(path, options)}` | `name="email"` keeps a shared legacy/modern wrapper working. Names are not checked against the controller's model. |
 | Locate the controller | Use the controller you created, or pass it as a prop | `Form.useControllerContext<Model>()` avoids prop threading in a descendant. It reads context without subscribing. |
-| Configure a field | With `name`, put `rules`, dependencies, and retention on the input | With `field`, put these options and typed `validate` on the descriptor. Avoid configuring the same option in both places. |
+| Configure a field | Put `rules`, `validate`, dependencies, and retention on the descriptor | Input-level registration props support reusable controls with their own defaults and legacy callers. Avoid configuring the same option in both places. |
 | Present a field | Input props such as `label`, `description`, `isRequired` | `rules: [{ required: true }]` is useful when required validation needs a custom message or no visible required marker. |
 | Handle submit/change/failure | Callbacks on the owning `<Form>` | Hook callbacks let a controller own behavior independently of a root, or provide defaults to a wrapper. Choose one location per callback. |
 | Initialize values | Controller `defaultValues` | Field `defaultValue` supplies a fallback for a reusable field missing from the controller's data. |
 
 `Form.Submit`, `Form.Reset`, and `Form.SubmitError` are aliases of the exported `SubmitButton`, `ResetButton`, and `SubmitError` components. This guide uses the `Form.*` names consistently; importing a standalone name does not select a different implementation.
 
-`name` uses the surrounding form, or an explicit `form={form}` outside it. Tuple names accept string and numeric segments and readonly arrays; inline tuples do not need memoization. Names are not checked against the surrounding controller's model because React context cannot infer its type. Tuple names require a modern controller; legacy forms retain string names and dot notation.
-
 A descriptor is pure configuration, so creating it inline is expected. It neither reads state nor registers a field; the mounted input registers after commit. It supplies the controller and path even outside the root, so adding `form` or `name` to the same input is unnecessary. If both are present, the descriptor wins. Descriptor options override only matching options they supply. In particular, descriptor `rules` or `validate` replaces input-level `rules`; put built-in rules and a custom validator together on the descriptor to run both.
 
 Controller values and defaults take precedence over field defaults, including explicit `null` and `undefined`. Root callbacks override the corresponding hook callback while mounted; omitted or undefined root callbacks fall back to the hook callback. Business callbacks update after every committed render. Defaults, `errorPolicy`, and diagnostic handlers are creation options; update values through commands and override error policy per field when needed.
@@ -172,7 +171,7 @@ Use `setValue(path, value)` for one path and `setValues(partial)` for several to
 | Validation case | Start here |
 | --- | --- |
 | Required field with a visible marker | Input `isRequired`; it adds required validation too. |
-| Email, length, range, pattern, or enum | Input `rules` using the built-in constraints, or descriptor `rules` when using `field`. |
+| Email, length, range, pattern, or enum | Descriptor `rules` using the built-in constraints. |
 | Custom domain check | Descriptor `validate(value, context)` for an inferred field value and checked reads. |
 | Several custom rules or existing shared rule objects | `rules: [{ validator(rule, value, context) { ... } }]`; use `ModernValidationRule` for strict modern rule typing. |
 | Validation depends on another form value | `dependsOn: ['password']`, or nested tuples such as `dependsOn: [['account', 'password']]`. |
@@ -236,7 +235,7 @@ Unmounting the last input at a path removes it from `activeValues` immediately a
 
 For a wizard, validate a step before unmounting it and choose `submitValues="all"` if previous steps belong in the final payload. That does not revalidate unmounted steps. If final submission must validate every step against the latest data, keep the relevant inputs mounted or perform whole-payload validation explicitly. A form with no active fields is invalid.
 
-Bind nested leaves directly with `name={['rows', index, 'email']}`. The optional typed equivalent is `field={form.field(['rows', index, 'email'])}`. A string such as `'user.email'` is one literal key, not dot notation. Numeric indices and numeric string segments address the same path. Removing an array path does not shift the other indices. Registering a parent object makes its complete value active; register leaf paths when only selected children belong in the active payload. Descriptor and controller-command literal paths are checked against the model; `name` accepts dynamic paths without those checks. The declaration surface requires TypeScript 5.4 or newer.
+Bind nested leaves with tuples: `field={form.field(['rows', index, 'email'])}`. A string such as `'user.email'` is one literal key, not dot notation. Numeric indices and numeric string segments address the same path. Removing an array path does not shift the other indices. Registering a parent object makes its complete value active; register leaf paths when only selected children belong in the active payload. Known literal paths are typechecked; widened dynamic paths are supported. The declaration surface requires TypeScript 5.4 or newer.
 
 `getValues()` / `state.values` contains all retained data; `getActiveValues()` / `state.activeValues` contains registered paths. Dirty/touched metadata includes retained fields, while validity concerns active fields.
 

package/docs/modern-form-migration.md

@@ -39,7 +39,7 @@ The [Modern Form guide](modern-form-guide.md) is the reference for implementing
 
 | Area | Migration decision |
 | --- | --- |
-| Field bindings and paths | Use `name={path}` for ordinary binding or `field={form.field(path, options)}` for model-aware type checking. Strings are literal keys; convert legacy dot notation to tuple names for nested data. Do not configure the same binding through `field`, `name`, and `form`. |
+| Field bindings and paths | Prefer `field={form.field(path, options)}`. Strings are literal keys; convert legacy dot notation to tuples for nested data. Do not configure the same binding through `field`, `name`, and `form`. |
 | Empty API values | Include `null` in the model where the API returns it. Built-in typed bindings display an empty state without rewriting the stored null. |
 | Render-time reads | Use `useValue`, `useFieldState`, or selectors. Imperative getters and the controller creator do not subscribe React. |
 | Late defaults | Defaults initialize once. Choose adoption to preserve edits, reset for a new editing session, or baseline-only updates deliberately. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-08f0089",
+  "version": "0.0.0-canary-0ff010b",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {

package/dist/components/fields/ListBoxPopover/useCompositeFocus.d.ts

@@ -1,2 +0,0 @@
-
-import React, { RefObject } from "react";

package/dist/components/portal/PortalProvider.d.ts

@@ -1,2 +0,0 @@
-
-import { RefObject } from "react";