@zag-js/splitter 1.4.2 → 1.5.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 +125 -75
  2. package/dist/index.d.ts +125 -75
  3. package/dist/index.js +793 -364
  4. package/dist/index.mjs +795 -367
  5. package/package.json +6 -6
package/dist/index.d.mts CHANGED
@@ -1,20 +1,51 @@
1
1
  import * as _zag_js_anatomy from '@zag-js/anatomy';
2
- import { RequiredBy, DirectionProperty, CommonProperties, Required, PropTypes, NormalizeProps } from '@zag-js/types';
2
+ import { RequiredBy, DirectionProperty, CommonProperties, PropTypes, NormalizeProps } from '@zag-js/types';
3
3
  import * as _zag_js_core from '@zag-js/core';
4
4
  import { Service, EventObject, Machine } from '@zag-js/core';
5
5
 
6
6
  declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "panel" | "resizeTrigger">;
7
7
 
8
- type PanelId = string | number;
9
- interface PanelSizeData {
8
+ type PanelId = string;
9
+ type ResizeTriggerId = `${PanelId}:${PanelId}`;
10
+ interface PanelData {
11
+ /**
12
+ * The id of the panel.
13
+ */
10
14
  id: PanelId;
11
- size?: number | undefined;
15
+ /**
16
+ * The order of the panel. useful of you intend to conditionally render the panel.
17
+ */
18
+ order?: number | undefined;
19
+ /**
20
+ * The minimum size of the panel.
21
+ */
12
22
  minSize?: number | undefined;
23
+ /**
24
+ * The maximum size of the panel.
25
+ */
13
26
  maxSize?: number | undefined;
27
+ /**
28
+ * Whether the panel is collapsible.
29
+ */
30
+ collapsible?: boolean | undefined;
31
+ /**
32
+ * The size of the panel when collapsed.
33
+ */
34
+ collapsedSize?: number | undefined;
35
+ }
36
+ interface ResizeDetails {
37
+ size: number[];
38
+ resizeTriggerId: string | null;
39
+ layout: string;
40
+ expandToSizes: Record<string, number>;
14
41
  }
15
- interface SizeChangeDetails {
16
- size: PanelSizeData[];
17
- activeHandleId: string | null;
42
+ interface ResizeEndDetails {
43
+ size: number[];
44
+ resizeTriggerId: string | null;
45
+ }
46
+ interface ExpandCollapseDetails {
47
+ panelId: string;
48
+ size: number;
18
49
  }
19
50
  type ElementIds = Partial<{
20
51
  root: string;
@@ -31,64 +62,78 @@ interface SplitterProps extends DirectionProperty, CommonProperties {
31
62
  /**
32
63
  * The controlled size data of the panels
33
64
  */
34
- size?: PanelSizeData[] | undefined;
65
+ size?: number[] | undefined;
35
66
  /**
36
67
  * The initial size of the panels when rendered.
37
68
  * Use when you don't need to control the size of the panels.
38
69
  */
39
- defaultSize?: PanelSizeData[] | undefined;
70
+ defaultSize?: number[] | undefined;
71
+ /**
72
+ * The size constraints of the panels.
73
+ */
74
+ panels: PanelData[];
40
75
  /**
41
76
  * Function called when the splitter is resized.
42
77
  */
43
- onSizeChange?: ((details: SizeChangeDetails) => void) | undefined;
78
+ onResize?: ((details: ResizeDetails) => void) | undefined;
79
+ /**
80
+ * Function called when the splitter resize starts.
81
+ */
82
+ onResizeStart?: (() => void) | undefined;
44
83
  /**
45
84
  * Function called when the splitter resize ends.
46
85
  */
47
- onSizeChangeEnd?: ((details: SizeChangeDetails) => void) | undefined;
86
+ onResizeEnd?: ((details: ResizeEndDetails) => void) | undefined;
48
87
  /**
49
88
  * The ids of the elements in the splitter. Useful for composition.
50
89
  */
51
90
  ids?: ElementIds | undefined;
91
+ /**
92
+ * The number of pixels to resize the panel by when the keyboard is used.
93
+ */
94
+ keyboardResizeBy?: number | null;
95
+ /**
96
+ * The nonce for the injected splitter cursor stylesheet.
97
+ */
98
+ nonce?: string | undefined;
99
+ /**
100
+ * Function called when a panel is collapsed.
101
+ */
102
+ onCollapse?: ((details: ExpandCollapseDetails) => void) | undefined;
103
+ /**
104
+ * Function called when a panel is expanded.
105
+ */
106
+ onExpand?: ((details: ExpandCollapseDetails) => void) | undefined;
52
107
  }
53
- type PropWithDefault = "orientation";
54
- type NormalizedPanelData = Array<Required<PanelSizeData> & {
55
- remainingSize: number;
56
- minSize: number;
57
- maxSize: number;
58
- start: number;
59
- end: number;
60
- }>;
61
- type ComputedContext = Readonly<{
62
- isHorizontal: boolean;
63
- panels: NormalizedPanelData;
64
- activeResizeBounds?: {
65
- min: number;
66
- max: number;
67
- } | undefined;
68
- activeResizePanels?: {
69
- before: PanelSizeData;
70
- after: PanelSizeData;
71
- } | undefined;
72
- }>;
73
- interface ResizeState {
74
- isAtMin: boolean;
75
- isAtMax: boolean;
108
+ type PropWithDefault = "orientation" | "panels";
109
+ interface DragState {
110
+ resizeTriggerId: string;
111
+ resizeTriggerRect: DOMRect;
112
+ initialCursorPosition: number;
113
+ initialSize: number[];
76
114
  }
77
- interface PrivateContext {
78
- activeResizeId: string | null;
79
- activeResizeState: ResizeState;
80
- size: PanelSizeData[];
115
+ interface KeyboardState {
116
+ resizeTriggerId: string;
117
+ }
118
+ interface Context {
119
+ dragState: DragState | null;
120
+ keyboardState: KeyboardState | null;
121
+ size: number[];
81
122
  }
82
123
  interface Refs {
83
- previousPanels: NormalizedPanelData;
124
+ panelSizeBeforeCollapse: Map<string, number>;
125
+ panelIdToLastNotifiedSizeMap: Map<string, number>;
126
+ prevDelta: number;
84
127
  }
85
128
  interface SplitterSchema {
86
129
  state: "idle" | "hover:temp" | "hover" | "dragging" | "focused";
87
130
  tag: "focus";
88
131
  props: RequiredBy<SplitterProps, PropWithDefault>;
89
- context: PrivateContext;
132
+ context: Context;
133
+ computed: {
134
+ horizontal: boolean;
135
+ };
90
136
  refs: Refs;
91
- computed: ComputedContext;
92
137
  action: string;
93
138
  event: EventObject;
94
139
  effect: string;
@@ -98,62 +143,65 @@ type SplitterService = Service<SplitterSchema>;
98
143
  type SplitterMachine = Machine<SplitterSchema>;
99
144
  interface PanelProps {
100
145
  id: PanelId;
101
- snapSize?: number | undefined;
102
146
  }
103
147
  interface ResizeTriggerProps {
104
- id: `${PanelId}:${PanelId}`;
105
- step?: number | undefined;
148
+ id: ResizeTriggerId;
106
149
  disabled?: boolean | undefined;
107
150
  }
108
- interface ResizeTriggerState {
109
- disabled: boolean;
110
- focused: boolean;
111
- panelIds: string[];
112
- min: number | undefined;
113
- max: number | undefined;
114
- value: number;
151
+ interface PanelItem {
152
+ type: "panel";
153
+ id: PanelId;
115
154
  }
116
- interface PanelBounds {
117
- min: number;
118
- max: number;
155
+ interface ResizeTriggerItem {
156
+ type: "handle";
157
+ id: ResizeTriggerId;
119
158
  }
159
+ type SplitterItem = PanelItem | ResizeTriggerItem;
120
160
  interface SplitterApi<T extends PropTypes = PropTypes> {
121
161
  /**
122
- * Whether the splitter is focused.
162
+ * Whether the splitter is currently being resized.
123
163
  */
124
- focused: boolean;
164
+ dragging: boolean;
125
165
  /**
126
- * Whether the splitter is being dragged.
166
+ * The current sizes of the panels.
127
167
  */
128
- dragging: boolean;
168
+ getSizes(): number[];
129
169
  /**
130
- * The bounds of the currently dragged splitter handle.
170
+ * Set the sizes of the panels.
131
171
  */
132
- bounds: PanelBounds | undefined;
172
+ setSizes(size: number[]): void;
133
173
  /**
134
- * Function to set a panel to its minimum size.
174
+ * Get the items of the splitter.
135
175
  */
136
- setToMinSize(id: PanelId): void;
176
+ getItems(): SplitterItem[];
137
177
  /**
138
- * Function to set a panel to its maximum size.
178
+ * Get the size of a panel.
139
179
  */
140
- setToMaxSize(id: PanelId): void;
180
+ getPanelSize(id: PanelId): number;
141
181
  /**
142
- * Function to set the size of a panel.
182
+ * Whether a panel is collapsed.
143
183
  */
144
- setSize(id: PanelId, size: number): void;
184
+ isPanelCollapsed(id: PanelId): boolean;
145
185
  /**
146
- * Function to set the size of multiple panels.
186
+ * Whether a panel is expanded.
147
187
  */
148
- setSizes(sizes: PanelSizeData[]): void;
188
+ isPanelExpanded(id: PanelId): boolean;
149
189
  /**
150
- * Returns the size of a panel.
190
+ * Collapse a panel.
151
191
  */
152
- getSize(id: PanelId): number;
192
+ collapsePanel(id: PanelId): void;
153
193
  /**
154
- * Returns the state details for a resize trigger.
194
+ * Expand a panel.
155
195
  */
156
- getResizeTriggerState(props: ResizeTriggerProps): ResizeTriggerState;
196
+ expandPanel(id: PanelId, minSize?: number): void;
197
+ /**
198
+ * Resize a panel.
199
+ */
200
+ resizePanel(id: PanelId, unsafePanelSize: number): void;
201
+ /**
202
+ * Get the layout of the splitter.
203
+ */
204
+ getLayout(): string;
157
205
  getRootProps(): T["element"];
158
206
  getPanelProps(props: PanelProps): T["element"];
159
207
  getResizeTriggerProps(props: ResizeTriggerProps): T["element"];
@@ -165,9 +213,11 @@ declare const machine: _zag_js_core.Machine<SplitterSchema>;
165
213
 
166
214
  declare const props: (keyof SplitterProps)[];
167
215
  declare const splitProps: <Props extends Partial<SplitterProps>>(props: Props) => [Partial<SplitterProps>, Omit<Props, keyof SplitterProps>];
168
- declare const panelProps: (keyof PanelProps)[];
169
- declare const splitPanelProps: <Props extends PanelProps>(props: Props) => [PanelProps, Omit<Props, keyof PanelProps>];
216
+ declare const panelProps: "id"[];
217
+ declare const splitPanelProps: <Props extends PanelProps>(props: Props) => [PanelProps, Omit<Props, "id">];
170
218
  declare const resizeTriggerProps: (keyof ResizeTriggerProps)[];
171
219
  declare const splitResizeTriggerProps: <Props extends ResizeTriggerProps>(props: Props) => [ResizeTriggerProps, Omit<Props, keyof ResizeTriggerProps>];
172
220
 
173
- 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 };
221
+ declare function getPanelLayout(panels: PanelData[]): string;
222
+
223
+ export { type SplitterApi as Api, type ElementIds, type ExpandCollapseDetails, type SplitterItem as Item, type SplitterMachine as Machine, type PanelData, type PanelProps, type SplitterProps as Props, type ResizeDetails, type ResizeEndDetails, type ResizeTriggerProps, type SplitterService as Service, anatomy, connect, getPanelLayout as layout, machine, panelProps, props, resizeTriggerProps, splitPanelProps, splitProps, splitResizeTriggerProps };
package/dist/index.d.ts CHANGED
@@ -1,20 +1,51 @@
1
1
  import * as _zag_js_anatomy from '@zag-js/anatomy';
2
- import { RequiredBy, DirectionProperty, CommonProperties, Required, PropTypes, NormalizeProps } from '@zag-js/types';
2
+ import { RequiredBy, DirectionProperty, CommonProperties, PropTypes, NormalizeProps } from '@zag-js/types';
3
3
  import * as _zag_js_core from '@zag-js/core';
4
4
  import { Service, EventObject, Machine } from '@zag-js/core';
5
5
 
6
6
  declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "panel" | "resizeTrigger">;
7
7
 
8
- type PanelId = string | number;
9
- interface PanelSizeData {
8
+ type PanelId = string;
9
+ type ResizeTriggerId = `${PanelId}:${PanelId}`;
10
+ interface PanelData {
11
+ /**
12
+ * The id of the panel.
13
+ */
10
14
  id: PanelId;
11
- size?: number | undefined;
15
+ /**
16
+ * The order of the panel. useful of you intend to conditionally render the panel.
17
+ */
18
+ order?: number | undefined;
19
+ /**
20
+ * The minimum size of the panel.
21
+ */
12
22
  minSize?: number | undefined;
23
+ /**
24
+ * The maximum size of the panel.
25
+ */
13
26
  maxSize?: number | undefined;
27
+ /**
28
+ * Whether the panel is collapsible.
29
+ */
30
+ collapsible?: boolean | undefined;
31
+ /**
32
+ * The size of the panel when collapsed.
33
+ */
34
+ collapsedSize?: number | undefined;
35
+ }
36
+ interface ResizeDetails {
37
+ size: number[];
38
+ resizeTriggerId: string | null;
39
+ layout: string;
40
+ expandToSizes: Record<string, number>;
14
41
  }
15
- interface SizeChangeDetails {
16
- size: PanelSizeData[];
17
- activeHandleId: string | null;
42
+ interface ResizeEndDetails {
43
+ size: number[];
44
+ resizeTriggerId: string | null;
45
+ }
46
+ interface ExpandCollapseDetails {
47
+ panelId: string;
48
+ size: number;
18
49
  }
19
50
  type ElementIds = Partial<{
20
51
  root: string;
@@ -31,64 +62,78 @@ interface SplitterProps extends DirectionProperty, CommonProperties {
31
62
  /**
32
63
  * The controlled size data of the panels
33
64
  */
34
- size?: PanelSizeData[] | undefined;
65
+ size?: number[] | undefined;
35
66
  /**
36
67
  * The initial size of the panels when rendered.
37
68
  * Use when you don't need to control the size of the panels.
38
69
  */
39
- defaultSize?: PanelSizeData[] | undefined;
70
+ defaultSize?: number[] | undefined;
71
+ /**
72
+ * The size constraints of the panels.
73
+ */
74
+ panels: PanelData[];
40
75
  /**
41
76
  * Function called when the splitter is resized.
42
77
  */
43
- onSizeChange?: ((details: SizeChangeDetails) => void) | undefined;
78
+ onResize?: ((details: ResizeDetails) => void) | undefined;
79
+ /**
80
+ * Function called when the splitter resize starts.
81
+ */
82
+ onResizeStart?: (() => void) | undefined;
44
83
  /**
45
84
  * Function called when the splitter resize ends.
46
85
  */
47
- onSizeChangeEnd?: ((details: SizeChangeDetails) => void) | undefined;
86
+ onResizeEnd?: ((details: ResizeEndDetails) => void) | undefined;
48
87
  /**
49
88
  * The ids of the elements in the splitter. Useful for composition.
50
89
  */
51
90
  ids?: ElementIds | undefined;
91
+ /**
92
+ * The number of pixels to resize the panel by when the keyboard is used.
93
+ */
94
+ keyboardResizeBy?: number | null;
95
+ /**
96
+ * The nonce for the injected splitter cursor stylesheet.
97
+ */
98
+ nonce?: string | undefined;
99
+ /**
100
+ * Function called when a panel is collapsed.
101
+ */
102
+ onCollapse?: ((details: ExpandCollapseDetails) => void) | undefined;
103
+ /**
104
+ * Function called when a panel is expanded.
105
+ */
106
+ onExpand?: ((details: ExpandCollapseDetails) => void) | undefined;
52
107
  }
53
- type PropWithDefault = "orientation";
54
- type NormalizedPanelData = Array<Required<PanelSizeData> & {
55
- remainingSize: number;
56
- minSize: number;
57
- maxSize: number;
58
- start: number;
59
- end: number;
60
- }>;
61
- type ComputedContext = Readonly<{
62
- isHorizontal: boolean;
63
- panels: NormalizedPanelData;
64
- activeResizeBounds?: {
65
- min: number;
66
- max: number;
67
- } | undefined;
68
- activeResizePanels?: {
69
- before: PanelSizeData;
70
- after: PanelSizeData;
71
- } | undefined;
72
- }>;
73
- interface ResizeState {
74
- isAtMin: boolean;
75
- isAtMax: boolean;
108
+ type PropWithDefault = "orientation" | "panels";
109
+ interface DragState {
110
+ resizeTriggerId: string;
111
+ resizeTriggerRect: DOMRect;
112
+ initialCursorPosition: number;
113
+ initialSize: number[];
76
114
  }
77
- interface PrivateContext {
78
- activeResizeId: string | null;
79
- activeResizeState: ResizeState;
80
- size: PanelSizeData[];
115
+ interface KeyboardState {
116
+ resizeTriggerId: string;
117
+ }
118
+ interface Context {
119
+ dragState: DragState | null;
120
+ keyboardState: KeyboardState | null;
121
+ size: number[];
81
122
  }
82
123
  interface Refs {
83
- previousPanels: NormalizedPanelData;
124
+ panelSizeBeforeCollapse: Map<string, number>;
125
+ panelIdToLastNotifiedSizeMap: Map<string, number>;
126
+ prevDelta: number;
84
127
  }
85
128
  interface SplitterSchema {
86
129
  state: "idle" | "hover:temp" | "hover" | "dragging" | "focused";
87
130
  tag: "focus";
88
131
  props: RequiredBy<SplitterProps, PropWithDefault>;
89
- context: PrivateContext;
132
+ context: Context;
133
+ computed: {
134
+ horizontal: boolean;
135
+ };
90
136
  refs: Refs;
91
- computed: ComputedContext;
92
137
  action: string;
93
138
  event: EventObject;
94
139
  effect: string;
@@ -98,62 +143,65 @@ type SplitterService = Service<SplitterSchema>;
98
143
  type SplitterMachine = Machine<SplitterSchema>;
99
144
  interface PanelProps {
100
145
  id: PanelId;
101
- snapSize?: number | undefined;
102
146
  }
103
147
  interface ResizeTriggerProps {
104
- id: `${PanelId}:${PanelId}`;
105
- step?: number | undefined;
148
+ id: ResizeTriggerId;
106
149
  disabled?: boolean | undefined;
107
150
  }
108
- interface ResizeTriggerState {
109
- disabled: boolean;
110
- focused: boolean;
111
- panelIds: string[];
112
- min: number | undefined;
113
- max: number | undefined;
114
- value: number;
151
+ interface PanelItem {
152
+ type: "panel";
153
+ id: PanelId;
115
154
  }
116
- interface PanelBounds {
117
- min: number;
118
- max: number;
155
+ interface ResizeTriggerItem {
156
+ type: "handle";
157
+ id: ResizeTriggerId;
119
158
  }
159
+ type SplitterItem = PanelItem | ResizeTriggerItem;
120
160
  interface SplitterApi<T extends PropTypes = PropTypes> {
121
161
  /**
122
- * Whether the splitter is focused.
162
+ * Whether the splitter is currently being resized.
123
163
  */
124
- focused: boolean;
164
+ dragging: boolean;
125
165
  /**
126
- * Whether the splitter is being dragged.
166
+ * The current sizes of the panels.
127
167
  */
128
- dragging: boolean;
168
+ getSizes(): number[];
129
169
  /**
130
- * The bounds of the currently dragged splitter handle.
170
+ * Set the sizes of the panels.
131
171
  */
132
- bounds: PanelBounds | undefined;
172
+ setSizes(size: number[]): void;
133
173
  /**
134
- * Function to set a panel to its minimum size.
174
+ * Get the items of the splitter.
135
175
  */
136
- setToMinSize(id: PanelId): void;
176
+ getItems(): SplitterItem[];
137
177
  /**
138
- * Function to set a panel to its maximum size.
178
+ * Get the size of a panel.
139
179
  */
140
- setToMaxSize(id: PanelId): void;
180
+ getPanelSize(id: PanelId): number;
141
181
  /**
142
- * Function to set the size of a panel.
182
+ * Whether a panel is collapsed.
143
183
  */
144
- setSize(id: PanelId, size: number): void;
184
+ isPanelCollapsed(id: PanelId): boolean;
145
185
  /**
146
- * Function to set the size of multiple panels.
186
+ * Whether a panel is expanded.
147
187
  */
148
- setSizes(sizes: PanelSizeData[]): void;
188
+ isPanelExpanded(id: PanelId): boolean;
149
189
  /**
150
- * Returns the size of a panel.
190
+ * Collapse a panel.
151
191
  */
152
- getSize(id: PanelId): number;
192
+ collapsePanel(id: PanelId): void;
153
193
  /**
154
- * Returns the state details for a resize trigger.
194
+ * Expand a panel.
155
195
  */
156
- getResizeTriggerState(props: ResizeTriggerProps): ResizeTriggerState;
196
+ expandPanel(id: PanelId, minSize?: number): void;
197
+ /**
198
+ * Resize a panel.
199
+ */
200
+ resizePanel(id: PanelId, unsafePanelSize: number): void;
201
+ /**
202
+ * Get the layout of the splitter.
203
+ */
204
+ getLayout(): string;
157
205
  getRootProps(): T["element"];
158
206
  getPanelProps(props: PanelProps): T["element"];
159
207
  getResizeTriggerProps(props: ResizeTriggerProps): T["element"];
@@ -165,9 +213,11 @@ declare const machine: _zag_js_core.Machine<SplitterSchema>;
165
213
 
166
214
  declare const props: (keyof SplitterProps)[];
167
215
  declare const splitProps: <Props extends Partial<SplitterProps>>(props: Props) => [Partial<SplitterProps>, Omit<Props, keyof SplitterProps>];
168
- declare const panelProps: (keyof PanelProps)[];
169
- declare const splitPanelProps: <Props extends PanelProps>(props: Props) => [PanelProps, Omit<Props, keyof PanelProps>];
216
+ declare const panelProps: "id"[];
217
+ declare const splitPanelProps: <Props extends PanelProps>(props: Props) => [PanelProps, Omit<Props, "id">];
170
218
  declare const resizeTriggerProps: (keyof ResizeTriggerProps)[];
171
219
  declare const splitResizeTriggerProps: <Props extends ResizeTriggerProps>(props: Props) => [ResizeTriggerProps, Omit<Props, keyof ResizeTriggerProps>];
172
220
 
173
- 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 };
221
+ declare function getPanelLayout(panels: PanelData[]): string;
222
+
223
+ export { type SplitterApi as Api, type ElementIds, type ExpandCollapseDetails, type SplitterItem as Item, type SplitterMachine as Machine, type PanelData, type PanelProps, type SplitterProps as Props, type ResizeDetails, type ResizeEndDetails, type ResizeTriggerProps, type SplitterService as Service, anatomy, connect, getPanelLayout as layout, machine, panelProps, props, resizeTriggerProps, splitPanelProps, splitProps, splitResizeTriggerProps };