@zag-js/splitter 0.1.7 → 0.1.10

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/dist/index.mjs CHANGED
@@ -16,122 +16,154 @@ var __spreadValues = (a, b) => {
16
16
  };
17
17
 
18
18
  // ../../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;
19
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
+ };
20
36
  var dataAttr = (guard) => {
21
37
  return guard ? "" : void 0;
22
38
  };
23
- function nextTick(fn) {
24
- const set = /* @__PURE__ */ new Set();
25
- function raf2(fn2) {
26
- const id = globalThis.requestAnimationFrame(fn2);
27
- set.add(() => globalThis.cancelAnimationFrame(id));
28
- }
29
- raf2(() => raf2(fn));
30
- return function cleanup() {
31
- set.forEach(function(fn2) {
32
- fn2();
33
- });
34
- };
35
- }
36
- function raf(fn) {
37
- const id = globalThis.requestAnimationFrame(fn);
38
- return function cleanup() {
39
- globalThis.cancelAnimationFrame(id);
40
- };
41
- }
42
- var isDom = () => typeof window !== "undefined";
39
+ var runIfFn = (v, ...a) => {
40
+ const res = typeof v === "function" ? v(...a) : v;
41
+ return res != null ? res : void 0;
42
+ };
43
+ var callAll = (...fns) => (...a) => {
44
+ fns.forEach(function(fn) {
45
+ fn == null ? void 0 : fn(...a);
46
+ });
47
+ };
43
48
  var isArray = (v) => Array.isArray(v);
44
49
  var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
45
50
  var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
51
+ var isDom = () => typeof window !== "undefined";
46
52
  function getPlatform() {
47
53
  var _a;
48
54
  const agent = navigator.userAgentData;
49
55
  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
50
56
  }
51
57
  var pt = (v) => isDom() && v.test(getPlatform());
52
- var isTouchDevice = isDom() && !!navigator.maxTouchPoints;
58
+ var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
53
59
  var isMac = () => pt(/^Mac/) && !isTouchDevice;
54
60
  var isApple = () => pt(/mac|iphone|ipad|ipod/i);
55
61
  var isIos = () => isApple() && !isMac();
62
+ function isDocument(el) {
63
+ return el.nodeType === Node.DOCUMENT_NODE;
64
+ }
65
+ function isWindow(value) {
66
+ return (value == null ? void 0 : value.toString()) === "[object Window]";
67
+ }
68
+ function getDocument(el) {
69
+ var _a;
70
+ if (isWindow(el))
71
+ return el.document;
72
+ if (isDocument(el))
73
+ return el;
74
+ return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
75
+ }
76
+ function defineDomHelpers(helpers) {
77
+ const dom2 = {
78
+ 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
+ var _a;
85
+ return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
86
+ },
87
+ getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
88
+ getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
89
+ };
90
+ return __spreadValues2(__spreadValues2({}, dom2), helpers);
91
+ }
56
92
  var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
57
93
  var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
58
94
  var supportsMouseEvent = () => isDom() && window.onmousedown === null;
59
95
  var isMouseEvent = (v) => isObject(v) && hasProp(v, "button");
60
96
  var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
61
97
  var isLeftClick = (v) => v.button === 0;
