grassroot
Install

DocsAPI referenceHeadlessresizable

resizable 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/resizable

Core connector and vanilla API

11 exports
View source packages/ui-headless/core/src/resizable/index.ts

connectResizable

function
DeclarationView source
connectResizablets
declare function connectResizable(service: ResizableService, scope: PartScope, options?: ResizableConnectOptions): ResizableApi;
Name
Kind
Type
Requirement
service
parameter
ResizableService
required
scope
parameter
PartScope
required
options
parameter
ResizableConnectOptions
optional
return
return value
ResizableApi
n/a
Name
service
Kind
parameter
Type
ResizableService
Requirement
required
Name
scope
Kind
parameter
Type
PartScope
Requirement
required
Name
options
Kind
parameter
Type
ResizableConnectOptions
Requirement
optional
Name
return
Kind
return value
Type
ResizableApi
Requirement
n/a

mountResizable

function
DeclarationView source
mountResizablets
declare function mountResizable(container: HTMLElement, options?: MountResizableOptions): ResizableMount;
Name
Kind
Type
Requirement
container
parameter
HTMLElement
required
options
parameter
MountResizableOptions
optional
return
return value
ResizableMount
n/a
Name
container
Kind
parameter
Type
HTMLElement
Requirement
required
Name
options
Kind
parameter
Type
MountResizableOptions
Requirement
optional
Name
return
Kind
return value
Type
ResizableMount
Requirement
n/a

MountResizableOptions

interface
DeclarationView source
MountResizableOptionsts
interface MountResizableOptions extends ResizableInput {
  readonly onResize?: (size: number) => void;
}
Name
Kind
Type
Requirement
onResize
property
(size: number) => void
optional
Name
onResize
Kind
property
Type
(size: number) => void
Requirement
optional

resizableAnatomy

value
DeclarationView source
resizableAnatomyts
export declare const resizableAnatomy: {
  readonly scope: "resizable";
  readonly parts: readonly ["root", "first-pane", "handle", "grip", "second-pane", "panel"];
};
Name
Kind
Type
Requirement
parts
property
readonly ["root", "first-pane", "handle", "grip", "second-pane", "panel"]
required
scope
property
"resizable"
required
Name
parts
Kind
property
Type
readonly ["root", "first-pane", "handle", "grip", "second-pane", "panel"]
Requirement
required
Name
scope
Kind
property
Type
"resizable"
Requirement
required

ResizableApi

interface
DeclarationView source
ResizableApits
interface ResizableApi {
  rootProps(): PartProps;
  firstPaneProps(): PartProps;
  handleProps(): PartProps;
  gripProps(): PartProps;
  secondPaneProps(): PartProps;
  panelProps(label?: string): PartProps;
  readonly size: number;
  destroy(): void;
}
Name
Kind
Type
Requirement
destroy
method
() => void
required
firstPaneProps
method
() => PartProps
required
gripProps
method
() => PartProps
required
handleProps
method
() => PartProps
required
panelProps
method
(label?: string) => PartProps
required
rootProps
method
() => PartProps
required
secondPaneProps
method
() => PartProps
required
size
property
number
required
Name
destroy
Kind
method
Type
() => void
Requirement
required
Name
firstPaneProps
Kind
method
Type
() => PartProps
Requirement
required
Name
gripProps
Kind
method
Type
() => PartProps
Requirement
required
Name
handleProps
Kind
method
Type
() => PartProps
Requirement
required
Name
panelProps
Kind
method
Type
(label?: string) => PartProps
Requirement
required
Name
rootProps
Kind
method
Type
() => PartProps
Requirement
required
Name
secondPaneProps
Kind
method
Type
() => PartProps
Requirement
required
Name
size
Kind
property
Type
number
Requirement
required

ResizableChangeDetail

interface
DeclarationView source
ResizableChangeDetailts
interface ResizableChangeDetail {
  readonly size: number;
}
Name
Kind
Type
Requirement
size
property
number
required
Name
size
Kind
property
Type
number
Requirement
required

