{"name":"popover","title":"Popover","description":"Displays rich content in a portal, triggered by a button.","installCommand":"bunx marko-ui add popover -y","usageTags":"","importSnippet":"import Popover from \"@/components/ui/popover/popover.marko\";","usageSnippet":"\n <@trigger|props|>\n \n \n

Place any content here.

\n","tags":["Popover","PopoverDescription","PopoverHeader","PopoverTitle"],"parts":[{"name":"trigger","param":"Record","description":"Trigger render-prop — the element that opens the popover."},{"name":"description","description":"Description of the popover."},{"name":"title","description":"Title of the popover, automatically wired to aria-labelledby."}],"props":[{"name":"autoFocus","type":"boolean | undefined","required":false,"default":"true","description":"Whether to automatically set focus on the first focusable\ncontent within the popover when opened."},{"name":"class","type":"string","required":false,"description":"Extra class for the content panel."},{"name":"closeOnEscape","type":"boolean | undefined","required":false,"default":"true","description":"Whether to close the popover when the escape key is pressed."},{"name":"closeOnInteractOutside","type":"boolean | undefined","required":false,"default":"true","description":"Whether to close the popover when the user clicks outside of the popover."},{"name":"defaultOpen","type":"boolean | undefined","required":false,"description":"The initial open state of the popover when rendered.\nUse when you don't need to control the open state of the popover."},{"name":"defaultTriggerValue","type":"string | null | undefined","required":false,"description":"The initial trigger value when rendered.\nUse when you don't need to control the trigger value."},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"finalFocusEl","type":"(() => MaybeElement) | undefined","required":false,"description":"Element to receive focus when the popover is closed."},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The ids of the elements in the popover. Useful for composition."},{"name":"initialFocusEl","type":"(() => HTMLElement | null) | undefined","required":false,"description":"The element to focus on when the popover is opened."},{"name":"modal","type":"boolean | undefined","required":false,"default":"false","description":"Whether the popover should be modal. When set to `true`:\n- interaction with outside elements will be disabled\n- only popover content will be visible to screen readers\n- scrolling is blocked\n- focus is trapped within the popover"},{"name":"open","type":"boolean | undefined","required":false,"description":"The controlled open state of the popover"},{"name":"persistentElements","type":"(() => Element | null)[] | undefined","required":false,"description":"Returns the persistent elements that:\n- should not have pointer-events disabled\n- should not trigger the dismiss event"},{"name":"portalled","type":"boolean | undefined","required":false,"default":"true","description":"Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position\nof the popover content."},{"name":"positioning","type":"PositioningOptions | undefined","required":false,"description":"The user provided options used to position the popover content"},{"name":"restoreFocus","type":"boolean | undefined","required":false,"default":"true","description":"Whether to restore focus to the element that had focus before the popover was opened."},{"name":"translations","type":"IntlTranslations | undefined","required":false,"description":"Specifies the localized strings that identifies the accessibility elements and their states"},{"name":"triggerValue","type":"string | null | undefined","required":false,"description":"The controlled trigger value"}],"events":[{"name":"onEscapeKeyDown","arg":"KeyboardEvent","description":"Function called when the escape key is pressed"},{"name":"onFocusOutside","arg":"FocusOutsideEvent","description":"Function called when the focus is moved outside the component"},{"name":"onInteractOutside","arg":"InteractOutsideEvent","description":"Function called when an interaction happens outside the component"},{"name":"onOpenChange","arg":"OpenChangeDetails","description":"Function invoked when the popover opens or closes"},{"name":"onPointerDownOutside","arg":"PointerDownOutsideEvent","description":"Function called when the pointer is pressed down outside the component"},{"name":"onRequestDismiss","arg":"LayerDismissEvent","description":"Function called when this layer is closed due to a parent layer being closed"},{"name":"onTriggerValueChange","arg":"TriggerValueChangeDetails","description":"Function called when the trigger value changes."},{"name":"openChange","arg":"boolean"}],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"popover-demo","title":"Default","source":"import Popover from \"@marko-ui/shadcn/ui/popover/popover.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n\n <@trigger|props|>\n \n \n <@title>\n

