@zag-js/splitter 0.82.2 → 1.0.0

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 +39 -26
  2. package/dist/index.d.ts +39 -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, 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,31 @@ 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>;
85
98
  interface PanelProps {
86
99
  id: PanelId;
87
100
  snapSize?: number | undefined;
@@ -103,7 +116,7 @@ interface PanelBounds {
103
116
  min: number;
104
117
  max: number;
105
118
  }
106
- interface MachineApi<T extends PropTypes = PropTypes> {
119
+ interface SplitterApi<T extends PropTypes = PropTypes> {
107
120
  /**
108
121
  * Whether the splitter is focused.
109
122
  */
@@ -137,15 +150,15 @@ interface MachineApi<T extends PropTypes = PropTypes> {
137
150
  getResizeTriggerProps(props: ResizeTriggerProps): T["element"];
138
151
  }
139
152
 
140
- declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
153
+ declare function connect<T extends PropTypes>(service: SplitterService, normalize: NormalizeProps<T>): SplitterApi<T>;
141
154
 
142
- declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
155
+ declare const machine: _zag_js_core.MachineConfig<SplitterSchema>;
143
156
 
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">];
157
+ declare const props: (keyof SplitterProps)[];
158
+ declare const splitProps: <Props extends Partial<SplitterProps>>(props: Props) => [Partial<SplitterProps>, Omit<Props, keyof SplitterProps>];
146
159
  declare const panelProps: (keyof PanelProps)[];
147
160
  declare const splitPanelProps: <Props extends PanelProps>(props: Props) => [PanelProps, Omit<Props, keyof PanelProps>];
148
161
  declare const resizeTriggerProps: (keyof ResizeTriggerProps)[];
149
162
  declare const splitResizeTriggerProps: <Props extends ResizeTriggerProps>(props: Props) => [ResizeTriggerProps, Omit<Props, keyof ResizeTriggerProps>];
150
163
 
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 };
164
+ export { type SplitterApi as Api, 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, 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,31 @@ 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>;
85
98
  interface PanelProps {
86
99
  id: PanelId;
87
100
  snapSize?: number | undefined;
@@ -103,7 +116,7 @@ interface PanelBounds {
103
116
  min: number;
104
117
  max: number;
105
118
  }
106
- interface MachineApi<T extends PropTypes = PropTypes> {
119
+ interface SplitterApi<T extends PropTypes = PropTypes> {
107
120
  /**
108
121
  * Whether the splitter is focused.
109
122
  */
@@ -137,15 +150,15 @@ interface MachineApi<T extends PropTypes = PropTypes> {
137
150
  getResizeTriggerProps(props: ResizeTriggerProps): T["element"];
138
151
  }
139
152
 
140
- declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
153
+ declare function connect<T extends PropTypes>(service: SplitterService, normalize: NormalizeProps<T>): SplitterApi<T>;
141
154
 
142
- declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
155
+ declare const machine: _zag_js_core.MachineConfig<SplitterSchema>;
143
156
 
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">];
157
+ declare const props: (keyof SplitterProps)[];
158
+ declare const splitProps: <Props extends Partial<SplitterProps>>(props: Props) => [Partial<SplitterProps>, Omit<Props, keyof SplitterProps>];
146
159
  declare const panelProps: (keyof PanelProps)[];
147
160
  declare const splitPanelProps: <Props extends PanelProps>(props: Props) => [PanelProps, Omit<Props, keyof PanelProps>];
148
161
  declare const resizeTriggerProps: (keyof ResizeTriggerProps)[];
149
162
  declare const splitResizeTriggerProps: <Props extends ResizeTriggerProps>(props: Props) => [ResizeTriggerProps, Omit<Props, keyof ResizeTriggerProps>];
150
163
 
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 };
164
+ export { type SplitterApi as Api, 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 };