62
- var runIfFn = (v, ...a) => {
63
- const res = typeof v === "function" ? v(...a) : v;
64
- return res != null ? res : void 0;
65
- };
66
- var noop = () => {
67
- };
68
- var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
69
- function getListenerElements() {
70
- ;
71
- globalThis.__listenerElements__ = globalThis.__listenerElements__ || /* @__PURE__ */ new Map();
72
- return globalThis.__listenerElements__;
98
+ function getElementOffset(element) {
99
+ let left = 0;
100
+ let top = 0;
101
+ let el = element;
102
+ if (el.parentNode) {
103
+ do {
104
+ left += el.offsetLeft;
105
+ top += el.offsetTop;
106
+ } while ((el = el.offsetParent) && el.nodeType < 9);
107
+ el = element;
108
+ do {
109
+ left -= el.scrollLeft;
110
+ top -= el.scrollTop;
111
+ } while ((el = el.parentNode) && !/body/i.test(el.nodeName));
112
+ }
113
+ return {
114
+ top,
115
+ right: innerWidth - left - element.offsetWidth,
116
+ bottom: innerHeight - top - element.offsetHeight,
117
+ left
118
+ };
73
119
  }
74
- function getListenerCache() {
75
- ;
76
- globalThis.__listenerCache__ = globalThis.__listenerCache__ || /* @__PURE__ */ new Map();
77
- return globalThis.__listenerCache__;
120
+ function getPointRelativeToNode(point, element) {
121
+ const offset = getElementOffset(element);
122
+ const x = point.x - offset.left;
123
+ const y = point.y - offset.top;
124
+ return { x, y };
78
125
  }
79
- function addGlobalEventListener(node, type, handler, options) {
126
+ var rtlKeyMap = {
127
+ ArrowLeft: "ArrowRight",
128
+ ArrowRight: "ArrowLeft",
129
+ Home: "End",
130
+ End: "Home"
131
+ };
132
+ var sameKeyMap = {
133
+ Up: "ArrowUp",
134
+ Down: "ArrowDown",
135
+ Esc: "Escape",
136
+ " ": "Space",
137
+ ",": "Comma",
138
+ Left: "ArrowLeft",
139
+ Right: "ArrowRight"
140
+ };
141
+ function getEventKey(event, options = {}) {
80
142
  var _a;
81
- if (!node)
82
- return noop;
83
- const hash = JSON.stringify({ type, options });
84
- const listenerElements = getListenerElements();
85
- const listenerCache = getListenerCache();
86
- const group = listenerElements.get(node);
87
- if (!listenerElements.has(node)) {
88
- const group2 = /* @__PURE__ */ new Map([[hash, /* @__PURE__ */ new Set([handler])]]);
89
- listenerElements.set(node, group2);
90
- } else if (group == null ? void 0 : group.has(hash)) {
91
- (_a = group == null ? void 0 : group.get(hash)) == null ? void 0 : _a.add(handler);
92
- } else {
93
- group == null ? void 0 : group.set(hash, /* @__PURE__ */ new Set([handler]));
143
+ const { dir = "ltr", orientation = "horizontal" } = options;
144
+ let { key } = event;
145
+ key = (_a = sameKeyMap[key]) != null ? _a : key;
146
+ const isRtl = dir === "rtl" && orientation === "horizontal";
147
+ if (isRtl && key in rtlKeyMap) {
148
+ key = rtlKeyMap[key];
94
149
  }
95
- function attach(node2) {
96
- var _a2, _b;
97
- function listener(event) {
98
- var _a3;
99
- const group2 = listenerElements.get(node2);
100
- (_a3 = group2 == null ? void 0 : group2.get(hash)) == null ? void 0 : _a3.forEach((fn) => fn(event));
101
- }
102
- if (!(listenerCache == null ? void 0 : listenerCache.has(node2))) {
103
- listenerCache.set(node2, /* @__PURE__ */ new Map([[hash, listener]]));
104
- node2.addEventListener(type, listener, options);
105
- return;
106
- }
107
- if (!((_a2 = listenerCache == null ? void 0 : listenerCache.get(node2)) == null ? void 0 : _a2.has(hash))) {
108
- (_b = listenerCache.get(node2)) == null ? void 0 : _b.set(hash, listener);
109
- node2.addEventListener(type, listener, options);
110
- }
150
+ return key;
151
+ }
152
+ var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
153
+ var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
154
+ function getEventStep(event) {
155
+ if (event.ctrlKey || event.metaKey) {
156
+ return 0.1;
157
+ } else {
158
+ const isPageKey = PAGE_KEYS.has(event.key);
159
+ const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.has(event.key);
160
+ return isSkipKey ? 10 : 1;
111
161
  }
112
- attach(node);
113
- return function remove() {
114
- var _a2, _b, _c, _d;
115
- if (!listenerElements.has(node))
116
- return;
117
- const group2 = listenerElements.get(node);
118
- (_a2 = group2 == null ? void 0 : group2.get(hash)) == null ? void 0 : _a2.delete(handler);
119
- if (((_b = group2 == null ? void 0 : group2.get(hash)) == null ? void 0 : _b.size) === 0) {
120
- const listener = (_c = listenerCache.get(node)) == null ? void 0 : _c.get(hash);
121
- node.removeEventListener(type, listener, options);
122
- group2 == null ? void 0 : group2.delete(hash);
123
- (_d = listenerCache.get(node)) == null ? void 0 : _d.delete(hash);
124
- if ((group2 == null ? void 0 : group2.size) === 0) {
125
- listenerElements.delete(node);
126
- listenerCache.delete(node);
127
- }
128
- }
129
- };
130
162
  }
131
163
  var isRef = (v) => hasProp(v, "current");
132
- var fallback = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
164
+ var fallback2 = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
133
165
  function extractInfo(event, type = "page") {
134
- const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback : event;
166
+ const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback2 : event;
135
167
  return {
136
168
  point: {
137
169
  x: point[`${type}X`],
@@ -139,9 +171,12 @@ function extractInfo(event, type = "page") {
139
171
  }
140
172
  };
141
173
  }
142
- function addDomEvent(target, event, listener, options) {
174
+ function addDomEvent(target, eventName, handler, options) {
143
175
  const node = isRef(target) ? target.current : runIfFn(target);
144
- return addGlobalEventListener(node, event, listener, options);
176
+ node == null ? void 0 : node.addEventListener(eventName, handler, options);
177
+ return () => {
178
+ node == null ? void 0 : node.removeEventListener(eventName, handler, options);
179
+ };
145
180
  }
146
181
  function addPointerEvent(target, event, listener, options) {
147
182
  var _a;
@@ -189,66 +224,24 @@ function getEventName(evt) {
189
224
  return mouseEventNames[evt];
190
225
  return evt;
191
226
  }
192
- var rtlKeyMap = {
193
- ArrowLeft: "ArrowRight",
194
- ArrowRight: "ArrowLeft",
195
- Home: "End",
196
- End: "Home"
197
- };
198
- var sameKeyMap = {
199
- Up: "ArrowUp",
200
- Down: "ArrowDown",
201
- Esc: "Escape",
202
- " ": "Space",
203
- ",": "Comma",
204
- Left: "ArrowLeft",
205
- Right: "ArrowRight"
206
- };
207
- function getEventKey(event, options = {}) {
208
- var _a;
209
- const { dir = "ltr", orientation = "horizontal" } = options;
210
- let { key } = event;
211
- key = (_a = sameKeyMap[key]) != null ? _a : key;
212
- const isRtl = dir === "rtl" && orientation === "horizontal";
213
- if (isRtl && key in rtlKeyMap) {
214
- key = rtlKeyMap[key];
215
- }
216
- return key;
217
- }
218
- var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
219
- var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
220
- function getEventStep(event) {
221
- if (event.ctrlKey || event.metaKey) {
222
- return 0.1;
223
- } else {
224
- const isPageKey = PAGE_KEYS.has(event.key);
225
- const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.has(event.key);
226
- return isSkipKey ? 10 : 1;
227
+ function nextTick(fn) {
228
+ const set = /* @__PURE__ */ new Set();
229
+ function raf2(fn2) {
230
+ const id = globalThis.requestAnimationFrame(fn2);
231
+ set.add(() => globalThis.cancelAnimationFrame(id));
227
232
  }
233
+ raf2(() => raf2(fn));
234
+ return function cleanup() {
235
+ set.forEach(function(fn2) {
236
+ fn2();
237
+ });
238
+ };
228
239
  }
229
- function itemById(v, id) {
230
- return v.find((node) => node.id === id);
231
- }
232
- function indexOfId(v, id) {
233
- const item = itemById(v, id);
234
- return item ? v.indexOf(item) : -1;
235
- }
236
- var getValueText = (item) => {
237
- var _a, _b;
238
- return (_b = (_a = item.dataset.valuetext) != null ? _a : item.textContent) != null ? _b : "";
239
- };
240
- var match = (valueText, query2) => valueText.toLowerCase().startsWith(query2.toLowerCase());
241
- var wrap = (v, idx) => {
242
- return v.map((_, index) => v[(Math.max(idx, 0) + index) % v.length]);
243
- };
244
- function findByText(v, text, currentId) {
245
- const index = currentId ? indexOfId(v, currentId) : -1;
246
- let items = currentId ? wrap(v, index) : v;
247
- const isSingleKey = text.length === 1;
248
- if (isSingleKey) {
249
- items = items.filter((item) => item.id !== currentId);
250
- }
251
- return items.find((item) => match(getValueText(item), text));
240
+ function raf(fn) {
241
+ const id = globalThis.requestAnimationFrame(fn);
242
+ return function cleanup() {
243
+ globalThis.cancelAnimationFrame(id);
244
+ };
252
245
  }
253
246
  var state = "default";
254
247
  var savedUserSelect = "";
@@ -311,83 +304,37 @@ function trackPointerMove(opts) {
311
304
  }
312
305
  onPointerMove(info, event);
313
306
  };
314
- return pipe(addPointerEvent(doc, "pointermove", handlePointerMove, false), addPointerEvent(doc, "pointerup", onPointerUp, false), addPointerEvent(doc, "pointercancel", onPointerUp, false), addPointerEvent(doc, "contextmenu", onPointerUp, false), disableTextSelection({ doc }));
307
+ return callAll(addPointerEvent(doc, "pointermove", handlePointerMove, false), addPointerEvent(doc, "pointerup", onPointerUp, false), addPointerEvent(doc, "pointercancel", onPointerUp, false), addPointerEvent(doc, "contextmenu", onPointerUp, false), disableTextSelection({ doc }));
315
308
  }
316
- function findByTypeahead(_items, options) {
317
- const { state: state2, activeId, key, timeout = 350 } = options;
318
- const search = state2.keysSoFar + key;
319
- const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
320
- const query2 = isRepeated ? search[0] : search;
321
- let items = _items.slice();
322
- const next = findByText(items, query2, activeId);
323
- function cleanup() {
324
- clearTimeout(state2.timer);
325
- state2.timer = -1;
326
- }
327
- function update(value) {
328
- state2.keysSoFar = value;
329
- cleanup();
330
- if (value !== "") {
331
- state2.timer = +setTimeout(() => {
332
- update("");
333
- cleanup();
334
- }, timeout);
335
- }
336
- }
337
- update(search);
338
- return next;
339
- }
340
- findByTypeahead.defaultOptions = {
341
- keysSoFar: "",
342
- timer: -1
343
- };
344
-
345
- // ../../types/dist/index.mjs
346
- function createNormalizer(fn) {
347
- return new Proxy({}, {
348
- get() {
349
- return fn;
350
- }
351
- });
352
- }
353
- var normalizeProp = createNormalizer((v) => v);
354
309
 
355
310
  // src/splitter.dom.ts
356
- var dom = {
357
- getDoc: (ctx) => {
358
- var _a;
359
- return (_a = ctx.doc) != null ? _a : document;
360
- },
361
- getRootNode: (ctx) => {
362
- var _a;
363
- return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
364
- },
311
+ var dom = defineDomHelpers({
365
312
  getRootId: (ctx) => {
366
313
  var _a, _b;
367
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `splitter:${ctx.uid}`;
314
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `splitter:${ctx.id}`;
368
315
  },
369
316
  getSplitterId: (ctx) => {
370
317
  var _a, _b;
371
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.splitter) != null ? _b : `splitter:${ctx.uid}:splitter`;
318
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.splitter) != null ? _b : `splitter:${ctx.id}:splitter`;
372
319
  },
373
320
  getToggleButtonId: (ctx) => {
374
321
  var _a, _b;
375
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.toggleBtn) != null ? _b : `splitter:${ctx.uid}:toggle-btn`;
322
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.toggleBtn) != null ? _b : `splitter:${ctx.id}:toggle-btn`;
376
323
  },
377
324
  getLabelId: (ctx) => {
378
325
  var _a, _b;
379
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `splitter:${ctx.uid}:label`;
326
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `splitter:${ctx.id}:label`;
380
327
  },
381
328
  getPrimaryPaneId: (ctx) => {
382
329
  var _a, _b;
383
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.primaryPane) != null ? _b : `splitter:${ctx.uid}:primary`;
330
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.primaryPane) != null ? _b : `splitter:${ctx.id}:primary`;
384
331
  },
385
332
  getSecondaryPaneId: (ctx) => {
386
333
  var _a, _b;
387
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.secondaryPane) != null ? _b : `splitter:${ctx.uid}:secondary`;
334
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.secondaryPane) != null ? _b : `splitter:${ctx.id}:secondary`;
388
335
  },
389
- getSplitterEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getSplitterId(ctx)),
390
- getPrimaryPaneEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getPrimaryPaneId(ctx)),
336
+ getSplitterEl: (ctx) => dom.getById(ctx, dom.getSplitterId(ctx)),
337
+ getPrimaryPaneEl: (ctx) => dom.getById(ctx, dom.getPrimaryPaneId(ctx)),
391
338
  getCursor(ctx) {
392
339
  if (ctx.disabled || ctx.fixed)
393
340
  return "default";
@@ -399,10 +346,10 @@ var dom = {
399
346
  cursor = x ? "w-resize" : "n-resize";
400
347
  return cursor;
401
348
  }
402
- };
349
+ });
403
350
 