ResizableConnectOptions

interface
DeclarationView source
ResizableConnectOptionsts
interface ResizableConnectOptions {
  readonly onResize?: (size: number) => void;
}
Name
Kind
Type
Requirement
onResize
property
(size: number) => void
optional
Name
onResize
Kind
property
Type
(size: number) => void
Requirement
optional

ResizableMount

interface
DeclarationView source
ResizableMountts
interface ResizableMount {
  readonly service: ResizableService;
  readonly connector: ResizableApi;
  readonly root: HTMLDivElement;
  destroy(): void;
}
Name
Kind
Type
Requirement
connector
property
ResizableApi
required
destroy
method
() => void
required
root
property
HTMLDivElement
required
service
property
ResizableService
required
Name
connector
Kind
property
Type
ResizableApi
Requirement
required
Name
destroy
Kind
method
Type
() => void
Requirement
required
Name
root
Kind
property
Type
HTMLDivElement
Requirement
required
Name
service
Kind
property
Type
ResizableService
Requirement
required

ResizablePart

type
DeclarationView source
ResizablePartts
type ResizablePart = (typeof resizableAnatomy.parts)[number];

ResizableService

type
DeclarationView source
ResizableServicets
type ResizableService = Service<ResizableInput, "ready", ResizableContext, ResizableEvent, ResizableCommand>;

runResizableCommand

function
DeclarationView source
runResizableCommandts
declare function runResizableCommand(command: ResizableCommand, options?: ResizableConnectOptions): void;
Name
Kind
Type
Requirement
command
parameter
ResizableCommand
required
options
parameter
ResizableConnectOptions
optional
return
return value
void
n/a
Name
command
Kind
parameter
Type
ResizableCommand
Requirement
required
Name
options
Kind
parameter
Type
ResizableConnectOptions
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/resizablets
import { Handle, Panel, Root, RootProvider } from "@grassroot/ui-headless-react/resizable";

Vue imports

@grassroot/ui-headless-vue/resizablets
<script setup lang="ts">
import { Handle, Panel, Root, RootProvider } from "@grassroot/ui-headless-vue/resizable";
</script>

Angular imports

@grassroot/ui-headless-angular/resizablets
import { GrResizablePanel, GrResizableRoot, GrResizableRootProvider } from "@grassroot/ui-headless-angular/resizable";

Svelte imports

@grassroot/ui-headless-svelte/resizablets
<script lang="ts">
  import { Panel, Root, RootProvider } from "@grassroot/ui-headless-svelte/resizable";
</script>

Solid imports

@grassroot/ui-headless-solid/resizablets
import { Handle, Panel, Root, RootProvider } from "@grassroot/ui-headless-solid/resizable";

@grassroot/ui-headless-react/resizable

React adapter

10 exports
View source packages/ui-headless/react/src/resizable/index.ts

Handle

value
DeclarationView source
Handlets
export declare const Handle: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & 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

Panel

value
DeclarationView source
Panelts
export declare const Panel: import("react").ForwardRefExoticComponent<ResizablePanelProps & 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

ResizablePanelProps

interface
DeclarationView source
ResizablePanelPropsts
interface ResizablePanelProps extends HTMLAttributes<HTMLDivElement> {
  readonly label?: string;
  readonly children?: ReactNode;
}
Name
Kind
Type
Requirement
children
property
ReactNode
optional
label
property
string
optional
Name
children
Kind
property
Type
ReactNode
Requirement
optional
Name
label
Kind
property
Type
string
Requirement
optional

ResizableRootProps

