DocsAPI referenceHeadlesspopover

popover headless API

The core connector and vanilla mount are always visible. Use the framework choice to inspect native composition, props, outputs, context and hooks for the selected adapter.

@grassroot/ui-headless-core/popover

Core connector and vanilla API

12 exports
View source packages/ui-headless/core/src/popover/index.ts

Activates Popover's non-modal layer after Content is mounted. This is the DropdownMenu `activateMenuLayer` pattern adapted to the Popover service: no focus trap and no scroll lock, with top-layer-only Escape/outside-click ownership and idempotent release.

DeclarationView source
activatePopoverLayerts
declare function activatePopoverLayer(service: PopoverService, scope: PartScope, doc: Document): () => void;
Name
Kind
Type
Requirement
service
parameter
PopoverService
required
scope
parameter
PartScope
required
doc
parameter
Document
required
return
return value
() => void
n/a
Name
service
Kind
parameter
Type
PopoverService
Requirement
required
Name
scope
Kind
parameter
Type
PartScope
Requirement
required
Name
doc
Kind
parameter
Type
Document
Requirement
required
Name
return
Kind
return value
Type
() => void
Requirement
n/a

connectPopover

function
DeclarationView source
connectPopoverts
declare function connectPopover(service: PopoverService, scope: PartScope, _options?: PopoverConnectOptions): PopoverApi;
Name
Kind
Type
Requirement
service
parameter
PopoverService
required
scope
parameter
PartScope
required
_options
parameter
PopoverConnectOptions
optional
return
return value
PopoverApi
n/a
Name
service
Kind
parameter
Type
PopoverService
Requirement
required
Name
scope
Kind
parameter
Type
PartScope
Requirement
required
Name
_options
Kind
parameter
Type
PopoverConnectOptions
Requirement
optional
Name
return
Kind
return value
Type
PopoverApi
Requirement
n/a

mountPopover

function
DeclarationView source
mountPopoverts
declare function mountPopover(container: HTMLElement, options?: MountPopoverOptions): PopoverMount;
Name
Kind
Type
Requirement
container
parameter
HTMLElement
required
options
parameter
MountPopoverOptions
optional
return
return value
PopoverMount
n/a
Name
container
Kind
parameter
Type
HTMLElement
Requirement
required
Name
options
Kind
parameter
Type
MountPopoverOptions
Requirement
optional
Name
return
Kind
return value
Type
PopoverMount
Requirement
n/a
DeclarationView source
MountPopoverOptionsts
interface MountPopoverOptions extends PopoverInput {
readonly onOpenChange?: (detail: PopoverOpenChangeDetail) => void;
readonly renderTrigger?: (button: HTMLElement) => void;
readonly renderContent?: (panel: HTMLElement) => void;
}
Name
Kind
Type
Requirement
onOpenChange
property
(detail: PopoverOpenChangeDetail) => void
optional
renderContent
property
(panel: HTMLElement) => void
optional
renderTrigger
property
(button: HTMLElement) => void
optional
Name
onOpenChange
Kind
property
Type
(detail: PopoverOpenChangeDetail) => void
Requirement
optional
Name
renderContent
Kind
property
Type
(panel: HTMLElement) => void
Requirement
optional
Name
renderTrigger
Kind
property
Type
(button: HTMLElement) => void
Requirement
optional
DeclarationView source
popoverAnatomyts
export declare const popoverAnatomy: {
readonly scope: "popover";
readonly parts: readonly ["trigger", "content"];
};
Name
Kind
Type
Requirement
parts
property
readonly ["trigger", "content"]
required
scope
property
"popover"
required
Name
parts
Kind
property
Type
readonly ["trigger", "content"]
Requirement
required
Name
scope
Kind
property
Type
"popover"
Requirement
required

PopoverApi

interface
DeclarationView source
PopoverApits
interface PopoverApi {
triggerProps(): PartProps;
contentProps(): PartProps;
readonly open: boolean;
}
Name
Kind
Type
Requirement
contentProps
method
() => PartProps
required
open
property
boolean
required
triggerProps
method
() => PartProps
required
Name
contentProps
Kind
method
Type
() => PartProps
Requirement
required
Name
open
Kind
property
Type
boolean
Requirement
required
Name
triggerProps
Kind
method
Type
() => PartProps
Requirement
required
DeclarationView source
PopoverConnectOptionsts
interface PopoverConnectOptions {}

PopoverMount

