@zag-js/splitter 0.1.8 → 0.1.9

package/dist/index.js

@@ -44,10 +44,19 @@ var __pow = Math.pow;
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
-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;
@@ -64,15 +73,75 @@ 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;
+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 getPointRelativeToNode(point, element) {
+  const offset = getElementOffset(element);
+  const x = point.x - offset.left;
+  const y = point.y - offset.top;
+  return { x, y };
+}
+var rtlKeyMap = {
+  ArrowLeft: "ArrowRight",
+  ArrowRight: "ArrowLeft",
+  Home: "End",
+  End: "Home"
 };
-var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
+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;
+  }
+}
 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`],
@@ -152,43 +221,6 @@ function raf(fn) {
     globalThis.cancelAnimationFrame(id);
   };
 }
-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;
-  }
-}
 var state = "default";
 var savedUserSelect = "";
 var modifiedElementMap = /* @__PURE__ */ new WeakMap();
@@ -250,18 +282,8 @@ 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 }));
-}
-
-// ../../types/dist/index.mjs
-function createNormalizer(fn) {
-  return new Proxy({}, {
-    get() {
-      return fn;
-    }
-  });
+  return callAll(addPointerEvent(doc, "pointermove", handlePointerMove, false), addPointerEvent(doc, "pointerup", onPointerUp, false), addPointerEvent(doc, "pointercancel", onPointerUp, false), addPointerEvent(doc, "contextmenu", onPointerUp, false), disableTextSelection({ doc }));
 }
-var normalizeProp = createNormalizer((v) => v);
 
 // src/splitter.dom.ts
 var dom = {
@@ -313,7 +335,7 @@ var dom = {
 };
 
 // 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");
@@ -527,16 +549,6 @@ function decimalOperation(a, op, b) {
 }
 var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
 
-// ../../utilities/rect/dist/index.mjs
-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 = {}) {
@@ -743,11 +755,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;

package/dist/index.mjs

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -21,10 +20,19 @@ var __pow = Math.pow;
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
-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;
@@ -41,15 +49,75 @@ 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;
+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 getPointRelativeToNode(point, element) {
+  const offset = getElementOffset(element);
+  const x = point.x - offset.left;
+  const y = point.y - offset.top;
+  return { x, y };
+}
+var rtlKeyMap = {
+  ArrowLeft: "ArrowRight",
+  ArrowRight: "ArrowLeft",
+  Home: "End",
+  End: "Home"
 };
-var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
+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;
+  }
+}
 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`],
@@ -129,43 +197,6 @@ function raf(fn) {
     globalThis.cancelAnimationFrame(id);
   };
 }
-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;
-  }
-}
 var state = "default";
 var savedUserSelect = "";
 var modifiedElementMap = /* @__PURE__ */ new WeakMap();
@@ -227,18 +258,8 @@ 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 }));
-}
-
-// ../../types/dist/index.mjs
-function createNormalizer(fn) {
-  return new Proxy({}, {
-    get() {
-      return fn;
-    }
-  });
+  return callAll(addPointerEvent(doc, "pointermove", handlePointerMove, false), addPointerEvent(doc, "pointerup", onPointerUp, false), addPointerEvent(doc, "pointercancel", onPointerUp, false), addPointerEvent(doc, "contextmenu", onPointerUp, false), disableTextSelection({ doc }));
 }
-var normalizeProp = createNormalizer((v) => v);
 
 // src/splitter.dom.ts
 var dom = {
@@ -290,7 +311,7 @@ var dom = {
 };
 
 // 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");
@@ -504,16 +525,6 @@ function decimalOperation(a, op, b) {
 }
 var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
 
-// ../../utilities/rect/dist/index.mjs
-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 } = guards;
 function machine(ctx = {}) {
@@ -720,11 +731,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;

package/dist/splitter.connect.d.ts

@@ -1,6 +1,6 @@
-import { PropTypes, ReactPropTypes } from "@zag-js/types";
-import { Send, State } from "./splitter.types";
-export declare function connect<T extends PropTypes = ReactPropTypes>(state: State, send: Send, normalize?: import("@zag-js/types").NormalizeProps): {
+import type { NormalizeProps, PropTypes } from "@zag-js/types";
+import type { Send, State } from "./splitter.types";
+export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
     isCollapsed: boolean;
     isExpanded: boolean;
     isFocused: boolean;

package/dist/splitter.dom.d.ts

@@ -1,4 +1,4 @@
-import { MachineContext as Ctx } from "./splitter.types";
+import type { MachineContext as Ctx } from "./splitter.types";
 export declare const dom: {
     getDoc: (ctx: Ctx) => Document;
     getRootNode: (ctx: Ctx) => Document | ShadowRoot;
@@ -10,5 +10,5 @@ export declare const dom: {
     getSecondaryPaneId: (ctx: Ctx) => string;
     getSplitterEl: (ctx: Ctx) => HTMLElement;
     getPrimaryPaneEl: (ctx: Ctx) => HTMLElement;
-    getCursor(ctx: Ctx): "default" | (string & {}) | "col-resize" | "e-resize" | "n-resize" | "row-resize" | "s-resize" | "w-resize";
+    getCursor(ctx: Ctx): any;
 };

package/dist/splitter.machine.d.ts

@@ -1,2 +1,2 @@
-import { MachineContext, MachineState, UserDefinedContext } from "./splitter.types";
+import type { MachineContext, MachineState, UserDefinedContext } from "./splitter.types";
 export declare function machine(ctx?: UserDefinedContext): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;

package/dist/splitter.types.d.ts

@@ -1,5 +1,5 @@
-import { StateMachine as S } from "@zag-js/core";
-import { Context, DirectionProperty } from "@zag-js/types";
+import type { StateMachine as S } from "@zag-js/core";
+import type { Context, DirectionProperty } from "@zag-js/types";
 declare type ElementIds = Partial<{
     root: string;
     splitter: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/splitter",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Core logic for the splitter widget implemented as a state machine",
   "keywords": [
     "js",
@@ -30,11 +30,10 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "0.1.6",
-    "@zag-js/dom-utils": "0.1.5",
+    "@zag-js/core": "0.1.7",
+    "@zag-js/dom-utils": "0.1.6",
     "@zag-js/number-utils": "0.1.2",
-    "@zag-js/rect-utils": "0.1.2",
-    "@zag-js/types": "0.2.0"
+    "@zag-js/types": "0.2.1"
   },
   "scripts": {
     "build:fast": "zag build",