Docs API reference Headlesssidebar

sidebar 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.

Machine API

@grassroot/ui-headless-core/sidebar

Core connector and vanilla API

23 exports

View source packages/ui-headless/core/src/sidebar/index.ts

Install npm i @grassroot/ui-headless-core

connectSidebar

function

connectSidebarts

declare function connectSidebar(service: SidebarService, scope: PartScope, options?: SidebarConnectOptions): SidebarApi;

Name

Kind

Type

Requirement

service

parameter

SidebarService

required

scope

parameter

PartScope

required

options

parameter

SidebarConnectOptions

optional

return

return value

SidebarApi

n/a

Name: service
Kind: parameter
Type: SidebarService
Requirement: required

Name: scope
Kind: parameter
Type: PartScope
Requirement: required

Name: options
Kind: parameter
Type: SidebarConnectOptions
Requirement: optional

Name: return
Kind: return value
Type: SidebarApi
Requirement: n/a

mountSidebar

function

mountSidebarts

declare function mountSidebar(container: HTMLElement, options: MountSidebarOptions): SidebarMount;

Name

Kind

Type

Requirement

container

parameter

HTMLElement

required

options

parameter

MountSidebarOptions

required

return

return value

SidebarMount

n/a

Name: container
Kind: parameter
Type: HTMLElement
Requirement: required

Name: options
Kind: parameter
Type: MountSidebarOptions
Requirement: required

Name: return
Kind: return value
Type: SidebarMount
Requirement: n/a

MountSidebarOptions

interface

MountSidebarOptionsts

interface MountSidebarOptions extends SidebarInput {
  readonly collapsed?: boolean;
  readonly onOpenChange?: (detail: SidebarOpenChangeDetail) => void;
  readonly renderHeader?: (element: HTMLElement) => void;
  readonly renderItem?: (element: HTMLElement) => void;
  readonly renderFooter?: (element: HTMLElement) => void;
}

Name

Kind

Type

Requirement

collapsed

property

boolean

optional

onOpenChange

property

(detail: SidebarOpenChangeDetail) => void

optional

renderFooter

property

(element: HTMLElement) => void

optional

renderHeader

property

(element: HTMLElement) => void

optional

renderItem

property

(element: HTMLElement) => void

optional

Name: collapsed
Kind: property
Type: boolean
Requirement: optional

Name: onOpenChange
Kind: property
Type: (detail: SidebarOpenChangeDetail) => void
Requirement: optional

Name: renderFooter
Kind: property
Type: (element: HTMLElement) => void
Requirement: optional

Name: renderHeader
Kind: property
Type: (element: HTMLElement) => void
Requirement: optional

Name: renderItem
Kind: property
Type: (element: HTMLElement) => void
Requirement: optional

runSidebarCommand

function

runSidebarCommandts

declare function runSidebarCommand(command: SidebarCommand, _scope: PartScope, options?: {
  readonly onOpenChange?: (detail: SidebarOpenChangeDetail) => void;
}): void;

Name

Kind

Type

Requirement

command

parameter

SidebarCommand

required

_scope

parameter

PartScope

required

options

parameter

{
  readonly onOpenChange?: (detail: SidebarOpenChangeDetail) => void;
}

optional

return

return value

void

n/a

Name: command
Kind: parameter
Type: SidebarCommand
Requirement: required

Name: _scope
Kind: parameter
Type: PartScope
Requirement: required

Name: options
Kind: parameter
Type: { readonly onOpenChange?: (detail: SidebarOpenChangeDetail) => void; }
Requirement: optional

Name: return
Kind: return value
Type: void
Requirement: n/a

sidebarAnatomy

value

sidebarAnatomyts

export declare const sidebarAnatomy: {
  readonly scope: "sidebar";
  readonly parts: readonly ["root", "header", "content", "section", "item", "footer"];
};

Name

Kind

Type

Requirement

parts

property

readonly ["root", "header", "content", "section", "item", "footer"]

required

scope

property

"sidebar"

required

Name: parts
Kind: property
Type: readonly ["root", "header", "content", "section", "item", "footer"]
Requirement: required

Name: scope
Kind: property
Type: "sidebar"
Requirement: required

SidebarApi

interface

SidebarApits

interface SidebarApi {
  rootProps(): PartProps;
  headerProps(): PartProps;
  contentProps(): PartProps;
  sectionProps(): PartProps;
  itemProps(options?: SidebarItemPropsOptions): PartProps;
  footerProps(): PartProps;
  readonly open: boolean;
  readonly collapsed: boolean;
}

Name

Kind

Type

Requirement

collapsed

property

boolean

required

contentProps

method

() => PartProps

required

footerProps

method

() => PartProps

required

headerProps

method

() => PartProps

required

itemProps

method

(options?: SidebarItemPropsOptions) => PartProps

required

open

property

boolean

required

rootProps

method

() => PartProps

required

sectionProps

method

() => PartProps

required

Name: collapsed
Kind: property
Type: boolean
Requirement: required

Name: contentProps
Kind: method
Type: () => PartProps
Requirement: required

Name: footerProps
Kind: method
Type: () => PartProps
Requirement: required

Name: headerProps
Kind: method
Type: () => PartProps
Requirement: required

Name: itemProps
Kind: method
Type: (options?: SidebarItemPropsOptions) => PartProps
Requirement: required

Name: open
Kind: property
Type: boolean
Requirement: required

Name: rootProps
Kind: method
Type: () => PartProps
Requirement: required

Name: sectionProps
Kind: method
Type: () => PartProps
Requirement: required

SidebarCommand

type

SidebarCommandts

type SidebarCommand = CommandObject & {
  readonly type: "OPEN_CHANGE_REQUEST";
  readonly open: boolean;
  readonly reason: SidebarChangeReason;
};

Name

Kind

Type

Requirement

open

property

boolean

required

reason

property

SidebarChangeReason

required

type

property

string

required

Name: open
Kind: property
Type: boolean
Requirement: required

Name: reason
Kind: property
Type: SidebarChangeReason
Requirement: required

Name: type
Kind: property
Type: string
Requirement: required

SidebarConnectOptions

interface

SidebarConnectOptionsts

interface SidebarConnectOptions {
  readonly collapsed?: boolean | (() => boolean);
}

Name

Kind

Type

Requirement

collapsed

property

boolean | (() => boolean)

optional

Name: collapsed
Kind: property
Type: boolean | (() => boolean)
Requirement: optional

SidebarContext

type

SidebarContextts