interface
DeclarationView source
PopoverMountts
interface PopoverMount {
readonly service: PopoverService;
readonly connector: PopoverApi;
readonly root: HTMLElement;
readonly trigger: HTMLElement;
readonly content: HTMLElement | null;
destroy(): void;
}
Name
Kind
Type
Requirement
connector
property
PopoverApi
required
content
property
HTMLElement | null
required
destroy
method
() => void
required
root
property
HTMLElement
required
service
property
PopoverService
required
trigger
property
HTMLElement
required
Name
connector
Kind
property
Type
PopoverApi
Requirement
required
Name
content
Kind
property
Type
HTMLElement | null
Requirement
required
Name
destroy
Kind
method
Type
() => void
Requirement
required
Name
root
Kind
property
Type
HTMLElement
Requirement
required
Name
service
Kind
property
Type
PopoverService
Requirement
required
Name
trigger
Kind
property
Type
HTMLElement
Requirement
required
DeclarationView source
PopoverOpenChangeDetailts
interface PopoverOpenChangeDetail {
readonly open: boolean;
readonly reason: PopoverChangeReason;
}
Name
Kind
Type
Requirement
open
property
boolean
required
reason
property
PopoverChangeReason
required
Name
open
Kind
property
Type
boolean
Requirement
required
Name
reason
Kind
property
Type
PopoverChangeReason
Requirement
required
DeclarationView source
PopoverPartts
type PopoverPart = (typeof popoverAnatomy.parts)[number];
DeclarationView source
PopoverServicets
type PopoverService = Service<PopoverInput, PopoverStateValue, PopoverContext, PopoverEvent, PopoverCommand>;
DeclarationView source
runPopoverCommandts
declare function runPopoverCommand(command: PopoverCommand, _scope: PartScope, options?: {
readonly onOpenChange?: (detail: {
open: boolean;
reason: PopoverChangeReason;
}) => void;
}): void;
Name
Kind
Type
Requirement
command
parameter
PopoverCommand
required
_scope
parameter
PartScope
required
options
parameter
{ readonly onOpenChange?: (detail: { open: boolean; reason: PopoverChangeReason; }) => void; }
optional
return
return value
void
n/a
Name
command
Kind
parameter
Type
PopoverCommand
Requirement
required
Name
_scope
Kind
parameter
Type
PartScope
Requirement
required
Name
options
Kind
parameter
Type
{ readonly onOpenChange?: (detail: { open: boolean; reason: PopoverChangeReason; }) => void; }
Requirement
optional
Name
return
Kind
return value
Type
void
Requirement
n/a

Framework adapters

Each panel keeps its adapter's public vocabulary. React compound exports, Vue composables, standalone Angular declarations, Svelte components, and Solid hooks stay native to their framework.

React example follows below.

React imports

@grassroot/ui-headless-react/popoverts
import { Content, Popover, Root, Trigger } from "@grassroot/ui-headless-react/popover";

Vue imports

@grassroot/ui-headless-vue/popoverts
<script setup lang="ts">
import { PopoverContent, PopoverRoot, PopoverTrigger } from "@grassroot/ui-headless-vue/popover";
</script>

Angular imports

@grassroot/ui-headless-angular/popoverts
import { Component } from "@angular/core";
import { GR_POPOVER_DECLARATIONS } from "@grassroot/ui-headless-angular/popover";
@Component({ standalone: true, imports: [GR_POPOVER_DECLARATIONS], template: `<!-- compose the popover parts here -->` })
export class Example {}

Svelte imports

@grassroot/ui-headless-svelte/popoverts
<script lang="ts">
import { PopoverContent, PopoverRoot, PopoverTrigger } from "@grassroot/ui-headless-svelte/popover";
</script>

Solid imports

@grassroot/ui-headless-solid/popoverts
import { PopoverContent, PopoverRoot, PopoverTrigger } from "@grassroot/ui-headless-solid/popover";

@grassroot/ui-headless-react/popover

React adapter

15 exports
View source packages/ui-headless/react/src/popover/index.ts

Content

value
DeclarationView source
Contentts
export declare const Content: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>;
Name
Kind
Type
Requirement
props
parameter
P
required
return
return value
ReactNode
n/a
Name
props
Kind
parameter
Type
P
Requirement
required
Name
return
Kind
return value
Type
ReactNode
Requirement
n/a

Popover

value
DeclarationView source
Popoverts
export declare const Popover: {
Root: typeof Root;
Trigger: import("react").ForwardRefExoticComponent<PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
Content: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>;
};
Name
Kind
Type
Requirement
Content
property
import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>
required
Root
property
typeof Root
required
Trigger
property
import("react").ForwardRefExoticComponent<PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>
required
Name
Content
Kind
property
Type
import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>
Requirement
required
Name
Root
Kind
property
Type
typeof Root
Requirement
required
Name
Trigger
Kind
property
Type
import("react").ForwardRefExoticComponent<PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>
Requirement
required
DeclarationView source
PopoverContentPropsts
interface PopoverContentProps extends ComponentPropsWithoutRef<"div"> {
readonly asChild?: boolean;
}
Name
Kind
Type
Requirement
asChild
property
boolean
optional
Name
asChild
Kind
property
Type
boolean
Requirement
optional
DeclarationView source
PopoverContextts
export declare const PopoverContext: import("react").Context<PopoverContextValue | null>;
Name
Kind
Type
Requirement
props
parameter
P
required
return
return value
ReactNode
n/a
Name
props
Kind
parameter
Type
P
Requirement
required
Name
return
Kind
return value
Type
ReactNode
Requirement
n/a
DeclarationView source
PopoverContextValuets
interface PopoverContextValue {
readonly service: PopoverService;
readonly connector: PopoverApi;
readonly scope: PartScope;
}
Name
Kind
Type
Requirement
connector
property
PopoverApi
required
scope
property
PartScope
required
service
property
PopoverService
required
Name
connector
Kind
property
Type
PopoverApi
Requirement
required
Name
scope
Kind
property
Type
PartScope
Requirement
required
Name
service
Kind
property
Type
PopoverService
Requirement
required
DeclarationView source
PopoverOpenChangeDetailts
interface PopoverOpenChangeDetail {
readonly open: boolean;
readonly reason: PopoverChangeReason;
}
Name
Kind
Type
Requirement
open
property
boolean
required
reason
property
PopoverChangeReason
required
Name
open
Kind
property
Type
boolean
Requirement
required
Name
reason
Kind
property
Type
PopoverChangeReason
Requirement
required

PopoverRootProps

