@cube-dev/ui-kit 0.194.1 → 0.195.0

package/dist/utils/react/useOverlayEscapeGuard.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { getEventTarget, nodeContains } from "@react-aria/utils";

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { c } from "react/compiler-runtime";
 import { useContext, useEffect, useEffectEvent, useRef } from "react";

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.195.0 | 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.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.195.0 | 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.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useEffect, useState } from "react";
 

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
 import { Fragment, isValidElement } from "react";
 
 //#region src/utils/react/wrapNodeIfPlain.ts

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.195.0 | 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.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
 import { isSelector, mergeStyles } from "@tenphi/tasty";
 
 //#region src/utils/styles.ts

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.195.0 | 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.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.195.0 | 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.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.194.1";
+const VERSION = "0.195.0";
 const TASTY_VERSION = "3.9.9";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/FieldProperties.md

@@ -21,7 +21,9 @@ For modern forms, follow the [use-case guide](./components/form/ModernForm.md).
 
 - **`label`** `ReactNode` — Label text displayed above or beside the input.
 - **`labelPosition`** `'top' | 'side' | 'split'` (default: `top`) — Position of the label relative to the input.
-- **`description`** `ReactNode` — Description text placed below the label.
+- **`description`** `ReactNode` — Description text placed below the label. A field without a label shows it too, unless it is `isBare`.
+- **`isBare`** `boolean` — For inline use: a field without a `label` renders the bare control. Without `isBare`, such a field renders the field wrapper when it is bound to a form, whose validation errors need a place, or is passed `description`, `errorMessage` or `message`. A text prop counts whatever it holds at the moment, so the input keeps its place and its focus when a message comes and goes. A wrapped field is laid out by its wrapper, as a labelled one is: layout props on the input such as `flexGrow`, `width` or `gridArea` stay on the input, so set them in `fieldStyles` to place the field, or pass `isBare`. With `isBare` the texts are not shown, and the control keeps its invalid state (`aria-invalid` and the invalid styles). The error text is not linked to anything, though, so a screen reader says the field is invalid without saying why: show the reason some other way, such as a tooltip or a message for the whole row, and point `aria-describedby` at it. No effect on a field with a `label`.
+- **`forceField`** `boolean` — **Deprecated.** A field without a `label` now renders the field wrapper by itself when it is bound to a form or is passed `description`, `errorMessage` or `message`; set `isBare` to keep the bare control instead. `forceField` still forces the wrapper and warns once in development.
 - **`extra`** `ReactNode` — Additional content displayed next to the label.
 - **`labelTooltip`** `ReactNode` — Content of an info badge shown next to the label. Only rendered when the field has a label. (Formerly `tooltip`. On most fields `tooltip` is gone; on `Select` and `Checkbox` it is the control's own tooltip, as on `Item` and `Button`.)
 - **`labelSuffix`** `ReactNode` — Content displayed after the label text.
@@ -60,7 +62,7 @@ For modern forms, follow the [use-case guide](./components/form/ModernForm.md).
 
 - **`isDisabled`** `boolean` (default: `false`) — Whether the field is disabled and non-interactive. A field also takes it from an enclosing `<Provider isDisabled>` or `<Form isDisabled>`. Buttons don't, apart from `Form.Submit` and `Form.Reset`: see [Button](./components/actions/Button.md).
 - **`isReadOnly`** `boolean` (default: `false`) — Whether the field can be focused but not changed.
-- **`isLoading`** `boolean` (default: `false`) — Whether to show a loading spinner and disable interactions.
+- **`isLoading`** `boolean` (default: `false`) — Whether the field shows its loading spinner. `Select`, `Picker`, `FilterPicker`, `ColorPicker` and a button-type `Radio` also disable while loading; other fields stay interactive, and fields without a spinner, such as `Checkbox`, `RadioGroup`, `ListBox` or `Slider`, ignore it.
 - **`isHidden`** `boolean` (default: `false`) — Whether the field is hidden.
 - **`isInvalid`** `boolean` (default: `false`) — Whether the field displays its invalid visual styling. Takes precedence over `isValid`.
 - **`isValid`** `boolean` (default: `false`) — Whether the field displays its valid visual styling.

package/docs/components/content/Layout.md

@@ -315,12 +315,42 @@ Resizable inline section within a layout. Unlike Layout.Panel (which is absolute
 - **`defaultSize`** `number | string` (default: `200`) — Default size for uncontrolled state
 - **`minSize`** `number | string` — Minimum size constraint, in pixels or a CSS length. With `flexShrink={1}`, the pane gives way down to it (`2x` when unset) when a flex container runs short
 - **`maxSize`** `number | string` — Maximum size constraint
-- **`onSizeChange`** `(size: number) => void` — Size change callback
+- **`onSizeChange`** `(size: number) => void` — Size change callback. With `flexShrink={1}`, also called when another such pane beside it is resized and this pane keeps the size it is drawn at
 - **`scrollbar`** `ScrollbarType` (default: `'thin'`) — Scrollbar style
 - **`children`** `ReactNode` — Content to display
 - **`innerRef`** `ForwardedRef<HTMLDivElement>` — Ref for the inner content element
 - **`innerProps`** `HTMLAttributes<HTMLDivElement>` — Props to spread on the Inner sub-element
 
+Several panes with `flexShrink={1}` can share one flex container, such as editors above the results they produce:
+
+```jsx
+<Layout height="100dvh">
+  <Layout.Pane
+    isResizable
+    resizeEdge="bottom"
+    defaultSize={300}
+    minSize={80}
+    flexShrink={1}
+  >
+    <Text>SQL</Text>
+  </Layout.Pane>
+  <Layout.Pane
+    isResizable
+    resizeEdge="bottom"
+    defaultSize={300}
+    minSize={80}
+    flexShrink={1}
+  >
+    <Text>Python</Text>
+  </Layout.Pane>
+  <Layout.Content flexBasis="0" styles={{ minHeight: '200px' }}>
+    <Text>Results</Text>
+  </Layout.Content>
+</Layout>
+```
+
+Give the other items a zero flex basis, as the results get here: an item that shrinks from a larger basis still takes part of each move. Resizing one of the panes moves its edge with the pointer, or by 10px per arrow key (50px with Shift). The room comes from the panes after its edge, which give way down to their `minSize`; the resize stops there, and the panes before the edge keep their size. A pane that gave way keeps the size it was left at. Within one drag it grows back as far as the size it had when the drag started, but each arrow key press is a move of its own, so shrinking the resized pane by keyboard gives the room to the rest of the container, not back to that pane. A resize that ends where it began, such as an arrow key pressed at the stop, leaves every pane as it was and reports nothing. A hidden pane (`display: none`) takes no part in this.
+
 **Sub-elements:**
 
 - `Inner` - Scrollable inner container

package/docs/components/fields/Checkbox.md

@@ -141,12 +141,12 @@ A disabled checkbox still shows its tooltip, which makes it a good place to say
 
 - `Tab` - Moves focus to the checkbox
 - `Space` - Toggles the checkbox state
-- `Enter` - Activates the checkbox (when inside a form)
+- `Enter` does not toggle the checkbox. Inside a form with a submit button, the browser submits the form instead.
 
 ### Screen Reader Support
 
 - Component announces as "checkbox" to screen readers
-- State changes are announced (e.g., "checked", "unchecked", "indeterminate")
+- State changes are announced (checked, not checked, or mixed for `isIndeterminate`)
 - Required state is communicated when `isRequired` is true
 - Validation errors are announced when present
 
@@ -155,10 +155,11 @@ A disabled checkbox still shows its tooltip, which makes it a good place to say
 - `aria-label` - Provides accessible label when no visible label exists
 - `aria-labelledby` - References external label elements
 - `aria-describedby` - References additional descriptive text
-- `aria-checked` - Indicates checkbox state (true, false, or mixed for indeterminate)
 - `aria-required` - Indicates if selection is required
 - `aria-invalid` - Indicates validation state
 
+The control is a native `<input type="checkbox">`, so its state is the input's `checked` property, plus `indeterminate` for the mixed state. No `aria-checked` is written.
+
 ## Best Practices
 
 1. **Do**: Provide clear, descriptive labels

package/docs/components/fields/Switch.md

@@ -120,24 +120,25 @@ const [isEnabled, setIsEnabled] = useState(false);
 
 - `Tab` - Moves focus to the switch
 - `Space` - Toggles the switch state
-- `Enter` - Toggles the switch state
+- `Enter` does not toggle the switch. Inside a form with a submit button, the browser submits the form instead.
 
 ### Screen Reader Support
 
 - Component announces as "switch" to screen readers
 - Current state is announced (e.g., "on", "off")
 - State changes are immediately announced
-- Loading state is communicated when present
+- `isLoading` only shows a spinner. The spinner is hidden from screen readers, and the switch stays enabled, so pass `isDisabled` as well if it should not change while loading.
 
 ### ARIA Properties
 
 - `aria-label` - Provides accessible label when no visible label exists
 - `aria-labelledby` - References external label elements
 - `aria-describedby` - References additional descriptive text
-- `aria-checked` - Indicates switch state (true/false)
 - `aria-required` - Indicates if toggling is required
 - `aria-invalid` - Indicates validation state
 
+The control is a native `<input type="checkbox" role="switch">`, so its state is the input's `checked` property. No `aria-checked` is written.
+
 ## Best Practices
 
 1. **Do**: Use clear, descriptive labels that indicate what the switch controls

package/docs/components/overlays/AlertDialog.md

@@ -68,7 +68,7 @@ These properties allow direct style application without using the `styles` prop:
 
 ## Imperative API
 
-`useAlertDialogAPI()` opens an alert dialog from code, such as an event handler, with no `DialogTrigger` to render. It works anywhere under `<Root>`.
+`useAlertDialogAPI()` opens an alert dialog from code, such as an event handler, with no `DialogTrigger` to render. It works anywhere under `<Root>`. A dialog belongs to the component that calls the hook and closes when that component unmounts; see [The dialog's owner](#the-dialogs-owner).
 
 - **`open(props, params?)`** `Promise<'confirm' | 'secondary'>` — Opens the dialog. Resolves with the action the user picked, and rejects when the dialog closes without one or cannot open.
 
@@ -76,7 +76,7 @@ These properties allow direct style application without using the `styles` prop:
 
 - **`onConfirm`** `() => unknown` — Runs when the confirm button is pressed. If it returns a promise, the dialog stays open until it settles (see below)
 - **`onSecondary`** `() => unknown` — The same, for the secondary button
-- **`onCancel`** `() => void` — Runs when the dialog settles as a cancel: the Cancel button, Escape, a click outside, an aborted `cancelToken`, or `content` calling `reject()`
+- **`onCancel`** `() => void` — Runs when the dialog settles as a cancel: the Cancel button, Escape, a click outside, an aborted `cancelToken`, the unmount of the component that opened it, or `content` calling `reject()`
 - **`type`** — The dialog container type, as on `DialogContainer`
 - **`isDismissable`** `boolean` (default: `true`) — Whether Escape and a click outside close the dialog
 - **`onDismiss`** `(action?: string) => void` — Called when an action button, Escape or a click outside closes the dialog. An action button passes its name: `'confirm'`, `'secondary'` or `'cancel'`
@@ -84,7 +84,7 @@ These properties allow direct style application without using the `styles` prop:
 
 `params` takes:
 
-- **`cancelToken`** `AbortSignal` — Closes the dialog when aborted
+- **`cancelToken`** `AbortSignal` — Closes the dialog when aborted. A running confirm or secondary action finishes first
 
 The confirm button resolves `'confirm'` whether you configure `actions.confirm` or leave the default Ok button. Set it to `false` to hide it.
 
@@ -142,6 +142,7 @@ open({
 | Cancel action | rejects with `undefined` |
 | Escape or a click outside | rejects with `undefined` |
 | `cancelToken` aborted, before or while the dialog is open | rejects with `undefined` |
+| The component that opened it unmounts | rejects with `undefined` |
 | `content` calls `resolve(status)` | resolves `status` |
 | `content` calls `reject(reason)` | rejects with `reason` (`undefined` for `reject()`) |
 | Another alert dialog is open | rejects with an `Error` |
@@ -190,7 +191,40 @@ const onRequestApproval = () => {
 controllerRef.current?.abort();
 ```
 
-Aborting settles the dialog as a cancel. A signal that is already aborted settles it right away, without showing the dialog.
+Aborting settles the dialog as a cancel. A signal that is already aborted settles it right away, without showing the dialog. If the confirm or secondary action is running, it finishes first: the dialog closes with its result, or as a cancel if it fails.
+
+### The dialog's owner
+
+A dialog belongs to the component that called `useAlertDialogAPI()`. When that component unmounts, the dialog closes as a cancel, as if its own `cancelToken` were aborted. Its callbacks are that component's code, and a dialog left open would run them against a component that is gone. A call to `open` after the unmount, such as one after an `await`, settles as a cancel without opening. A running confirm or secondary action finishes first, so a list row whose delete removes it still resolves `'confirm'`.
+
+So call the hook in a component that stays mounted while the dialog is open. A menu closes when its item is pressed, so call the hook in the component that renders the menu and pass `open` down, rather than calling it in the item:
+
+```jsx
+function RowActions({ row }) {
+  // Stays mounted after the menu closes.
+  const { open } = useAlertDialogAPI();
+
+  return (
+    <MenuTrigger>
+      <Button>Actions</Button>
+      <Menu
+        onAction={(key) => {
+          if (key === 'delete') {
+            open({
+              title: `Delete ${row.name}?`,
+              danger: true,
+              actions: { confirm: { children: 'Delete' }, cancel: true },
+              onConfirm: () => deleteRow(row.id),
+            });
+          }
+        }}
+      >
+        <Menu.Item key="delete">Delete</Menu.Item>
+      </Menu>
+    </MenuTrigger>
+  );
+}
+```
 
 ### One dialog at a time
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.194.1",
+  "version": "0.195.0",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {