SpatialGenerated from the public API
MorphingPopover
The same morph, for content that does not need a modal.
@luc/ui/motionLive preview
The same shared-geometry idea at popover scale, with Radix keeping the placement and dismiss contract.
Select a period
<MorphingPopover>
<MorphingPopoverTrigger>
<Card variant="outline">Select a period</Card>
</MorphingPopoverTrigger>
<MorphingPopoverContent>
<Text variant="label" as="p">Period</Text>
<MorphingPopoverClose>Done</MorphingPopoverClose>
</MorphingPopoverContent>
</MorphingPopover>Usage
import { MorphingPopover } from "@luc/ui/motion";<MorphingPopover>
<MorphingPopoverTrigger>
<Card variant="outline">Select a period</Card>
</MorphingPopoverTrigger>
<MorphingPopoverContent>
<Text variant="label" as="p">Period</Text>
<MorphingPopoverClose>Done</MorphingPopoverClose>
</MorphingPopoverContent>
</MorphingPopover>API
| Export | Kind | Signature |
|---|---|---|
MorphingPopover | 4 documented props | ({ children, open, defaultOpen, onOpenChange }: MorphingPopoverProps) => import("@types/react").JSX.Element |
MorphingPopoverAnchor | 2 documented props | import("@types/react").ForwardRefExoticComponent<RadixPopover.PopoverAnchorProps & import("@types/react").RefAttributes<HTMLDivElement>> |
MorphingPopoverClose | 1 documented props | import("@types/react").ForwardRefExoticComponent<RadixPopover.PopoverCloseProps & import("@types/react").RefAttributes<HTMLButtonElement>> |
MorphingPopoverContent | 23 documented props | ({ className, panelClassName, width, sideOffset, align, children, ...props }: MorphingPopoverContentProps) => import("@types/react").JSX.Element |
MorphingPopoverTrigger | export | ({ className, children, ...props }: MorphingPopoverTriggerProps) => import("@types/react").JSX.Element |
MorphingPopover props
Type: MorphingPopoverProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
children | ReactNode | — | |
defaultOpen? | boolean | undefined | — | |
onOpenChange? | ((open: boolean) => void) | undefined | — | |
open? | boolean | undefined | — |
MorphingPopoverAnchor props
Type: PopoverAnchorProps & RefAttributes<HTMLDivElement>
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
asChild?inherited | boolean | undefined | — | |
virtualRef?inherited | RefObject<Measurable | null> | undefined | — |
MorphingPopoverClose props
Type: PopoverCloseProps & RefAttributes<HTMLButtonElement>
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
asChild?inherited | boolean | undefined | — |
MorphingPopoverContent props
Type: MorphingPopoverContentProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
align?inherited | "center" | "start" | "end" | undefined | — | |
alignOffset?inherited | number | undefined | — | |
arrowPadding?inherited | number | undefined | — | |
asChild?inherited | boolean | undefined | — | |
avoidCollisions?inherited | boolean | undefined | — | |
children | ReactNode | — | |
collisionBoundary?inherited | Boundary | Boundary[] | undefined | — | |
collisionPadding?inherited | number | Partial<Record<"top" | "right" | "bottom" | "left", number>> | undefined | — | |
deferPointerDownOutside?inherited | boolean | undefined | — | When `true`, a `'pointerdown'` event outside of the layered element will wait for the interaction's click event before dispatching, allowing third-party code to stop propagation o… |
forceMount?inherited | true | undefined | — | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
hideWhenDetached?inherited | boolean | undefined | — | |
onCloseAutoFocus?inherited | ((event: Event) => void) | undefined | — | Event handler called when auto-focusing on close. Can be prevented. |
onEscapeKeyDown?inherited | ((event: KeyboardEvent) => void) | undefined | — | Event handler called when the escape key is down. Can be prevented. |
onFocusOutside?inherited | ((event: FocusOutsideEvent) => void) | undefined | — | Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented. |
onInteractOutside?inherited | ((event: PointerDownOutsideEvent | FocusOutsideEvent) => void) | undefined | — | Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prev… |
onOpenAutoFocus?inherited | ((event: Event) => void) | undefined | — | Event handler called when auto-focusing on open. Can be prevented. |
onPointerDownOutside?inherited | ((event: PointerDownOutsideEvent) => void) | undefined | — | Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented. |
panelClassName? | string | undefined | — | Extra classes for the panel itself. |
side?inherited | "top" | "right" | "bottom" | "left" | undefined | — | |
sideOffset?inherited | number | undefined | — | |
sticky?inherited | "partial" | "always" | undefined | — | |
updatePositionStrategy?inherited | "always" | "optimized" | undefined | — | |
width? | "auto" | "sm" | "md" | "lg" | undefined | — |
Accessibility
The accessibility contract is the one the primitive underneath the component already honours — the platform element for a control, or the ARIA pattern the component implements — and the Showcase's own pages are scanned for violations with axe.
What happens on the server, and when hydration changes it.
Family
Spatial
Depth, layering and geometry — motion that reads as physical space.
Related