interface
DeclarationView source
PopoverRootPropsts
interface PopoverRootProps {
readonly open?: PopoverInput["open"];
readonly defaultOpen?: PopoverInput["defaultOpen"];
readonly side?: PopoverInput["side"];
readonly align?: PopoverInput["align"];
readonly onOpenChange?: (detail: PopoverOpenChangeDetail) => void;
readonly children?: ReactNode;
}
Name
Kind
Type
Requirement
align
property
PopoverInput["align"]
optional
children
property
ReactNode
optional
defaultOpen
property
PopoverInput["defaultOpen"]
optional
onOpenChange
property
(detail: PopoverOpenChangeDetail) => void
optional
open
property
PopoverInput["open"]
optional
side
property
PopoverInput["side"]
optional
Name
align
Kind
property
Type
PopoverInput["align"]
Requirement
optional
Name
children
Kind
property
Type
ReactNode
Requirement
optional
Name
defaultOpen
Kind
property
Type
PopoverInput["defaultOpen"]
Requirement
optional
Name
onOpenChange
Kind
property
Type
(detail: PopoverOpenChangeDetail) => void
Requirement
optional
Name
open
Kind
property
Type
PopoverInput["open"]
Requirement
optional
Name
side
Kind
property
Type
PopoverInput["side"]
Requirement
optional
DeclarationView source
PopoverTriggerPropsts
interface PopoverTriggerProps extends Omit<ComponentPropsWithoutRef<"button">, "type"> {
readonly asChild?: boolean;
}
Name
Kind
Type
Requirement
asChild
property
boolean
optional
Name
asChild
Kind
property
Type
boolean
Requirement
optional

Root

function
DeclarationView source
Rootts
declare function Root(props: PopoverRootProps): import("react").JSX.Element;
Name
Kind
Type
Requirement
props
parameter
PopoverRootProps
required
return
return value
import("react").JSX.Element
n/a
Name
props
Kind
parameter
Type
PopoverRootProps
Requirement
required
Name
return
Kind
return value
Type
import("react").JSX.Element
Requirement
n/a

Trigger

value
DeclarationView source
Triggerts
export declare const Trigger: import("react").ForwardRefExoticComponent<PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
Name
Kind
Type
Requirement
props
parameter
P
required
return
return value
ReactNode
n/a
Name
props
Kind
parameter
Type
P
Requirement
required
Name
return
Kind
return value
Type
ReactNode
Requirement
n/a

usePopover

function
DeclarationView source
usePopoverts
declare function usePopover(input: PopoverInput, options?: UsePopoverOptions): UsePopoverResult;
Name
Kind
Type
Requirement
input
parameter
PopoverInput
required
options
parameter
UsePopoverOptions
optional
return
return value
UsePopoverResult
n/a
Name
input
Kind
parameter
Type
PopoverInput
Requirement
required
Name
options
Kind
parameter
Type
UsePopoverOptions
Requirement
optional
Name
return
Kind
return value
Type
UsePopoverResult
Requirement
n/a
DeclarationView source
usePopoverContextts
declare function usePopoverContext(partName: string): PopoverContextValue;
Name
Kind
Type
Requirement
partName
parameter
string
required
return
return value
PopoverContextValue
n/a
Name
partName
Kind
parameter
Type
string
Requirement
required
Name
return
Kind
return value
Type
PopoverContextValue
Requirement
n/a

UsePopoverOptions

interface
DeclarationView source
UsePopoverOptionsts
interface UsePopoverOptions {
readonly onOpenChange?: (detail: PopoverOpenChangeDetail) => void;
}
Name
Kind
Type
Requirement
onOpenChange
property
(detail: PopoverOpenChangeDetail) => void
optional
Name
onOpenChange
Kind
property
Type
(detail: PopoverOpenChangeDetail) => void
Requirement
optional

UsePopoverResult

interface
DeclarationView source
UsePopoverResultts
interface UsePopoverResult {
readonly service: PopoverService;
readonly connector: PopoverApi;
readonly scope: PartScope;
readonly snapshot: PopoverSnapshot;
}
Name
Kind
Type
Requirement
connector
property
PopoverApi
required
scope
property
PartScope
required
service
property
PopoverService
required
snapshot
property
PopoverSnapshot
required
Name
connector
Kind
property
Type
PopoverApi
Requirement
required
Name
scope
Kind
property
Type
PartScope
Requirement
required
Name
service
Kind
property
Type
PopoverService
Requirement
required
Name
snapshot
Kind
property
Type
PopoverSnapshot
Requirement
required

Subscribes a component to a service's committed-snapshot version.

DeclarationView source
useServiceVersionts
declare function useServiceVersion<S extends Service<any, any, any, any, any, any>>(service: S): ReturnType<S["getSnapshot"]>;
Name
Kind
Type
Requirement
service
parameter
S
required
return
return value
ReturnType<S["getSnapshot"]>
n/a
Name
service
Kind
parameter
Type
S
Requirement
required
Name
return
Kind
return value
Type
ReturnType<S["getSnapshot"]>
Requirement
n/a

@grassroot/ui-headless-vue/popover

Vue adapter

