@zag-js/splitter 0.82.2 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.mts +40 -26
  2. package/dist/index.d.ts +40 -26
  3. package/dist/index.js +385 -330
  4. package/dist/index.mjs +387 -332
  5. package/package.json +14 -9
package/dist/index.d.mts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as _zag_js_anatomy from '@zag-js/anatomy';
2
- import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, Required, NormalizeProps } from '@zag-js/types';
2
+ import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, Required, NormalizeProps } from '@zag-js/types';
3
3
  import * as _zag_js_core from '@zag-js/core';
4
- import { Machine, StateMachine } from '@zag-js/core';
4
+ import { Service, Machine, EventObject } from '@zag-js/core';
5
5
 
6
6
  declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "panel" | "resizeTrigger">;
7
7
 
@@ -22,15 +22,21 @@ type ElementIds = Partial<{
22
22
  label(id: string): string;
23
23
  panel(id: string | number): string;
24
24
  }>;
25
- interface PublicContext extends DirectionProperty, CommonProperties {
25
+ interface SplitterProps extends DirectionProperty, CommonProperties {
26
26
  /**
27
27
  * The orientation of the splitter. Can be `horizontal` or `vertical`
28
+ * @default "horizontal"
28
29
  */
29
- orientation: "horizontal" | "vertical";
30
+ orientation?: "horizontal" | "vertical" | undefined;
30
31
  /**
31
- * The size data of the panels
32
+ * The controlled size data of the panels
32
33
  */
33
- size: PanelSizeData[];
34
+ size?: PanelSizeData[] | undefined;
35
+ /**
36
+ * The initial size of the panels when rendered.
37
+ * Use when you don't need to control the size of the panels.
38
+ */
39
+ defaultSize?: PanelSizeData[] | undefined;
34
40
  /**
35
41
  * Function called when the splitter is resized.
36
42
  */
@@ -44,7 +50,7 @@ interface PublicContext extends DirectionProperty, CommonProperties {
44
50
  */
45
51
  ids?: ElementIds | undefined;
46
52
  }
47
- type UserDefinedContext = RequiredBy<PublicContext, "id">;
53
+ type PropWithDefault = "orientation";
48
54
  type NormalizedPanelData = Array<Required<PanelSizeData> & {
49
55
  remainingSize: number;
50
56
  minSize: number;
@@ -64,24 +70,32 @@ type ComputedContext = Readonly<{
64
70
  after: PanelSizeData;
65
71
  } | undefined;
66
72
  }>;
73
+ interface ResizeState {
74
+ isAtMin: boolean;
75
+ isAtMax: boolean;
76
+ }
67
77
  interface PrivateContext {
68
78
  activeResizeId: string | null;
69
- previousPanels: NormalizedPanelData;
70
- activeResizeState: {
71
- isAtMin: boolean;
72
- isAtMax: boolean;
73
- };
74
- initialSize: Array<Required<Pick<PanelSizeData, "id" | "size">>>;
79
+ activeResizeState: ResizeState;
80
+ size: PanelSizeData[];
75
81
  }
76
- interface MachineContext extends PublicContext, ComputedContext, PrivateContext {
82
+ interface Refs {
83
+ previousPanels: NormalizedPanelData;
77
84
  }
78
- interface MachineState {
79
- value: "idle" | "hover:temp" | "hover" | "dragging" | "focused";
80
- tags: "focus";
85
+ interface SplitterSchema {
86
+ state: "idle" | "hover:temp" | "hover" | "dragging" | "focused";
87
+ tag: "focus";
88
+ props: RequiredBy<SplitterProps, PropWithDefault>;
89
+ context: PrivateContext;
90
+ refs: Refs;
91
+ computed: ComputedContext;
92
+ action: string;
93
+ event: EventObject;
94
+ effect: string;
95
+ guard: string;
81
96
  }
82
- type State = StateMachine.State<MachineContext, MachineState>;
83
- type Send = StateMachine.Send<StateMachine.AnyEventObject>;
84
- type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
97
+ type SplitterService = Service<SplitterSchema>;
98
+ type SplitterMachine = Machine<SplitterSchema>;
85
99
  interface PanelProps {
86
100
  id: PanelId;
87
101
  snapSize?: number | undefined;
@@ -103,7 +117,7 @@ interface PanelBounds {
103
117
  min: number;
104
118
  max: number;
105
119
  }
106
- interface MachineApi<T extends PropTypes = PropTypes> {
120
+ interface SplitterApi<T extends PropTypes = PropTypes> {
107
121
  /**
108
122
  * Whether the splitter is focused.
109
123
  */
@@ -137,15 +151,15 @@ interface MachineApi<T extends PropTypes = PropTypes> {
137
151
  getResizeTriggerProps(props: ResizeTriggerProps): T["element"];
138
152
  }
139
153
 
140
- declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
154
+ declare function connect<T extends PropTypes>(service: SplitterService, normalize: NormalizeProps<T>): SplitterApi<T>;
141
155
 
142
- declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
156
+ declare const machine: _zag_js_core.Machine<SplitterSchema>;
143
157
 
144
- declare const props: ("size" | "dir" | "id" | "orientation" | "getRootNode" | "onSizeChange" | "onSizeChangeEnd" | "ids")[];
145
- declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "size" | "dir" | "id" | "orientation" | "getRootNode" | "onSizeChange" | "onSizeChangeEnd" | "ids">];
158
+ declare const props: (keyof SplitterProps)[];
159
+ declare const splitProps: <Props extends Partial<SplitterProps>>(props: Props) => [Partial<SplitterProps>, Omit<Props, keyof SplitterProps>];
146
160
  declare const panelProps: (keyof PanelProps)[];
147
161
  declare const splitPanelProps: <Props extends PanelProps>(props: Props) => [PanelProps, Omit<Props, keyof PanelProps>];
148
162
  declare const resizeTriggerProps: (keyof ResizeTriggerProps)[];
149
163
  declare const splitResizeTriggerProps: <Props extends ResizeTriggerProps>(props: Props) => [ResizeTriggerProps, Omit<Props, keyof ResizeTriggerProps>];
150
164
 
151
- export { type MachineApi as Api, type UserDefinedContext as Context, type MachineState, type PanelProps, type PanelSizeData, type ResizeTriggerProps, type Service, type SizeChangeDetails, anatomy, connect, machine, panelProps, props, resizeTriggerProps, splitPanelProps, splitProps, splitResizeTriggerProps };
165
+ export { type SplitterApi as Api, type SplitterMachine as Machine, type PanelProps, type PanelSizeData, type SplitterProps as Props, type ResizeTriggerProps, type SplitterService as Service, type SizeChangeDetails, anatomy, connect, machine, panelProps, props, resizeTriggerProps, splitPanelProps, splitProps, splitResizeTriggerProps };
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as _zag_js_anatomy from '@zag-js/anatomy';
2
- import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, Required, NormalizeProps } from '@zag-js/types';
2
+ import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, Required, NormalizeProps } from '@zag-js/types';
3
3
  import * as _zag_js_core from '@zag-js/core';
4
- import { Machine, StateMachine } from '@zag-js/core';
4
+ import { Service, Machine, EventObject } from '@zag-js/core';
5
5
 
6
6
  declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "panel" | "resizeTrigger">;
7
7
 
@@ -22,15 +22,21 @@ type ElementIds = Partial<{
22
22
  label(id: string): string;
23
23
  panel(id: string | number): string;
24
24
  }>;
25
- interface PublicContext extends DirectionProperty, CommonProperties {
25
+ interface SplitterProps extends DirectionProperty, CommonProperties {
26
26
  /**
27
27
  * The orientation of the splitter. Can be `horizontal` or `vertical`
28
+ * @default "horizontal"
28
29
  */
29
- orientation: "horizontal" | "vertical";
30
+ orientation?: "horizontal" | "vertical" | undefined;
30
31
  /**
31
- * The size data of the panels
32
+ * The controlled size data of the panels
32
33
  */
33
- size: PanelSizeData[];
34
+ size?: PanelSizeData[] | undefined;
35
+ /**
36
+ * The initial size of the panels when rendered.
37
+ * Use when you don't need to control the size of the panels.
38
+ */
39
+ defaultSize?: PanelSizeData[] | undefined;
34
40
  /**
35
41
  * Function called when the splitter is resized.
36
42
  */
@@ -44,7 +50,7 @@ interface PublicContext extends DirectionProperty, CommonProperties {
44
50
  */
45
51
  ids?: ElementIds | undefined;
46
52
  }
47
- type UserDefinedContext = RequiredBy<PublicContext, "id">;
53
+ type PropWithDefault = "orientation";
48
54
  type NormalizedPanelData = Array<Required<PanelSizeData> & {
49
55
  remainingSize: number;
50
56
  minSize: number;
@@ -64,24 +70,32 @@ type ComputedContext = Readonly<{
64
70
  after: PanelSizeData;
65
71
  } | undefined;
66
72
  }>;
73
+ interface ResizeState {
74
+ isAtMin: boolean;
75
+ isAtMax: boolean;
76
+ }
67
77
  interface PrivateContext {
68
78
  activeResizeId: string | null;
69
- previousPanels: NormalizedPanelData;
70
- activeResizeState: {
71
- isAtMin: boolean;
72
- isAtMax: boolean;
73
- };
74
- initialSize: Array<Required<Pick<PanelSizeData, "id" | "size">>>;
79
+ activeResizeState: ResizeState;
80
+ size: PanelSizeData[];
75
81
  }
76
- interface MachineContext extends PublicContext, ComputedContext, PrivateContext {
82
+ interface Refs {
83
+ previousPanels: NormalizedPanelData;
77
84
  }
78
- interface MachineState {
79
- value: "idle" | "hover:temp" | "hover" | "dragging" | "focused";
80
- tags: "focus";
85
+ interface SplitterSchema {
86
+ state: "idle" | "hover:temp" | "hover" | "dragging" | "focused";
87
+ tag: "focus";
88
+ props: RequiredBy<SplitterProps, PropWithDefault>;
89
+ context: PrivateContext;
90
+ refs: Refs;
91
+ computed: ComputedContext;
92
+ action: string;
93
+ event: EventObject;
94
+ effect: string;
95
+ guard: string;
81
96
  }
82
- type State = StateMachine.State<MachineContext, MachineState>;
83
- type Send = StateMachine.Send<StateMachine.AnyEventObject>;
84
- type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
97
+ type SplitterService = Service<SplitterSchema>;
98
+ type SplitterMachine = Machine<SplitterSchema>;
85
99
  interface PanelProps {
86
100
  id: PanelId;
87
101
  snapSize?: number | undefined;
@@ -103,7 +117,7 @@ interface PanelBounds {
103
117
  min: number;
104
118
  max: number;
105
119
  }
106
- interface MachineApi<T extends PropTypes = PropTypes> {
120
+ interface SplitterApi<T extends PropTypes = PropTypes> {
107
121
  /**
108
122
  * Whether the splitter is focused.
109
123
  */
@@ -137,15 +151,15 @@ interface MachineApi<T extends PropTypes = PropTypes> {
137
151
  getResizeTriggerProps(props: ResizeTriggerProps): T["element"];
138
152
  }
139
153
 
140
- declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
154
+ declare function connect<T extends PropTypes>(service: SplitterService, normalize: NormalizeProps<T>): SplitterApi<T>;
141
155
 
142
- declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
156
+ declare const machine: _zag_js_core.Machine<SplitterSchema>;
143
157
 
144
- declare const props: ("size" | "dir" | "id" | "orientation" | "getRootNode" | "onSizeChange" | "onSizeChangeEnd" | "ids")[];
145
- declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "size" | "dir" | "id" | "orientation" | "getRootNode" | "onSizeChange" | "onSizeChangeEnd" | "ids">];
158
+ declare const props: (keyof SplitterProps)[];
159
+ declare const splitProps: <Props extends Partial<SplitterProps>>(props: Props) => [Partial<SplitterProps>, Omit<Props, keyof SplitterProps>];
146
160
  declare const panelProps: (keyof PanelProps)[];
147
161
  declare const splitPanelProps: <Props extends PanelProps>(props: Props) => [PanelProps, Omit<Props, keyof PanelProps>];
148
162
  declare const resizeTriggerProps: (keyof ResizeTriggerProps)[];
149
163
  declare const splitResizeTriggerProps: <Props extends ResizeTriggerProps>(props: Props) => [ResizeTriggerProps, Omit<Props, keyof ResizeTriggerProps>];
150
164
 
151
- export { type MachineApi as Api, type UserDefinedContext as Context, type MachineState, type PanelProps, type PanelSizeData, type ResizeTriggerProps, type Service, type SizeChangeDetails, anatomy, connect, machine, panelProps, props, resizeTriggerProps, splitPanelProps, splitProps, splitResizeTriggerProps };
165
+ export { type SplitterApi as Api, type SplitterMachine as Machine, type PanelProps, type PanelSizeData, type SplitterProps as Props, type ResizeTriggerProps, type SplitterService as Service, type SizeChangeDetails, anatomy, connect, machine, panelProps, props, resizeTriggerProps, splitPanelProps, splitProps, splitResizeTriggerProps };