@zag-js/splitter 0.2.11 → 0.2.13

package/dist/index.js

@@ -31,333 +31,13 @@ var import_anatomy = require("@zag-js/anatomy");
 var anatomy = (0, import_anatomy.createAnatomy)("splitter").parts("root", "panel", "toggleTrigger", "resizeTrigger");
 var parts = anatomy.build();
 
-// ../../utilities/dom/src/attrs.ts
-var dataAttr = (guard) => {
-  return guard ? "" : void 0;
-};
-
-// ../../utilities/core/src/functions.ts
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res ?? void 0;
-};
-var callAll = (...fns) => (...a) => {
-  fns.forEach(function(fn) {
-    fn?.(...a);
-  });
-};
-
-// ../../utilities/core/src/guard.ts
-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);
-
-// ../../utilities/core/src/object.ts
-function compact(obj) {
-  if (obj === void 0)
-    return obj;
-  return Object.fromEntries(
-    Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
-  );
-}
-
-// ../../utilities/dom/src/platform.ts
-var isDom = () => typeof window !== "undefined";
-function getPlatform() {
-  const agent = navigator.userAgentData;
-  return agent?.platform ?? navigator.platform;
-}
-var pt = (v) => isDom() && v.test(getPlatform());
-var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
-var isMac = () => pt(/^Mac/) && !isTouchDevice;
-var isApple = () => pt(/mac|iphone|ipad|ipod/i);
-var isIos = () => isApple() && !isMac();
-
-// ../../utilities/dom/src/query.ts
-function isDocument(el) {
-  return el.nodeType === Node.DOCUMENT_NODE;
-}
-function isWindow(value) {
-  return value?.toString() === "[object Window]";
-}
-function getDocument(el) {
-  if (isWindow(el))
-    return el.document;
-  if (isDocument(el))
-    return el;
-  return el?.ownerDocument ?? document;
-}
-function defineDomHelpers(helpers) {
-  const dom2 = {
-    getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
-    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
-    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
-    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
-  };
-  return {
-    ...dom2,
-    ...helpers
-  };
-}
-
-// ../../utilities/dom/src/event.ts
-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;
-
-// ../../utilities/dom/src/get-element-offset.ts
-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
-  };
-}
-
-// ../../utilities/dom/src/get-point-relative-to-element.ts
-function getPointRelativeToNode(point, element) {
-  const offset = getElementOffset(element);
-  const x = point.x - offset.left;
-  const y = point.y - offset.top;
-  return { x, y };
-}
-var clampPercent = (value) => Math.max(0, Math.min(100, value));
-function getPointPercentRelativeToNode(point, element) {
-  const relativePoint = getPointRelativeToNode(point, element);
-  const x = relativePoint.x / element.offsetWidth * 100;
-  const y = relativePoint.y / element.offsetHeight * 100;
-  return { x: clampPercent(x), y: clampPercent(y) };
-}
-function normalizePointValue(point, options) {
-  const { dir = "ltr", orientation = "horizontal" } = options;
-  const { x, y } = point;
-  let result = { x, y };
-  if (orientation === "horizontal" && dir === "rtl") {
-    result = { x: 100 - x, y };
-  }
-  return orientation === "horizontal" ? result.x : result.y;
-}
-
-// ../../utilities/dom/src/keyboard-event.ts
-var rtlKeyMap = {
-  ArrowLeft: "ArrowRight",
-  ArrowRight: "ArrowLeft"
-};
-var sameKeyMap = {
-  Up: "ArrowUp",
-  Down: "ArrowDown",
-  Esc: "Escape",
-  " ": "Space",
-  ",": "Comma",
-  Left: "ArrowLeft",
-  Right: "ArrowRight"
-};
-function getEventKey(event, options = {}) {
-  const { dir = "ltr", orientation = "horizontal" } = options;
-  let { key } = event;
-  key = sameKeyMap[key] ?? 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;
-  }
-}
-
-// ../../utilities/dom/src/listener.ts
-var isRef = (v) => hasProp(v, "current");
-var fallback = { 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;
-  return {
-    point: {
-      x: point[`${type}X`],
-      y: point[`${type}Y`]
-    }
-  };
-}
-function addDomEvent(target, eventName, handler, options) {
-  const node = isRef(target) ? target.current : runIfFn(target);
-  node?.addEventListener(eventName, handler, options);
-  return () => {
-    node?.removeEventListener(eventName, handler, options);
-  };
-}
-function addPointerEvent(target, event, listener, options) {
-  const type = getEventName(event) ?? event;
-  return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
-}
-function wrapHandler(fn, filter = false) {
-  const listener = (event) => {
-    fn(event, extractInfo(event));
-  };
-  return filter ? filterPrimaryPointer(listener) : listener;
-}
-function filterPrimaryPointer(fn) {
-  return (event) => {
-    const win = event.view ?? window;
-    const isMouseEvent2 = event instanceof win.MouseEvent;
-    const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
-    if (isPrimary)
-      fn(event);
-  };
-}
-var mouseEventNames = {
-  pointerdown: "mousedown",
-  pointermove: "mousemove",
-  pointerup: "mouseup",
-  pointercancel: "mousecancel",
-  pointerover: "mouseover",
-  pointerout: "mouseout",
-  pointerenter: "mouseenter",
-  pointerleave: "mouseleave"
-};
-var touchEventNames = {
-  pointerdown: "touchstart",
-  pointermove: "touchmove",
-  pointerup: "touchend",
-  pointercancel: "touchcancel"
-};
-function getEventName(evt) {
-  if (supportsPointerEvent())
-    return evt;
-  if (supportsTouchEvent())
-    return touchEventNames[evt];
-  if (supportsMouseEvent())
-    return mouseEventNames[evt];
-  return evt;
-}
-
-// ../../utilities/dom/src/next-tick.ts
-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);
-  };
-}
-
-// ../../utilities/dom/src/nodelist.ts
-function queryAll(root, selector) {
-  return Array.from(root?.querySelectorAll(selector) ?? []);
-}
-
-// ../../utilities/dom/src/text-selection.ts
-var state = "default";
-var savedUserSelect = "";
-var modifiedElementMap = /* @__PURE__ */ new WeakMap();
-function disableTextSelection({ target, doc } = {}) {
-  const _document = doc ?? document;
-  if (isIos()) {
-    if (state === "default") {
-      savedUserSelect = _document.documentElement.style.webkitUserSelect;
-      _document.documentElement.style.webkitUserSelect = "none";
-    }
-    state = "disabled";
-  } else if (target) {
-    modifiedElementMap.set(target, target.style.userSelect);
-    target.style.userSelect = "none";
-  }
-  return () => restoreTextSelection({ target, doc: _document });
-}
-function restoreTextSelection({ target, doc } = {}) {
-  const _document = doc ?? document;
-  if (isIos()) {
-    if (state !== "disabled")
-      return;
-    state = "restoring";
-    setTimeout(() => {
-      nextTick(() => {
-        if (state === "restoring") {
-          if (_document.documentElement.style.webkitUserSelect === "none") {
-            _document.documentElement.style.webkitUserSelect = savedUserSelect || "";
-          }
-          savedUserSelect = "";
-          state = "default";
-        }
-      });
-    }, 300);
-  } else {
-    if (target && modifiedElementMap.has(target)) {
-      let targetOldUserSelect = modifiedElementMap.get(target);
-      if (target.style.userSelect === "none") {
-        target.style.userSelect = targetOldUserSelect ?? "";
-      }
-      if (target.getAttribute("style") === "") {
-        target.removeAttribute("style");
-      }
-      modifiedElementMap.delete(target);
-    }
-  }
-}
-
-// ../../utilities/dom/src/pointer-event.ts
-var THRESHOLD = 5;
-function trackPointerMove(doc, opts) {
-  const { onPointerMove, onPointerUp } = opts;
-  const handlePointerMove = (event, info) => {
-    const { point: p } = info;
-    const distance = Math.sqrt(p.x ** 2 + p.y ** 2);
-    if (distance < THRESHOLD)
-      return;
-    if (isMouseEvent(event) && isLeftClick(event)) {
-      onPointerUp();
-      return;
-    }
-    onPointerMove(info, event);
-  };
-  return callAll(
-    addPointerEvent(doc, "pointermove", handlePointerMove, false),
-    addPointerEvent(doc, "pointerup", onPointerUp, false),
-    addPointerEvent(doc, "pointercancel", onPointerUp, false),
-    addPointerEvent(doc, "contextmenu", onPointerUp, false),
-    disableTextSelection({ doc })
-  );
-}
+// src/splitter.connect.ts
+var import_dom_event = require("@zag-js/dom-event");
+var import_dom_query2 = require("@zag-js/dom-query");
 
 // src/splitter.dom.ts