11 exports
View source packages/ui-headless/vue/src/popover/index.ts
DeclarationView source
PopoverContentts
export declare const PopoverContent: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
asChild: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
DeclarationView source
PopoverContextKeyts
export declare const PopoverContextKey: InjectionKey<PopoverContextValue>;
DeclarationView source
PopoverContextValuets
interface PopoverContextValue {
readonly service: PopoverService;
readonly connector: PopoverApi;
readonly scope: PartScope;
readonly snapshot: ShallowRef<PopoverSnapshot>;
}
Name
Kind
Type
Requirement
connector
property
PopoverApi
required
scope
property
PartScope
required
service
property
PopoverService
required
snapshot
property
ShallowRef<PopoverSnapshot>
required
Name
connector
Kind
property
Type
PopoverApi
Requirement
required
Name
scope
Kind
property
Type
PartScope
Requirement
required
Name
service
Kind
property
Type
PopoverService
Requirement
required
Name
snapshot
Kind
property
Type
ShallowRef<PopoverSnapshot>
Requirement
required
DeclarationView source
PopoverOpenChangeDetailts
interface PopoverOpenChangeDetail {
readonly open: boolean;
readonly reason: PopoverChangeReason;
}
Name
Kind
Type
Requirement
open
property
boolean
required
reason
property
PopoverChangeReason
required
Name
open
Kind
property
Type
boolean
Requirement
required
Name
reason
Kind
property
Type
PopoverChangeReason
Requirement
required

PopoverRoot

