@cube-dev/ui-kit 0.0.0-canary-d3e63ad → 0.0.0-canary-e5b4f54

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d3e63ad | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e5b4f54 | 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-d3e63ad | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e5b4f54 | 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-d3e63ad | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e5b4f54 | 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-d3e63ad | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e5b4f54 | 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-d3e63ad | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e5b4f54 | 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-d3e63ad | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e5b4f54 | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

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

package/docs/components/actions/ItemAction.md

@@ -15,7 +15,7 @@ A compact action button designed for use inside `Item`, `ItemButton`, and `ItemC
 ## Properties
 
 - **`icon`** `ReactNode | 'checkmark'` — Icon element or `'checkmark'` for a selection indicator
-- **`type`** `'primary' | 'outline' | 'clear' | 'current'` (default: `'current'`) — Visual type. `current` derives every color from the inherited `currentcolor`, so the action tracks whatever row hosts it without being told the row's type. Passing an explicit `theme` falls back to `'clear'`, since `current` is theme-agnostic and the theme would have nothing to color.
+- **`type`** `'primary' | 'outline' | 'clear'` (default: `'clear'`) — Visual type. Inherits from parent context.
 - **`theme`** `'default' | 'danger' | 'success' | 'warning' | 'note' | 'special'` (default: `'default'`) — Color theme. Inherits from parent context.
 - **`isLoading`** `boolean` (default: `false`) — Shows loading spinner
 - **`isSelected`** `boolean` (default: `false`) — Selected state (works with `icon="checkmark"`)

package/docs/components/actions/MenuTrigger.md

@@ -19,6 +19,8 @@ Wraps a trigger element and a `Menu` to create a dropdown menu. Positions the me
 - **`offset`** `number` (default: `8`) — Distance from trigger in pixels
 - **`crossOffset`** `number` (default: `0`) — Cross-axis offset in pixels
 - **`containerPadding`** `number` — Minimum padding from viewport edges in pixels
+- **`mobileType`** `'popover' | 'tray'` (default: `'popover'`) — Overlay variant on mobile screens. `'tray'` opts into the bottom-sheet overlay
+- **`shouldRestoreFocus`** `boolean` (default: `true`) — Whether focus returns to the trigger when the menu closes. See [Focus restoration](#focus-restoration)
 
 Extends React Aria `AriaMenuTriggerProps` and `PositionProps`.
 
@@ -31,11 +33,61 @@ Supports [Base properties](../../BaseProperties.md).
 These properties allow direct style application without using the `styles` prop:
 
 - **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
-- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
 - **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
 - **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
 - **Color:** `color`, `fill`, `fade`, `image`
-- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+- **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+
+## Focus restoration
+
+When the menu closes, focus returns to the trigger — **unless the action that
+closed it moved focus somewhere else**. An item whose action opens a panel, a
+dialog or an inline editor just focuses that surface; a single `focus()` call
+from a mount effect is enough, and the menu leaves it alone:
+
+```jsx
+function Panel() {
+  const ref = useRef(null);
+
+  // One call. No retry loop, no racing the closing menu.
+  useEffect(() => {
+    ref.current?.focus({ preventScroll: true });
+  }, []);
+
+  return (
+    <div ref={ref} tabIndex={-1}>
+      …
+    </div>
+  );
+}
+
+<MenuTrigger>
+  <Button icon={<MoreIcon />} aria-label="Actions" />
+  <Menu onAction={(key) => key === 'configure' && setPanelOpen(true)}>
+    <Menu.Item key="configure">Configure…</Menu.Item>
+  </Menu>
+</MenuTrigger>;
+```
+
+Focusing the surface's own container rather than its first tabbable child
+matters when a header carries a close button — `<FocusScope autoFocus>` would
+land the user on ✕, with <kbd>Enter</kbd> already meaning "close the thing that
+just opened".
+
+`shouldRestoreFocus={false}` covers the remaining case: a surface that claims
+focus *later* than the menu's restore — after an async load, an entry
+animation, or a `requestAnimationFrame`. Without it the trigger takes focus
+first and the user sees a flash.
+
+```jsx
+<MenuTrigger shouldRestoreFocus={false}>
+  <Button icon={<MoreIcon />} aria-label="Actions" />
+  <Menu onAction={openPanelThatFocusesAfterItsData}>
+    <Menu.Item key="configure">Configure…</Menu.Item>
+  </Menu>
+</MenuTrigger>
+```
 
 ## Examples
 

package/docs/components/actions/SubMenuTrigger.md

@@ -31,11 +31,11 @@ Supports [Base properties](../../BaseProperties.md).
 These properties allow direct style application without using the `styles` prop:
 
 - **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
-- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
 - **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
 - **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
 - **Color:** `color`, `fill`, `fade`, `image`
-- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+- **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
 
 ## Examples
 

package/docs/components/content/InlineInput.md

@@ -261,7 +261,7 @@ When `InlineInput` is embedded in a host that already owns keyboard activation (
 
 ### Focus Management
 
-When entering edit mode, focus is taken explicitly by a `FocusScope` with `autoFocus`. This makes the transition deterministic even when triggered from a closing menu (which would otherwise restore focus to the menu trigger). The text content is selected automatically.
+When entering edit mode, focus is taken explicitly by a `FocusScope` with `autoFocus`, and the text content is selected automatically. On top of that, a blur arriving in the same tick as a programmatic `startEditing()` re-focuses the input instead of committing, so hosts that drive editing through the imperative ref stay in edit mode even if something else grabs focus as the input mounts. The guard clears on the user's first keystroke, so later click-aways commit normally.
 
 When leaving edit mode, focus is not restored automatically — the host is responsible for moving focus back to a meaningful element (e.g. the parent button or row).
 

package/docs/components/content/ItemBadge.md

@@ -11,7 +11,7 @@ A non-interactive badge indicator for list items. Similar to `ItemAction` but wi
 ## Properties
 
 - **`icon`** `ReactNode | 'checkmark'` — Icon or checkmark display
-- **`type`** `'primary' | 'outline' | 'clear' | 'current'` (default: `'current'`) — Visual type. `isSelected` applies brand-tinted fill to `outline` and `clear`. `current` derives every color from the inherited `currentcolor`, so the badge tracks whatever row hosts it. Passing an explicit `theme` falls back to `'clear'`, since `current` is theme-agnostic.
+- **`type`** `'primary' | 'outline' | 'clear'` (default: `'clear'`) — Visual type. `isSelected` applies brand-tinted fill to `outline` and `clear`. Inherits from parent context.
 - **`theme`** `'default' | 'danger' | 'success' | 'special'` (default: `'default'`) — Color theme. Inherits from parent context.
 - **`isLoading`** `boolean` (default: `false`) — Show loading spinner
 - **`isSelected`** `boolean` (default: `false`) — Selected state (for checkmark)

package/docs/components/overlays/DialogTrigger.md

@@ -36,6 +36,7 @@ DialogTrigger serves as a wrapper around a Dialog and its associated trigger, li
 - **`targetRef`** — The ref of the element the Dialog should visually attach itself to
 - **`styles`** — The style map for the overlay
 - **`shouldCloseOnInteractOutside`** — Function to determine if overlay should close on outside interaction
+- **`shouldRestoreFocus`** `boolean` (default: `true`) — Whether focus returns to the trigger when the dialog closes. Only needed for a surface that claims focus *later* than the restore (async load, entry animation); an action that focuses the surface it opens is already left alone — see [Focus Management](#best-practices)
 
 ### Base Properties
 
@@ -52,7 +53,7 @@ These properties allow direct style application without using the `styles` prop:
 - **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
 - **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
 - **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
-- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+- **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
 
 ## Variants
 
@@ -186,7 +187,7 @@ function ControlledDialog() {
    </DialogTrigger>
    ```
 
-3. **Focus Management**: Always ensure focus returns properly after dialog closes
+3. **Focus Management**: Closing the dialog returns focus to the trigger, unless the action that closed it already moved focus somewhere else — an action that opens a panel or another dialog just focuses that surface, and the trigger leaves it alone. A single `focus()` from a mount effect is enough; no retry loop is needed. Reach for `shouldRestoreFocus={false}` only when the opened surface claims focus *later* than the restore (after an async load or an entry animation), where the trigger would otherwise take focus first and flash.
 4. **Mobile Considerations**: Use appropriate mobile types for better UX
 5. **Dismissible**: Make modal dialogs dismissible unless absolutely necessary
 

package/package.json

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