-var dom = defineDomHelpers({
+var import_dom_query = require("@zag-js/dom-query");
+var dom = (0, import_dom_query.createScope)({
   getRootId: (ctx) => `splitter:${ctx.id}`,
   getResizeTriggerId: (ctx, id) => `splitter:${ctx.id}:splitter:${id}`,
   getToggleTriggerId: (ctx) => `splitter:${ctx.id}:toggle-btn`,
@@ -393,7 +73,7 @@ var dom = defineDomHelpers({
   },
   getResizeTriggerEls(ctx) {
     const ownerId = CSS.escape(dom.getRootId(ctx));
-    return queryAll(dom.getRootEl(ctx), `[role=separator][data-ownedby='${ownerId}']`);
+    return (0, import_dom_query.queryAll)(dom.getRootEl(ctx), `[role=separator][data-ownedby='${ownerId}']`);
   },
   setupGlobalCursor(ctx) {
     const styleEl = dom.getById(ctx, dom.globalCursorId(ctx));
@@ -535,31 +215,69 @@ function clamp(value, min, max) {
 }
 
 // src/splitter.connect.ts
-function connect(state2, send, normalize) {
-  const isHorizontal = state2.context.isHorizontal;
-  const isFocused = state2.hasTag("focus");
-  const isDragging = state2.matches("dragging");
+function connect(state, send, normalize) {
+  const isHorizontal = state.context.isHorizontal;
+  const isFocused = state.hasTag("focus");
+  const isDragging = state.matches("dragging");
   const api = {
+    /**
+     * Whether the splitter is focused.
+     */
     isFocused,
+    /**
+     * Whether the splitter is being dragged.
+     */
     isDragging,
-    bounds: getHandleBounds(state2.context),
+    /**
+     *  The bounds of the currently dragged splitter handle.
+     */
+    bounds: getHandleBounds(state.context),
+    /**
+     * Function to collapse a panel.
+     */
     collapse(id) {
       send({ type: "COLLAPSE", id });
     },
+    /**
+     * Function to expand a panel.
+     */
     expand(id) {
       send({ type: "EXPAND", id });
     },
+    /**
+     * Function to toggle a panel between collapsed and expanded.
+     */
     toggle(id) {
       send({ type: "TOGGLE", id });
     },
+    /**
+     * Function to set the size of a panel.
+     */
     setSize(id, size) {
       send({ type: "SET_SIZE", id, size });
     },
+    /**
+     * Returns the state details for a resize trigger.
+     */
+    getResizeTriggerState(props) {
+      const { id, disabled } = props;
+      const ids = id.split(":");
+      const panelIds = ids.map((id2) => dom.getPanelId(state.context, id2));
+      const panels = getHandleBounds(state.context, id);
+      return {
+        isDisabled: !!disabled,
+        isFocused: state.context.activeResizeId === id && isFocused,
+        panelIds,
+        min: panels?.min,
+        max: panels?.max,
+        value: 0
+      };
+    },
     rootProps: normalize.element({
       ...parts.root.attrs,
-      "data-orientation": state2.context.orientation,
-      id: dom.getRootId(state2.context),
-      dir: state2.context.dir,
+      "data-orientation": state.context.orientation,
+      id: dom.getRootId(state.context),
+      dir: state.context.dir,
       style: {
         display: "flex",
         flexDirection: isHorizontal ? "row" : "column",
@@ -572,44 +290,38 @@ function connect(state2, send, normalize) {
       const { id } = props;
       return normalize.element({
         ...parts.panel.attrs,
-        dir: state2.context.dir,
-        id: dom.getPanelId(state2.context, id),
-        "data-ownedby": dom.getRootId(state2.context),
-        style: dom.getPanelStyle(state2.context, id)
+        dir: state.context.dir,
+        id: dom.getPanelId(state.context, id),
+        "data-ownedby": dom.getRootId(state.context),
+        style: dom.getPanelStyle(state.context, id)
       });
     },
-    getResizeTriggerState(props) {
-      const { id, disabled } = props;
-      const ids = id.split(":");
-      const panelIds = ids.map((id2) => dom.getPanelId(state2.context, id2));
-      const panels = getHandleBounds(state2.context, id);
-      return {
-        isDisabled: !!disabled,
-        isFocused: state2.context.activeResizeId === id && isFocused,
-        panelIds,
-        min: panels?.min,
-        max: panels?.max,
-        value: 0
-      };
-    },
+    // toggleTriggerProps: normalize.element({
+    //   ...parts.toggleButton.attrs,
+    //   id: dom.getToggleButtonId(state.context),
+    //   "aria-label": state.context.isAtMin ? "Expand Primary Pane" : "Collapse Primary Pane",
+    //   onClick() {
+    //     send("TOGGLE")
+    //   },
+    // }),
     getResizeTriggerProps(props) {
       const { id, disabled, step = 1 } = props;
       const triggerState = api.getResizeTriggerState(props);
       return normalize.element({
         ...parts.resizeTrigger.attrs,
-        dir: state2.context.dir,
-        id: dom.getResizeTriggerId(state2.context, id),
+        dir: state.context.dir,
+        id: dom.getResizeTriggerId(state.context, id),
         role: "separator",
-        "data-ownedby": dom.getRootId(state2.context),
+        "data-ownedby": dom.getRootId(state.context),
         tabIndex: disabled ? void 0 : 0,
         "aria-valuenow": triggerState.value,
         "aria-valuemin": triggerState.min,
         "aria-valuemax": triggerState.max,
-        "data-orientation": state2.context.orientation,
-        "aria-orientation": state2.context.orientation,
+        "data-orientation": state.context.orientation,
+        "aria-orientation": state.context.orientation,
         "aria-controls": triggerState.panelIds.join(" "),
-        "data-focus": dataAttr(triggerState.isFocused),
-        "data-disabled": dataAttr(disabled),
+        "data-focus": (0, import_dom_query2.dataAttr)(triggerState.isFocused),
+        "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
         style: {
           touchAction: "none",
           userSelect: "none",
@@ -651,7 +363,7 @@ function connect(state2, send, normalize) {
         onKeyDown(event) {
           if (disabled)
             return;
-          const moveStep = getEventStep(event) * step;
+          const moveStep = (0, import_dom_event.getEventStep)(event) * step;
           const keyMap = {
             Enter() {
               send("ENTER");
@@ -675,7 +387,7 @@ function connect(state2, send, normalize) {
               send("END");
             }
           };
-          const key = getEventKey(event, state2.context);
+          const key = (0, import_dom_event.getEventKey)(event, state.context);
           const exec = keyMap[key];
           if (exec) {
             exec(event);
@@ -690,8 +402,11 @@ function connect(state2, send, normalize) {
 
 // src/splitter.machine.ts
 var import_core = require("@zag-js/core");
+var import_dom_event2 = require("@zag-js/dom-event");
+var import_dom_query3 = require("@zag-js/dom-query");
+var import_utils = require("@zag-js/utils");
 function machine(userContext) {
-  const ctx = compact(userContext);
+  const ctx = (0, import_utils.compact)(userContext);
   return (0, import_core.createMachine)(
     {
       id: "splitter",
@@ -831,7 +546,7 @@ function machine(userContext) {
       activities: {
         trackPointerMove: (ctx2, _evt, { send }) => {
           const doc = dom.getDoc(ctx2);
-          return trackPointerMove(doc, {
+          return (0, import_dom_event2.trackPointerMove)(doc, {
             onPointerMove(info) {
               send({ type: "POINTER_MOVE", point: info.point });
             },
@@ -919,12 +634,12 @@ function machine(userContext) {
           ctx2.size[after.index].size = ctx2.initialSize[after.index].size;
         },
         focusResizeHandle(ctx2) {
-          raf(() => {
-            dom.getActiveHandleEl(ctx2)?.focus();
+          (0, import_dom_query3.raf)(() => {
+            dom.getActiveHandleEl(ctx2)?.focus({ preventScroll: true });
           });
         },
         blurResizeHandle(ctx2) {
-          raf(() => {
+          (0, import_dom_query3.raf)(() => {
             dom.getActiveHandleEl(ctx2)?.blur();
           });
         },
@@ -947,8 +662,7 @@ function machine(userContext) {
           const rootEl = dom.getRootEl(ctx2);
           if (!panels || !rootEl || !bounds)
             return;
-          const percent = getPointPercentRelativeToNode(evt.point, rootEl);
-          let pointValue = normalizePointValue(percent, ctx2);
+          let pointValue = (0, import_dom_event2.getRelativePointPercent)(evt.point, rootEl).normalize(ctx2);
           ctx2.activeResizeState = {
             isAtMin: pointValue < bounds.min,
             isAtMax: pointValue > bounds.max

package/dist/index.mjs

@@ -1,13 +1,13 @@
 import {
   connect
-} from "./chunk-JYQICU6Y.mjs";
+} from "./chunk-CQT32RFW.mjs";
 import {
   anatomy
 } from "./chunk-HPRMFGOY.mjs";
 import {
   machine
-} from "./chunk-EABXMZ6N.mjs";
-import "./chunk-QY3R66FZ.mjs";
+} from "./chunk-63NJ553U.mjs";
+import "./chunk-BSW3DTW4.mjs";
 import "./chunk-MV44GBQY.mjs";
 export {
   anatomy,

package/dist/splitter.connect.d.ts

@@ -1,20 +1,42 @@
 import { PropTypes, NormalizeProps } from '@zag-js/types';
-import { State, Send, PanelId, PanelProps, ResizeTriggerProps } from './splitter.types.js';
+import { State, Send, PanelId, ResizeTriggerProps, PanelProps } from './splitter.types.js';
 import '@zag-js/core';
 
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    /**
+     * Whether the splitter is focused.
+     */
     isFocused: boolean;
+    /**
+     * Whether the splitter is being dragged.
+     */
     isDragging: boolean;
+    /**
+     *  The bounds of the currently dragged splitter handle.
+     */
     bounds: {
         min: number;
         max: number;
     } | undefined;
+    /**
+     * Function to collapse a panel.
+     */
     collapse(id: PanelId): void;
+    /**
+     * Function to expand a panel.
+     */
     expand(id: PanelId): void;
+    /**
+     * Function to toggle a panel between collapsed and expanded.
+     */
     toggle(id: PanelId): void;
+    /**
+     * Function to set the size of a panel.
+     */
     setSize(id: PanelId, size: number): void;
-    rootProps: T["element"];
-    getPanelProps(props: PanelProps): T["element"];
+    /**
+     * Returns the state details for a resize trigger.
+     */
     getResizeTriggerState(props: ResizeTriggerProps): {
         isDisabled: boolean;
         isFocused: boolean;
@@ -23,6 +45,8 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
         max: number | undefined;
         value: number;
     };
+    rootProps: T["element"];
+    getPanelProps(props: PanelProps): T["element"];
     getResizeTriggerProps(props: ResizeTriggerProps): T["element"];
 };