value
DeclarationView source
PopoverRootts
export declare const PopoverRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
open: {
type: PropType<PopoverInput["open"]>;
default: undefined;
};
defaultOpen: {
type: PropType<PopoverInput["defaultOpen"]>;
default: undefined;
};
side: {
type: PropType<PopoverInput["side"]>;
default: undefined;
};
align: {
type: PropType<PopoverInput["align"]>;
default: undefined;
};
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
openChange: (_detail: PopoverOpenChangeDetail) => true;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
open: {
type: PropType<PopoverInput["open"]>;
default: undefined;
};
defaultOpen: {
type: PropType<PopoverInput["defaultOpen"]>;
default: undefined;
};
side: {
type: PropType<PopoverInput["side"]>;
default: undefined;
};
align: {
type: PropType<PopoverInput["align"]>;
default: undefined;
};
}>> & Readonly<{
onOpenChange?: ((_detail: PopoverOpenChangeDetail) => any) | undefined;
}>, {
open: boolean | undefined;
defaultOpen: boolean | undefined;
side: "bottom" | "top" | undefined;
align: "end" | "start" | undefined;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
DeclarationView source
PopoverTriggerts
export declare const PopoverTrigger: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
asChild: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
DeclarationView source
providePopoverContextts
declare function providePopoverContext(value: PopoverContextValue): void;
Name
Kind
Type
Requirement
value
parameter
PopoverContextValue
required
return
return value
void
n/a
Name
value
Kind
parameter
Type
PopoverContextValue
Requirement
required
Name
return
Kind
return value
Type
void
Requirement
n/a

usePopover

function
DeclarationView source
usePopoverts
declare function usePopover(input: PopoverInput | (() => PopoverInput), options?: UsePopoverOptions): UsePopoverResult;
Name
Kind
Type
Requirement
input
parameter
PopoverInput | (() => PopoverInput)
required
options
parameter
UsePopoverOptions
optional
return
return value
UsePopoverResult
n/a
Name
input
Kind
parameter
Type
PopoverInput | (() => PopoverInput)
Requirement
required
Name
options
Kind
parameter
Type
UsePopoverOptions
Requirement
optional
Name
return
Kind
return value
Type
UsePopoverResult
Requirement
n/a
DeclarationView source
usePopoverContextts
declare function usePopoverContext(partName: string): PopoverContextValue;
Name
Kind
Type
Requirement
partName
parameter
string
required
return
return value
PopoverContextValue
n/a
Name
partName
Kind
parameter
Type
string
Requirement
required
Name
return
Kind
return value
Type
PopoverContextValue
Requirement
n/a

UsePopoverOptions

interface
DeclarationView source
UsePopoverOptionsts
interface UsePopoverOptions {
readonly onOpenChange?: (detail: PopoverOpenChangeDetail) => void;
}
Name
Kind
Type
Requirement
onOpenChange
property
(detail: PopoverOpenChangeDetail) => void
optional
Name
onOpenChange
Kind
property
Type
(detail: PopoverOpenChangeDetail) => void
Requirement
optional

UsePopoverResult

interface
DeclarationView source
UsePopoverResultts
interface UsePopoverResult {
readonly service: PopoverService;
readonly connector: PopoverApi;
readonly scope: PartScope;
readonly snapshot: ShallowRef<PopoverSnapshot>;
}
Name
Kind
Type
Requirement
connector
property
PopoverApi
required
scope
property
PartScope
required
service
property
PopoverService
required
snapshot
property
ShallowRef<PopoverSnapshot>
required
Name
connector
Kind
property
Type
PopoverApi
Requirement
required
Name
scope
Kind
property
Type
PartScope
Requirement
required
Name
service
Kind
property
Type
PopoverService
Requirement
required
Name
snapshot
Kind
property
Type
ShallowRef<PopoverSnapshot>
Requirement
required

@grassroot/ui-headless-angular/popover

Angular adapter

12 exports
View source packages/ui-headless/angular/src/popover/index.ts
DeclarationView source
createPopoverStorets
export declare function createPopoverStore(initialInput: PopoverInput, options?: CreatePopoverStoreOptions): PopoverStore;
Name
Kind
Type
Requirement
initialInput
parameter
PopoverInput
required
options
parameter
CreatePopoverStoreOptions
optional
return
return value
PopoverStore
n/a
Name
initialInput
Kind
parameter
Type
PopoverInput
Requirement
required
Name
options
Kind
parameter
Type
CreatePopoverStoreOptions
Requirement
optional
Name
return
Kind
return value
Type
PopoverStore
Requirement
n/a
DeclarationView source
CreatePopoverStoreOptionsts
export interface CreatePopoverStoreOptions {
readonly onOpenChange?: (detail: PopoverOpenChangeDetail) => void;
readonly onCommit?: () => void;
}
Name
Kind
Type
Requirement
onCommit
property
() => void
optional
onOpenChange
property
(detail: PopoverOpenChangeDetail) => void
optional
Name
onCommit
Kind
property
Type
() => void
Requirement
optional
Name
onOpenChange
Kind
property
Type
(detail: PopoverOpenChangeDetail) => void
Requirement
optional

One re-entrancy policy for every Angular store's zoneless commit nudge.

DeclarationView source
createReentrantSafeTickts
export declare function createReentrantSafeTick(appRef: ApplicationRef): () => void;
Name
Kind
Type
Requirement
appRef
parameter
ApplicationRef
required
return
return value
() => void
n/a
Name
appRef
Kind
parameter
Type
ApplicationRef
Requirement
required
Name
return
Kind
return value
Type
() => void
Requirement
n/a
DeclarationView source
GR_POPOVER_DECLARATIONSts
export declare const GR_POPOVER_DECLARATIONS: readonly [typeof GrPopoverRoot, typeof GrPopoverTrigger, typeof GrPopoverOpen, typeof GrPopoverContent];
DeclarationView source
GrPopoverContentts
export declare class GrPopoverContent extends PopoverPartBase {
constructor();
static ɵfac: i0.ɵɵFactoryDeclaration<GrPopoverContent, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<GrPopoverContent, "[grPopoverContent]", never, {}, {}, never, never, true, never>;
}
Name
Kind
Type
Requirement
ɵdir
property
i0.ɵɵDirectiveDeclaration<GrPopoverContent, "[grPopoverContent]", never, {}, {}, never, never, true, never>
required
ɵfac
property
i0.ɵɵFactoryDeclaration<GrPopoverContent, never>
required
Name
ɵdir
Kind
property
Type
i0.ɵɵDirectiveDeclaration<GrPopoverContent, "[grPopoverContent]", never, {}, {}, never, never, true, never>
Requirement
required
Name
ɵfac
Kind
property
Type
i0.ɵɵFactoryDeclaration<GrPopoverContent, never>
Requirement
required
DeclarationView source
GrPopoverOpents
export declare class GrPopoverOpen implements OnDestroy {
private readonly store;
private readonly template;
private readonly view;
private shown;
constructor();
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<GrPopoverOpen, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<GrPopoverOpen, "[grPopoverOpen]", never, {}, {}, never, never, true, never>;
}
Name
Kind
Type
Requirement
ngOnDestroy
method
() => void
required
ɵdir
property
i0.ɵɵDirectiveDeclaration<GrPopoverOpen, "[grPopoverOpen]", never, {}, {}, never, never, true, never>
required
ɵfac
property
i0.ɵɵFactoryDeclaration<GrPopoverOpen, never>
required
shown
property
any
required
store
property
any
required
template
property
any
required
view
property
any
required
Name
ngOnDestroy
Kind
method
Type
() => void
Requirement
required
Name
ɵdir
Kind
property
Type
i0.ɵɵDirectiveDeclaration<GrPopoverOpen, "[grPopoverOpen]", never, {}, {}, never, never, true, never>
Requirement
required
Name
ɵfac
Kind
property
Type
i0.ɵɵFactoryDeclaration<GrPopoverOpen, never>
Requirement
required
Name
shown
Kind
property
Type
any
Requirement
required
Name
store
Kind
property
Type
any
Requirement
required
Name
template
Kind
property
Type
any
Requirement
required
Name
view
Kind
property
Type
any
Requirement
required
DeclarationView source
GrPopoverRootts
export declare class GrPopoverRoot implements OnDestroy {
readonly open: import("@angular/core").InputSignal<boolean | undefined>;
readonly defaultOpen: import("@angular/core").InputSignal<boolean | undefined>;
readonly side: import("@angular/core").InputSignal<"bottom" | "top" | undefined>;
readonly align: import("@angular/core").InputSignal<"start" | "end" | undefined>;
readonly openChange: import("@angular/core").OutputEmitterRef<PopoverOpenChangeDetail>;
private readonly injector;
private lastSynced;
private releaseManagers;
readonly store: PopoverStore;
constructor();
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<GrPopoverRoot, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<GrPopoverRoot, "[grPopoverRoot]", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; }, { "openChange": "openChange"; }, never, never, true, never>;
}
Name
Kind
Type
Requirement
align
property
import("@angular/core").InputSignal<"start" | "end" | undefined>
required
defaultOpen
property
import("@angular/core").InputSignal<boolean | undefined>
required
injector
property
any
required
lastSynced
property
any
required
ngOnDestroy
method
() => void
required
open
property
import("@angular/core").InputSignal<boolean | undefined>
required
openChange
property
import("@angular/core").OutputEmitterRef<PopoverOpenChangeDetail>
required
ɵdir
property
i0.ɵɵDirectiveDeclaration<GrPopoverRoot, "[grPopoverRoot]", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; }, { "openChange": "openChange"; }, never, never, true, never>
required
ɵfac
property
i0.ɵɵFactoryDeclaration<GrPopoverRoot, never>
required
releaseManagers
property
any
required
side
property
import("@angular/core").InputSignal<"bottom" | "top" | undefined>
required
store
property
PopoverStore
required
Name
align
Kind
property
Type
import("@angular/core").InputSignal<"start" | "end" | undefined>
Requirement
required
Name
defaultOpen
Kind
property
Type
import("@angular/core").InputSignal<boolean | undefined>
Requirement
required
Name
injector
Kind
property
Type
any
Requirement
required
Name
lastSynced
Kind
property
Type
any
Requirement
required
Name
ngOnDestroy
Kind
method
Type
() => void
Requirement
required
Name
open
Kind
property
Type
import("@angular/core").InputSignal<boolean | undefined>
Requirement
required
Name
openChange
Kind
property
Type
import("@angular/core").OutputEmitterRef<PopoverOpenChangeDetail>
Requirement
required
Name
ɵdir
Kind
property
Type
i0.ɵɵDirectiveDeclaration<GrPopoverRoot, "[grPopoverRoot]", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; }, { "openChange": "openChange"; }, never, never, true, never>
Requirement
required
Name
ɵfac
Kind
property
Type
i0.ɵɵFactoryDeclaration<GrPopoverRoot, never>
Requirement
required
Name
releaseManagers
Kind
property
Type
any
Requirement
required
Name
side
Kind
property
Type
import("@angular/core").InputSignal<"bottom" | "top" | undefined>
Requirement
required
Name
store
Kind
property
Type
PopoverStore
Requirement
required
DeclarationView source
GrPopoverTriggerts
export declare class GrPopoverTrigger extends PopoverPartBase {
constructor();
static ɵfac: i0.ɵɵFactoryDeclaration<GrPopoverTrigger, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<GrPopoverTrigger, "[grPopoverTrigger]", never, {}, {}, never, never, true, never>;
}
Name
Kind
Type
Requirement
ɵdir
property
i0.ɵɵDirectiveDeclaration<GrPopoverTrigger, "[grPopoverTrigger]", never, {}, {}, never, never, true, never>
required
ɵfac
property
i0.ɵɵFactoryDeclaration<GrPopoverTrigger, never>
required
Name
ɵdir
Kind
property
Type
i0.ɵɵDirectiveDeclaration<GrPopoverTrigger, "[grPopoverTrigger]", never, {}, {}, never, never, true, never>
Requirement
required
Name
ɵfac
Kind
property
Type
i0.ɵɵFactoryDeclaration<GrPopoverTrigger, never>
Requirement
required
DeclarationView source
POPOVER_STOREts
export declare const POPOVER_STORE: InjectionToken<PopoverStore>;
DeclarationView source
PopoverOpenChangeDetailts
export interface PopoverOpenChangeDetail {
readonly open: boolean;
readonly reason: PopoverChangeReason;
}
Name
Kind
Type
Requirement
open
property
boolean
required
reason
property
PopoverChangeReason
required
Name
open
Kind
property
Type
boolean
Requirement
required
Name
reason
Kind
property
Type
PopoverChangeReason
Requirement
required