404
351
  // src/splitter.connect.ts
405
- function connect(state2, send, normalize = normalizeProp) {
352
+ function connect(state2, send, normalize) {
406
353
  const isHorizontal = state2.context.isHorizontal;
407
354
  const isDisabled = state2.context.disabled;
408
355
  const isFocused = state2.hasTag("focus");
@@ -566,7 +513,7 @@ function connect(state2, send, normalize = normalizeProp) {
566
513
  }
567
514
 
568
515
  // src/splitter.machine.ts
569
- import { createMachine, guards, ref } from "@zag-js/core";
516
+ import { createMachine, guards } from "@zag-js/core";
570
517
 
571
518
  // ../../utilities/number/dist/index.mjs
572
519
  var __pow2 = Math.pow;
@@ -616,26 +563,13 @@ function decimalOperation(a, op, b) {
616
563
  }
617
564
  var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
618
565
 
619
- // ../../utilities/rect/dist/index.mjs
620
- var isDom2 = () => typeof window !== "undefined";
621
- var isTouchDevice2 = isDom2() && !!navigator.maxTouchPoints;
622
- function relativeToNode(p, el) {
623
- const dx = p.x - el.offsetLeft - el.clientLeft + el.scrollLeft;
624
- const dy = p.y - el.offsetTop - el.clientTop + el.scrollTop;
625
- return {
626
- point: { x: dx, y: dy },
627
- progress: { x: dx / el.offsetWidth, y: dy / el.offsetHeight }
628
- };
629
- }
630
-
631
566
  // src/splitter.machine.ts
632
567
  var { not } = guards;
633
- function machine(ctx = {}) {
568
+ function machine(ctx) {
634
569
  return createMachine({
635
570
  id: "splitter",
636
571
  initial: "unknown",
637
572
  context: __spreadValues({
638
- uid: "",
639
573
  orientation: "horizontal",
640
574
  min: 224,
641
575
  max: 340,
@@ -668,10 +602,7 @@ function machine(ctx = {}) {
668
602
  states: {
669
603
  unknown: {
670
604
  on: {
671
- SETUP: {
672
- target: "idle",
673
- actions: "setupDocument"
674
- }
605
+ SETUP: "idle"
675
606
  }
676
607
  },
677
608
  idle: {
@@ -808,13 +739,6 @@ function machine(ctx = {}) {
808
739
  var _a;
809
740
  (_a = ctx2.onChangeEnd) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
810
741
  },
811
- setupDocument(ctx2, evt) {
812
- if (evt.doc)
813
- ctx2.doc = ref(evt.doc);
814
- if (evt.root)
815
- ctx2.rootNode = ref(evt.root);
816
- ctx2.uid = evt.id;
817
- },
818
742
  setToMin(ctx2) {
819
743
  ctx2.value = ctx2.min;
820
744
  },
@@ -834,11 +758,11 @@ function machine(ctx = {}) {
834
758
  });
835
759
  },
836
760
  setPointerValue(ctx2, evt) {
837
- const primaryPane = dom.getPrimaryPaneEl(ctx2);
838
- if (!primaryPane)
761
+ const el = dom.getPrimaryPaneEl(ctx2);
762
+ if (!el)
839
763
  return;
840
- const { point } = relativeToNode(evt.point, primaryPane);
841
- let currentPoint = ctx2.isHorizontal ? point.x : point.y;
764
+ const relativePoint = getPointRelativeToNode(evt.point, el);
765
+ let currentPoint = ctx2.isHorizontal ? relativePoint.x : relativePoint.y;
842
766
  let value = parseFloat(snapToStep(clamp(currentPoint, ctx2), ctx2.step));
843
767
  if (Math.abs(value - ctx2.min) <= ctx2.snapOffset) {
844
768
  value = ctx2.min;
@@ -854,4 +778,3 @@ export {
854
778
  connect,
855
779
  machine
856
780
  };
857
- //# sourceMappingURL=index.mjs.map
@@ -1,6 +1,6 @@
1
- import { PropTypes, ReactPropTypes } from "@zag-js/types";
2
- import { Send, State } from "./splitter.types";
3
- export declare function connect<T extends PropTypes = ReactPropTypes>(state: State, send: Send, normalize?: import("@zag-js/types").NormalizeProps): {
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
4
  isCollapsed: boolean;
5
5
  isExpanded: boolean;
6
6
  isFocused: boolean;
@@ -17,4 +17,3 @@ export declare function connect<T extends PropTypes = ReactPropTypes>(state: Sta
17
17
  labelProps: T["element"];
18
18
  splitterProps: T["element"];
19
19
  };
20
- //# sourceMappingURL=splitter.connect.d.ts.map
@@ -1,7 +1,21 @@
1
- import { MachineContext as Ctx } from "./splitter.types";
1
+ import type { MachineContext as Ctx } from "./splitter.types";
2
2
  export declare const dom: {
3
- getDoc: (ctx: Ctx) => Document;
4
- getRootNode: (ctx: Ctx) => Document | ShadowRoot;
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
+ } & {
5
19
  getRootId: (ctx: Ctx) => string;
6
20
  getSplitterId: (ctx: Ctx) => string;
7
21
  getToggleButtonId: (ctx: Ctx) => string;
@@ -12,4 +26,3 @@ export declare const dom: {
12
26
  getPrimaryPaneEl: (ctx: Ctx) => HTMLElement;
13
27
  getCursor(ctx: Ctx): "default" | (string & {}) | "col-resize" | "e-resize" | "n-resize" | "row-resize" | "s-resize" | "w-resize";
14
28
  };
15
- //# sourceMappingURL=splitter.dom.d.ts.map
@@ -1,3 +1,2 @@
1
- import { MachineContext, MachineState, UserDefinedContext } from "./splitter.types";
2
- export declare function machine(ctx?: UserDefinedContext): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;
3
- //# sourceMappingURL=splitter.machine.d.ts.map
1
+ import type { MachineContext, MachineState, UserDefinedContext } from "./splitter.types";
2
+ export declare function machine(ctx: UserDefinedContext): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;
@@ -1,5 +1,5 @@
1
- import { StateMachine as S } from "@zag-js/core";
2
- import { Context, DirectionProperty } from "@zag-js/types";
1
+ import type { StateMachine as S } from "@zag-js/core";
2
+ import type { CommonProperties, Context, DirectionProperty, RequiredBy } from "@zag-js/types";
3
3
  declare type ElementIds = Partial<{
4
4
  root: string;
5
5
  splitter: string;
@@ -8,7 +8,7 @@ declare type ElementIds = Partial<{
8
8
  primaryPane: string;
9
9
  secondaryPane: string;
10
10
  }>;
11
- declare type PublicContext = DirectionProperty & {
11
+ declare type PublicContext = DirectionProperty & CommonProperties & {
12
12
  /**
13
13
  * The ids of the elements in the splitter. Useful for composition.
14
14
  */
@@ -65,7 +65,7 @@ declare type PublicContext = DirectionProperty & {
65
65
  */
66
66
  snapOffset: number;
67
67
  };
68
- export declare type UserDefinedContext = Partial<PublicContext>;
68
+ export declare type UserDefinedContext = RequiredBy<PublicContext, "id">;
69
69
  declare type ComputedContext = Readonly<{
70
70
  /**
71
71
  * @computed
@@ -92,4 +92,3 @@ export declare type MachineState = {
92
92
  export declare type State = S.State<MachineContext, MachineState>;
93
93
  export declare type Send = S.Send<S.AnyEventObject>;
94
94
  export {};
95
- //# sourceMappingURL=splitter.types.d.ts.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/splitter",
3
- "version": "0.1.7",
3
+ "version": "0.1.10",
4
4
  "description": "Core logic for the splitter widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",
@@ -30,11 +30,12 @@
30
30
  "url": "https://github.com/chakra-ui/zag/issues"
31
31
  },
32
32
  "dependencies": {
33
- "@zag-js/core": "0.1.6",
34
- "@zag-js/dom-utils": "0.1.4",
35
- "@zag-js/number-utils": "0.1.2",
36
- "@zag-js/rect-utils": "0.1.2",
37
- "@zag-js/types": "0.1.2"
33
+ "@zag-js/core": "0.1.8",
34
+ "@zag-js/types": "0.2.2"
35
+ },
36
+ "devDependencies": {
37
+ "@zag-js/dom-utils": "0.1.7",
38
+ "@zag-js/number-utils": "0.1.2"
38
39
  },
39
40
  "scripts": {
40
41
  "build:fast": "zag build",
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAC5C,YAAY,EAAE,kBAAkB,IAAI,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA"}