@zag-js/splitter 0.10.2 → 0.10.3

package/dist/splitter.dom.mjs

@@ -1,6 +1,58 @@
-import {
-  dom
-} from "./chunk-3GDOPT5W.mjs";
-export {
-  dom
-};
+import { createScope, queryAll } from '@zag-js/dom-query';
+
+const dom = createScope({
+  getRootId: (ctx) => ctx.ids?.root ?? `splitter:${ctx.id}`,
+  getResizeTriggerId: (ctx, id) => ctx.ids?.resizeTrigger?.(id) ?? `splitter:${ctx.id}:splitter:${id}`,
+  getToggleTriggerId: (ctx) => ctx.ids?.toggleTrigger?.(ctx.id) ?? `splitter:${ctx.id}:toggle-btn`,
+  getLabelId: (ctx) => ctx.ids?.label ?? `splitter:${ctx.id}:label`,
+  getPanelId: (ctx, id) => ctx.ids?.panel?.(id) ?? `splitter:${ctx.id}:panel:${id}`,
+  globalCursorId: (ctx) => `splitter:${ctx.id}:global-cursor`,
+  getRootEl: (ctx) => dom.queryById(ctx, dom.getRootId(ctx)),
+  getResizeTriggerEl: (ctx, id) => dom.getById(ctx, dom.getResizeTriggerId(ctx, id)),
+  getPanelEl: (ctx, id) => dom.getById(ctx, dom.getPanelId(ctx, id)),
+  getCursor(ctx) {
+    const x = ctx.isHorizontal;
+    let cursor = x ? "col-resize" : "row-resize";
+    if (ctx.activeResizeState.isAtMin)
+      cursor = x ? "e-resize" : "s-resize";
+    if (ctx.activeResizeState.isAtMax)
+      cursor = x ? "w-resize" : "n-resize";
+    return cursor;
+  },
+  getPanelStyle(ctx, id) {
+    const flexGrow = ctx.panels.find((panel) => panel.id === id)?.size ?? "0";
+    return {
+      flexBasis: 0,
+      flexGrow,
+      flexShrink: 1,
+      overflow: "hidden"
+    };
+  },
+  getActiveHandleEl(ctx) {
+    const activeId = ctx.activeResizeId;
+    if (activeId == null)
+      return;
+    return dom.getById(ctx, dom.getResizeTriggerId(ctx, activeId));
+  },
+  getResizeTriggerEls(ctx) {
+    const ownerId = CSS.escape(dom.getRootId(ctx));
+    return queryAll(dom.getRootEl(ctx), `[role=separator][data-ownedby='${ownerId}']`);
+  },
+  setupGlobalCursor(ctx) {
+    const styleEl = dom.getById(ctx, dom.globalCursorId(ctx));
+    const textContent = `* { cursor: ${dom.getCursor(ctx)} !important; }`;
+    if (styleEl) {
+      styleEl.textContent = textContent;
+    } else {
+      const style = dom.getDoc(ctx).createElement("style");
+      style.id = dom.globalCursorId(ctx);
+      style.textContent = textContent;
+      dom.getDoc(ctx).head.appendChild(style);
+    }
+  },
+  removeGlobalCursor(ctx) {
+    dom.getById(ctx, dom.globalCursorId(ctx))?.remove();
+  }
+});
+
+export { dom };

package/dist/splitter.machine.d.ts

@@ -1,7 +1,3 @@
-import * as _zag_js_core from '@zag-js/core';
-import { UserDefinedContext, MachineContext, MachineState } from './splitter.types.js';
-import '@zag-js/types';
-
-declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
-
-export { machine };
+import type { Machine, StateMachine } from '@zag-js/core';
+import type { MachineContext, MachineState, UserDefinedContext } from "./splitter.types";
+export declare function machine(userContext: UserDefinedContext): Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;

package/dist/splitter.machine.js

@@ -1,216 +1,17 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+'use strict';
 