PopoverStore

interface
DeclarationView source
PopoverStorets
export interface PopoverStore {
readonly service: PopoverService;
readonly connector: PopoverApi;
readonly scope: PartScope;
readonly version: WritableSignal<number>;
start(): void;
stop(): void;
sync(input: PopoverInput): void;
bindOpenChange?(handler: (detail: import("./use-popover.js").PopoverOpenChangeDetail) => void): void;
}
Name
Kind
Type
Requirement
bindOpenChange
method
((handler: (detail: import("./use-popover.js").PopoverOpenChangeDetail) => void) => void) | undefined
optional
connector
property
PopoverApi
required
scope
property
PartScope
required
service
property
PopoverService
required
start
method
() => void
required
stop
method
() => void
required
sync
method
(input: PopoverInput) => void
required
version
property
WritableSignal<number>
required
Name
bindOpenChange
Kind
method
Type
((handler: (detail: import("./use-popover.js").PopoverOpenChangeDetail) => void) => void) | undefined
Requirement
optional
Name
connector
Kind
property
Type
PopoverApi
Requirement
required
Name
scope
Kind
property
Type
PartScope
Requirement
required
Name
service
Kind
property
Type
PopoverService
Requirement
required
Name
start
Kind
method
Type
() => void
Requirement
required
Name
stop
Kind
method
Type
() => void
Requirement
required
Name
sync
Kind
method
Type
(input: PopoverInput) => void
Requirement
required
Name
version
Kind
property
Type
WritableSignal<number>
Requirement
required
DeclarationView source
providePopoverStorets
export declare function providePopoverStore(): Provider;
Name
Kind
Type
Requirement
return
return value
Provider
n/a
Name
return
Kind
return value
Type
Provider
Requirement
n/a

@grassroot/ui-headless-svelte/popover

Svelte adapter

10 exports
View source packages/ui-headless/svelte/src/popover/index.ts

createPopover

