@zag-js/splitter 0.1.7 → 0.1.10

package/dist/index.d.ts

@@ -1,4 +1,3 @@
 export { connect } from "./splitter.connect";
 export { machine } from "./splitter.machine";
 export type { UserDefinedContext as Context, MachineState } from "./splitter.types";
-//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -39,122 +40,154 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // ../../utilities/dom/dist/index.mjs
+var __defProp2 = Object.defineProperty;
+var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
+var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
 var __pow = Math.pow;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp2.call(b, prop))
+      __defNormalProp2(a, prop, b[prop]);
+  if (__getOwnPropSymbols2)
+    for (var prop of __getOwnPropSymbols2(b)) {
+      if (__propIsEnum2.call(b, prop))
+        __defNormalProp2(a, prop, b[prop]);
+    }
+  return a;
+};
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
-function nextTick(fn) {
-  const set = /* @__PURE__ */ new Set();
-  function raf2(fn2) {
-    const id = globalThis.requestAnimationFrame(fn2);
-    set.add(() => globalThis.cancelAnimationFrame(id));
-  }
-  raf2(() => raf2(fn));
-  return function cleanup() {
-    set.forEach(function(fn2) {
-      fn2();
-    });
-  };
-}
-function raf(fn) {
-  const id = globalThis.requestAnimationFrame(fn);
-  return function cleanup() {
-    globalThis.cancelAnimationFrame(id);
-  };
-}
-var isDom = () => typeof window !== "undefined";
+var runIfFn = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? res : void 0;
+};
+var callAll = (...fns) => (...a) => {
+  fns.forEach(function(fn) {
+    fn == null ? void 0 : fn(...a);
+  });
+};
 var isArray = (v) => Array.isArray(v);
 var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
 var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+var isDom = () => typeof window !== "undefined";
 function getPlatform() {
   var _a;
   const agent = navigator.userAgentData;
   return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
 }
 var pt = (v) => isDom() && v.test(getPlatform());