-// src/splitter.machine.ts
-var splitter_machine_exports = {};
-__export(splitter_machine_exports, {
-  machine: () => machine
-});
-module.exports = __toCommonJS(splitter_machine_exports);
-var import_core = require("@zag-js/core");
-var import_dom_event = require("@zag-js/dom-event");
-var import_dom_query2 = require("@zag-js/dom-query");
-var import_utils = require("@zag-js/utils");
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-// src/splitter.dom.ts
-var import_dom_query = require("@zag-js/dom-query");
-var dom = (0, import_dom_query.createScope)({
-  getRootId: (ctx) => ctx.ids?.root ?? `splitter:${ctx.id}`,
-  getResizeTriggerId: (ctx, id) => ctx.ids?.resizeTrigger?.(id) ?? `splitter:${ctx.id}:splitter:${id}`,
-  getToggleTriggerId: (ctx) => ctx.ids?.toggleTrigger?.(ctx.id) ?? `splitter:${ctx.id}:toggle-btn`,
-  getLabelId: (ctx) => ctx.ids?.label ?? `splitter:${ctx.id}:label`,
-  getPanelId: (ctx, id) => ctx.ids?.panel?.(id) ?? `splitter:${ctx.id}:panel:${id}`,
-  globalCursorId: (ctx) => `splitter:${ctx.id}:global-cursor`,
-  getRootEl: (ctx) => dom.queryById(ctx, dom.getRootId(ctx)),
-  getResizeTriggerEl: (ctx, id) => dom.getById(ctx, dom.getResizeTriggerId(ctx, id)),
-  getPanelEl: (ctx, id) => dom.getById(ctx, dom.getPanelId(ctx, id)),
-  getCursor(ctx) {
-    const x = ctx.isHorizontal;
-    let cursor = x ? "col-resize" : "row-resize";
-    if (ctx.activeResizeState.isAtMin)
-      cursor = x ? "e-resize" : "s-resize";
-    if (ctx.activeResizeState.isAtMax)
-      cursor = x ? "w-resize" : "n-resize";
-    return cursor;
-  },
-  getPanelStyle(ctx, id) {
-    const flexGrow = ctx.panels.find((panel) => panel.id === id)?.size ?? "0";
-    return {
-      flexBasis: 0,
-      flexGrow,
-      flexShrink: 1,
-      overflow: "hidden"
-    };
-  },
-  getActiveHandleEl(ctx) {
-    const activeId = ctx.activeResizeId;
-    if (activeId == null)
-      return;
-    return dom.getById(ctx, dom.getResizeTriggerId(ctx, activeId));
-  },
-  getResizeTriggerEls(ctx) {
-    const ownerId = CSS.escape(dom.getRootId(ctx));
-    return (0, import_dom_query.queryAll)(dom.getRootEl(ctx), `[role=separator][data-ownedby='${ownerId}']`);
-  },
-  setupGlobalCursor(ctx) {
-    const styleEl = dom.getById(ctx, dom.globalCursorId(ctx));
-    const textContent = `* { cursor: ${dom.getCursor(ctx)} !important; }`;
-    if (styleEl) {
-      styleEl.textContent = textContent;
-    } else {
-      const style = dom.getDoc(ctx).createElement("style");
-      style.id = dom.globalCursorId(ctx);
-      style.textContent = textContent;
-      dom.getDoc(ctx).head.appendChild(style);
-    }
-  },
-  removeGlobalCursor(ctx) {
-    dom.getById(ctx, dom.globalCursorId(ctx))?.remove();
-  }
-});
+const core = require('@zag-js/core');
+const domEvent = require('@zag-js/dom-event');
+const domQuery = require('@zag-js/dom-query');
+const utils = require('@zag-js/utils');
+const splitter_dom = require('./splitter.dom.js');
+const splitter_utils = require('./splitter.utils.js');
 