function
DeclarationView source
createPopoverts
export declare function createPopover(inputGetter: () => PopoverInput, options?: UsePopoverOptions): UsePopoverResult;
Name
Kind
Type
Requirement
inputGetter
parameter
() => PopoverInput
required
options
parameter
UsePopoverOptions
optional
return
return value
UsePopoverResult
n/a
Name
inputGetter
Kind
parameter
Type
() => PopoverInput
Requirement
required
Name
options
Kind
parameter
Type
UsePopoverOptions
Requirement
optional
Name
return
Kind
return value
Type
UsePopoverResult
Requirement
n/a
DeclarationView source
PopoverContentts
export declare const PopoverContent: LegacyComponentType;
Name
Kind
Type
Requirement
args
parameter
Parameters<Component<Record<string, any>>>
optional
return
return value
ReturnType<Component<Record<string, any>, Record<string, any>>>
n/a
Name
args
Kind
parameter
Type
Parameters<Component<Record<string, any>>>
Requirement
optional
Name
return
Kind
return value
Type
ReturnType<Component<Record<string, any>, Record<string, any>>>
Requirement
n/a
DeclarationView source
PopoverContextValuets
export interface PopoverContextValue {
readonly service: PopoverService;
readonly connector: PopoverApi;
readonly scope: PartScope;
readonly version: () => number;
}
Name
Kind
Type
Requirement
connector
property
PopoverApi
required
scope
property
PartScope
required
service
property
PopoverService
required
version
property
() => number
required
Name
connector
Kind
property
Type
PopoverApi
Requirement
required
Name
scope
Kind
property
Type
PartScope
Requirement
required
Name
service
Kind
property
Type
PopoverService
Requirement
required
Name
version
Kind
property
Type
() => number
Requirement
required
DeclarationView source
PopoverOpenChangeDetailts
export interface PopoverOpenChangeDetail {
readonly open: boolean;
readonly reason: PopoverChangeReason;
}
Name
Kind
Type
Requirement
open
property
boolean
required
reason
property
PopoverChangeReason
required
Name
open
Kind
property
Type
boolean
Requirement
required
Name
reason
Kind
property
Type
PopoverChangeReason
Requirement
required

PopoverRoot

value
DeclarationView source
PopoverRootts
export declare const PopoverRoot: LegacyComponentType;
Name
Kind
Type
Requirement
args
parameter
Parameters<Component<Record<string, any>>>
optional
return
return value
ReturnType<Component<Record<string, any>, Record<string, any>>>
n/a
Name
args
Kind
parameter
Type
Parameters<Component<Record<string, any>>>
Requirement
optional
Name
return
Kind
return value
Type
ReturnType<Component<Record<string, any>, Record<string, any>>>
Requirement
n/a
DeclarationView source
PopoverTriggerts
export declare const PopoverTrigger: LegacyComponentType;
Name
Kind
Type
Requirement
args
parameter
Parameters<Component<Record<string, any>>>
optional
return
return value
ReturnType<Component<Record<string, any>, Record<string, any>>>
n/a
Name
args
Kind
parameter
Type
Parameters<Component<Record<string, any>>>
Requirement
optional
Name
return
Kind
return value
Type
ReturnType<Component<Record<string, any>, Record<string, any>>>
Requirement
n/a
DeclarationView source
providePopoverContextts
export declare function providePopoverContext(value: PopoverContextValue): void;
Name
Kind
Type
Requirement
value
parameter
PopoverContextValue
required
return
return value
void
n/a
Name
value
Kind
parameter
Type
PopoverContextValue
Requirement
required
Name
return
Kind
return value
Type
void
Requirement
n/a
DeclarationView source
usePopoverContextts
export declare function usePopoverContext(partName: string): PopoverContextValue;
Name
Kind
Type
Requirement
partName
parameter
string
required
return
return value
PopoverContextValue
n/a
Name
partName
Kind
parameter
Type
string
Requirement
required
Name
return
Kind
return value
Type
PopoverContextValue
Requirement
n/a

UsePopoverOptions

interface
DeclarationView source
UsePopoverOptionsts
export interface UsePopoverOptions {
readonly onOpenChange?: (detail: PopoverOpenChangeDetail) => void;
}
Name
Kind
Type
Requirement
onOpenChange
property
(detail: PopoverOpenChangeDetail) => void
optional
Name
onOpenChange
Kind
property
Type
(detail: PopoverOpenChangeDetail) => void
Requirement
optional

UsePopoverResult

interface
DeclarationView source
UsePopoverResultts
export interface UsePopoverResult {
readonly service: PopoverService;
readonly connector: PopoverApi;
readonly scope: PartScope;
readonly version: () => number;
}
Name
Kind
Type
Requirement
connector
property
PopoverApi
required
scope
property
PartScope
required
service
property
PopoverService
required
version
property
() => number
required
Name
connector
Kind
property
Type
PopoverApi
Requirement
required
Name
scope
Kind
property
Type
PartScope
Requirement
required
Name
service
Kind
property
Type
PopoverService
Requirement
required
Name
version
Kind
property
Type
() => number
Requirement
required

@grassroot/ui-headless-solid/popover

Solid adapter

13 exports
View source packages/ui-headless/solid/src/popover/index.ts

PopoverContent

function
DeclarationView source
PopoverContentts
export declare function PopoverContent(props: PopoverContentProps): JSX.Element;
Name
Kind
Type
Requirement
props
parameter
PopoverContentProps
required
return
return value
JSX.Element
n/a
Name
props
Kind
parameter
Type
PopoverContentProps
Requirement
required
Name
return
Kind
return value
Type
JSX.Element
Requirement
n/a
DeclarationView source
PopoverContentPropsts
export interface PopoverContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
readonly as?: AsProp;
}
Name
Kind
Type
Requirement
as
property
AsProp
optional
Name
as
Kind
property
Type
AsProp
Requirement
optional
DeclarationView source
PopoverContextts
export declare const PopoverContext: import("solid-js").Context<PopoverContextValue | undefined>;
DeclarationView source
PopoverContextValuets
export interface PopoverContextValue {
readonly service: PopoverService;
readonly connector: PopoverApi;
readonly scope: PartScope;
readonly snapshot: Accessor<PopoverSnapshot>;
}
Name
Kind
Type
Requirement
connector
property
PopoverApi
required
scope
property
PartScope
required
service
property
PopoverService
required
snapshot
property
Accessor<PopoverSnapshot>
required
Name
connector
Kind
property
Type
PopoverApi
Requirement
required
Name
scope
Kind
property
Type
PartScope
Requirement
required
Name
service
Kind
property
Type
PopoverService
Requirement
required
Name
snapshot
Kind
property
Type
Accessor<PopoverSnapshot>
Requirement
required
DeclarationView source
PopoverOpenChangeDetailts
export interface PopoverOpenChangeDetail {
readonly open: boolean;
readonly reason: import("@grassroot/ui-machines/popover").PopoverChangeReason;
}
Name
Kind
Type
Requirement
open
property
boolean
required
reason
property
import("@grassroot/ui-machines/popover").PopoverChangeReason
required
Name
open
Kind
property
Type
boolean
Requirement
required
Name
reason
Kind
property
Type
import("@grassroot/ui-machines/popover").PopoverChangeReason
Requirement
required

