Popover

A popover is a floating non-modal dialog box.

Preview
Code

Installation

npm
yarn
pnpm
bun

npm i @melio-ui/popover

If @melio-ui/react is already installed globally, you can skip this step.

Import

Individual
Global

import { 
  PopoverRoot,
  PopoverTrigger,
  PopoverPortal,
  PopoverContent,
  PopoverArrow,
  PopoverClose,
} from '@melio-ui/popover';

PopoverRoot: All parts of the popover are included.
PopoverTrigger: Used to activate or open the Popover component.
PopoverPortal: Portal the overlay and content portion into the body.
PopoverContent: Includes the content that will be displayed in the open menu box.
PopoverArrow: An optional arrow element for the popover, to be rendered within PopoverContent for visual association.
PopoverClose: The button that closes the menu.

Another way to import

'use client';

import { Popover } from '@melio-ui/popover';

<Popover.Root>
  <Popover.Trigger asChild>
    <button type="button">Open Popover</button>
  </Popover.Trigger>
  <Popover.Portal>
    <Popover.Content>
      <div>This is a Popover Content</div>
      <Popover.Arrow />
    </Popover.Content>
  </Popover.Portal>
</Popover.Root>;

'use client' must be used when rendering on the server side.

API Reference

PopoverRoot

All parts of the popover are included.

Prop	Type	Default	Description
open	`boolean`	-	Sets whether the popover content is open or closed.
defaultOpen	`boolean`	-	When first rendered, the popover content is in an opened state. Use when there is no need to control the opened state.
onOpenChange	`(open: boolean) => void`	-	This is an event handler that is triggered when the open state of the popover content changes.

PopoverTrigger

Used to activate or open the Popover component.

Prop	Type	Default	Description
asChild	`boolean`	-	Changes the default rendering element passed as a child, merging its props and behavior.

Data attribute	Values
[data-state]	"open" \| "closed"

PopoverPortal

Portal the overlay and content portion into the body.

Prop	Type	Default	Description
container	`HTMLElement \| (() => HTMLElement)`	document.body	Specifies the container element to which the content should be portaled.

PopoverContent

Includes the content that will be displayed in the open menu box.

Prop	Type	Default	Description
side	`"top" \| "right" \| "bottom" \| "left"`	"top"	The ideal side of the trigger to render on when it's open.
sideOffset	`number`	0	The pixel distance from the trigger.
align	`"start" \| "center" \| "end"`	"center"	The desired alignment with the trigger, which may adjust if collisions happen.
alignOffset	`number`	0	A pixel offset from the "start" or "end" alignment choices.
destroyOnClose	`boolean`	true	Used to ensure that the DOM is removed when closed.
forceMount	`boolean`	-	Used to ensure that a component is always rendered in the DOM, regardless of its visibility or whether it's conditionally displayed.
closeOnEsc	`boolean`	true	Determines whether or not to close when the ESC key is pressed.
closeOnBlur	`boolean`	true	Determines whether to close on blur.

Data attribute	Values
[data-state]	"open" \| "closed"
[data-side]	"top" \| "right" \| "bottom" \| "left"
[data-align]	"start" \| "center" \| "end"

PopoverArrow

An optional arrow element for the popover, to be rendered within PopoverContent for visual association.

Prop	Type	Default	Description
asChild	`boolean`	-	Changes the default rendering element passed as a child, merging its props and behavior.
width	`number`	10	The arrow's width measured in pixels.
height	`number`	5	The arrow's height measured in pixels.

PopoverClose

The button that closes the menu.

Prop	Type	Default	Description
asChild	`boolean`	-	Changes the default rendering element passed as a child, merging its props and behavior.

Examples

<PopoverRoot>
  <PopoverTrigger asChild>
    <button
      type="button"
      style={{
        border: '1px solid #475569',
        borderRadius: 5,
        padding: 10,
      }}
    >
      Open Popover
    </button>
  </PopoverTrigger>
  <PopoverPortal>
    <PopoverContent side="right" align="start">
      <div style={{ padding: 50 }}>This is a Popover Content</div>
    </PopoverContent>
  </PopoverPortal>
</PopoverRoot>

Display arrow

<PopoverRoot>
  <PopoverTrigger asChild>
    <button
      type="button"
      style={{
        border: '1px solid #475569',
        borderRadius: 5,
        padding: 10,
      }}
    >
      Open Popover
    </button>
  </PopoverTrigger>
  <PopoverPortal>
    <PopoverContent>
      <div style={{ padding: 20 }}>This is a Popover Content</div>
      <PopoverArrow />
    </PopoverContent>
  </PopoverPortal>
</PopoverRoot>

Click the button to close

function PopoverCloseButton() {
  return (
    <PopoverRoot>
      <PopoverTrigger asChild>
        <button
          type="button"
          style={{
            border: '1px solid #475569',
            borderRadius: 5,
            padding: 10,
          }}
        >
          Open Popover
        </button>
      </PopoverTrigger>
      <PopoverPortal>
        <PopoverContent style={{ padding: 10, display: 'flex', gap: 10, alignItems: 'center' }}>
          <div>This is a Popover Content</div>
          <PopoverClose asChild>
            <CloseIconButton />
          </PopoverClose>
        </PopoverContent>
      </PopoverPortal>
    </PopoverRoot>
  );
}

render(<PopoverCloseButton />);

function CloseIconButton(props) {
  return (
    <button
      {...props}
      type="button"
      style={{
        border: '1px solid #475569',
        borderRadius: 5,
        padding: 5,
        backgroundColor: '#5e6c80',
      }}
    >
      <svg
        width="1em"
        height="1em"
        viewBox="0 0 24 24"
        fill="currentColor"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
          fill="currentColor"
        />
      </svg>
    </button>
  );
}

NumberInput

Progress