interface
DeclarationView source
ResizableRootPropsts
interface ResizableRootProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultSize" | "onResize">, ResizableInput {
  readonly id?: string;
  readonly onResize?: (size: number) => void;
  readonly children?: [ReactNode, ReactNode];
}
Name
Kind
Type
Requirement
children
property
[ReactNode, ReactNode]
optional
id
property
string
optional
onResize
property
(size: number) => void
optional
Name
children
Kind
property
Type
[ReactNode, ReactNode]
Requirement
optional
Name
id
Kind
property
Type
string
Requirement
optional
Name
onResize
Kind
property
Type
(size: number) => void
Requirement
optional

ResizableRootProviderProps

interface
DeclarationView source
ResizableRootProviderPropsts
interface ResizableRootProviderProps extends HTMLAttributes<HTMLDivElement> {
  readonly value: UseResizableResult;
  readonly children?: [ReactNode, ReactNode];
}
Name
Kind
Type
Requirement
children
property
[ReactNode, ReactNode]
optional
value
property
UseResizableResult
required
Name
children
Kind
property
Type
[ReactNode, ReactNode]
Requirement
optional
Name
value
Kind
property
Type
UseResizableResult
Requirement
required

Root

value
DeclarationView source
Rootts
export declare const Root: import("react").ForwardRefExoticComponent<ResizableRootProps & 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

RootProvider

value
DeclarationView source
RootProviderts
export declare const RootProvider: import("react").ForwardRefExoticComponent<ResizableRootProviderProps & 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

useResizable

function
DeclarationView source
useResizablets
declare function useResizable(input: ResizableInput, options?: UseResizableOptions): UseResizableResult;
Name
Kind
Type
Requirement
input
parameter
ResizableInput
required
options
parameter
UseResizableOptions
optional
return
return value
UseResizableResult
n/a
Name
input
Kind
parameter
Type
ResizableInput
Requirement
required
Name
options
Kind
parameter
Type
UseResizableOptions
Requirement
optional
Name
return
Kind
return value
Type
UseResizableResult
Requirement
n/a

UseResizableOptions

interface
DeclarationView source
UseResizableOptionsts
interface UseResizableOptions {
  readonly id?: string;
  readonly onResize?: (size: number) => void;
}
Name
Kind
Type
Requirement
id
property
string
optional
onResize
property
(size: number) => void
optional
Name
id
Kind
property
Type
string
Requirement
optional
Name
onResize
Kind
property
Type
(size: number) => void
Requirement
optional

UseResizableResult

interface
DeclarationView source
UseResizableResultts
interface UseResizableResult {
  readonly service: ResizableService;
  readonly connector: ResizableApi;
  readonly snapshot: ResizableSnapshot;
}
Name
Kind
Type
Requirement
connector
property
ResizableApi
required
service
property
ResizableService
required
snapshot
property
ResizableSnapshot
required
Name
connector
Kind
property
Type
ResizableApi
Requirement
required
Name
service
Kind
property
Type
ResizableService
Requirement
required
Name
snapshot
Kind
property
Type
ResizableSnapshot
Requirement
required

@grassroot/ui-headless-vue/resizable

Vue adapter

6 exports
View source packages/ui-headless/vue/src/resizable/index.ts

Handle

