@zag-js/splitter 0.1.10 → 0.1.11
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.
- package/LICENSE +21 -0
- package/dist/index.d.ts +117 -3
- package/dist/index.js +52 -83
- package/dist/index.mjs +47 -86
- package/package.json +12 -11
- package/dist/splitter.connect.d.ts +0 -19
- package/dist/splitter.dom.d.ts +0 -28
- package/dist/splitter.machine.d.ts +0 -2
- package/dist/splitter.types.d.ts +0 -94
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2021 Chakra UI
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,117 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { RequiredBy, DirectionProperty, CommonProperties, Context, PropTypes, NormalizeProps } from '@zag-js/types';
|
|
2
|
+
import * as _zag_js_core from '@zag-js/core';
|
|
3
|
+
import { StateMachine } from '@zag-js/core';
|
|
4
|
+
|
|
5
|
+
declare type ElementIds = Partial<{
|
|
6
|
+
root: string;
|
|
7
|
+
splitter: string;
|
|
8
|
+
label: string;
|
|
9
|
+
toggleBtn: string;
|
|
10
|
+
primaryPane: string;
|
|
11
|
+
secondaryPane: string;
|
|
12
|
+
}>;
|
|
13
|
+
declare type PublicContext = DirectionProperty & CommonProperties & {
|
|
14
|
+
/**
|
|
15
|
+
* The ids of the elements in the splitter. Useful for composition.
|
|
16
|
+
*/
|
|
17
|
+
ids?: ElementIds;
|
|
18
|
+
/**
|
|
19
|
+
* Whether to allow the separator to be dragged.
|
|
20
|
+
*/
|
|
21
|
+
fixed?: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* The orientation of the split view.
|
|
24
|
+
*/
|
|
25
|
+
orientation: "horizontal" | "vertical";
|
|
26
|
+
/**
|
|
27
|
+
* The minimum size of the primary pane.
|
|
28
|
+
*/
|
|
29
|
+
min: number;
|
|
30
|
+
/**
|
|
31
|
+
* The maximum size of the primary pane.
|
|
32
|
+
*/
|
|
33
|
+
max: number;
|
|
34
|
+
/**
|
|
35
|
+
* The size of the primary pane.
|
|
36
|
+
*/
|
|
37
|
+
value: number;
|
|
38
|
+
/**
|
|
39
|
+
* The step increments of the primary pane when it is dragged
|
|
40
|
+
* or resized with keyboard.
|
|
41
|
+
*/
|
|
42
|
+
step: number;
|
|
43
|
+
/**
|
|
44
|
+
* Callback to be invoked when the primary pane is resized.
|
|
45
|
+
*/
|
|
46
|
+
onChange?: (details: {
|
|
47
|
+
value: number;
|
|
48
|
+
}) => void;
|
|
49
|
+
/**
|
|
50
|
+
* Callback to be invoked when the primary pane's resize session starts
|
|
51
|
+
*/
|
|
52
|
+
onChangeStart?: (details: {
|
|
53
|
+
value: number;
|
|
54
|
+
}) => void;
|
|
55
|
+
/**
|
|
56
|
+
* Callback to be invoked when the primary pane's resize session ends
|
|
57
|
+
*/
|
|
58
|
+
onChangeEnd?: (details: {
|
|
59
|
+
value: number;
|
|
60
|
+
}) => void;
|
|
61
|
+
/**
|
|
62
|
+
* Whether the primary pane is disabled.
|
|
63
|
+
*/
|
|
64
|
+
disabled?: boolean;
|
|
65
|
+
/**
|
|
66
|
+
* The minimum offset needed to snap the primary pane to its minimum or maximum size.
|
|
67
|
+
*/
|
|
68
|
+
snapOffset: number;
|
|
69
|
+
};
|
|
70
|
+
declare type UserDefinedContext = RequiredBy<PublicContext, "id">;
|
|
71
|
+
declare type ComputedContext = Readonly<{
|
|
72
|
+
/**
|
|
73
|
+
* @computed
|
|
74
|
+
* Whether the primary pane is at its minimum size.
|
|
75
|
+
*/
|
|
76
|
+
isAtMin: boolean;
|
|
77
|
+
/**
|
|
78
|
+
* @computed
|
|
79
|
+
* Whether the primary pane is at its maximum size.
|
|
80
|
+
*/
|
|
81
|
+
isAtMax: boolean;
|
|
82
|
+
/**
|
|
83
|
+
* @computed
|
|
84
|
+
* Whether the orientation is horizontal.
|
|
85
|
+
*/
|
|
86
|
+
isHorizontal: boolean;
|
|
87
|
+
}>;
|
|
88
|
+
declare type PrivateContext = Context<{}>;
|
|
89
|
+
declare type MachineContext = PublicContext & ComputedContext & PrivateContext;
|
|
90
|
+
declare type MachineState = {
|
|
91
|
+
value: "unknown" | "idle" | "hover:temp" | "hover" | "dragging" | "focused";
|
|
92
|
+
tags: "focus";
|
|
93
|
+
};
|
|
94
|
+
declare type State = StateMachine.State<MachineContext, MachineState>;
|
|
95
|
+
declare type Send = StateMachine.Send<StateMachine.AnyEventObject>;
|
|
96
|
+
|
|
97
|
+
declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
|
|
98
|
+
isCollapsed: boolean;
|
|
99
|
+
isExpanded: boolean;
|
|
100
|
+
isFocused: boolean;
|
|
101
|
+
isDragging: boolean;
|
|
102
|
+
value: number;
|
|
103
|
+
collapse(): void;
|
|
104
|
+
expand(): void;
|
|
105
|
+
toggle(): void;
|
|
106
|
+
setSize(size: number): void;
|
|
107
|
+
rootProps: T["element"];
|
|
108
|
+
secondaryPaneProps: T["element"];
|
|
109
|
+
primaryPaneProps: T["element"];
|
|
110
|
+
toggleButtonProps: T["element"];
|
|
111
|
+
labelProps: T["element"];
|
|
112
|
+
splitterProps: T["element"];
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
declare function machine(ctx: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
|
|
116
|
+
|
|
117
|
+
export { UserDefinedContext as Context, MachineState, connect, machine };
|
package/dist/index.js
CHANGED
|
@@ -2,21 +2,7 @@
|
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
-
var __spreadValues = (a, b) => {
|
|
10
|
-
for (var prop in b || (b = {}))
|
|
11
|
-
if (__hasOwnProp.call(b, prop))
|
|
12
|
-
__defNormalProp(a, prop, b[prop]);
|
|
13
|
-
if (__getOwnPropSymbols)
|
|
14
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
-
if (__propIsEnum.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
}
|
|
18
|
-
return a;
|
|
19
|
-
};
|
|
20
6
|
var __export = (target, all) => {
|
|
21
7
|
for (var name in all)
|
|
22
8
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -40,29 +26,12 @@ __export(src_exports, {
|
|
|
40
26
|
module.exports = __toCommonJS(src_exports);
|
|
41
27
|
|
|
42
28
|
// ../../utilities/dom/dist/index.mjs
|
|
43
|
-
var __defProp2 = Object.defineProperty;
|
|
44
|
-
var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
|
|
45
|
-
var __hasOwnProp2 = Object.prototype.hasOwnProperty;
|
|
46
|
-
var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
|
|
47
|
-
var __pow = Math.pow;
|
|
48
|
-
var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
49
|
-
var __spreadValues2 = (a, b) => {
|
|
50
|
-
for (var prop in b || (b = {}))
|
|
51
|
-
if (__hasOwnProp2.call(b, prop))
|
|
52
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
53
|
-
if (__getOwnPropSymbols2)
|
|
54
|
-
for (var prop of __getOwnPropSymbols2(b)) {
|
|
55
|
-
if (__propIsEnum2.call(b, prop))
|
|
56
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
57
|
-
}
|
|
58
|
-
return a;
|
|
59
|
-
};
|
|
60
29
|
var dataAttr = (guard) => {
|
|
61
30
|
return guard ? "" : void 0;
|
|
62
31
|
};
|
|
63
32
|
var runIfFn = (v, ...a) => {
|
|
64
33
|
const res = typeof v === "function" ? v(...a) : v;
|
|
65
|
-
return res
|
|
34
|
+
return res ?? void 0;
|
|
66
35
|
};
|
|
67
36
|
var callAll = (...fns) => (...a) => {
|
|
68
37
|
fns.forEach(function(fn) {
|
|
@@ -74,9 +43,8 @@ var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
|
74
43
|
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
75
44
|
var isDom = () => typeof window !== "undefined";
|
|
76
45
|
function getPlatform() {
|
|
77
|
-
var _a;
|
|
78
46
|
const agent = navigator.userAgentData;
|
|
79
|
-
return (
|
|
47
|
+
return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
|
|
80
48
|
}
|
|
81
49
|
var pt = (v) => isDom() && v.test(getPlatform());
|
|
82
50
|
var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
|
|
@@ -90,28 +58,27 @@ function isWindow(value) {
|
|
|
90
58
|
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
91
59
|
}
|
|
92
60
|
function getDocument(el) {
|
|
93
|
-
var _a;
|
|
94
61
|
if (isWindow(el))
|
|
95
62
|
return el.document;
|
|
96
63
|
if (isDocument(el))
|
|
97
64
|
return el;
|
|
98
|
-
return (
|
|
65
|
+
return (el == null ? void 0 : el.ownerDocument) ?? document;
|
|
99
66
|
}
|
|
100
67
|
function defineDomHelpers(helpers) {
|
|
101
68
|
const dom2 = {
|
|
102
69
|
getRootNode: (ctx) => {
|
|
103
|
-
var _a, _b;
|
|
104
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
105
|
-
},
|
|
106
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
107
|
-
getWin: (ctx) => {
|
|
108
70
|
var _a;
|
|
109
|
-
return (_a =
|
|
71
|
+
return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
|
|
110
72
|
},
|
|
73
|
+
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
74
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
111
75
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
112
76
|
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
113
77
|
};
|
|
114
|
-
return
|
|
78
|
+
return {
|
|
79
|
+
...dom2,
|
|
80
|
+
...helpers
|
|
81
|
+
};
|
|
115
82
|
}
|
|
116
83
|
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
117
84
|
var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
|
|
@@ -163,10 +130,9 @@ var sameKeyMap = {
|
|
|
163
130
|
Right: "ArrowRight"
|
|
164
131
|
};
|
|
165
132
|
function getEventKey(event, options = {}) {
|
|
166
|
-
var _a;
|
|
167
133
|
const { dir = "ltr", orientation = "horizontal" } = options;
|
|
168
134
|
let { key } = event;
|
|
169
|
-
key =
|
|
135
|
+
key = sameKeyMap[key] ?? key;
|
|
170
136
|
const isRtl = dir === "rtl" && orientation === "horizontal";
|
|
171
137
|
if (isRtl && key in rtlKeyMap) {
|
|
172
138
|
key = rtlKeyMap[key];
|
|
@@ -203,8 +169,7 @@ function addDomEvent(target, eventName, handler, options) {
|
|
|
203
169
|
};
|
|
204
170
|
}
|
|
205
171
|
function addPointerEvent(target, event, listener, options) {
|
|
206
|
-
|
|
207
|
-
const type = (_a = getEventName(event)) != null ? _a : event;
|
|
172
|
+
const type = getEventName(event) ?? event;
|
|
208
173
|
return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
|
|
209
174
|
}
|
|
210
175
|
function wrapHandler(fn, filter = false) {
|
|
@@ -215,8 +180,7 @@ function wrapHandler(fn, filter = false) {
|
|
|
215
180
|
}
|
|
216
181
|
function filterPrimaryPointer(fn) {
|
|
217
182
|
return (event) => {
|
|
218
|
-
|
|
219
|
-
const win = (_a = event.view) != null ? _a : window;
|
|
183
|
+
const win = event.view ?? window;
|
|
220
184
|
const isMouseEvent2 = event instanceof win.MouseEvent;
|
|
221
185
|
const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
|
|
222
186
|
if (isPrimary)
|
|
@@ -271,7 +235,7 @@ var state = "default";
|
|
|
271
235
|
var savedUserSelect = "";
|
|
272
236
|
var modifiedElementMap = /* @__PURE__ */ new WeakMap();
|
|
273
237
|
function disableTextSelection({ target, doc } = {}) {
|
|
274
|
-
const _document = doc
|
|
238
|
+
const _document = doc ?? document;
|
|
275
239
|
if (isIos()) {
|
|
276
240
|
if (state === "default") {
|
|
277
241
|
savedUserSelect = _document.documentElement.style.webkitUserSelect;
|
|
@@ -285,7 +249,7 @@ function disableTextSelection({ target, doc } = {}) {
|
|
|
285
249
|
return () => restoreTextSelection({ target, doc: _document });
|
|
286
250
|
}
|
|
287
251
|
function restoreTextSelection({ target, doc } = {}) {
|
|
288
|
-
const _document = doc
|
|
252
|
+
const _document = doc ?? document;
|
|
289
253
|
if (isIos()) {
|
|
290
254
|
if (state !== "disabled")
|
|
291
255
|
return;
|
|
@@ -305,7 +269,7 @@ function restoreTextSelection({ target, doc } = {}) {
|
|
|
305
269
|
if (target && modifiedElementMap.has(target)) {
|
|
306
270
|
let targetOldUserSelect = modifiedElementMap.get(target);
|
|
307
271
|
if (target.style.userSelect === "none") {
|
|
308
|
-
target.style.userSelect = targetOldUserSelect
|
|
272
|
+
target.style.userSelect = targetOldUserSelect ?? "";
|
|
309
273
|
}
|
|
310
274
|
if (target.getAttribute("style") === "") {
|
|
311
275
|
target.removeAttribute("style");
|
|
@@ -314,13 +278,13 @@ function restoreTextSelection({ target, doc } = {}) {
|
|
|
314
278
|
}
|
|
315
279
|
}
|
|
316
280
|
}
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
const {
|
|
281
|
+
var THRESHOLD = 5;
|
|
282
|
+
function trackPointerMove(doc, opts) {
|
|
283
|
+
const { onPointerMove, onPointerUp } = opts;
|
|
320
284
|
const handlePointerMove = (event, info) => {
|
|
321
285
|
const { point: p } = info;
|
|
322
|
-
const distance = Math.sqrt(
|
|
323
|
-
if (distance <
|
|
286
|
+
const distance = Math.sqrt(p.x ** 2 + p.y ** 2);
|
|
287
|
+
if (distance < THRESHOLD)
|
|
324
288
|
return;
|
|
325
289
|
if (isMouseEvent(event) && isLeftClick(event)) {
|
|
326
290
|
onPointerUp();
|
|
@@ -334,28 +298,28 @@ function trackPointerMove(opts) {
|
|
|
334
298
|
// src/splitter.dom.ts
|
|
335
299
|
var dom = defineDomHelpers({
|
|
336
300
|
getRootId: (ctx) => {
|
|
337
|
-
var _a
|
|
338
|
-
return (
|
|
301
|
+
var _a;
|
|
302
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `splitter:${ctx.id}`;
|
|
339
303
|
},
|
|
340
304
|
getSplitterId: (ctx) => {
|
|
341
|
-
var _a
|
|
342
|
-
return (
|
|
305
|
+
var _a;
|
|
306
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.splitter) ?? `splitter:${ctx.id}:splitter`;
|
|
343
307
|
},
|
|
344
308
|
getToggleButtonId: (ctx) => {
|
|
345
|
-
var _a
|
|
346
|
-
return (
|
|
309
|
+
var _a;
|
|
310
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.toggleBtn) ?? `splitter:${ctx.id}:toggle-btn`;
|
|
347
311
|
},
|
|
348
312
|
getLabelId: (ctx) => {
|
|
349
|
-
var _a
|
|
350
|
-
return (
|
|
313
|
+
var _a;
|
|
314
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.label) ?? `splitter:${ctx.id}:label`;
|
|
351
315
|
},
|
|
352
316
|
getPrimaryPaneId: (ctx) => {
|
|
353
|
-
var _a
|
|
354
|
-
return (
|
|
317
|
+
var _a;
|
|
318
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.primaryPane) ?? `splitter:${ctx.id}:primary`;
|
|
355
319
|
},
|
|
356
320
|
getSecondaryPaneId: (ctx) => {
|
|
357
|
-
var _a
|
|
358
|
-
return (
|
|
321
|
+
var _a;
|
|
322
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.secondaryPane) ?? `splitter:${ctx.id}:secondary`;
|
|
359
323
|
},
|
|
360
324
|
getSplitterEl: (ctx) => dom.getById(ctx, dom.getSplitterId(ctx)),
|
|
361
325
|
getPrimaryPaneEl: (ctx) => dom.getById(ctx, dom.getPrimaryPaneId(ctx)),
|
|
@@ -428,12 +392,13 @@ function connect(state2, send, normalize) {
|
|
|
428
392
|
id: dom.getPrimaryPaneId(state2.context),
|
|
429
393
|
"data-disabled": dataAttr(isDisabled),
|
|
430
394
|
"data-state": isAtMax ? "at-max" : isAtMin ? "at-min" : "between",
|
|
431
|
-
style:
|
|
395
|
+
style: {
|
|
432
396
|
visibility: "visible",
|
|
433
397
|
flex: `0 0 ${value}px`,
|
|
434
398
|
position: "relative",
|
|
435
|
-
userSelect: isDragging ? "none" : "auto"
|
|
436
|
-
|
|
399
|
+
userSelect: isDragging ? "none" : "auto",
|
|
400
|
+
...isHorizontal ? { minWidth: `${min}px`, maxWidth: `${max}px` } : { minHeight: `${min}px`, maxHeight: `${max}px` }
|
|
401
|
+
}
|
|
437
402
|
}),
|
|
438
403
|
toggleButtonProps: normalize.element({
|
|
439
404
|
"data-part": "toggle-button",
|
|
@@ -540,10 +505,9 @@ function connect(state2, send, normalize) {
|
|
|
540
505
|
var import_core = require("@zag-js/core");
|
|
541
506
|
|
|
542
507
|
// ../../utilities/number/dist/index.mjs
|
|
543
|
-
var __pow2 = Math.pow;
|
|
544
508
|
function round(v, t) {
|
|
545
509
|
let num = valueOf(v);
|
|
546
|
-
const p =
|
|
510
|
+
const p = 10 ** (t ?? 10);
|
|
547
511
|
num = Math.round(num * p) / p;
|
|
548
512
|
return t ? num.toFixed(t) : v.toString();
|
|
549
513
|
}
|
|
@@ -577,7 +541,7 @@ function valueOf(v) {
|
|
|
577
541
|
function decimalOperation(a, op, b) {
|
|
578
542
|
let result = op === "+" ? a + b : a - b;
|
|
579
543
|
if (a % 1 !== 0 || b % 1 !== 0) {
|
|
580
|
-
const multiplier =
|
|
544
|
+
const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
|
|
581
545
|
a = Math.round(a * multiplier);
|
|
582
546
|
b = Math.round(b * multiplier);
|
|
583
547
|
result = op === "+" ? a + b : a - b;
|
|
@@ -593,14 +557,15 @@ function machine(ctx) {
|
|
|
593
557
|
return (0, import_core.createMachine)({
|
|
594
558
|
id: "splitter",
|
|
595
559
|
initial: "unknown",
|
|
596
|
-
context:
|
|
560
|
+
context: {
|
|
597
561
|
orientation: "horizontal",
|
|
598
562
|
min: 224,
|
|
599
563
|
max: 340,
|
|
600
564
|
step: 1,
|
|
601
565
|
value: 256,
|
|
602
|
-
snapOffset: 0
|
|
603
|
-
|
|
566
|
+
snapOffset: 0,
|
|
567
|
+
...ctx
|
|
568
|
+
},
|
|
604
569
|
computed: {
|
|
605
570
|
isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
|
|
606
571
|
isAtMin: (ctx2) => ctx2.value === ctx2.min,
|
|
@@ -725,16 +690,15 @@ function machine(ctx) {
|
|
|
725
690
|
}, {
|
|
726
691
|
activities: {
|
|
727
692
|
trackPointerMove: (ctx2, _evt, { send }) => {
|
|
728
|
-
const
|
|
729
|
-
return trackPointerMove({
|
|
730
|
-
ctx: ctx2,
|
|
693
|
+
const doc = dom.getDoc(ctx2);
|
|
694
|
+
return trackPointerMove(doc, {
|
|
731
695
|
onPointerMove(info) {
|
|
732
696
|
send({ type: "POINTER_MOVE", point: info.point });
|
|
733
|
-
|
|
697
|
+
doc.documentElement.style.cursor = dom.getCursor(ctx2);
|
|
734
698
|
},
|
|
735
699
|
onPointerUp() {
|
|
736
700
|
send("POINTER_UP");
|
|
737
|
-
|
|
701
|
+
doc.documentElement.style.cursor = "";
|
|
738
702
|
}
|
|
739
703
|
});
|
|
740
704
|
}
|
|
@@ -798,3 +762,8 @@ function machine(ctx) {
|
|
|
798
762
|
}
|
|
799
763
|
});
|
|
800
764
|
}
|
|
765
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
766
|
+
0 && (module.exports = {
|
|
767
|
+
connect,
|
|
768
|
+
machine
|
|
769
|
+
});
|
package/dist/index.mjs
CHANGED
|
@@ -1,44 +1,10 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
-
var __spreadValues = (a, b) => {
|
|
7
|
-
for (var prop in b || (b = {}))
|
|
8
|
-
if (__hasOwnProp.call(b, prop))
|
|
9
|
-
__defNormalProp(a, prop, b[prop]);
|
|
10
|
-
if (__getOwnPropSymbols)
|
|
11
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
-
if (__propIsEnum.call(b, prop))
|
|
13
|
-
__defNormalProp(a, prop, b[prop]);
|
|
14
|
-
}
|
|
15
|
-
return a;
|
|
16
|
-
};
|
|
17
|
-
|
|
18
1
|
// ../../utilities/dom/dist/index.mjs
|
|
19
|
-
var __defProp2 = Object.defineProperty;
|
|
20
|
-
var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
|
|
21
|
-
var __hasOwnProp2 = Object.prototype.hasOwnProperty;
|
|
22
|
-
var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
|
|
23
|
-
var __pow = Math.pow;
|
|
24
|
-
var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
25
|
-
var __spreadValues2 = (a, b) => {
|
|
26
|
-
for (var prop in b || (b = {}))
|
|
27
|
-
if (__hasOwnProp2.call(b, prop))
|
|
28
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
29
|
-
if (__getOwnPropSymbols2)
|
|
30
|
-
for (var prop of __getOwnPropSymbols2(b)) {
|
|
31
|
-
if (__propIsEnum2.call(b, prop))
|
|
32
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
33
|
-
}
|
|
34
|
-
return a;
|
|
35
|
-
};
|
|
36
2
|
var dataAttr = (guard) => {
|
|
37
3
|
return guard ? "" : void 0;
|
|
38
4
|
};
|
|
39
5
|
var runIfFn = (v, ...a) => {
|
|
40
6
|
const res = typeof v === "function" ? v(...a) : v;
|
|
41
|
-
return res
|
|
7
|
+
return res ?? void 0;
|
|
42
8
|
};
|
|
43
9
|
var callAll = (...fns) => (...a) => {
|
|
44
10
|
fns.forEach(function(fn) {
|
|
@@ -50,9 +16,8 @@ var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
|
50
16
|
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
51
17
|
var isDom = () => typeof window !== "undefined";
|
|
52
18
|
function getPlatform() {
|
|
53
|
-
var _a;
|
|
54
19
|
const agent = navigator.userAgentData;
|
|
55
|
-
return (
|
|
20
|
+
return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
|
|
56
21
|
}
|
|
57
22
|
var pt = (v) => isDom() && v.test(getPlatform());
|
|
58
23
|
var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
|
|
@@ -66,28 +31,27 @@ function isWindow(value) {
|
|
|
66
31
|
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
67
32
|
}
|
|
68
33
|
function getDocument(el) {
|
|
69
|
-
var _a;
|
|
70
34
|
if (isWindow(el))
|
|
71
35
|
return el.document;
|
|
72
36
|
if (isDocument(el))
|
|
73
37
|
return el;
|
|
74
|
-
return (
|
|
38
|
+
return (el == null ? void 0 : el.ownerDocument) ?? document;
|
|
75
39
|
}
|
|
76
40
|
function defineDomHelpers(helpers) {
|
|
77
41
|
const dom2 = {
|
|
78
42
|
getRootNode: (ctx) => {
|
|
79
|
-
var _a, _b;
|
|
80
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
81
|
-
},
|
|
82
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
83
|
-
getWin: (ctx) => {
|
|
84
43
|
var _a;
|
|
85
|
-
return (_a =
|
|
44
|
+
return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
|
|
86
45
|
},
|
|
46
|
+
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
47
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
87
48
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
88
49
|
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
89
50
|
};
|
|
90
|
-
return
|
|
51
|
+
return {
|
|
52
|
+
...dom2,
|
|
53
|
+
...helpers
|
|
54
|
+
};
|
|
91
55
|
}
|
|
92
56
|
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
93
57
|
var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
|
|
@@ -139,10 +103,9 @@ var sameKeyMap = {
|
|
|
139
103
|
Right: "ArrowRight"
|
|
140
104
|
};
|
|
141
105
|
function getEventKey(event, options = {}) {
|
|
142
|
-
var _a;
|
|
143
106
|
const { dir = "ltr", orientation = "horizontal" } = options;
|
|
144
107
|
let { key } = event;
|
|
145
|
-
key =
|
|
108
|
+
key = sameKeyMap[key] ?? key;
|
|
146
109
|
const isRtl = dir === "rtl" && orientation === "horizontal";
|
|
147
110
|
if (isRtl && key in rtlKeyMap) {
|
|
148
111
|
key = rtlKeyMap[key];
|
|
@@ -179,8 +142,7 @@ function addDomEvent(target, eventName, handler, options) {
|
|
|
179
142
|
};
|
|
180
143
|
}
|
|
181
144
|
function addPointerEvent(target, event, listener, options) {
|
|
182
|
-
|
|
183
|
-
const type = (_a = getEventName(event)) != null ? _a : event;
|
|
145
|
+
const type = getEventName(event) ?? event;
|
|
184
146
|
return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
|
|
185
147
|
}
|
|
186
148
|
function wrapHandler(fn, filter = false) {
|
|
@@ -191,8 +153,7 @@ function wrapHandler(fn, filter = false) {
|
|
|
191
153
|
}
|
|
192
154
|
function filterPrimaryPointer(fn) {
|
|
193
155
|
return (event) => {
|
|
194
|
-
|
|
195
|
-
const win = (_a = event.view) != null ? _a : window;
|
|
156
|
+
const win = event.view ?? window;
|
|
196
157
|
const isMouseEvent2 = event instanceof win.MouseEvent;
|
|
197
158
|
const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
|
|
198
159
|
if (isPrimary)
|
|
@@ -247,7 +208,7 @@ var state = "default";
|
|
|
247
208
|
var savedUserSelect = "";
|
|
248
209
|
var modifiedElementMap = /* @__PURE__ */ new WeakMap();
|
|
249
210
|
function disableTextSelection({ target, doc } = {}) {
|
|
250
|
-
const _document = doc
|
|
211
|
+
const _document = doc ?? document;
|
|
251
212
|
if (isIos()) {
|
|
252
213
|
if (state === "default") {
|
|
253
214
|
savedUserSelect = _document.documentElement.style.webkitUserSelect;
|
|
@@ -261,7 +222,7 @@ function disableTextSelection({ target, doc } = {}) {
|
|
|
261
222
|
return () => restoreTextSelection({ target, doc: _document });
|
|
262
223
|
}
|
|
263
224
|
function restoreTextSelection({ target, doc } = {}) {
|
|
264
|
-
const _document = doc
|
|
225
|
+
const _document = doc ?? document;
|
|
265
226
|
if (isIos()) {
|
|
266
227
|
if (state !== "disabled")
|
|
267
228
|
return;
|
|
@@ -281,7 +242,7 @@ function restoreTextSelection({ target, doc } = {}) {
|
|
|
281
242
|
if (target && modifiedElementMap.has(target)) {
|
|
282
243
|
let targetOldUserSelect = modifiedElementMap.get(target);
|
|
283
244
|
if (target.style.userSelect === "none") {
|
|
284
|
-
target.style.userSelect = targetOldUserSelect
|
|
245
|
+
target.style.userSelect = targetOldUserSelect ?? "";
|
|
285
246
|
}
|
|
286
247
|
if (target.getAttribute("style") === "") {
|
|
287
248
|
target.removeAttribute("style");
|
|
@@ -290,13 +251,13 @@ function restoreTextSelection({ target, doc } = {}) {
|
|
|
290
251
|
}
|
|
291
252
|
}
|
|
292
253
|
}
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
const {
|
|
254
|
+
var THRESHOLD = 5;
|
|
255
|
+
function trackPointerMove(doc, opts) {
|
|
256
|
+
const { onPointerMove, onPointerUp } = opts;
|
|
296
257
|
const handlePointerMove = (event, info) => {
|
|
297
258
|
const { point: p } = info;
|
|
298
|
-
const distance = Math.sqrt(
|
|
299
|
-
if (distance <
|
|
259
|
+
const distance = Math.sqrt(p.x ** 2 + p.y ** 2);
|
|
260
|
+
if (distance < THRESHOLD)
|
|
300
261
|
return;
|
|
301
262
|
if (isMouseEvent(event) && isLeftClick(event)) {
|
|
302
263
|
onPointerUp();
|
|
@@ -310,28 +271,28 @@ function trackPointerMove(opts) {
|
|
|
310
271
|
// src/splitter.dom.ts
|
|
311
272
|
var dom = defineDomHelpers({
|
|
312
273
|
getRootId: (ctx) => {
|
|
313
|
-
var _a
|
|
314
|
-
return (
|
|
274
|
+
var _a;
|
|
275
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `splitter:${ctx.id}`;
|
|
315
276
|
},
|
|
316
277
|
getSplitterId: (ctx) => {
|
|
317
|
-
var _a
|
|
318
|
-
return (
|
|
278
|
+
var _a;
|
|
279
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.splitter) ?? `splitter:${ctx.id}:splitter`;
|
|
319
280
|
},
|
|
320
281
|
getToggleButtonId: (ctx) => {
|
|
321
|
-
var _a
|
|
322
|
-
return (
|
|
282
|
+
var _a;
|
|
283
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.toggleBtn) ?? `splitter:${ctx.id}:toggle-btn`;
|
|
323
284
|
},
|
|
324
285
|
getLabelId: (ctx) => {
|
|
325
|
-
var _a
|
|
326
|
-
return (
|
|
286
|
+
var _a;
|
|
287
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.label) ?? `splitter:${ctx.id}:label`;
|
|
327
288
|
},
|
|
328
289
|
getPrimaryPaneId: (ctx) => {
|
|
329
|
-
var _a
|
|
330
|
-
return (
|
|
290
|
+
var _a;
|
|
291
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.primaryPane) ?? `splitter:${ctx.id}:primary`;
|
|
331
292
|
},
|
|
332
293
|
getSecondaryPaneId: (ctx) => {
|
|
333
|
-
var _a
|
|
334
|
-
return (
|
|
294
|
+
var _a;
|
|
295
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.secondaryPane) ?? `splitter:${ctx.id}:secondary`;
|
|
335
296
|
},
|
|
336
297
|
getSplitterEl: (ctx) => dom.getById(ctx, dom.getSplitterId(ctx)),
|
|
337
298
|
getPrimaryPaneEl: (ctx) => dom.getById(ctx, dom.getPrimaryPaneId(ctx)),
|
|
@@ -404,12 +365,13 @@ function connect(state2, send, normalize) {
|
|
|
404
365
|
id: dom.getPrimaryPaneId(state2.context),
|
|
405
366
|
"data-disabled": dataAttr(isDisabled),
|
|
406
367
|
"data-state": isAtMax ? "at-max" : isAtMin ? "at-min" : "between",
|
|
407
|
-
style:
|
|
368
|
+
style: {
|
|
408
369
|
visibility: "visible",
|
|
409
370
|
flex: `0 0 ${value}px`,
|
|
410
371
|
position: "relative",
|
|
411
|
-
userSelect: isDragging ? "none" : "auto"
|
|
412
|
-
|
|
372
|
+
userSelect: isDragging ? "none" : "auto",
|
|
373
|
+
...isHorizontal ? { minWidth: `${min}px`, maxWidth: `${max}px` } : { minHeight: `${min}px`, maxHeight: `${max}px` }
|
|
374
|
+
}
|
|
413
375
|
}),
|
|
414
376
|
toggleButtonProps: normalize.element({
|
|
415
377
|
"data-part": "toggle-button",
|
|
@@ -516,10 +478,9 @@ function connect(state2, send, normalize) {
|
|
|
516
478
|
import { createMachine, guards } from "@zag-js/core";
|
|
517
479
|
|
|
518
480
|
// ../../utilities/number/dist/index.mjs
|
|
519
|
-
var __pow2 = Math.pow;
|
|
520
481
|
function round(v, t) {
|
|
521
482
|
let num = valueOf(v);
|
|
522
|
-
const p =
|
|
483
|
+
const p = 10 ** (t ?? 10);
|
|
523
484
|
num = Math.round(num * p) / p;
|
|
524
485
|
return t ? num.toFixed(t) : v.toString();
|
|
525
486
|
}
|
|
@@ -553,7 +514,7 @@ function valueOf(v) {
|
|
|
553
514
|
function decimalOperation(a, op, b) {
|
|
554
515
|
let result = op === "+" ? a + b : a - b;
|
|
555
516
|
if (a % 1 !== 0 || b % 1 !== 0) {
|
|
556
|
-
const multiplier =
|
|
517
|
+
const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
|
|
557
518
|
a = Math.round(a * multiplier);
|
|
558
519
|
b = Math.round(b * multiplier);
|
|
559
520
|
result = op === "+" ? a + b : a - b;
|
|
@@ -569,14 +530,15 @@ function machine(ctx) {
|
|
|
569
530
|
return createMachine({
|
|
570
531
|
id: "splitter",
|
|
571
532
|
initial: "unknown",
|
|
572
|
-
context:
|
|
533
|
+
context: {
|
|
573
534
|
orientation: "horizontal",
|
|
574
535
|
min: 224,
|
|
575
536
|
max: 340,
|
|
576
537
|
step: 1,
|
|
577
538
|
value: 256,
|
|
578
|
-
snapOffset: 0
|
|
579
|
-
|
|
539
|
+
snapOffset: 0,
|
|
540
|
+
...ctx
|
|
541
|
+
},
|
|
580
542
|
computed: {
|
|
581
543
|
isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
|
|
582
544
|
isAtMin: (ctx2) => ctx2.value === ctx2.min,
|
|
@@ -701,16 +663,15 @@ function machine(ctx) {
|
|
|
701
663
|
}, {
|
|
702
664
|
activities: {
|
|
703
665
|
trackPointerMove: (ctx2, _evt, { send }) => {
|
|
704
|
-
const
|
|
705
|
-
return trackPointerMove({
|
|
706
|
-
ctx: ctx2,
|
|
666
|
+
const doc = dom.getDoc(ctx2);
|
|
667
|
+
return trackPointerMove(doc, {
|
|
707
668
|
onPointerMove(info) {
|
|
708
669
|
send({ type: "POINTER_MOVE", point: info.point });
|
|
709
|
-
|
|
670
|
+
doc.documentElement.style.cursor = dom.getCursor(ctx2);
|
|
710
671
|
},
|
|
711
672
|
onPointerUp() {
|
|
712
673
|
send("POINTER_UP");
|
|
713
|
-
|
|
674
|
+
doc.documentElement.style.cursor = "";
|
|
714
675
|
}
|
|
715
676
|
});
|
|
716
677
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/splitter",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.11",
|
|
4
4
|
"description": "Core logic for the splitter widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -30,20 +30,21 @@
|
|
|
30
30
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@zag-js/core": "0.1.
|
|
34
|
-
"@zag-js/types": "0.2.
|
|
33
|
+
"@zag-js/core": "0.1.9",
|
|
34
|
+
"@zag-js/types": "0.2.3"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@zag-js/dom-utils": "0.1.
|
|
38
|
-
"@zag-js/number-utils": "0.1.
|
|
37
|
+
"@zag-js/dom-utils": "0.1.8",
|
|
38
|
+
"@zag-js/number-utils": "0.1.3"
|
|
39
39
|
},
|
|
40
40
|
"scripts": {
|
|
41
|
-
"build
|
|
42
|
-
"start": "
|
|
43
|
-
"build": "
|
|
41
|
+
"build-fast": "tsup src/index.ts --format=esm,cjs",
|
|
42
|
+
"start": "pnpm build --watch",
|
|
43
|
+
"build": "tsup src/index.ts --format=esm,cjs --dts",
|
|
44
44
|
"test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
|
|
45
45
|
"lint": "eslint src --ext .ts,.tsx",
|
|
46
|
-
"test
|
|
47
|
-
"test
|
|
46
|
+
"test-ci": "pnpm test --ci --runInBand",
|
|
47
|
+
"test-watch": "pnpm test --watch -u",
|
|
48
|
+
"typecheck": "tsc --noEmit"
|
|
48
49
|
}
|
|
49
|
-
}
|
|
50
|
+
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import type { NormalizeProps, PropTypes } from "@zag-js/types";
|
|
2
|
-
import type { Send, State } from "./splitter.types";
|
|
3
|
-
export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
|
|
4
|
-
isCollapsed: boolean;
|
|
5
|
-
isExpanded: boolean;
|
|
6
|
-
isFocused: boolean;
|
|
7
|
-
isDragging: boolean;
|
|
8
|
-
value: number;
|
|
9
|
-
collapse(): void;
|
|
10
|
-
expand(): void;
|
|
11
|
-
toggle(): void;
|
|
12
|
-
setSize(size: number): void;
|
|
13
|
-
rootProps: T["element"];
|
|
14
|
-
secondaryPaneProps: T["element"];
|
|
15
|
-
primaryPaneProps: T["element"];
|
|
16
|
-
toggleButtonProps: T["element"];
|
|
17
|
-
labelProps: T["element"];
|
|
18
|
-
splitterProps: T["element"];
|
|
19
|
-
};
|
package/dist/splitter.dom.d.ts
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import type { MachineContext as Ctx } from "./splitter.types";
|
|
2
|
-
export declare const dom: {
|
|
3
|
-
getRootNode: (ctx: {
|
|
4
|
-
getRootNode?: () => Node | Document | ShadowRoot;
|
|
5
|
-
}) => Document | ShadowRoot;
|
|
6
|
-
getDoc: (ctx: {
|
|
7
|
-
getRootNode?: () => Node | Document | ShadowRoot;
|
|
8
|
-
}) => Document;
|
|
9
|
-
getWin: (ctx: {
|
|
10
|
-
getRootNode?: () => Node | Document | ShadowRoot;
|
|
11
|
-
}) => Window & typeof globalThis;
|
|
12
|
-
getActiveElement: (ctx: {
|
|
13
|
-
getRootNode?: () => Node | Document | ShadowRoot;
|
|
14
|
-
}) => HTMLElement;
|
|
15
|
-
getById: <T_1 = HTMLElement>(ctx: {
|
|
16
|
-
getRootNode?: () => Node | Document | ShadowRoot;
|
|
17
|
-
}, id: string) => T_1;
|
|
18
|
-
} & {
|
|
19
|
-
getRootId: (ctx: Ctx) => string;
|
|
20
|
-
getSplitterId: (ctx: Ctx) => string;
|
|
21
|
-
getToggleButtonId: (ctx: Ctx) => string;
|
|
22
|
-
getLabelId: (ctx: Ctx) => string;
|
|
23
|
-
getPrimaryPaneId: (ctx: Ctx) => string;
|
|
24
|
-
getSecondaryPaneId: (ctx: Ctx) => string;
|
|
25
|
-
getSplitterEl: (ctx: Ctx) => HTMLElement;
|
|
26
|
-
getPrimaryPaneEl: (ctx: Ctx) => HTMLElement;
|
|
27
|
-
getCursor(ctx: Ctx): "default" | (string & {}) | "col-resize" | "e-resize" | "n-resize" | "row-resize" | "s-resize" | "w-resize";
|
|
28
|
-
};
|
package/dist/splitter.types.d.ts
DELETED
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
import type { StateMachine as S } from "@zag-js/core";
|
|
2
|
-
import type { CommonProperties, Context, DirectionProperty, RequiredBy } from "@zag-js/types";
|
|
3
|
-
declare type ElementIds = Partial<{
|
|
4
|
-
root: string;
|
|
5
|
-
splitter: string;
|
|
6
|
-
label: string;
|
|
7
|
-
toggleBtn: string;
|
|
8
|
-
primaryPane: string;
|
|
9
|
-
secondaryPane: string;
|
|
10
|
-
}>;
|
|
11
|
-
declare type PublicContext = DirectionProperty & CommonProperties & {
|
|
12
|
-
/**
|
|
13
|
-
* The ids of the elements in the splitter. Useful for composition.
|
|
14
|
-
*/
|
|
15
|
-
ids?: ElementIds;
|
|
16
|
-
/**
|
|
17
|
-
* Whether to allow the separator to be dragged.
|
|
18
|
-
*/
|
|
19
|
-
fixed?: boolean;
|
|
20
|
-
/**
|
|
21
|
-
* The orientation of the split view.
|
|
22
|
-
*/
|
|
23
|
-
orientation: "horizontal" | "vertical";
|
|
24
|
-
/**
|
|
25
|
-
* The minimum size of the primary pane.
|
|
26
|
-
*/
|
|
27
|
-
min: number;
|
|
28
|
-
/**
|
|
29
|
-
* The maximum size of the primary pane.
|
|
30
|
-
*/
|
|
31
|
-
max: number;
|
|
32
|
-
/**
|
|
33
|
-
* The size of the primary pane.
|
|
34
|
-
*/
|
|
35
|
-
value: number;
|
|
36
|
-
/**
|
|
37
|
-
* The step increments of the primary pane when it is dragged
|
|
38
|
-
* or resized with keyboard.
|
|
39
|
-
*/
|
|
40
|
-
step: number;
|
|
41
|
-
/**
|
|
42
|
-
* Callback to be invoked when the primary pane is resized.
|
|
43
|
-
*/
|
|
44
|
-
onChange?: (details: {
|
|
45
|
-
value: number;
|
|
46
|
-
}) => void;
|
|
47
|
-
/**
|
|
48
|
-
* Callback to be invoked when the primary pane's resize session starts
|
|
49
|
-
*/
|
|
50
|
-
onChangeStart?: (details: {
|
|
51
|
-
value: number;
|
|
52
|
-
}) => void;
|
|
53
|
-
/**
|
|
54
|
-
* Callback to be invoked when the primary pane's resize session ends
|
|
55
|
-
*/
|
|
56
|
-
onChangeEnd?: (details: {
|
|
57
|
-
value: number;
|
|
58
|
-
}) => void;
|
|
59
|
-
/**
|
|
60
|
-
* Whether the primary pane is disabled.
|
|
61
|
-
*/
|
|
62
|
-
disabled?: boolean;
|
|
63
|
-
/**
|
|
64
|
-
* The minimum offset needed to snap the primary pane to its minimum or maximum size.
|
|
65
|
-
*/
|
|
66
|
-
snapOffset: number;
|
|
67
|
-
};
|
|
68
|
-
export declare type UserDefinedContext = RequiredBy<PublicContext, "id">;
|
|
69
|
-
declare type ComputedContext = Readonly<{
|
|
70
|
-
/**
|
|
71
|
-
* @computed
|
|
72
|
-
* Whether the primary pane is at its minimum size.
|
|
73
|
-
*/
|
|
74
|
-
isAtMin: boolean;
|
|
75
|
-
/**
|
|
76
|
-
* @computed
|
|
77
|
-
* Whether the primary pane is at its maximum size.
|
|
78
|
-
*/
|
|
79
|
-
isAtMax: boolean;
|
|
80
|
-
/**
|
|
81
|
-
* @computed
|
|
82
|
-
* Whether the orientation is horizontal.
|
|
83
|
-
*/
|
|
84
|
-
isHorizontal: boolean;
|
|
85
|
-
}>;
|
|
86
|
-
declare type PrivateContext = Context<{}>;
|
|
87
|
-
export declare type MachineContext = PublicContext & ComputedContext & PrivateContext;
|
|
88
|
-
export declare type MachineState = {
|
|
89
|
-
value: "unknown" | "idle" | "hover:temp" | "hover" | "dragging" | "focused";
|
|
90
|
-
tags: "focus";
|
|
91
|
-
};
|
|
92
|
-
export declare type State = S.State<MachineContext, MachineState>;
|
|
93
|
-
export declare type Send = S.Send<S.AnyEventObject>;
|
|
94
|
-
export {};
|