type SidebarContext = {
  readonly mode: "controlled" | "uncontrolled";
};

Name

Kind

Type

Requirement

mode

property

"controlled" | "uncontrolled"

required

Name: mode
Kind: property
Type: "controlled" | "uncontrolled"
Requirement: required

SidebarEvent

type

SidebarEventts

type SidebarEvent = {
  readonly type: "OPEN";
  readonly reason: SidebarOpenReason;
} | {
  readonly type: "CLOSE";
  readonly reason: SidebarCloseReason;
} | {
  readonly type: "TOGGLE";
  readonly reason: SidebarChangeReason;
};

SidebarInput

type

SidebarInputts

type SidebarInput = {
  /** Controlled committed open state. Defining it fixes controlled mode. */
  readonly open?: boolean;
  /** Uncontrolled initial open state. */
  readonly defaultOpen?: boolean;
};

Name

Kind

Type

Requirement

Description

defaultOpen

property

boolean

optional

Uncontrolled initial open state.

open

property

boolean

optional

Controlled committed open state. Defining it fixes controlled mode.

Name: defaultOpen
Kind: property
Type: boolean
Requirement: optional
Description: Uncontrolled initial open state.

Name: open
Kind: property
Type: boolean
Requirement: optional
Description: Controlled committed open state. Defining it fixes controlled mode.

SidebarItemPropsOptions

interface

SidebarItemPropsOptionsts

interface SidebarItemPropsOptions {
  readonly active?: boolean;
  readonly key?: string;
}

Name

Kind

Type

Requirement

active

property

boolean

optional

key

property

string

optional

Name: active
Kind: property
Type: boolean
Requirement: optional

Name: key
Kind: property
Type: string
Requirement: optional

SidebarMount

interface

SidebarMountts

interface SidebarMount {
  readonly service: SidebarService;
  readonly connector: SidebarApi;
  readonly root: HTMLElement;
  destroy(): void;
}

Name

Kind

Type

Requirement

connector

property

SidebarApi

required

destroy

method

() => void

required

root

property

HTMLElement

required

service

property

SidebarService

required

Name: connector
Kind: property
Type: SidebarApi
Requirement: required

Name: destroy
Kind: method
Type: () => void
Requirement: required

Name: root
Kind: property
Type: HTMLElement
Requirement: required

Name: service
Kind: property
Type: SidebarService
Requirement: required

SidebarOpenChangeDetail

interface

SidebarOpenChangeDetailts

interface SidebarOpenChangeDetail {
  readonly open: boolean;
  readonly reason: SidebarChangeReason;
}

Name

Kind

Type

Requirement

open

property

boolean

required

reason

property

SidebarChangeReason

required

Name: open
Kind: property
Type: boolean
Requirement: required

Name: reason
Kind: property
Type: SidebarChangeReason
Requirement: required

sidebarSelectors

value

sidebarSelectorsts

export declare const sidebarSelectors: {
  open: (snapshot: SidebarSnapshot) => boolean;
};

Name

Kind

Type

Requirement

open

property

(snapshot: SidebarSnapshot) => boolean

required

Name: open
Kind: property
Type: (snapshot: SidebarSnapshot) => boolean
Requirement: required

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 imports

@grassroot/ui-headless-react/sidebarts

import { Content, Footer, Header, Item, Root, RootProvider, Section, Sidebar } from "@grassroot/ui-headless-react/sidebar";

Vue imports

@grassroot/ui-headless-vue/sidebarts

<script setup lang="ts">
import { SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarRoot, SidebarSection } from "@grassroot/ui-headless-vue/sidebar";
</script>

Angular imports

@grassroot/ui-headless-angular/sidebarts

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

Svelte imports

@grassroot/ui-headless-svelte/sidebarts

<script lang="ts">
  import { SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarRoot, SidebarSection } from "@grassroot/ui-headless-svelte/sidebar";
</script>

Solid imports

@grassroot/ui-headless-solid/sidebarts

import { SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarRoot, SidebarSection } from "@grassroot/ui-headless-solid/sidebar";

@grassroot/ui-headless-react/sidebar

React adapter

17 exports

View source packages/ui-headless/react/src/sidebar/index.ts

Install npm i @grassroot/ui-headless-react

Content

value

Contentts

export declare const Content: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
  readonly asChild?: boolean;
} & import("react").RefAttributes<HTMLElement>>;

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

Footer

value

Footerts

export declare const Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
  readonly asChild?: boolean;
} & import("react").RefAttributes<HTMLElement>>;

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

Header

value

Headerts

export declare const Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
  readonly asChild?: boolean;
} & import("react").RefAttributes<HTMLElement>>;

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

Item

value

Itemts

export declare const Item: import("react").ForwardRefExoticComponent<SidebarItemProps & import("react").RefAttributes<HTMLElement>>;

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

Root

value

Rootts

export declare const Root: import("react").ForwardRefExoticComponent<SidebarRootProps & import("react").RefAttributes<HTMLElement>>;

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

RootProvider

value

RootProviderts

export declare const RootProvider: import("react").ForwardRefExoticComponent<SidebarRootProviderProps & import("react").RefAttributes<HTMLElement>>;

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

Section

value

Sectionts

export declare const Section: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
  readonly asChild?: boolean;
} & import("react").RefAttributes<HTMLElement>>;

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

Sidebar

value

Sidebarts

export declare const Sidebar: {
  Root: import("react").ForwardRefExoticComponent<SidebarRootProps & import("react").RefAttributes<HTMLElement>>;
  RootProvider: import("react").ForwardRefExoticComponent<SidebarRootProviderProps & import("react").RefAttributes<HTMLElement>>;
  Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
    readonly asChild?: boolean;
  } & import("react").RefAttributes<HTMLElement>>;
  Content: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
    readonly asChild?: boolean;
  } & import("react").RefAttributes<HTMLElement>>;
  Section: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
    readonly asChild?: boolean;
  } & import("react").RefAttributes<HTMLElement>>;
  Item: import("react").ForwardRefExoticComponent<SidebarItemProps & import("react").RefAttributes<HTMLElement>>;
  Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
    readonly asChild?: boolean;
  } & import("react").RefAttributes<HTMLElement>>;
};

Name

Kind

Type

Requirement

Content

property

import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
    readonly asChild?: boolean;
  } & import("react").RefAttributes<HTMLElement>>

required

Header

property

import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
    readonly asChild?: boolean;
  } & import("react").RefAttributes<HTMLElement>>

required

Item

property

import("react").ForwardRefExoticComponent<SidebarItemProps & import("react").RefAttributes<HTMLElement>>

