v0.137.1
Patch Changes
-
#1160
17d67406Thanks @tenphi! - InlineInput: improved keyboard accessibility and stability.- New prop
keyboardActivation?: boolean(defaulttrue). When enabled, the display element is keyboard-focusable (tabIndex=0,role="button",aria-roledescription="editable text") and responds toEnter,F2, andSpaceto enter edit mode. Hosts that already own keyboard activation (e.g. editable tabs whose<button>listens forF2) can passkeyboardActivation={false}to avoid creating a nested tab stop. - A keyboard focus ring (
#primarytoken, rounded) appears on the display element when it receives keyboard focus (useFocusRing'sisFocusVisible). It is suppressed automatically while editing (focus is on the inner input) and whenkeyboardActivation={false}(so the host's focus ring is the one users see — as inTabs). Newfocusedmodifier exposed on the root for consumers. - The display element now mirrors
isDisabled/isReadOnlyviaaria-disabled/aria-readonly, andaria-label/aria-labelledbyare forwarded to it when focusable. - Pointer activators (
onClick/onDoubleClick) are now wired only when the choseneditTriggeractually needs them, instead of being always-on no-ops. - Internal fixes:
stopEditing()reads the synchronousisEditingRefinstead of a potentially stale render closure, and the ref mirror is updated viauseLayoutEffectso torn-away concurrent renders cannot leak a stale value across commits.
Tabs: editable tabs continue to be driven by
F2/ context-menu rename at the tab-button level;InlineInputnow receiveskeyboardActivation={false}fromTabButtonso the inline title does not introduce an extra tab stop or a duplicate focus ring inside the tab.Layout fix: the InlineInput root is now
inline-flex(withalign-items: baseline) instead ofinline-block, and the truncation moved to a new innerDisplaysub-element. CSS 2.1 §10.8.1 forces aninline-blockwithoverflow: hiddento use its bottom margin edge as the baseline, which visibly shifted text upward inside surrounding line boxes (most noticeable inside Tabs' centeredItem.Label).inline-flexderives its baseline from the first flex item's content baseline, restoring proper alignment with neighbouring text. Truncation, ellipsis, and the overflow auto-tooltip continue to work; only the host responsibility for clipping moves to the inner block, which doesn't perturb the parent baseline. - New prop
-
#1160
17d67406Thanks @tenphi! - InlineInput / Tabs: truncate long values with an ellipsis and surface a tooltip with the full value when truncated.InlineInputnow renders asdisplay: inline-blockwithtext-overflow: ellipsis/white-space: nowrap/overflow: hiddencapped atmax-width: 100%in display mode. The truncation rules are relaxed while editing (overflow: visible,white-space: normal) so the auto-sizing input is never visually clipped.- New props
tooltip?: AutoTooltipValue(defaulttrue) andtooltipPlacement?: OverlayProps['placement'](default'top').tooltip={true}shows the full value as a tooltip when the text is truncated;tooltip="..."always shows a custom tooltip;tooltip={false}opts out. The tooltip is automatically suppressed while editing and whenrenderDisplayis used. Tabs: editable tabs now route<Tab tooltip>throughInlineInput(single tooltip owner) —Item's own tooltip is disabled for editable tabs to avoid double-wrapping. Long editable tab titles now also truncate with an ellipsis and reveal the full title on hover/focus, with no extra configuration. Non-editable tabs are unchanged.