UI kit reference

components/floating/FloatingSurface

import { … } from 'zidane-ui'ui/src/components/floating/FloatingSurface.tsx

Popover (click)

HoverCard (hover)

Hover me

RowActionsMenu (3-dots)

Tooltip, inline and portaled

Components#

`FloatingSurface`Component#

Renders the one floating surface: overlay tone, float shadow and one radius, portaled to document.body and fixed-positioned against its anchor so no ancestor's overflow clips it. It grows out of its anchor on enter and fades out on exit. Presses inside do not bubble through the React tree. The ref goes to the surface element.

TypeScript

const FloatingSurface: ForwardRefExoticComponent<FloatingSurfaceProps & RefAttributes<HTMLDivElement>>

Props

FloatingSurface props
Name	Type	Default	Description
align?	`Align`	`'start'`	How the surface lines up along the anchor's edge.
anchor	`Anchor`		The element or point the surface is placed against.
aria-label?	`string`		Accessible name of the surface.
children	`ReactNode`		The surface's content.
className?	`string`		Extra classes on the surface.
data-testid?	`string`		Test id for the surface element.
id?	`string`		For a trigger's `aria-controls`.
offset?	`number`	`6`	Gap between anchor and surface, in px.
onBlur?	`(event: FocusEvent<HTMLDivElement>) => void`		A hover card closes when focus leaves it.
onKeyDown?	`(event: KeyboardEvent<HTMLDivElement>) => void`		Menu navigation when the surface itself is the menu.
onPointerEnter?	`() => void`		A hover card stays open while the pointer is on it.
onPointerLeave?	`() => void`		Called when the pointer leaves the surface. A hover card closes on it.
open	`boolean`		Whether the surface is shown. It stays mounted until its exit finishes.
role?	`string`		ARIA role of the surface, such as `menu` or `dialog`.
side?	`Side`	`'bottom'`	Preferred side of the anchor. It flips when it does not fit.
style?	`CSSProperties`		Inline styles, merged over the computed position.
width?	`number`		Fixed width in px; otherwise sized by content.

ui/src/components/floating/FloatingSurface.tsx:81

Interfaces#

`FloatingSurfaceProps`Interface#

Props of FloatingSurface.

TypeScript

interface FloatingSurfaceProps

Properties

FloatingSurfaceProps properties
Name	Type	Default	Description
align?	`Align`	`'start'`	How the surface lines up along the anchor's edge.
anchor	`Anchor`		The element or point the surface is placed against.
aria-label?	`string`		Accessible name of the surface.
children	`ReactNode`		The surface's content.
className?	`string`		Extra classes on the surface.
data-testid?	`string`		Test id for the surface element.
id?	`string`		For a trigger's `aria-controls`.
offset?	`number`	`6`	Gap between anchor and surface, in px.
onBlur?	`(event: FocusEvent<HTMLDivElement>) => void`		A hover card closes when focus leaves it.
onKeyDown?	`(event: KeyboardEvent<HTMLDivElement>) => void`		Menu navigation when the surface itself is the menu.
onPointerEnter?	`() => void`		A hover card stays open while the pointer is on it.
onPointerLeave?	`() => void`		Called when the pointer leaves the surface. A hover card closes on it.
open	`boolean`		Whether the surface is shown. It stays mounted until its exit finishes.
role?	`string`		ARIA role of the surface, such as `menu` or `dialog`.
side?	`Side`	`'bottom'`	Preferred side of the anchor. It flips when it does not fit.
style?	`CSSProperties`		Inline styles, merged over the computed position.
width?	`number`		Fixed width in px; otherwise sized by content.

ui/src/components/floating/FloatingSurface.tsx:25