-var isTouchDevice = isDom() && !!navigator.maxTouchPoints;
+var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
 var isMac = () => pt(/^Mac/) && !isTouchDevice;
 var isApple = () => pt(/mac|iphone|ipad|ipod/i);
 var isIos = () => isApple() && !isMac();
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument(el) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+}
+function defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => {
+      var _a, _b;
+      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
+    },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => {
+      var _a;
+      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
+    },
+    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
+  };
+  return __spreadValues2(__spreadValues2({}, dom2), helpers);
+}
 var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
 var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
 var supportsMouseEvent = () => isDom() && window.onmousedown === null;
 var isMouseEvent = (v) => isObject(v) && hasProp(v, "button");
 var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
 var isLeftClick = (v) => v.button === 0;
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
-};
-var noop = () => {
-};
-var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
-function getListenerElements() {
-  ;
-  globalThis.__listenerElements__ = globalThis.__listenerElements__ || /* @__PURE__ */ new Map();
-  return globalThis.__listenerElements__;
+function getElementOffset(element) {
+  let left = 0;
+  let top = 0;
+  let el = element;
+  if (el.parentNode) {
+    do {
+      left += el.offsetLeft;
+      top += el.offsetTop;
+    } while ((el = el.offsetParent) && el.nodeType < 9);
+    el = element;
+    do {
+      left -= el.scrollLeft;
+      top -= el.scrollTop;
+    } while ((el = el.parentNode) && !/body/i.test(el.nodeName));
+  }
+  return {
+    top,
+    right: innerWidth - left - element.offsetWidth,
+    bottom: innerHeight - top - element.offsetHeight,
+    left
+  };
 }
-function getListenerCache() {
-  ;
-  globalThis.__listenerCache__ = globalThis.__listenerCache__ || /* @__PURE__ */ new Map();
-  return globalThis.__listenerCache__;
+function getPointRelativeToNode(point, element) {
+  const offset = getElementOffset(element);
+  const x = point.x - offset.left;
+  const y = point.y - offset.top;
+  return { x, y };
 }
-function addGlobalEventListener(node, type, handler, options) {
+var rtlKeyMap = {
+  ArrowLeft: "ArrowRight",
+  ArrowRight: "ArrowLeft",
+  Home: "End",
+  End: "Home"
+};
+var sameKeyMap = {
+  Up: "ArrowUp",
+  Down: "ArrowDown",
+  Esc: "Escape",
+  " ": "Space",
+  ",": "Comma",
+  Left: "ArrowLeft",
+  Right: "ArrowRight"
+};
+function getEventKey(event, options = {}) {
   var _a;
-  if (!node)
-    return noop;
-  const hash = JSON.stringify({ type, options });
-  const listenerElements = getListenerElements();
-  const listenerCache = getListenerCache();
-  const group = listenerElements.get(node);
-  if (!listenerElements.has(node)) {
-    const group2 = /* @__PURE__ */ new Map([[hash, /* @__PURE__ */ new Set([handler])]]);
-    listenerElements.set(node, group2);
-  } else if (group == null ? void 0 : group.has(hash)) {
-    (_a = group == null ? void 0 : group.get(hash)) == null ? void 0 : _a.add(handler);
-  } else {
-    group == null ? void 0 : group.set(hash, /* @__PURE__ */ new Set([handler]));
+  const { dir = "ltr", orientation = "horizontal" } = options;
+  let { key } = event;
+  key = (_a = sameKeyMap[key]) != null ? _a : key;
+  const isRtl = dir === "rtl" && orientation === "horizontal";
+  if (isRtl && key in rtlKeyMap) {
+    key = rtlKeyMap[key];
   }
-  function attach(node2) {
-    var _a2, _b;
-    function listener(event) {
-      var _a3;
-      const group2 = listenerElements.get(node2);
-      (_a3 = group2 == null ? void 0 : group2.get(hash)) == null ? void 0 : _a3.forEach((fn) => fn(event));
-    }
-    if (!(listenerCache == null ? void 0 : listenerCache.has(node2))) {
-      listenerCache.set(node2, /* @__PURE__ */ new Map([[hash, listener]]));
-      node2.addEventListener(type, listener, options);
-      return;
-    }
-    if (!((_a2 = listenerCache == null ? void 0 : listenerCache.get(node2)) == null ? void 0 : _a2.has(hash))) {
-      (_b = listenerCache.get(node2)) == null ? void 0 : _b.set(hash, listener);
-      node2.addEventListener(type, listener, options);
-    }
+  return key;
+}
+var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
+var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
+function getEventStep(event) {
+  if (event.ctrlKey || event.metaKey) {
+    return 0.1;
+  } else {
+    const isPageKey = PAGE_KEYS.has(event.key);
+    const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.has(event.key);
+    return isSkipKey ? 10 : 1;
   }
-  attach(node);
-  return function remove() {
-    var _a2, _b, _c, _d;
-    if (!listenerElements.has(node))
-      return;
-    const group2 = listenerElements.get(node);
-    (_a2 = group2 == null ? void 0 : group2.get(hash)) == null ? void 0 : _a2.delete(handler);
-    if (((_b = group2 == null ? void 0 : group2.get(hash)) == null ? void 0 : _b.size) === 0) {
-      const listener = (_c = listenerCache.get(node)) == null ? void 0 : _c.get(hash);
-      node.removeEventListener(type, listener, options);
-      group2 == null ? void 0 : group2.delete(hash);
-      (_d = listenerCache.get(node)) == null ? void 0 : _d.delete(hash);
-      if ((group2 == null ? void 0 : group2.size) === 0) {
-        listenerElements.delete(node);
-        listenerCache.delete(node);
-      }
-    }
-  };
 }
 var isRef = (v) => hasProp(v, "current");
-var fallback = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
+var fallback2 = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
 function extractInfo(event, type = "page") {
-  const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback : event;
+  const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback2 : event;
   return {
     point: {
       x: point[`${type}X`],
@@ -162,9 +195,12 @@ function extractInfo(event, type = "page") {
     }
   };
 }
-function addDomEvent(target, event, listener, options) {
+function addDomEvent(target, eventName, handler, options) {
   const node = isRef(target) ? target.current : runIfFn(target);
-  return addGlobalEventListener(node, event, listener, options);
+  node == null ? void 0 : node.addEventListener(eventName, handler, options);
+  return () => {
+    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
+  };
 }
 function addPointerEvent(target, event, listener, options) {
   var _a;
@@ -212,66 +248,24 @@ function getEventName(evt) {
     return mouseEventNames[evt];
   return evt;
 }
-var rtlKeyMap = {
-  ArrowLeft: "ArrowRight",
-  ArrowRight: "ArrowLeft",
-  Home: "End",
-  End: "Home"
-};
-var sameKeyMap = {
-  Up: "ArrowUp",
-  Down: "ArrowDown",
-  Esc: "Escape",
-  " ": "Space",
-  ",": "Comma",
-  Left: "ArrowLeft",
-  Right: "ArrowRight"
-};
-function getEventKey(event, options = {}) {
-  var _a;
-  const { dir = "ltr", orientation = "horizontal" } = options;
-  let { key } = event;
-  key = (_a = sameKeyMap[key]) != null ? _a : key;
-  const isRtl = dir === "rtl" && orientation === "horizontal";
-  if (isRtl && key in rtlKeyMap) {
-    key = rtlKeyMap[key];
-  }
-  return key;
-}
-var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
-var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
-function getEventStep(event) {
-  if (event.ctrlKey || event.metaKey) {
-    return 0.1;
-  } else {
-    const isPageKey = PAGE_KEYS.has(event.key);
-    const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.has(event.key);
-    return isSkipKey ? 10 : 1;
+function nextTick(fn) {
+  const set = /* @__PURE__ */ new Set();
+  function raf2(fn2) {
+    const id = globalThis.requestAnimationFrame(fn2);
+    set.add(() => globalThis.cancelAnimationFrame(id));
   }
+  raf2(() => raf2(fn));
+  return function cleanup() {
+    set.forEach(function(fn2) {
+      fn2();
+    });
+  };
 }
-function itemById(v, id) {
-  return v.find((node) => node.id === id);
-}
-function indexOfId(v, id) {
-  const item = itemById(v, id);
-  return item ? v.indexOf(item) : -1;
-}
-var getValueText = (item) => {
-  var _a, _b;
-  return (_b = (_a = item.dataset.valuetext) != null ? _a : item.textContent) != null ? _b : "";
-};
-var match = (valueText, query2) => valueText.toLowerCase().startsWith(query2.toLowerCase());
-var wrap = (v, idx) => {
-  return v.map((_, index) => v[(Math.max(idx, 0) + index) % v.length]);
-};
-function findByText(v, text, currentId) {
-  const index = currentId ? indexOfId(v, currentId) : -1;
-  let items = currentId ? wrap(v, index) : v;
-  const isSingleKey = text.length === 1;
-  if (isSingleKey) {
-    items = items.filter((item) => item.id !== currentId);
-  }
-  return items.find((item) => match(getValueText(item), text));
+function raf(fn) {
+  const id = globalThis.requestAnimationFrame(fn);
+  return function cleanup() {
+    globalThis.cancelAnimationFrame(id);
+  };
 }
 var state = "default";
 var savedUserSelect = "";
@@ -334,83 +328,37 @@ function trackPointerMove(opts) {
     }
     onPointerMove(info, event);
   };
-  return pipe(addPointerEvent(doc, "pointermove", handlePointerMove, false), addPointerEvent(doc, "pointerup", onPointerUp, false), addPointerEvent(doc, "pointercancel", onPointerUp, false), addPointerEvent(doc, "contextmenu", onPointerUp, false), disableTextSelection({ doc }));
+  return callAll(addPointerEvent(doc, "pointermove", handlePointerMove, false), addPointerEvent(doc, "pointerup", onPointerUp, false), addPointerEvent(doc, "pointercancel", onPointerUp, false), addPointerEvent(doc, "contextmenu", onPointerUp, false), disableTextSelection({ doc }));
 }
-function findByTypeahead(_items, options) {
-  const { state: state2, activeId, key, timeout = 350 } = options;
-  const search = state2.keysSoFar + key;
-  const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
-  const query2 = isRepeated ? search[0] : search;
-  let items = _items.slice();
-  const next = findByText(items, query2, activeId);
-  function cleanup() {
-    clearTimeout(state2.timer);
-    state2.timer = -1;
-  }
-  function update(value) {
-    state2.keysSoFar = value;
-    cleanup();
-    if (value !== "") {
-      state2.timer = +setTimeout(() => {
-        update("");
-        cleanup();
-      }, timeout);
-    }
-  }
-  update(search);
-  return next;
-}
-findByTypeahead.defaultOptions = {
-  keysSoFar: "",
-  timer: -1
-};
-
-// ../../types/dist/index.mjs
-function createNormalizer(fn) {
-  return new Proxy({}, {
-    get() {
-      return fn;
-    }
-  });
-}
-var normalizeProp = createNormalizer((v) => v);
 
 // src/splitter.dom.ts
-var dom = {
-  getDoc: (ctx) => {
-    var _a;
-    return (_a = ctx.doc) != null ? _a : document;
-  },
-  getRootNode: (ctx) => {
-    var _a;
-    return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
-  },
+var dom = defineDomHelpers({
   getRootId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `splitter:${ctx.uid}`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `splitter:${ctx.id}`;
   },
   getSplitterId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.splitter) != null ? _b : `splitter:${ctx.uid}:splitter`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.splitter) != null ? _b : `splitter:${ctx.id}:splitter`;
   },
   getToggleButtonId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.toggleBtn) != null ? _b : `splitter:${ctx.uid}:toggle-btn`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.toggleBtn) != null ? _b : `splitter:${ctx.id}:toggle-btn`;
   },
   getLabelId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `splitter:${ctx.uid}:label`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `splitter:${ctx.id}:label`;
   },
   getPrimaryPaneId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.primaryPane) != null ? _b : `splitter:${ctx.uid}:primary`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.primaryPane) != null ? _b : `splitter:${ctx.id}:primary`;
   },
   getSecondaryPaneId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.secondaryPane) != null ? _b : `splitter:${ctx.uid}:secondary`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.secondaryPane) != null ? _b : `splitter:${ctx.id}:secondary`;
   },