Dimensions

\n \n <@description>\n

\n Set the dimensions for the layer.\n

\n \n","description":"A popover with a header and description, anchored to its trigger."},{"id":"popover-basic","title":"Basic","source":"import Popover from \"@marko-ui/shadcn/ui/popover/popover.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n\n <@trigger|props|>\n \n \n
\n

Dimensions

\n

\n Set the dimensions for the layer.\n

\n
\n","description":"A simple popover with a header, title, and description."},{"id":"popover-alignments","title":"Align","source":"import Popover from \"@marko-ui/shadcn/ui/popover/popover.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n
\n \n <@trigger|props|>\n \n \n

Aligned to start

\n \n \n <@trigger|props|>\n \n \n

Aligned to center

\n \n \n <@trigger|props|>\n \n \n

Aligned to end

\n \n
","description":"Upstream's `align` prop lives on Radix's `PopoverContent`; our port has no separate `align` prop — Zag folds it into `positioning.placement` (e.g. `\"bottom-start\"` / `\"bottom\"` / `\"bottom-end\"`), forwarded straight through to the popper."},{"id":"popover-form","title":"With Form","source":"import Popover from \"@marko-ui/shadcn/ui/popover/popover.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldGroup from \"@marko-ui/shadcn/ui/field/field-group.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\n\n\n <@trigger|props|>\n \n \n
\n

Dimensions

\n

\n Set the dimensions for the layer.\n

\n
\n \n \n Width\n \n \n \n Height\n \n \n \n","description":"A popover with form fields inside."},{"id":"popover-placement","title":"Placement","source":"import Popover from \"@marko-ui/shadcn/ui/popover/popover.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n\n <@trigger|props|>\n \n \n

Positioned to the right of the trigger.

\n","description":"Pass `positioning` through to the underlying Zag machine to control placement."},{"id":"popover-controlled","title":"Controlled","source":"import Popover from \"@marko-ui/shadcn/ui/popover/popover.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n\n\n
\n { open = next; }\n >\n <@trigger|props|>\n \n \n

Controlled popover content.

\n \n open: ${String(open)}\n
","description":"Zag machines are controlled: an `open` prop without a change handler never moves. Pair it with `openChange`, or use Marko's bind shorthand `open:=state`.","essential":true},{"id":"popover-rtl","title":"RTL","source":"import Popover from \"@marko-ui/shadcn/ui/popover/popover.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n
\n \n <@trigger|props|>\n \n \n
\n

الأبعاد

\n

تعيين الأبعاد للطبقة.

\n
\n \n \n <@trigger|props|>\n \n \n
\n

الأبعاد

\n

تعيين الأبعاد للطبقة.

\n
\n \n \n <@trigger|props|>\n \n \n
\n

الأبعاد

\n

تعيين الأبعاد للطبقة.

\n
\n \n \n <@trigger|props|>\n \n \n
\n

الأبعاد

\n

تعيين الأبعاد للطبقة.

\n
\n \n
","description":"Set `dir=\"rtl\"` on the `Popover` (matching the surrounding document direction) so the positioner flips placement automatically."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","body":{"description":"Popover content shown when open. Optional — a title/description-only popover is legitimate."},"nativeAttributes":"div","subcomponents":[{"name":"description","props":[],"nativeAttributes":"p"},{"name":"header","props":[],"nativeAttributes":"div"},{"name":"title","props":[],"nativeAttributes":"div"}],"composition":"`Popover` is a single-file component. Its two upstream parts map onto slots on one tag:\n\n- `<@trigger|props|>` — render-prop slot; spread `props` onto your own trigger element (a `Button`, typically). Replaces upstream's separate `PopoverTrigger`.\n- the tag's own body — rendered inside the floating panel when open. Replaces upstream's separate `PopoverContent`.\n\nUpstream's `PopoverHeader`, `PopoverTitle`, and `PopoverDescription` have no dedicated parts in our port — they're plain markup (an `h4`/`p` pair) composed directly inside the body, as shown in the examples below."}