required

Root

property

import("react").ForwardRefExoticComponent<SidebarRootProps & import("react").RefAttributes<HTMLElement>>

required

RootProvider

property

import("react").ForwardRefExoticComponent<SidebarRootProviderProps & import("react").RefAttributes<HTMLElement>>

required

Section

property

import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
    readonly asChild?: boolean;
  } & import("react").RefAttributes<HTMLElement>>

required

Name: Content
Kind: property
Type: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { readonly asChild?: boolean; } & import("react").RefAttributes<HTMLElement>>
Requirement: required

Name: Footer
Kind: property
Type: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { readonly asChild?: boolean; } & import("react").RefAttributes<HTMLElement>>
Requirement: required

Name: Header
Kind: property
Type: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { readonly asChild?: boolean; } & import("react").RefAttributes<HTMLElement>>
Requirement: required

Name: Item
Kind: property
Type: import("react").ForwardRefExoticComponent<SidebarItemProps & import("react").RefAttributes<HTMLElement>>
Requirement: required

Name: Root
Kind: property
Type: import("react").ForwardRefExoticComponent<SidebarRootProps & import("react").RefAttributes<HTMLElement>>
Requirement: required

Name: RootProvider
Kind: property
Type: import("react").ForwardRefExoticComponent<SidebarRootProviderProps & import("react").RefAttributes<HTMLElement>>
Requirement: required

Name: Section
Kind: property
Type: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { readonly asChild?: boolean; } & import("react").RefAttributes<HTMLElement>>
Requirement: required

SidebarContext

value

SidebarContextts

export declare const SidebarContext: import("react").Context<SidebarContextValue | 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

SidebarContextValue

interface

SidebarContextValuets

interface SidebarContextValue {
  readonly service: SidebarService;
  readonly connector: SidebarApi;
  readonly scope: PartScope;
  readonly snapshot: SidebarSnapshot;
}

Name

Kind

Type

Requirement

connector

property

SidebarApi

required

scope

property

PartScope

required

service

property

SidebarService

required

snapshot

property

SidebarSnapshot

required

Name: connector
Kind: property
Type: SidebarApi
Requirement: required

Name: scope
Kind: property
Type: PartScope
Requirement: required

Name: service
Kind: property
Type: SidebarService
Requirement: required

Name: snapshot
Kind: property
Type: SidebarSnapshot
Requirement: required

SidebarItemProps

interface

SidebarItemPropsts

interface SidebarItemProps extends ComponentPropsWithoutRef<"button"> {
  readonly asChild?: boolean;
  readonly active?: boolean;
  readonly itemKey?: string;
  readonly href?: string;
}

Name

Kind

Type

Requirement

active

property

boolean

optional

asChild

property

boolean

optional

href

property

string

optional

itemKey

property

string

optional

Name: active
Kind: property
Type: boolean
Requirement: optional

Name: asChild
Kind: property
Type: boolean
Requirement: optional

Name: href
Kind: property
Type: string
Requirement: optional

Name: itemKey
Kind: property
Type: string
Requirement: optional

SidebarRootProps

interface

SidebarRootPropsts

interface SidebarRootProps extends Omit<ComponentPropsWithoutRef<"aside">, "open" | "defaultOpen" | "onChange"> {
  readonly asChild?: boolean;
  readonly open?: SidebarInput["open"];
  readonly defaultOpen?: SidebarInput["defaultOpen"];
  readonly collapsed?: boolean;
  readonly onOpenChange?: UseSidebarOptions["onOpenChange"];
  readonly children?: ReactNode;
}

Name

Kind

Type

Requirement

asChild

property

boolean

optional

children

property

ReactNode

optional

collapsed

property

boolean

optional

defaultOpen

property

SidebarInput["defaultOpen"]

optional

onOpenChange

property

UseSidebarOptions["onOpenChange"]

optional

open

property

SidebarInput["open"]

optional

Name: asChild
Kind: property
Type: boolean
Requirement: optional

Name: children
Kind: property
Type: ReactNode
Requirement: optional

Name: collapsed
Kind: property
Type: boolean
Requirement: optional

Name: defaultOpen
Kind: property
Type: SidebarInput["defaultOpen"]
Requirement: optional

Name: onOpenChange
Kind: property
Type: UseSidebarOptions["onOpenChange"]
Requirement: optional

Name: open
Kind: property
Type: SidebarInput["open"]
Requirement: optional

SidebarRootProviderProps

interface

SidebarRootProviderPropsts

interface SidebarRootProviderProps extends ComponentPropsWithoutRef<"aside"> {
  readonly value: UseSidebarResult;
  readonly asChild?: boolean;
}

Name

Kind

Type

Requirement

asChild

property

boolean

optional

value

property

UseSidebarResult

required

Name: asChild
Kind: property
Type: boolean
Requirement: optional

Name: value
Kind: property
Type: UseSidebarResult
Requirement: required

useSidebar

function

useSidebarts

declare function useSidebar(input: SidebarInput, options?: UseSidebarOptions): UseSidebarResult;

Name

Kind

Type

Requirement

input

parameter

SidebarInput

required

options

parameter

UseSidebarOptions

optional

return

return value

UseSidebarResult

n/a

Name: input
Kind: parameter
Type: SidebarInput
Requirement: required

Name: options
Kind: parameter
Type: UseSidebarOptions
Requirement: optional

Name: return
Kind: return value
Type: UseSidebarResult
Requirement: n/a

useSidebarContext

function

useSidebarContextts

declare function useSidebarContext(partName: string): SidebarContextValue;

Name

Kind

Type

Requirement

partName

parameter

string

required

return

return value

SidebarContextValue

n/a

Name: partName
Kind: parameter
Type: string
Requirement: required

Name: return
Kind: return value
Type: SidebarContextValue
Requirement: n/a

UseSidebarOptions

interface

UseSidebarOptionsts

interface UseSidebarOptions {
  readonly collapsed?: boolean;
  readonly onOpenChange?: (detail: SidebarOpenChangeDetail) => void;
}

Name

Kind

Type

Requirement

collapsed

property

boolean

optional

onOpenChange

property

(detail: SidebarOpenChangeDetail) => void

optional

Name: collapsed
Kind: property
Type: boolean
Requirement: optional

Name: onOpenChange
Kind: property
Type: (detail: SidebarOpenChangeDetail) => void
Requirement: optional

UseSidebarResult

interface

UseSidebarResultts