-  getSplitterEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getSplitterId(ctx)),
-  getPrimaryPaneEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getPrimaryPaneId(ctx)),
+  getSplitterEl: (ctx) => dom.getById(ctx, dom.getSplitterId(ctx)),
+  getPrimaryPaneEl: (ctx) => dom.getById(ctx, dom.getPrimaryPaneId(ctx)),
   getCursor(ctx) {
     if (ctx.disabled || ctx.fixed)
       return "default";
@@ -422,10 +370,10 @@ var dom = {
       cursor = x ? "w-resize" : "n-resize";
     return cursor;
   }
-};
+});
 
 // src/splitter.connect.ts
-function connect(state2, send, normalize = normalizeProp) {
+function connect(state2, send, normalize) {
   const isHorizontal = state2.context.isHorizontal;
   const isDisabled = state2.context.disabled;
   const isFocused = state2.hasTag("focus");
@@ -639,26 +587,13 @@ function decimalOperation(a, op, b) {
 }
 var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
 
-// ../../utilities/rect/dist/index.mjs
-var isDom2 = () => typeof window !== "undefined";
-var isTouchDevice2 = isDom2() && !!navigator.maxTouchPoints;
-function relativeToNode(p, el) {
-  const dx = p.x - el.offsetLeft - el.clientLeft + el.scrollLeft;
-  const dy = p.y - el.offsetTop - el.clientTop + el.scrollTop;
-  return {
-    point: { x: dx, y: dy },
-    progress: { x: dx / el.offsetWidth, y: dy / el.offsetHeight }
-  };
-}
-
 // src/splitter.machine.ts
 var { not } = import_core.guards;
-function machine(ctx = {}) {
+function machine(ctx) {
   return (0, import_core.createMachine)({
     id: "splitter",
     initial: "unknown",
     context: __spreadValues({
-      uid: "",
       orientation: "horizontal",
       min: 224,
       max: 340,
@@ -691,10 +626,7 @@ function machine(ctx = {}) {
     states: {
       unknown: {
         on: {
-          SETUP: {
-            target: "idle",
-            actions: "setupDocument"
-          }
+          SETUP: "idle"
         }
       },
       idle: {
@@ -831,13 +763,6 @@ function machine(ctx = {}) {
         var _a;
         (_a = ctx2.onChangeEnd) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
       },
-      setupDocument(ctx2, evt) {
-        if (evt.doc)
-          ctx2.doc = (0, import_core.ref)(evt.doc);
-        if (evt.root)
-          ctx2.rootNode = (0, import_core.ref)(evt.root);
-        ctx2.uid = evt.id;
-      },
       setToMin(ctx2) {
         ctx2.value = ctx2.min;
       },
@@ -857,11 +782,11 @@ function machine(ctx = {}) {
         });
       },
       setPointerValue(ctx2, evt) {
-        const primaryPane = dom.getPrimaryPaneEl(ctx2);
-        if (!primaryPane)
+        const el = dom.getPrimaryPaneEl(ctx2);
+        if (!el)
           return;
-        const { point } = relativeToNode(evt.point, primaryPane);
-        let currentPoint = ctx2.isHorizontal ? point.x : point.y;
+        const relativePoint = getPointRelativeToNode(evt.point, el);
+        let currentPoint = ctx2.isHorizontal ? relativePoint.x : relativePoint.y;
         let value = parseFloat(snapToStep(clamp(currentPoint, ctx2), ctx2.step));
         if (Math.abs(value - ctx2.min) <= ctx2.snapOffset) {
           value = ctx2.min;
@@ -873,4 +798,3 @@ function machine(ctx = {}) {
     }
   });
 }
-//# sourceMappingURL=index.js.map