value
DeclarationView source
Handlets
export declare const Handle: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
  [key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

Panel

value
DeclarationView source
Panelts
export declare const Panel: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
  label: 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<{
  label: StringConstructor;
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

Root

value
DeclarationView source
Rootts
export declare const Root: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
  direction: PropType<ResizableInput["direction"]>;
  value: PropType<number | undefined>;
  defaultSize: NumberConstructor;
  minSize: NumberConstructor;
  step: NumberConstructor;
  id: StringConstructor;
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
  [key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
  resize: (_size: number) => true;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
  direction: PropType<ResizableInput["direction"]>;
  value: PropType<number | undefined>;
  defaultSize: NumberConstructor;
  minSize: NumberConstructor;
  step: NumberConstructor;
  id: StringConstructor;
}>> & Readonly<{
  onResize?: ((_size: number) => any) | undefined;
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

RootProvider

value
DeclarationView source
RootProviderts
export declare const RootProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
  value: {
    type: PropType<ReturnType<typeof useResizable>>;
    required: true;
  };
}>, () => 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<{
  value: {
    type: PropType<ReturnType<typeof useResizable>>;
    required: true;
  };
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

useResizable

function
DeclarationView source
useResizablets
declare function useResizable(input: () => ResizableInput, options?: () => ResizableOptions): UseResizableResult;
Name
Kind
Type
Requirement
input
parameter
() => ResizableInput
required
options
parameter
() => ResizableOptions
optional
return
return value
UseResizableResult
n/a
Name
input
Kind
parameter
Type
() => ResizableInput
Requirement
required
Name
options
Kind
parameter
Type
() => ResizableOptions
Requirement
optional
Name
return
Kind
return value
Type
UseResizableResult
Requirement
n/a

UseResizableResult

interface
DeclarationView source
UseResizableResultts
interface UseResizableResult {
  readonly service: ResizableService;
  readonly connector: ResizableApi;
  readonly snapshot: ShallowRef<ResizableSnapshot>;
}
Name
Kind
Type
Requirement
connector
property
ResizableApi
required
service
property
ResizableService
required
snapshot
property
ShallowRef<ResizableSnapshot>
required
Name
connector
Kind
property
Type
ResizableApi
Requirement
required
Name
service
Kind
property
Type
ResizableService
Requirement
required
Name
snapshot
Kind
property
Type
ShallowRef<ResizableSnapshot>
Requirement
required

@grassroot/ui-headless-angular/resizable

Angular adapter

5 exports
View source packages/ui-headless/angular/src/resizable/index.ts

createResizableStore

function
DeclarationView source
createResizableStorets
export declare function createResizableStore(initial: ResizableInput, options?: {
    onResize?: (size: number) => void;
}): ResizableStore;
Name
Kind
Type
Requirement
initial
parameter
ResizableInput
required
options
parameter
{ onResize?: (size: number) => void; }
optional
return
return value
ResizableStore
n/a
Name
initial
Kind
parameter
Type
ResizableInput
Requirement
required
Name
options
Kind
parameter
Type
{ onResize?: (size: number) => void; }
Requirement
optional
Name
return
Kind
return value
Type
ResizableStore
Requirement
n/a

GrResizablePanel

class
DeclarationView source
GrResizablePanelts
export declare class GrResizablePanel {
    readonly label: import("@angular/core").InputSignal<string | undefined>;
    private readonly store;
    private readonly host;
    constructor();
    static ɵfac: i0.ɵɵFactoryDeclaration<GrResizablePanel, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<GrResizablePanel, "gr-resizable-panel", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
}
Name
Kind
Type
Requirement
host
property
any
required
label
property
import("@angular/core").InputSignal<string | undefined>
required
ɵcmp
property
i0.ɵɵComponentDeclaration<GrResizablePanel, "gr-resizable-panel", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>
required
ɵfac
property
i0.ɵɵFactoryDeclaration<GrResizablePanel, never>
required
store
property
any
required
Name
host
Kind
property
Type
any
Requirement
required
Name
label
Kind
property
Type
import("@angular/core").InputSignal<string | undefined>
Requirement
required
Name
ɵcmp
Kind
property
Type
i0.ɵɵComponentDeclaration<GrResizablePanel, "gr-resizable-panel", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>
Requirement
required
Name
ɵfac
Kind
property
Type
i0.ɵɵFactoryDeclaration<GrResizablePanel, never>
Requirement
required
Name
store
Kind
property
Type
any
Requirement
required

GrResizableRoot

class
DeclarationView source
GrResizableRootts
export declare class GrResizableRoot implements OnDestroy {
    readonly direction: import("@angular/core").InputSignal<"vertical" | "horizontal" | undefined>;
    readonly value: import("@angular/core").InputSignal<number | undefined>;
    readonly defaultSize: import("@angular/core").InputSignal<number | undefined>;
    readonly minSize: import("@angular/core").InputSignal<number | undefined>;
    readonly step: import("@angular/core").InputSignal<number | undefined>;
    readonly resize: import("@angular/core").OutputEmitterRef<ResizableChangeDetail>;
    readonly store: ResizableStore;
    private readonly host;
    private readonly parts;
    private last;
    constructor();
    private apply;
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<GrResizableRoot, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<GrResizableRoot, "gr-resizable-root", never, { "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultSize": { "alias": "defaultSize"; "required": false; "isSignal": true; }; "minSize": { "alias": "minSize"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; }, { "resize": "resize"; }, never, ["[first]", "[second]"], true, never>;
}
Name
Kind
Type
Requirement
apply
property
any
required
defaultSize
property
import("@angular/core").InputSignal<number | undefined>
required
direction
property
import("@angular/core").InputSignal<"vertical" | "horizontal" | undefined>
required
host
property
any
required
last
property
any
required
minSize
property
import("@angular/core").InputSignal<number | undefined>
required
ngOnDestroy
method
() => void
required
ɵcmp
property
i0.ɵɵComponentDeclaration<GrResizableRoot, "gr-resizable-root", never, { "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultSize": { "alias": "defaultSize"; "required": false; "isSignal": true; }; "minSize": { "alias": "minSize"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; }, { "resize": "resize"; }, never, ["[first]", "[second]"], true, never>
required
ɵfac
property
i0.ɵɵFactoryDeclaration<GrResizableRoot, never>
required
parts
property
any
required
resize
property
import("@angular/core").OutputEmitterRef<ResizableChangeDetail>
required
step
property
import("@angular/core").InputSignal<number | undefined>
required
store
property
ResizableStore
required
value
property
import("@angular/core").InputSignal<number | undefined>
required
Name
apply
Kind
property
Type
any
Requirement
required
Name
defaultSize
Kind
property
Type
import("@angular/core").InputSignal<number | undefined>
Requirement
required
Name
direction
Kind
property
Type
import("@angular/core").InputSignal<"vertical" | "horizontal" | undefined>
Requirement
required
Name
host
Kind
property
Type
any
Requirement
required
Name
last
Kind
property
Type
any
Requirement
required
Name
minSize
Kind
property
Type
import("@angular/core").InputSignal<number | undefined>
Requirement
required
Name
ngOnDestroy
Kind
method
Type
() => void
Requirement
required
Name
ɵcmp
Kind
property
Type
i0.ɵɵComponentDeclaration<GrResizableRoot, "gr-resizable-root", never, { "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultSize": { "alias": "defaultSize"; "required": false; "isSignal": true; }; "minSize": { "alias": "minSize"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; }, { "resize": "resize"; }, never, ["[first]", "[second]"], true, never>
Requirement
required
Name
ɵfac
Kind
property
Type
i0.ɵɵFactoryDeclaration<GrResizableRoot, never>
Requirement
required
Name
parts
Kind
property
Type
any
Requirement
required
Name
resize
Kind
property
Type
import("@angular/core").OutputEmitterRef<ResizableChangeDetail>
Requirement
required
Name
step
Kind
property
Type
import("@angular/core").InputSignal<number | undefined>
Requirement
required
Name
store
Kind
property
Type
ResizableStore
Requirement
required
Name
value
Kind
property
Type
import("@angular/core").InputSignal<number | undefined>
Requirement
required

GrResizableRootProvider

class
DeclarationView source
GrResizableRootProviderts
export declare class GrResizableRootProvider implements OnDestroy {
    private readonly store;
    private readonly host;
    private readonly parts;
    constructor();
    private apply;
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<GrResizableRootProvider, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<GrResizableRootProvider, "gr-resizable-root-provider", never, {}, {}, never, ["[first]", "[second]"], true, never>;
}
Name
Kind
Type
Requirement
apply
property
any
required
host
property
any
required
ngOnDestroy
method
() => void
required
ɵcmp
property
i0.ɵɵComponentDeclaration<GrResizableRootProvider, "gr-resizable-root-provider", never, {}, {}, never, ["[first]", "[second]"], true, never>
required
ɵfac
property
i0.ɵɵFactoryDeclaration<GrResizableRootProvider, never>
required
parts
property
any
required
store
property
any
required
Name
apply
Kind
property
Type
any
Requirement
required
Name
host
Kind
property
Type
any
Requirement
required
Name
ngOnDestroy
Kind
method
Type
() => void
Requirement
required
Name
ɵcmp
Kind
property
Type
i0.ɵɵComponentDeclaration<GrResizableRootProvider, "gr-resizable-root-provider", never, {}, {}, never, ["[first]", "[second]"], true, never>
Requirement
required
Name
ɵfac
Kind
property
Type
i0.ɵɵFactoryDeclaration<GrResizableRootProvider, never>
Requirement
required
Name
parts
Kind
property
Type
any
Requirement
required
Name
store
Kind
property
Type
any
Requirement
required

ResizableStore

interface
DeclarationView source
ResizableStorets
export interface ResizableStore {
    readonly service: ResizableService;
    readonly connector: ResizableApi;
    readonly scope: PartScope;
    readonly version: WritableSignal<number>;
    start(): void;
    stop(): void;
    sync(input: Record<string, unknown>): void;
}
Name
Kind
Type
Requirement
connector
property
ResizableApi
required
scope
property
PartScope
required
service
property
ResizableService
required
start
method
() => void
required
stop
method
() => void
required
sync
method
(input: Record<string, unknown>) => void
required
version
property
WritableSignal<number>
required
Name
connector
Kind
property
Type
ResizableApi
Requirement
required
Name
scope
Kind
property
Type
PartScope
Requirement
required
Name
service
Kind
property
Type
ResizableService
Requirement
required
Name
start
Kind
method
Type
() => void
Requirement
required
Name
stop
Kind
method
Type
() => void
Requirement
required
Name
sync
Kind
method
Type
(input: Record<string, unknown>) => void
Requirement
required
Name
version
Kind
property
Type
WritableSignal<number>
Requirement
required

@grassroot/ui-headless-svelte/resizable

Svelte adapter

6 exports
View source packages/ui-headless/svelte/src/resizable/index.ts

createResizable

function
DeclarationView source
createResizablets
export declare function createResizable(input: () => ResizableInput, options?: UseResizableOptions): UseResizableResult;
Name
Kind
Type
Requirement
input
parameter
() => ResizableInput
required
options
parameter
UseResizableOptions
optional
return
return value
UseResizableResult
n/a
Name
input
Kind
parameter
Type
() => ResizableInput
Requirement
required
Name
options
Kind
parameter
Type
UseResizableOptions
Requirement
optional
Name
return
Kind
return value
Type
UseResizableResult
Requirement
n/a

Panel

value
DeclarationView source
Panelts
export declare const Panel: 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

Root

value
DeclarationView source
Rootts
export declare const Root: 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

RootProvider

value
DeclarationView source
RootProviderts
export declare const RootProvider: 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

UseResizableOptions

interface
DeclarationView source
UseResizableOptionsts
export interface UseResizableOptions {
    readonly id?: string;
    readonly onResize?: (size: number) => void;
}
Name
Kind
Type
Requirement
id
property
string
optional
onResize
property
(size: number) => void
optional
Name
id
Kind
property
Type
string
Requirement
optional
Name
onResize
Kind
property
Type
(size: number) => void
Requirement
optional

UseResizableResult

interface
DeclarationView source
UseResizableResultts
export interface UseResizableResult {
    readonly service: ResizableService;
    readonly connector: ResizableApi;
    readonly scope: ReturnType<typeof import("@grassroot/ui-headless-core").createPartScope>;
    readonly version: () => number;
}
Name
Kind
Type
Requirement
connector
property
ResizableApi
required
scope
property
ReturnType<typeof import("@grassroot/ui-headless-core").createPartScope>
required
service
property
ResizableService
required
version
property
() => number
required
Name
connector
Kind
property
Type
ResizableApi
Requirement
required
Name
scope
Kind
property
Type
ReturnType<typeof import("@grassroot/ui-headless-core").createPartScope>
Requirement
required
Name
service
Kind
property
Type
ResizableService
Requirement
required
Name
version
Kind
property
Type
() => number
Requirement
required

@grassroot/ui-headless-solid/resizable

Solid adapter

8 exports
View source packages/ui-headless/solid/src/resizable/index.ts

Handle

function
DeclarationView source
Handlets
export declare function Handle(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

Panel

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

ResizablePanelProps

interface
DeclarationView source
ResizablePanelPropsts
export interface ResizablePanelProps extends JSX.HTMLAttributes<HTMLDivElement> {
    readonly label?: string;
}
Name
Kind
Type
Requirement
label
property
string
optional
Name
label
Kind
property
Type
string
Requirement
optional

ResizableRootProps

interface
DeclarationView source
ResizableRootPropsts
export interface ResizableRootProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onResize">, ResizableInput {
    readonly id?: string;
    readonly onResize?: (size: number) => void;
    readonly children?: [JSX.Element, JSX.Element];
}
Name
Kind
Type
Requirement
children
property
[JSX.Element, JSX.Element]
optional
id
property
string
optional
onResize
property
(size: number) => void
optional
Name
children
Kind
property
Type
[JSX.Element, JSX.Element]
Requirement
optional
Name
id
Kind
property
Type
string
Requirement
optional
Name
onResize
Kind
property
Type
(size: number) => void
Requirement
optional

Root

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

RootProvider

function
DeclarationView source
RootProviderts
export declare function RootProvider(props: {
    readonly value: UseResizableResult;
    readonly children?: [JSX.Element, JSX.Element];
} & JSX.HTMLAttributes<HTMLDivElement>): JSX.Element;
Name
Kind
Type
Requirement
props
parameter
{ readonly value: UseResizableResult; readonly children?: [JSX.Element, JSX.Element]; } & JSX.HTMLAttributes<HTMLDivElement>
required
return
return value
JSX.Element
n/a
Name
props
Kind
parameter
Type
{ readonly value: UseResizableResult; readonly children?: [JSX.Element, JSX.Element]; } & JSX.HTMLAttributes<HTMLDivElement>
Requirement
required
Name
return
Kind
return value
Type
JSX.Element
Requirement
n/a

useResizable

function
DeclarationView source
useResizablets
export declare function useResizable(input: () => ResizableInput, options?: UseResizableOptions): UseResizableResult;
Name
Kind
Type
Requirement
input
parameter
() => ResizableInput
required
options
parameter
UseResizableOptions
optional
return
return value
UseResizableResult
n/a
Name
input
Kind
parameter
Type
() => ResizableInput
Requirement
required
Name
options
Kind
parameter
Type
UseResizableOptions
Requirement
optional
Name
return
Kind
return value
Type
UseResizableResult
Requirement
n/a

UseResizableResult

interface
DeclarationView source
UseResizableResultts
export interface UseResizableResult {
    readonly service: ResizableService;
    readonly connector: ResizableApi;
    readonly snapshot: Accessor<number>;
}
Name
Kind
Type
Requirement
connector
property
ResizableApi
required
service
property
ResizableService
required
snapshot
property
Accessor<number>
required
Name
connector
Kind
property
Type
ResizableApi
Requirement
required
Name
service
Kind
property
Type
ResizableService
Requirement
required
Name
snapshot
Kind
property
Type
Accessor<number>
Requirement
required