PopoverRoot

function
DeclarationView source
PopoverRootts
export declare function PopoverRoot(props: PopoverRootProps): JSX.Element;
Name
Kind
Type
Requirement
props
parameter
PopoverRootProps
required
return
return value
JSX.Element
n/a
Name
props
Kind
parameter
Type
PopoverRootProps
Requirement
required
Name
return
Kind
return value
Type
JSX.Element
Requirement
n/a

PopoverRootProps

interface
DeclarationView source
PopoverRootPropsts
export interface PopoverRootProps {
readonly open?: PopoverInput["open"];
readonly defaultOpen?: PopoverInput["defaultOpen"];
readonly side?: PopoverInput["side"];
readonly align?: PopoverInput["align"];
readonly onOpenChange?: (detail: PopoverOpenChangeDetail) => void;
readonly children?: JSX.Element;
}
Name
Kind
Type
Requirement
align
property
PopoverInput["align"]
optional
children
property
JSX.Element
optional
defaultOpen
property
PopoverInput["defaultOpen"]
optional
onOpenChange
property
(detail: PopoverOpenChangeDetail) => void
optional
open
property
PopoverInput["open"]
optional
side
property
PopoverInput["side"]
optional
Name
align
Kind
property
Type
PopoverInput["align"]
Requirement
optional
Name
children
Kind
property
Type
JSX.Element
Requirement
optional
Name
defaultOpen
Kind
property
Type
PopoverInput["defaultOpen"]
Requirement
optional
Name
onOpenChange
Kind
property
Type
(detail: PopoverOpenChangeDetail) => void
Requirement
optional
Name
open
Kind
property
Type
PopoverInput["open"]
Requirement
optional
Name
side
Kind
property
Type
PopoverInput["side"]
Requirement
optional

PopoverTrigger

function
DeclarationView source
PopoverTriggerts
export declare function PopoverTrigger(props: PopoverTriggerProps): JSX.Element;
Name
Kind
Type
Requirement
props
parameter
PopoverTriggerProps
required
return
return value
JSX.Element
n/a
Name
props
Kind
parameter
Type
PopoverTriggerProps
Requirement
required
Name
return
Kind
return value
Type
JSX.Element
Requirement
n/a
DeclarationView source
PopoverTriggerPropsts
export interface PopoverTriggerProps extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
readonly as?: AsProp;
}
Name
Kind
Type
Requirement
as
property
AsProp
optional
Name
as
Kind
property
Type
AsProp
Requirement
optional

usePopover

function
DeclarationView source
usePopoverts
export declare function usePopover(input: Accessor<PopoverInput>, options?: UsePopoverOptions): UsePopoverResult;
Name
Kind
Type
Requirement
input
parameter
Accessor<PopoverInput>
required
options
parameter
UsePopoverOptions
optional
return
return value
UsePopoverResult
n/a
Name
input
Kind
parameter
Type
Accessor<PopoverInput>
Requirement
required
Name
options
Kind
parameter
Type
UsePopoverOptions
Requirement
optional
Name
return
Kind
return value
Type
UsePopoverResult
Requirement
n/a
DeclarationView source
usePopoverContextts
export declare function usePopoverContext(partName: string): PopoverContextValue;
Name
Kind
Type
Requirement
partName
parameter
string
required
return
return value
PopoverContextValue
n/a
Name
partName
Kind
parameter
Type
string
Requirement
required
Name
return
Kind
return value
Type
PopoverContextValue
Requirement
n/a

UsePopoverOptions

interface
DeclarationView source
UsePopoverOptionsts
export interface UsePopoverOptions {
readonly onOpenChange?: (detail: PopoverOpenChangeDetail) => void;
}
Name
Kind
Type
Requirement
onOpenChange
property
(detail: PopoverOpenChangeDetail) => void
optional
Name
onOpenChange
Kind
property
Type
(detail: PopoverOpenChangeDetail) => void
Requirement
optional

UsePopoverResult

interface
DeclarationView source
UsePopoverResultts
export interface UsePopoverResult {
readonly service: PopoverService;
readonly connector: PopoverApi;
readonly scope: PartScope;
readonly snapshot: Accessor<PopoverSnapshot>;
}
Name
Kind
Type
Requirement
connector
property
PopoverApi
required
scope
property
PartScope
required
service
property
PopoverService
required
snapshot
property
Accessor<PopoverSnapshot>
required
Name
connector
Kind
property
Type
PopoverApi
Requirement
required
Name
scope
Kind
property
Type
PartScope
Requirement
required
Name
service
Kind
property
Type
PopoverService
Requirement
required
Name
snapshot
Kind
property
Type
Accessor<PopoverSnapshot>
Requirement
required