@cube-dev/ui-kit 0.137.0 → 0.137.1

package/dist/utils/random.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
 //#region src/utils/random.ts
 function random(min, max) {
 	const realMin = min < max ? min : max;

package/dist/utils/range.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
 //#region src/utils/range.ts
 function range(count) {
 	return Array.from({ length: count }, (_, i) => i);

package/dist/utils/react/RenderCache.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
 import { useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 

package/dist/utils/react/Slots.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
 import { mergeProps } from "./mergeProps.js";
 import { Children, cloneElement, createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/utils/react/chain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
 //#region src/utils/react/chain.ts
 /**
 * Calls all functions in the order they were chained with the same arguments.

package/dist/utils/react/forwardRefWithGenerics.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
 //#region src/utils/react/forwardRefWithGenerics.tsx
 /**
 * A helper for creating forwardRef components with generic types.

package/dist/utils/react/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";
 import { isTextOnly } from "./isTextOnly.js";

package/dist/utils/react/interactions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
 import { useState } from "react";
 import { useFocus, useFocusVisible } from "react-aria";
 

package/dist/utils/react/isTextOnly.js

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

package/dist/utils/react/mapProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
 //#region src/utils/react/mapProps.ts
 /** Converts AriaButtonProps to CubeButtonProps */
 function ariaToCubeButtonProps(props) {

package/dist/utils/react/mergeProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { mergeIds } from "./useId.js";
 import { mergeStyles } from "@tenphi/tasty";

package/dist/utils/react/nullableValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
 //#region src/utils/react/nullableValue.ts
 function castNullableStringValue(props) {
 	return castNullableField(props, ["value", "defaultValue"], "string", (v) => String(v));

package/dist/utils/react/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
 //#region src/utils/react/resolveIcon.ts
 /**
 * Resolves a dynamic icon prop to its content and slot state.

package/dist/utils/react/sharedStore.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useSyncExternalStore } from "react";
 

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
 import { useEffect, useRef } from "react";
 
 //#region src/utils/react/useCombinedRefs.ts

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | 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.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
 import React, { createContext, useCallback, useContext, useEffect, 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.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | 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.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | 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.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | 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.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | 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.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | 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.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
 import { useEventBus } from "./useEventBus.js";
 import { useEffect, useRef } from "react";
 

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | 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.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | 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.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | 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.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | 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.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | 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.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | 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.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.137.0";
+const VERSION = "0.137.1";
 if (typeof window !== "undefined") {
 	const version = VERSION;
 	window.CubeUIKit = window.CubeUIKit || { version };

package/docs/components/content/InlineInput.md

@@ -31,6 +31,7 @@ Unlike `TextInput`, `InlineInput` is intentionally **not** a form field. It mana
 - **`onSubmit`** `(value: string) => void` — Fires every commit (Enter / submit-on-blur / `ref.stopEditing(true)`), even when the value did not change. Use for side effects (analytics, save toasts).
 - **`onCancel`** `() => void` — Called when editing is cancelled (Escape or empty submit when `allowEmpty` is `false`).
 - **`editTrigger`** `'dblclick' | 'click' | 'none'` (default: `dblclick`) — How edit mode is activated from the display element. Programmatic entry via `ref.startEditing()` works regardless.
+- **`keyboardActivation`** `boolean` (default: `true`) — When `true`, the display element is keyboard-focusable (`tabIndex=0`, `role="button"`) and responds to `Enter`, `F2` and `Space` to enter edit mode. Set to `false` when the host already owns keyboard activation (e.g. an editable tab inside a `<button>`) — exposing the display as a separate tab stop would otherwise nest focus inside the host.
 - **`submitOnBlur`** `boolean` (default: `true`) — Whether to submit when focus leaves the input.
 - **`trimOnSubmit`** `boolean` (default: `true`) — Whether to trim the value on submit.
 - **`allowEmpty`** `boolean` (default: `false`) — When `false`, submitting an empty/whitespace value cancels instead.
@@ -38,6 +39,8 @@ Unlike `TextInput`, `InlineInput` is intentionally **not** a form field. It mana
 - **`isReadOnly`** `boolean` (default: `false`) — When `true`, edit mode cannot be entered, but the display reads as enabled.
 - **`placeholder`** `string` — Placeholder text shown in the input when the draft is empty.
 - **`renderDisplay`** `(value: string) => ReactNode` — Custom render for display (non-editing) mode.
+- **`tooltip`** `boolean | string | AutoTooltipValue` (default: `true`) — Tooltip behaviour for the display value. `true` enables auto-tooltip on overflow (showing the full text when truncated). A string always shows that text. `false` disables the tooltip. Suppressed automatically while editing and when `renderDisplay` is used.
+- **`tooltipPlacement`** `'top' | 'bottom' | 'left' | 'right' | ...` (default: `'top'`) — Default tooltip placement.
 - **`inputStyles`** `Styles` — Convenience prop for styling the `Input` sub-element.
 
 ### Base Properties
@@ -57,10 +60,11 @@ The component exposes a ref with these methods:
 
 #### styles
 
-Customizes the root element of the component.
+Customizes the root element of the component. The root is `inline-flex` with `align-items: baseline` so it integrates cleanly into any inline text context (tabs, headings, paragraphs) without shifting surrounding text. Truncation lives on the inner `Display` sub-element so the root's baseline is not perturbed.
 
 **Sub-elements:**
 
+- `Display` — The block-level wrapper that holds the value in display mode and applies `overflow: hidden` / `text-overflow: ellipsis` for truncation
 - `Input` — The text input rendered in edit mode
 - `Placeholder` — The placeholder text rendered in display mode when the value is empty
 - `Measure` — The hidden text used to auto-size the input (rarely targeted)
@@ -82,13 +86,14 @@ These properties allow direct style application without using the `styles` prop:
 
 The `mods` property is automatically populated. Consumers can target these in their own `styles`:
 
-| Modifier   | Type      | Description                                                          |
-| ---------- | --------- | -------------------------------------------------------------------- |
-| editing    | `boolean` | Currently in edit mode                                               |
-| editable   | `boolean` | `editTrigger` is `dblclick` or `click` and not disabled/read-only    |
-| disabled   | `boolean` | `isDisabled` is `true`                                               |
-| read-only  | `boolean` | `isReadOnly` is `true`                                               |
-| empty      | `boolean` | The committed value is empty                                         |
+| Modifier   | Type      | Description                                                                |
+| ---------- | --------- | -------------------------------------------------------------------------- |
+| editing    | `boolean` | Currently in edit mode                                                     |
+| editable   | `boolean` | `editTrigger` is `dblclick` or `click` and not disabled/read-only          |
+| focused    | `boolean` | Display element is keyboard-focused (`isFocusVisible`) and editable        |
+| disabled   | `boolean` | `isDisabled` is `true`                                                     |
+| read-only  | `boolean` | `isReadOnly` is `true`                                                     |
+| empty      | `boolean` | The committed value is empty                                               |
 
 ## Examples
 
@@ -186,10 +191,48 @@ By default, submitting an empty value cancels. Set `allowEmpty` to keep the empt
 <InlineInput defaultValue="Read-only value" isReadOnly />
 ```
 
+### Overflow & Tooltip
+
+When the value is wider than its container, the display text is truncated with an ellipsis. The full value is shown as a tooltip on hover/focus — no extra props required.
+
+```jsx
+<div style={{ width: 200 }}>
+  <InlineInput defaultValue="A very long inline value that gets truncated…" />
+</div>
+```
+
+To always show a custom tooltip (regardless of overflow), pass a string. To disable the tooltip entirely, pass `false`:
+
+```jsx
+<InlineInput defaultValue="Hover me" tooltip="Click to rename" />
+<InlineInput defaultValue="No tooltip" tooltip={false} />
+```
+
+The truncation behaviour is automatically disabled while editing so the input is never visually clipped while the user types.
+
+### Keyboard Activation
+
+By default the display element is keyboard-focusable (`tabIndex=0`, `role="button"`, `aria-roledescription="editable text"`). Pressing `Enter`, `F2` or `Space` enters edit mode without requiring a pointer. A keyboard focus ring (`#primary` token, rounded) is shown only when the element receives keyboard focus — clicks never trigger the ring.
+
+When `InlineInput` is embedded in a host that already owns keyboard activation (e.g. `Tabs` — each tab is a `<button>` that listens for `F2` itself), pass `keyboardActivation={false}` to avoid creating a nested tab stop inside the host. The imperative `ref.startEditing()` always works regardless of this setting, and the focus ring is suppressed in this mode (the host's focus ring is the one users see).
+
+```jsx
+<InlineInput defaultValue="Press Enter to edit" />
+
+<InlineInput keyboardActivation={false} defaultValue="Host owns the keyboard" />
+```
+
 ## Accessibility
 
 ### Keyboard Navigation
 
+**Display mode** (when `keyboardActivation` is `true`):
+
+- `Tab` — Moves focus to the value
+- `Enter`, `F2`, `Space` — Enter edit mode
+
+**Edit mode**:
+
 - `Enter` — Commit the current draft
 - `Escape` — Cancel and revert to the previous value
 - `Tab` / focus loss — Commits when `submitOnBlur` is `true` (default), otherwise no-op
@@ -197,8 +240,10 @@ By default, submitting an empty value cancels. Set `allowEmpty` to keep the empt
 
 ### ARIA Properties
 
-- **`aria-label`** — Provide a label when the input has no visible label associated. Recommended in all cases.
-- **`aria-labelledby`** — Reference the id of a visible label element.
+- The display element receives `role="button"` and `aria-roledescription="editable text"` when keyboard-focusable, so screen readers announce that the value can be activated for editing.
+- **`aria-label`** — Provide a label when the value alone doesn't convey purpose. Forwarded to both the display element (when focusable) and the inner input. Recommended in all cases.
+- **`aria-labelledby`** — Reference the id of a visible label element. Forwarded the same way.
+- **`aria-disabled`** / **`aria-readonly`** — Set automatically from `isDisabled` / `isReadOnly`.
 
 ### Focus Management
 

package/docs/components/navigation/Tabs.md

@@ -345,6 +345,8 @@ Add dropdown menus to tabs using the `menu` prop. This replaces the need for man
 
 Combine editable tabs with a menu for rename, duplicate, and delete actions. The inline editing UI is provided by [InlineInput](../content/InlineInput.md), which can also be used standalone elsewhere.
 
+> For editable tabs the `tooltip` prop is rendered by `InlineInput` rather than by the surrounding tab button. This keeps the tooltip in sync with the editing UI (and avoids a double tooltip) — the trigger area is the title content, not the entire tab button. Long titles also get an automatic ellipsis + overflow tooltip without any extra configuration.
+
 ```jsx
 <Tabs
   isEditable

package/package.json

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

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

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