interface UseSidebarResult {
  readonly service: SidebarService;
  readonly connector: SidebarApi;
  readonly scope: PartScope;
  readonly snapshot: SidebarSnapshot;
}

Name

Kind

Type

Requirement

connector

property

SidebarApi

required

scope

property

PartScope

required

service

property

SidebarService

required

snapshot

property

SidebarSnapshot

required

Name: connector
Kind: property
Type: SidebarApi
Requirement: required

Name: scope
Kind: property
Type: PartScope
Requirement: required

Name: service
Kind: property
Type: SidebarService
Requirement: required

Name: snapshot
Kind: property
Type: SidebarSnapshot
Requirement: required

@grassroot/ui-headless-vue/sidebar

Vue adapter

12 exports

View source packages/ui-headless/vue/src/sidebar/index.ts

Install npm i @grassroot/ui-headless-vue

SidebarContent

value

SidebarContentts

export declare const SidebarContent: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
  asChild: BooleanConstructor;
}>, () => 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: BooleanConstructor;
}>> & Readonly<{}>, {
  asChild: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

SidebarContextKey

value

SidebarContextKeyts

export declare const SidebarContextKey: InjectionKey<SidebarContextValue>;

SidebarContextValue

interface

SidebarContextValuets

interface SidebarContextValue {
  readonly service: SidebarService;
  readonly connector: SidebarApi;
  readonly scope: PartScope;
  readonly snapshot: ShallowRef<SidebarSnapshot>;
}

Name

Kind

Type

Requirement

connector

property

SidebarApi

required

scope

property

PartScope

required

service

property

SidebarService

required

snapshot

property

ShallowRef<SidebarSnapshot>

required

Name: connector
Kind: property
Type: SidebarApi
Requirement: required

Name: scope
Kind: property
Type: PartScope
Requirement: required

Name: service
Kind: property
Type: SidebarService
Requirement: required

Name: snapshot
Kind: property
Type: ShallowRef<SidebarSnapshot>
Requirement: required

SidebarFooter

value

SidebarFooterts

export declare const SidebarFooter: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
  asChild: BooleanConstructor;
}>, () => 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: BooleanConstructor;
}>> & Readonly<{}>, {
  asChild: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

SidebarHeader

value

SidebarHeaderts

export declare const SidebarHeader: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
  asChild: BooleanConstructor;
}>, () => 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: BooleanConstructor;
}>> & Readonly<{}>, {
  asChild: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

SidebarItem

value

SidebarItemts

export declare const SidebarItem: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
  asChild: BooleanConstructor;
  active: BooleanConstructor;
  itemKey: StringConstructor;
  href: StringConstructor;
}>, () => 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: BooleanConstructor;
  active: BooleanConstructor;
  itemKey: StringConstructor;
  href: StringConstructor;
}>> & Readonly<{}>, {
  asChild: boolean;
  active: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

SidebarRoot

value

SidebarRootts

export declare const SidebarRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
  asChild: BooleanConstructor;
  open: {
    type: PropType<SidebarInput["open"]>;
    default: undefined;
  };
  defaultOpen: {
    type: PropType<SidebarInput["defaultOpen"]>;
    default: undefined;
  };
  collapsed: BooleanConstructor;
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
  [key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
  openChange: (_detail: unknown) => true;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
  asChild: BooleanConstructor;
  open: {
    type: PropType<SidebarInput["open"]>;
    default: undefined;
  };
  defaultOpen: {
    type: PropType<SidebarInput["defaultOpen"]>;
    default: undefined;
  };
  collapsed: BooleanConstructor;
}>> & Readonly<{
  onOpenChange?: ((_detail: unknown) => any) | undefined;
}>, {
  asChild: boolean;
  open: boolean | undefined;
  defaultOpen: boolean | undefined;
  collapsed: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

SidebarSection

value

SidebarSectionts

export declare const SidebarSection: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
  asChild: BooleanConstructor;
}>, () => 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: BooleanConstructor;
}>> & Readonly<{}>, {
  asChild: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

useSidebar

function

useSidebarts

declare function useSidebar(input: SidebarInput | (() => SidebarInput), options?: UseSidebarOptions): UseSidebarResult;

Name

Kind

Type

Requirement

input

parameter

SidebarInput | (() => SidebarInput)

required

options

parameter

UseSidebarOptions

optional

return

return value

UseSidebarResult

n/a

Name: input
Kind: parameter
Type: SidebarInput | (() => SidebarInput)
Requirement: required

Name: options
Kind: parameter
Type: UseSidebarOptions
Requirement: optional

Name: return
Kind: return value
Type: UseSidebarResult
Requirement: n/a

useSidebarContext

function

useSidebarContextts

declare function useSidebarContext(partName: string): SidebarContextValue;

Name

Kind

Type

Requirement

partName

parameter

string

required

return

return value

SidebarContextValue

n/a

Name: partName
Kind: parameter
Type: string
Requirement: required

Name: return
Kind: return value
Type: SidebarContextValue
Requirement: n/a

UseSidebarOptions

interface

UseSidebarOptionsts

interface UseSidebarOptions {
  readonly collapsed?: boolean;
  readonly onOpenChange?: (detail: SidebarOpenChangeDetail) => void;
}

Name

Kind

Type

Requirement

collapsed

property

boolean

optional

onOpenChange

property

(detail: SidebarOpenChangeDetail) => void

optional

Name: collapsed
Kind: property
Type: boolean
Requirement: optional

Name: onOpenChange
Kind: property
Type: (detail: SidebarOpenChangeDetail) => void
Requirement: optional

UseSidebarResult

interface

UseSidebarResultts

interface UseSidebarResult {
  readonly service: SidebarService;
  readonly connector: SidebarApi;
  readonly scope: PartScope;
  readonly snapshot: ShallowRef<SidebarSnapshot>;
}

Name

Kind

Type

Requirement

connector

property

SidebarApi

required

scope

property

PartScope

required

service

property

SidebarService

required

snapshot

property

ShallowRef<SidebarSnapshot>

required

Name: connector
Kind: property
Type: SidebarApi
Requirement: required

Name: scope
Kind: property
Type: PartScope
Requirement: required

Name: service
Kind: property
Type: SidebarService
Requirement: required

Name: snapshot
Kind: property
Type: ShallowRef<SidebarSnapshot>
Requirement: required

@grassroot/ui-headless-angular/sidebar

Angular adapter

12 exports

View source packages/ui-headless/angular/src/sidebar/index.ts

Install npm i @grassroot/ui-headless-angular

createSidebarStore

function

createSidebarStorets

export declare function createSidebarStore(input: SidebarInput, options?: CreateSidebarStoreOptions): SidebarStore;

Name

Kind

Type

Requirement

input

parameter

SidebarInput

required

options

parameter

CreateSidebarStoreOptions

optional

return

return value

SidebarStore

n/a

Name: input
Kind: parameter
Type: SidebarInput
Requirement: required

Name: options
Kind: parameter
Type: CreateSidebarStoreOptions
Requirement: optional

Name: return
Kind: return value
Type: SidebarStore
Requirement: n/a

CreateSidebarStoreOptions

interface

CreateSidebarStoreOptionsts

export interface CreateSidebarStoreOptions {
    readonly collapsed?: () => boolean;
    readonly onOpenChange?: (detail: SidebarOpenChangeDetail) => void;
    readonly onCommit?: () => void;
}

Name

Kind

Type

Requirement

collapsed

property

() => boolean

optional

onCommit

property

() => void

optional

onOpenChange

property

(detail: SidebarOpenChangeDetail) => void

optional

Name: collapsed
Kind: property
Type: () => boolean
Requirement: optional

Name: onCommit
Kind: property
Type: () => void
Requirement: optional

Name: onOpenChange
Kind: property
Type: (detail: SidebarOpenChangeDetail) => void
Requirement: optional

GR_SIDEBAR_DECLARATIONS

value

GR_SIDEBAR_DECLARATIONSts

export declare const GR_SIDEBAR_DECLARATIONS: readonly [typeof GrSidebarRoot, typeof GrSidebarHeader, typeof GrSidebarContent, typeof GrSidebarSection, typeof GrSidebarItem, typeof GrSidebarFooter, typeof GrSidebarToggle];

GrSidebarContent

class

GrSidebarContentts

export declare class GrSidebarContent implements OnDestroy {
    private readonly store;
    private readonly element;
    private readonly listeners;
    private readonly consumer;
    constructor();
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<GrSidebarContent, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<GrSidebarContent, "[grSidebarContent]", never, {}, {}, never, never, true, never>;
}

Name

Kind

Type

Requirement

consumer

property

any

required

element

property

any

required

listeners

property

any

required

ngOnDestroy

method

() => void

required

ɵdir

property

i0.ɵɵDirectiveDeclaration<GrSidebarContent, "[grSidebarContent]", never, {}, {}, never, never, true, never>

required

ɵfac

property

i0.ɵɵFactoryDeclaration<GrSidebarContent, never>

required

store

property

any

required

Name: consumer
Kind: property
Type: any
Requirement: required

Name: element
Kind: property
Type: any
Requirement: required

Name: listeners
Kind: property
Type: any
Requirement: required

Name: ngOnDestroy
Kind: method
Type: () => void
Requirement: required

Name: ɵdir
Kind: property
Type: i0.ɵɵDirectiveDeclaration<GrSidebarContent, "[grSidebarContent]", never, {}, {}, never, never, true, never>
Requirement: required

Name: ɵfac
Kind: property
Type: i0.ɵɵFactoryDeclaration<GrSidebarContent, never>
Requirement: required

Name: store
Kind: property
Type: any
Requirement: required

GrSidebarFooter

class

GrSidebarFooterts

export declare class GrSidebarFooter implements OnDestroy {
    private readonly store;
    private readonly element;
    private readonly listeners;
    private readonly consumer;
    constructor();
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<GrSidebarFooter, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<GrSidebarFooter, "[grSidebarFooter]", never, {}, {}, never, never, true, never>;
}

Name

Kind

Type

Requirement

consumer

property

any

required

element

property

any

required

listeners

property

any

required

ngOnDestroy

method

() => void

required

ɵdir

property

i0.ɵɵDirectiveDeclaration<GrSidebarFooter, "[grSidebarFooter]", never, {}, {}, never, never, true, never>

required

ɵfac

property

i0.ɵɵFactoryDeclaration<GrSidebarFooter, never>

required

store

property

any

required

Name: consumer
Kind: property
Type: any
Requirement: required

Name: element
Kind: property
Type: any
Requirement: required

Name: listeners
Kind: property
Type: any
Requirement: required

Name: ngOnDestroy
Kind: method
Type: () => void
Requirement: required

Name: ɵdir
Kind: property
Type: i0.ɵɵDirectiveDeclaration<GrSidebarFooter, "[grSidebarFooter]", never, {}, {}, never, never, true, never>
Requirement: required

Name: ɵfac
Kind: property
Type: i0.ɵɵFactoryDeclaration<GrSidebarFooter, never>
Requirement: required

Name: store
Kind: property
Type: any
Requirement: required

GrSidebarHeader

class

GrSidebarHeaderts

export declare class GrSidebarHeader implements OnDestroy {
    private readonly store;
    private readonly element;
    private readonly listeners;
    private readonly consumer;
    constructor();
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<GrSidebarHeader, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<GrSidebarHeader, "[grSidebarHeader]", never, {}, {}, never, never, true, never>;
}

Name

Kind

Type

Requirement

consumer

property

any

required

element

property

any

required

listeners

property

any

required

ngOnDestroy

method

() => void

required

ɵdir

property

i0.ɵɵDirectiveDeclaration<GrSidebarHeader, "[grSidebarHeader]", never, {}, {}, never, never, true, never>

required

ɵfac

property

i0.ɵɵFactoryDeclaration<GrSidebarHeader, never>

required

store

property

any

required

Name: consumer
Kind: property
Type: any
Requirement: required

Name: element
Kind: property
Type: any
Requirement: required

Name: listeners
Kind: property
Type: any
Requirement: required

Name: ngOnDestroy
Kind: method
Type: () => void
Requirement: required

Name: ɵdir
Kind: property
Type: i0.ɵɵDirectiveDeclaration<GrSidebarHeader, "[grSidebarHeader]", never, {}, {}, never, never, true, never>
Requirement: required

Name: ɵfac
Kind: property
Type: i0.ɵɵFactoryDeclaration<GrSidebarHeader, never>
Requirement: required

Name: store
Kind: property
Type: any
Requirement: required

GrSidebarItem

class

GrSidebarItemts

export declare class GrSidebarItem implements OnDestroy {
    readonly active: import("@angular/core").InputSignal<boolean>;
    readonly itemKey: import("@angular/core").InputSignal<string | undefined>;
    private readonly store;
    private readonly element;
    private readonly listeners;
    private readonly consumer;
    constructor();
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<GrSidebarItem, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<GrSidebarItem, "[grSidebarItem]", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "itemKey": { "alias": "itemKey"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

Name

Kind

Type

Requirement

active

property

import("@angular/core").InputSignal<boolean>

required

consumer

property

any

required

element

property

any

required

itemKey

property

import("@angular/core").InputSignal<string | undefined>

required

listeners

property

any

required

ngOnDestroy

method

() => void

required

ɵdir

property

i0.ɵɵDirectiveDeclaration<GrSidebarItem, "[grSidebarItem]", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "itemKey": { "alias": "itemKey"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>

required

ɵfac

property

i0.ɵɵFactoryDeclaration<GrSidebarItem, never>

required

store

property

any

required

Name: active
Kind: property
Type: import("@angular/core").InputSignal<boolean>
Requirement: required

Name: consumer
Kind: property
Type: any
Requirement: required

Name: element
Kind: property
Type: any
Requirement: required

Name: itemKey
Kind: property
Type: import("@angular/core").InputSignal<string | undefined>
Requirement: required

Name: listeners
Kind: property
Type: any
Requirement: required

Name: ngOnDestroy
Kind: method
Type: () => void
Requirement: required

Name: ɵdir
Kind: property
Type: i0.ɵɵDirectiveDeclaration<GrSidebarItem, "[grSidebarItem]", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "itemKey": { "alias": "itemKey"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>
Requirement: required

Name: ɵfac
Kind: property
Type: i0.ɵɵFactoryDeclaration<GrSidebarItem, never>
Requirement: required

Name: store
Kind: property
Type: any
Requirement: required

GrSidebarRoot

class

GrSidebarRootts

export declare class GrSidebarRoot {
    readonly open: import("@angular/core").InputSignal<boolean | undefined>;
    readonly defaultOpen: import("@angular/core").InputSignal<boolean | undefined>;
    readonly collapsed: import("@angular/core").InputSignal<boolean>;
    readonly openChange: import("@angular/core").OutputEmitterRef<{
        open: boolean;
        reason: string;
    }>;
    readonly store: import("./context.js").SidebarStore;
    private readonly element;
    private readonly injector;
    private readonly listeners;
    private previous;
    constructor();
    static ɵfac: i0.ɵɵFactoryDeclaration<GrSidebarRoot, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<GrSidebarRoot, "[grSidebarRoot]", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "openChange": "openChange"; }, never, never, true, never>;
}

Name

Kind

Type

Requirement

collapsed

property

import("@angular/core").InputSignal<boolean>

required

defaultOpen

property

import("@angular/core").InputSignal<boolean | undefined>

required

element

property

any

required

injector

property

any

required

listeners

property

any

required

open

property

import("@angular/core").InputSignal<boolean | undefined>

required

openChange

property

import("@angular/core").OutputEmitterRef<{
        open: boolean;
        reason: string;
    }>

required

ɵdir

property

i0.ɵɵDirectiveDeclaration<GrSidebarRoot, "[grSidebarRoot]", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "openChange": "openChange"; }, never, never, true, never>

required

ɵfac

property

i0.ɵɵFactoryDeclaration<GrSidebarRoot, never>

required

previous

property

any

required

store

property

import("./context.js").SidebarStore

required

Name: collapsed
Kind: property
Type: import("@angular/core").InputSignal<boolean>
Requirement: required

Name: defaultOpen
Kind: property
Type: import("@angular/core").InputSignal<boolean | undefined>
Requirement: required

Name: element
Kind: property
Type: any
Requirement: required

Name: injector
Kind: property
Type: any
Requirement: required

Name: listeners
Kind: property
Type: any
Requirement: required

Name: open
Kind: property
Type: import("@angular/core").InputSignal<boolean | undefined>
Requirement: required

Name: openChange
Kind: property
Type: import("@angular/core").OutputEmitterRef<{ open: boolean; reason: string; }>
Requirement: required

Name: ɵdir
Kind: property
Type: i0.ɵɵDirectiveDeclaration<GrSidebarRoot, "[grSidebarRoot]", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "openChange": "openChange"; }, never, never, true, never>
Requirement: required

Name: ɵfac
Kind: property
Type: i0.ɵɵFactoryDeclaration<GrSidebarRoot, never>
Requirement: required

Name: previous
Kind: property
Type: any
Requirement: required

Name: store
Kind: property
Type: import("./context.js").SidebarStore
Requirement: required

GrSidebarSection

class

GrSidebarSectionts

export declare class GrSidebarSection implements OnDestroy {
    private readonly store;
    private readonly element;
    private readonly listeners;
    private readonly consumer;
    constructor();
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<GrSidebarSection, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<GrSidebarSection, "[grSidebarSection]", never, {}, {}, never, never, true, never>;
}

Name

Kind

Type

Requirement

consumer

property

any

required

element

property

any

required

listeners

property

any

required

ngOnDestroy

method

() => void

required

ɵdir

property

i0.ɵɵDirectiveDeclaration<GrSidebarSection, "[grSidebarSection]", never, {}, {}, never, never, true, never>

required

ɵfac

property

i0.ɵɵFactoryDeclaration<GrSidebarSection, never>

required

store

property

any

required

Name: consumer
Kind: property
Type: any
Requirement: required

Name: element
Kind: property
Type: any
Requirement: required

Name: listeners
Kind: property
Type: any
Requirement: required

Name: ngOnDestroy
Kind: method
Type: () => void
Requirement: required

Name: ɵdir
Kind: property
Type: i0.ɵɵDirectiveDeclaration<GrSidebarSection, "[grSidebarSection]", never, {}, {}, never, never, true, never>
Requirement: required

Name: ɵfac
Kind: property
Type: i0.ɵɵFactoryDeclaration<GrSidebarSection, never>
Requirement: required

Name: store
Kind: property
Type: any
Requirement: required

GrSidebarToggle

class

GrSidebarTogglets

export declare class GrSidebarToggle {
    private readonly store;
    toggle(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<GrSidebarToggle, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<GrSidebarToggle, "[grSidebarToggle]", never, {}, {}, never, never, true, never>;
}

Name

Kind

Type

Requirement

ɵdir

property

i0.ɵɵDirectiveDeclaration<GrSidebarToggle, "[grSidebarToggle]", never, {}, {}, never, never, true, never>

required

ɵfac

property

i0.ɵɵFactoryDeclaration<GrSidebarToggle, never>

required

store

property

any

required

toggle

method

() => void

required

Name: ɵdir
Kind: property
Type: i0.ɵɵDirectiveDeclaration<GrSidebarToggle, "[grSidebarToggle]", never, {}, {}, never, never, true, never>
Requirement: required

Name: ɵfac
Kind: property
Type: i0.ɵɵFactoryDeclaration<GrSidebarToggle, never>
Requirement: required

Name: store
Kind: property
Type: any
Requirement: required

Name: toggle
Kind: method
Type: () => void
Requirement: required

SidebarStore

interface

SidebarStorets

export interface SidebarStore {
    readonly service: SidebarService;
    readonly connector: SidebarApi;
    readonly scope: PartScope;
    readonly version: WritableSignal<number>;
    start(): void;
    stop(): void;
    sync(input: {
        open?: boolean;
        defaultOpen?: boolean;
    }): void;
}

Name

Kind

Type

Requirement

connector

property

SidebarApi

required

scope

property

PartScope

required

service

property

SidebarService

required

start

method

() => void

required

stop

method

() => void

required

sync

method

(input: { open?: boolean; defaultOpen?: boolean; }) => void

required

version

property

WritableSignal<number>

required

Name: connector
Kind: property
Type: SidebarApi
Requirement: required

Name: scope
Kind: property
Type: PartScope
Requirement: required

Name: service
Kind: property
Type: SidebarService
Requirement: required

Name: start
Kind: method
Type: () => void
Requirement: required

Name: stop
Kind: method
Type: () => void
Requirement: required

Name: sync
Kind: method
Type: (input: { open?: boolean; defaultOpen?: boolean; }) => void
Requirement: required

Name: version
Kind: property
Type: WritableSignal<number>
Requirement: required

@grassroot/ui-headless-svelte/sidebar

Svelte adapter

11 exports

View source packages/ui-headless/svelte/src/sidebar/index.ts

Install npm i @grassroot/ui-headless-svelte

createSidebar

function

createSidebarts

export declare function createSidebar(inputGetter: () => SidebarInput, options?: UseSidebarOptions): UseSidebarResult;

Name

Kind

Type

Requirement

inputGetter

parameter

() => SidebarInput

required

options

parameter

UseSidebarOptions

optional

return

return value

UseSidebarResult

n/a

Name: inputGetter
Kind: parameter
Type: () => SidebarInput
Requirement: required

Name: options
Kind: parameter
Type: UseSidebarOptions
Requirement: optional

Name: return
Kind: return value
Type: UseSidebarResult
Requirement: n/a

SidebarContent

value

SidebarContentts

export declare const SidebarContent: 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

SidebarContextValue

interface

SidebarContextValuets

export interface SidebarContextValue {
    readonly service: SidebarService;
    readonly connector: SidebarApi;
    readonly scope: PartScope;
    readonly version: () => number;
}

Name

Kind

Type

Requirement

connector

property

SidebarApi

required

scope

property

PartScope

required

service

property

SidebarService

required

version

property

() => number

required

Name: connector
Kind: property
Type: SidebarApi
Requirement: required

Name: scope
Kind: property
Type: PartScope
Requirement: required

Name: service
Kind: property
Type: SidebarService
Requirement: required

Name: version
Kind: property
Type: () => number
Requirement: required

SidebarFooter

value

SidebarFooterts

export declare const SidebarFooter: 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

SidebarHeader

value

SidebarHeaderts

export declare const SidebarHeader: 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

SidebarItem

value

SidebarItemts

export declare const SidebarItem: 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

SidebarRoot

value

SidebarRootts

export declare const SidebarRoot: 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

SidebarSection

value

SidebarSectionts

export declare const SidebarSection: 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

useSidebarContext

function

useSidebarContextts

export declare function useSidebarContext(partName: string): SidebarContextValue;

Name

Kind

Type

Requirement

partName

parameter

string

required

return

return value

SidebarContextValue

n/a

Name: partName
Kind: parameter
Type: string
Requirement: required

Name: return
Kind: return value
Type: SidebarContextValue
Requirement: n/a

UseSidebarOptions

interface

UseSidebarOptionsts

export interface UseSidebarOptions {
    readonly collapsed?: () => boolean;
    readonly onOpenChange?: (detail: SidebarOpenChangeDetail) => void;
}

Name

Kind

Type

Requirement

collapsed

property

() => boolean

optional

onOpenChange

property

(detail: SidebarOpenChangeDetail) => void

optional

Name: collapsed
Kind: property
Type: () => boolean
Requirement: optional

Name: onOpenChange
Kind: property
Type: (detail: SidebarOpenChangeDetail) => void
Requirement: optional

UseSidebarResult

interface

UseSidebarResultts

export interface UseSidebarResult {
    readonly service: SidebarService;
    readonly connector: SidebarApi;
    readonly scope: PartScope;
    readonly version: () => number;
}

Name

Kind

Type

Requirement

connector

property

SidebarApi

required

scope

property

PartScope

required

service

property

SidebarService

required

version

property

() => number

required

Name: connector
Kind: property
Type: SidebarApi
Requirement: required

Name: scope
Kind: property
Type: PartScope
Requirement: required

Name: service
Kind: property
Type: SidebarService
Requirement: required

Name: version
Kind: property
Type: () => number
Requirement: required

@grassroot/ui-headless-solid/sidebar

Solid adapter

14 exports

View source packages/ui-headless/solid/src/sidebar/index.ts

Install npm i @grassroot/ui-headless-solid

SidebarContent

function

SidebarContentts

export declare function SidebarContent(props: JSX.HTMLAttributes<HTMLElement>): JSX.Element;

Name

Kind

Type

Requirement

props

parameter

JSX.HTMLAttributes<HTMLElement>

required

return

return value

JSX.Element

n/a

Name: props
Kind: parameter
Type: JSX.HTMLAttributes<HTMLElement>
Requirement: required

Name: return
Kind: return value
Type: JSX.Element
Requirement: n/a

SidebarContext

value

SidebarContextts

export declare const SidebarContext: import("solid-js").Context<SidebarContextValue | undefined>;

SidebarContextValue

interface

SidebarContextValuets

export interface SidebarContextValue {
    readonly service: SidebarService;
    readonly connector: SidebarApi;
    readonly scope: PartScope;
    readonly snapshot: Accessor<SidebarSnapshot>;
}

Name

Kind

Type

Requirement

connector

property

SidebarApi

required

scope

property

PartScope

required

service

property

SidebarService

required

snapshot

property

Accessor<SidebarSnapshot>

required

Name: connector
Kind: property
Type: SidebarApi
Requirement: required

Name: scope
Kind: property
Type: PartScope
Requirement: required

Name: service
Kind: property
Type: SidebarService
Requirement: required

Name: snapshot
Kind: property
Type: Accessor<SidebarSnapshot>
Requirement: required

SidebarFooter

function

SidebarFooterts

export declare function SidebarFooter(props: JSX.HTMLAttributes<HTMLDivElement>): JSX.Element;

Name

Kind

Type

Requirement

props

parameter

JSX.HTMLAttributes<HTMLDivElement>

required

return

return value

JSX.Element

n/a

Name: props
Kind: parameter
Type: JSX.HTMLAttributes<HTMLDivElement>
Requirement: required

Name: return
Kind: return value
Type: JSX.Element
Requirement: n/a

SidebarHeader

function

SidebarHeaderts

export declare function SidebarHeader(props: JSX.HTMLAttributes<HTMLDivElement>): JSX.Element;

Name

Kind

Type

Requirement

props

parameter

JSX.HTMLAttributes<HTMLDivElement>

required

return

return value

JSX.Element

n/a

Name: props
Kind: parameter
Type: JSX.HTMLAttributes<HTMLDivElement>
Requirement: required

Name: return
Kind: return value
Type: JSX.Element
Requirement: n/a

SidebarItem

function

SidebarItemts

export declare function SidebarItem(props: SidebarItemProps): JSX.Element;

Name

Kind

Type

Requirement

props

parameter

SidebarItemProps

required

return

return value

JSX.Element

n/a

Name: props
Kind: parameter
Type: SidebarItemProps
Requirement: required

Name: return
Kind: return value
Type: JSX.Element
Requirement: n/a

SidebarItemProps

interface

SidebarItemPropsts

export interface SidebarItemProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
    readonly active?: boolean;
    readonly itemKey?: string;
    readonly href?: string;
}

Name

Kind

Type

Requirement

active

property

boolean

optional

href

property

string

optional

itemKey

property

string

optional

Name: active
Kind: property
Type: boolean
Requirement: optional

Name: href
Kind: property
Type: string
Requirement: optional

Name: itemKey
Kind: property
Type: string
Requirement: optional

SidebarRoot

function

SidebarRootts

export declare function SidebarRoot(props: SidebarRootProps): JSX.Element;

Name

Kind

Type

Requirement

props

parameter

SidebarRootProps

required

return

return value

JSX.Element

n/a

Name: props
Kind: parameter
Type: SidebarRootProps
Requirement: required

Name: return
Kind: return value
Type: JSX.Element
Requirement: n/a

SidebarRootProps

interface

SidebarRootPropsts

export interface SidebarRootProps extends JSX.HTMLAttributes<HTMLElement> {
    readonly open?: SidebarInput["open"];
    readonly defaultOpen?: SidebarInput["defaultOpen"];
    readonly collapsed?: boolean;
    readonly onOpenChange?: UseSidebarOptions["onOpenChange"];
}

Name

Kind

Type

Requirement

collapsed

property

boolean

optional

defaultOpen

property

SidebarInput["defaultOpen"]

optional

onOpenChange

property

UseSidebarOptions["onOpenChange"]

optional

open

property

SidebarInput["open"]

optional

Name: collapsed
Kind: property
Type: boolean
Requirement: optional

Name: defaultOpen
Kind: property
Type: SidebarInput["defaultOpen"]
Requirement: optional

Name: onOpenChange
Kind: property
Type: UseSidebarOptions["onOpenChange"]
Requirement: optional

Name: open
Kind: property
Type: SidebarInput["open"]
Requirement: optional

SidebarSection

function

SidebarSectionts

export declare function SidebarSection(props: JSX.HTMLAttributes<HTMLDivElement>): JSX.Element;

Name

Kind

Type

Requirement

props

parameter

JSX.HTMLAttributes<HTMLDivElement>

required

return

return value

JSX.Element

n/a

Name: props
Kind: parameter
Type: JSX.HTMLAttributes<HTMLDivElement>
Requirement: required

Name: return
Kind: return value
Type: JSX.Element
Requirement: n/a

useSidebar

function

useSidebarts

export declare function useSidebar(input: Accessor<SidebarInput>, options?: UseSidebarOptions): UseSidebarResult;

Name

Kind

Type

Requirement

input

parameter

Accessor<SidebarInput>

required

options

parameter

UseSidebarOptions

optional

return

return value

UseSidebarResult

n/a

Name: input
Kind: parameter
Type: Accessor<SidebarInput>
Requirement: required

Name: options
Kind: parameter
Type: UseSidebarOptions
Requirement: optional

Name: return
Kind: return value
Type: UseSidebarResult
Requirement: n/a

useSidebarContext

function

useSidebarContextts

export declare function useSidebarContext(partName: string): SidebarContextValue;

Name

Kind

Type

Requirement

partName

parameter

string

required

return

return value

SidebarContextValue

n/a

Name: partName
Kind: parameter
Type: string
Requirement: required

Name: return
Kind: return value
Type: SidebarContextValue
Requirement: n/a

UseSidebarOptions

interface

UseSidebarOptionsts

export interface UseSidebarOptions {
    readonly collapsed?: Accessor<boolean>;
    readonly onOpenChange?: (detail: SidebarOpenChangeDetail) => void;
}

Name

Kind

Type

Requirement

collapsed

property

Accessor<boolean>

optional

onOpenChange

property

(detail: SidebarOpenChangeDetail) => void

optional

Name: collapsed
Kind: property
Type: Accessor<boolean>
Requirement: optional

Name: onOpenChange
Kind: property
Type: (detail: SidebarOpenChangeDetail) => void
Requirement: optional

UseSidebarResult

interface

UseSidebarResultts

export interface UseSidebarResult {
    readonly service: SidebarService;
    readonly connector: SidebarApi;
    readonly scope: PartScope;
    readonly snapshot: Accessor<SidebarSnapshot>;
}

Name

Kind

Type

Requirement

connector

property

SidebarApi

required

scope

property

PartScope

required

service

property

SidebarService

required

snapshot

property

Accessor<SidebarSnapshot>

required

Name: connector
Kind: property
Type: SidebarApi
Requirement: required

Name: scope
Kind: property
Type: PartScope
Requirement: required

Name: service
Kind: property
Type: SidebarService
Requirement: required

Name: snapshot
Kind: property
Type: Accessor<SidebarSnapshot>
Requirement: required

Framework adapters

React imports

Vue imports

Angular imports

Svelte imports

Solid imports

Related references