-// src/splitter.utils.ts
-function validateSize(key, size) {
-  if (Math.floor(size) > 100) {
-    throw new Error(`Total ${key} of panels cannot be greater than 100`);
-  }
-}
-function getNormalizedPanels(ctx) {
-  let numOfPanelsWithoutSize = 0;
-  let totalSize = 0;
-  let totalMinSize = 0;
-  const panels = ctx.size.map((panel) => {
-    const minSize = panel.minSize ?? 0;
-    const maxSize = panel.maxSize ?? 100;
-    totalMinSize += minSize;
-    if (panel.size == null) {
-      numOfPanelsWithoutSize++;
-    } else {
-      totalSize += panel.size;
-    }
-    return {
-      ...panel,
-      minSize,
-      maxSize
-    };
-  });
-  validateSize("minSize", totalMinSize);
-  validateSize("size", totalSize);
-  let end = 0;
-  let remainingSize = 0;
-  const result = panels.map((panel) => {
-    let start = end;
-    if (panel.size != null) {
-      end += panel.size;
-      remainingSize = panel.size - panel.minSize;
-      return {
-        ...panel,
-        start,
-        end,
-        remainingSize
-      };
-    }
-    const size = (100 - totalSize) / numOfPanelsWithoutSize;
-    end += size;
-    remainingSize = size - panel.minSize;
-    return { ...panel, size, start, end, remainingSize };
-  });
-  return result;
-}
-function getHandlePanels(ctx, id = ctx.activeResizeId) {
-  const [beforeId, afterId] = id?.split(":") ?? [];
-  if (!beforeId || !afterId)
-    return;
-  const beforeIndex = ctx.previousPanels.findIndex((panel) => panel.id === beforeId);
-  const afterIndex = ctx.previousPanels.findIndex((panel) => panel.id === afterId);
-  if (beforeIndex === -1 || afterIndex === -1)
-    return;
-  const before = ctx.previousPanels[beforeIndex];
-  const after = ctx.previousPanels[afterIndex];
-  return {
-    before: {
-      ...before,
-      index: beforeIndex
-    },
-    after: {
-      ...after,
-      index: afterIndex
-    }
-  };
-}
-function getHandleBounds(ctx, id = ctx.activeResizeId) {
-  const panels = getHandlePanels(ctx, id);
-  if (!panels)
-    return;
-  const { before, after } = panels;
-  return {
-    min: Math.max(before.start + before.minSize, after.end - after.maxSize),
-    max: Math.min(after.end - after.minSize, before.maxSize + before.start)
-  };
-}
-function getPanelBounds(ctx, id) {
-  const bounds = getHandleBounds(ctx, id);
-  const panels = getHandlePanels(ctx, id);
-  if (!bounds || !panels)
-    return;
-  const { before, after } = panels;
-  const beforeMin = Math.abs(before.start - bounds.min);
-  const afterMin = after.size + (before.size - beforeMin);
-  const beforeMax = Math.abs(before.start - bounds.max);
-  const afterMax = after.size - (beforeMax - before.size);
-  return {
-    before: {
-      index: before.index,
-      min: beforeMin,
-      max: beforeMax,
-      isAtMin: beforeMin === before.size,
-      isAtMax: beforeMax === before.size,
-      up(step) {
-        return Math.min(before.size + step, beforeMax);
-      },
-      down(step) {
-        return Math.max(before.size - step, beforeMin);
-      }
-    },
-    after: {
-      index: after.index,
-      min: afterMin,
-      max: afterMax,
-      isAtMin: afterMin === after.size,
-      isAtMax: afterMax === after.size,
-      up(step) {
-        return Math.min(after.size + step, afterMin);
-      },
-      down(step) {
-        return Math.max(after.size - step, afterMax);
-      }
-    }
-  };
-}
-function clamp(value, min, max) {
-  return Math.min(Math.max(value, min), max);
-}
-
-// src/splitter.machine.ts
 function machine(userContext) {
-  const ctx = (0, import_utils.compact)(userContext);
-  return (0, import_core.createMachine)(
+  const ctx = utils.compact(userContext);
+  return core.createMachine(
     {
       id: "splitter",
       initial: "idle",
@@ -232,7 +33,7 @@ function machine(userContext) {
       },
       computed: {
         isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
-        panels: (ctx2) => getNormalizedPanels(ctx2)
+        panels: (ctx2) => splitter_utils.getNormalizedPanels(ctx2)
       },
       on: {
         SET_PANEL_SIZE: {
@@ -336,8 +137,8 @@ function machine(userContext) {
     {
       activities: {
         trackPointerMove: (ctx2, _evt, { send }) => {
-          const doc = dom.getDoc(ctx2);
-          return (0, import_dom_event.trackPointerMove)(doc, {
+          const doc = splitter_dom.dom.getDoc(ctx2);
+          return domEvent.trackPointerMove(doc, {
             onPointerMove(info) {
               send({ type: "POINTER_MOVE", point: info.point });
             },
@@ -358,10 +159,10 @@ function machine(userContext) {
       },
       actions: {
         setGlobalCursor(ctx2) {
-          dom.setupGlobalCursor(ctx2);
+          splitter_dom.dom.setupGlobalCursor(ctx2);
         },
         clearGlobalCursor(ctx2) {
-          dom.removeGlobalCursor(ctx2);
+          splitter_dom.dom.removeGlobalCursor(ctx2);
         },
         invokeOnResize(ctx2) {
           ctx2.onResize?.({ size: ctx2.size, activeHandleId: ctx2.activeResizeId });
@@ -387,12 +188,12 @@ function machine(userContext) {
         setPanelSize(ctx2, evt) {
           const { id, size } = evt;
           ctx2.size = ctx2.size.map((panel) => {
-            const panelSize = clamp(size, panel.minSize ?? 0, panel.maxSize ?? 100);
+            const panelSize = splitter_utils.clamp(size, panel.minSize ?? 0, panel.maxSize ?? 100);
             return panel.id === id ? { ...panel, size: panelSize } : panel;
           });
         },
         setStartPanelToMin(ctx2) {
-          const bounds = getPanelBounds(ctx2);
+          const bounds = splitter_utils.getPanelBounds(ctx2);
           if (!bounds)
             return;
           const { before, after } = bounds;
@@ -400,7 +201,7 @@ function machine(userContext) {
           ctx2.size[after.index].size = after.min;
         },
         setStartPanelToMax(ctx2) {
-          const bounds = getPanelBounds(ctx2);
+          const bounds = splitter_utils.getPanelBounds(ctx2);
           if (!bounds)
             return;
           const { before, after } = bounds;
@@ -408,7 +209,7 @@ function machine(userContext) {
           ctx2.size[after.index].size = after.max;
         },
         expandStartPanel(ctx2, evt) {
-          const bounds = getPanelBounds(ctx2);
+          const bounds = splitter_utils.getPanelBounds(ctx2);
           if (!bounds)
             return;
           const { before, after } = bounds;
@@ -416,7 +217,7 @@ function machine(userContext) {
           ctx2.size[after.index].size = after.down(evt.step);
         },
         shrinkStartPanel(ctx2, evt) {
-          const bounds = getPanelBounds(ctx2);
+          const bounds = splitter_utils.getPanelBounds(ctx2);
           if (!bounds)
             return;
           const { before, after } = bounds;
@@ -424,7 +225,7 @@ function machine(userContext) {
           ctx2.size[after.index].size = after.up(evt.step);
         },
         resetStartPanel(ctx2, evt) {
-          const bounds = getPanelBounds(ctx2, evt.id);
+          const bounds = splitter_utils.getPanelBounds(ctx2, evt.id);
           if (!bounds)
             return;
           const { before, after } = bounds;
@@ -432,20 +233,20 @@ function machine(userContext) {
           ctx2.size[after.index].size = ctx2.initialSize[after.index].size;
         },
         focusResizeHandle(ctx2) {
-          (0, import_dom_query2.raf)(() => {
-            dom.getActiveHandleEl(ctx2)?.focus({ preventScroll: true });
+          domQuery.raf(() => {
+            splitter_dom.dom.getActiveHandleEl(ctx2)?.focus({ preventScroll: true });
           });
         },
         blurResizeHandle(ctx2) {
-          (0, import_dom_query2.raf)(() => {
-            dom.getActiveHandleEl(ctx2)?.blur();
+          domQuery.raf(() => {
+            splitter_dom.dom.getActiveHandleEl(ctx2)?.blur();
           });
         },
         setPreviousPanels(ctx2) {
           ctx2.previousPanels = ctx2.panels.slice();
         },
         setActiveResizeState(ctx2) {
-          const panels = getPanelBounds(ctx2);
+          const panels = splitter_utils.getPanelBounds(ctx2);
           if (!panels)
             return;
           const { before } = panels;
@@ -455,12 +256,12 @@ function machine(userContext) {
           };
         },
         setPointerValue(ctx2, evt) {
-          const panels = getHandlePanels(ctx2);
-          const bounds = getHandleBounds(ctx2);
+          const panels = splitter_utils.getHandlePanels(ctx2);
+          const bounds = splitter_utils.getHandleBounds(ctx2);
           if (!panels || !bounds)
             return;
-          const rootEl = dom.getRootEl(ctx2);
-          const relativePoint = (0, import_dom_event.getRelativePoint)(evt.point, rootEl);
+          const rootEl = splitter_dom.dom.getRootEl(ctx2);
+          const relativePoint = domEvent.getRelativePoint(evt.point, rootEl);
           const percentValue = relativePoint.getPercentValue({
             dir: ctx2.dir,
             orientation: ctx2.orientation
@@ -470,7 +271,7 @@ function machine(userContext) {
             isAtMin: pointValue < bounds.min,
             isAtMax: pointValue > bounds.max
           };
-          pointValue = clamp(pointValue, bounds.min, bounds.max);
+          pointValue = splitter_utils.clamp(pointValue, bounds.min, bounds.max);
           const { before, after } = panels;
           const offset = pointValue - before.end;
           ctx2.size[before.index].size = before.size + offset;
@@ -480,7 +281,5 @@ function machine(userContext) {
     }
   );
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  machine
-});
+
+exports.machine = machine;