@zag-js/splitter 0.10.1 → 0.10.3

package/dist/splitter.machine.mjs

@@ -1,8 +1,281 @@
-import {
-  machine
-} from "./chunk-X2E2LAC5.mjs";
-import "./chunk-3GDOPT5W.mjs";
-import "./chunk-MV44GBQY.mjs";
-export {
-  machine
-};
+import { createMachine } from '@zag-js/core';
+import { trackPointerMove, getRelativePoint } from '@zag-js/dom-event';
+import { raf } from '@zag-js/dom-query';
+import { compact } from '@zag-js/utils';
+import { dom } from './splitter.dom.mjs';
+import { getNormalizedPanels, clamp, getPanelBounds, getHandlePanels, getHandleBounds } from './splitter.utils.mjs';
+
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine(
+    {
+      id: "splitter",
+      initial: "idle",
+      context: {
+        orientation: "horizontal",
+        activeResizeId: null,
+        previousPanels: [],
+        size: [],
+        initialSize: [],
+        activeResizeState: {
+          isAtMin: false,
+          isAtMax: false
+        },
+        ...ctx
+      },
+      created: ["setPreviousPanels", "setInitialSize"],
+      watch: {
+        size: ["setActiveResizeState"]
+      },
+      computed: {
+        isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
+        panels: (ctx2) => getNormalizedPanels(ctx2)
+      },
+      on: {
+        SET_PANEL_SIZE: {
+          actions: "setPanelSize"
+        }
+      },
+      states: {
+        idle: {
+          entry: ["clearActiveHandleId"],
+          on: {
+            POINTER_OVER: {
+              target: "hover:temp",
+              actions: ["setActiveHandleId"]
+            },
+            FOCUS: {
+              target: "focused",
+              actions: ["setActiveHandleId"]
+            },
+            DOUBLE_CLICK: {
+              actions: ["resetStartPanel", "setPreviousPanels"]
+            }
+          }
+        },
+        "hover:temp": {
+          after: {
+            HOVER_DELAY: "hover"
+          },
+          on: {
+            POINTER_DOWN: {
+              target: "dragging",
+              actions: ["setActiveHandleId", "invokeOnResizeStart"]
+            },
+            POINTER_LEAVE: "idle"
+          }
+        },
+        hover: {
+          tags: ["focus"],
+          on: {
+            POINTER_DOWN: {
+              target: "dragging",
+              actions: ["invokeOnResizeStart"]
+            },
+            POINTER_LEAVE: "idle"
+          }
+        },
+        focused: {
+          tags: ["focus"],
+          on: {
+            BLUR: "idle",
+            POINTER_DOWN: {
+              target: "dragging",
+              actions: ["setActiveHandleId", "invokeOnResizeStart"]
+            },
+            ARROW_LEFT: {
+              guard: "isHorizontal",
+              actions: ["shrinkStartPanel", "setPreviousPanels"]
+            },
+            ARROW_RIGHT: {
+              guard: "isHorizontal",
+              actions: ["expandStartPanel", "setPreviousPanels"]
+            },
+            ARROW_UP: {
+              guard: "isVertical",
+              actions: ["shrinkStartPanel", "setPreviousPanels"]
+            },
+            ARROW_DOWN: {
+              guard: "isVertical",
+              actions: ["expandStartPanel", "setPreviousPanels"]
+            },
+            ENTER: [
+              {
+                guard: "isStartPanelAtMax",
+                actions: ["setStartPanelToMin", "setPreviousPanels"]
+              },
+              { actions: ["setStartPanelToMax", "setPreviousPanels"] }
+            ],
+            HOME: {
+              actions: ["setStartPanelToMin", "setPreviousPanels"]
+            },
+            END: {
+              actions: ["setStartPanelToMax", "setPreviousPanels"]
+            }
+          }
+        },
+        dragging: {
+          tags: ["focus"],
+          entry: "focusResizeHandle",
+          activities: ["trackPointerMove"],
+          on: {
+            POINTER_MOVE: {
+              actions: ["setPointerValue", "setGlobalCursor"]
+            },
+            POINTER_UP: {
+              target: "focused",
+              actions: ["invokeOnResizeEnd", "setPreviousPanels", "clearGlobalCursor", "blurResizeHandle"]
+            }
+          }
+        }
+      }
+    },
+    {
+      activities: {
+        trackPointerMove: (ctx2, _evt, { send }) => {
+          const doc = dom.getDoc(ctx2);
+          return trackPointerMove(doc, {
+            onPointerMove(info) {
+              send({ type: "POINTER_MOVE", point: info.point });
+            },
+            onPointerUp() {
+              send("POINTER_UP");
+            }
+          });
+        }
+      },
+      guards: {
+        isStartPanelAtMin: (ctx2) => ctx2.activeResizeState.isAtMin,
+        isStartPanelAtMax: (ctx2) => ctx2.activeResizeState.isAtMax,
+        isHorizontal: (ctx2) => ctx2.isHorizontal,
+        isVertical: (ctx2) => !ctx2.isHorizontal
+      },
+      delays: {
+        HOVER_DELAY: 250
+      },
+      actions: {
+        setGlobalCursor(ctx2) {
+          dom.setupGlobalCursor(ctx2);
+        },
+        clearGlobalCursor(ctx2) {
+          dom.removeGlobalCursor(ctx2);
+        },
+        invokeOnResize(ctx2) {
+          ctx2.onResize?.({ size: ctx2.size, activeHandleId: ctx2.activeResizeId });
+        },
+        invokeOnResizeStart(ctx2) {
+          ctx2.onResizeStart?.({ size: ctx2.size, activeHandleId: ctx2.activeResizeId });
+        },
+        invokeOnResizeEnd(ctx2) {
+          ctx2.onResizeEnd?.({ size: ctx2.size, activeHandleId: ctx2.activeResizeId });
+        },
+        setActiveHandleId(ctx2, evt) {
+          ctx2.activeResizeId = evt.id;
+        },
+        clearActiveHandleId(ctx2) {
+          ctx2.activeResizeId = null;
+        },
+        setInitialSize(ctx2) {
+          ctx2.initialSize = ctx2.panels.slice().map((panel) => ({
+            id: panel.id,
+            size: panel.size
+          }));
+        },
+        setPanelSize(ctx2, evt) {
+          const { id, size } = evt;
+          ctx2.size = ctx2.size.map((panel) => {
+            const panelSize = clamp(size, panel.minSize ?? 0, panel.maxSize ?? 100);
+            return panel.id === id ? { ...panel, size: panelSize } : panel;
+          });
+        },
+        setStartPanelToMin(ctx2) {
+          const bounds = getPanelBounds(ctx2);
+          if (!bounds)
+            return;
+          const { before, after } = bounds;
+          ctx2.size[before.index].size = before.min;
+          ctx2.size[after.index].size = after.min;
+        },
+        setStartPanelToMax(ctx2) {
+          const bounds = getPanelBounds(ctx2);
+          if (!bounds)
+            return;
+          const { before, after } = bounds;
+          ctx2.size[before.index].size = before.max;
+          ctx2.size[after.index].size = after.max;
+        },
+        expandStartPanel(ctx2, evt) {
+          const bounds = getPanelBounds(ctx2);
+          if (!bounds)
+            return;
+          const { before, after } = bounds;
+          ctx2.size[before.index].size = before.up(evt.step);
+          ctx2.size[after.index].size = after.down(evt.step);
+        },
+        shrinkStartPanel(ctx2, evt) {
+          const bounds = getPanelBounds(ctx2);
+          if (!bounds)
+            return;
+          const { before, after } = bounds;
+          ctx2.size[before.index].size = before.down(evt.step);
+          ctx2.size[after.index].size = after.up(evt.step);
+        },
+        resetStartPanel(ctx2, evt) {
+          const bounds = getPanelBounds(ctx2, evt.id);
+          if (!bounds)
+            return;
+          const { before, after } = bounds;
+          ctx2.size[before.index].size = ctx2.initialSize[before.index].size;
+          ctx2.size[after.index].size = ctx2.initialSize[after.index].size;
+        },
+        focusResizeHandle(ctx2) {
+          raf(() => {
+            dom.getActiveHandleEl(ctx2)?.focus({ preventScroll: true });
+          });
+        },
+        blurResizeHandle(ctx2) {
+          raf(() => {
+            dom.getActiveHandleEl(ctx2)?.blur();
+          });
+        },
+        setPreviousPanels(ctx2) {
+          ctx2.previousPanels = ctx2.panels.slice();
+        },
+        setActiveResizeState(ctx2) {
+          const panels = getPanelBounds(ctx2);
+          if (!panels)
+            return;
+          const { before } = panels;
+          ctx2.activeResizeState = {
+            isAtMin: before.isAtMin,
+            isAtMax: before.isAtMax
+          };
+        },
+        setPointerValue(ctx2, evt) {
+          const panels = getHandlePanels(ctx2);
+          const bounds = getHandleBounds(ctx2);
+          if (!panels || !bounds)
+            return;
+          const rootEl = dom.getRootEl(ctx2);
+          const relativePoint = getRelativePoint(evt.point, rootEl);
+          const percentValue = relativePoint.getPercentValue({
+            dir: ctx2.dir,
+            orientation: ctx2.orientation
+          });
+          let pointValue = percentValue * 100;
+          ctx2.activeResizeState = {
+            isAtMin: pointValue < bounds.min,
+            isAtMax: pointValue > bounds.max
+          };
+          pointValue = clamp(pointValue, bounds.min, bounds.max);
+          const { before, after } = panels;
+          const offset = pointValue - before.end;
+          ctx2.size[before.index].size = before.size + offset;
+          ctx2.size[after.index].size = after.size - offset;
+        }
+      }
+    }
+  );
+}
+
+export { machine };

package/dist/splitter.types.d.ts

@@ -1,7 +1,6 @@
-import { StateMachine } from '@zag-js/core';
-import { RequiredBy, DirectionProperty, CommonProperties, Context } from '@zag-js/types';
-
-type PanelId = string | number;
+import type { StateMachine as S } from "@zag-js/core";
+import type { CommonProperties, Context, DirectionProperty, RequiredBy } from "@zag-js/types";
+export type PanelId = string | number;
 type PanelSizeData = {
     id: PanelId;
     size?: number;
@@ -45,8 +44,8 @@ type PublicContext = DirectionProperty & CommonProperties & {
      */
     ids?: ElementIds;
 };
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
-type NormalizedPanelData = Array<Required<PanelSizeData> & {
+export type UserDefinedContext = RequiredBy<PublicContext, "id">;
+export type NormalizedPanelData = Array<Required<PanelSizeData> & {
     remainingSize: number;
     minSize: number;
     maxSize: number;
@@ -74,21 +73,20 @@ type PrivateContext = Context<{
     };
     initialSize: Array<Required<Pick<PanelSizeData, "id" | "size">>>;
 }>;
-type MachineContext = PublicContext & ComputedContext & PrivateContext;
-type MachineState = {
+export type MachineContext = PublicContext & ComputedContext & PrivateContext;
+export type MachineState = {
     value: "idle" | "hover:temp" | "hover" | "dragging" | "focused";
     tags: "focus";
 };
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type PanelProps = {
+export type State = S.State<MachineContext, MachineState>;
+export type Send = S.Send<S.AnyEventObject>;
+export type PanelProps = {
     id: PanelId;
     snapSize?: number;
 };
-type ResizeTriggerProps = {
+export type ResizeTriggerProps = {
     id: `${PanelId}:${PanelId}`;
     step?: number;
     disabled?: boolean;
 };
-
-export { MachineContext, MachineState, NormalizedPanelData, PanelId, PanelProps, ResizeTriggerProps, Send, State, UserDefinedContext };
+export {};

package/dist/splitter.utils.d.ts

@@ -1,9 +1,6 @@
-import { MachineContext, NormalizedPanelData, PanelId } from './splitter.types.js';
-import '@zag-js/core';
-import '@zag-js/types';
-
-declare function getNormalizedPanels(ctx: MachineContext): NormalizedPanelData;
-declare function getHandlePanels(ctx: MachineContext, id?: string | null): {
+import type { PanelId, MachineContext as Ctx,  NormalizedPanelData } from './splitter.types';
+export declare function getNormalizedPanels(ctx: Ctx): NormalizedPanelData;
+export declare function getHandlePanels(ctx: Ctx, id?: string | null): {
     before: {
         index: number;
         id: PanelId;
@@ -25,11 +22,11 @@ declare function getHandlePanels(ctx: MachineContext, id?: string | null): {
         end: number;
     };
 } | undefined;
-declare function getHandleBounds(ctx: MachineContext, id?: string | null): {
+export declare function getHandleBounds(ctx: Ctx, id?: string | null): {
     min: number;
     max: number;
 } | undefined;
-declare function getPanelBounds(ctx: MachineContext, id?: string | null): {
+export declare function getPanelBounds(ctx: Ctx, id?: string | null): {
     before: {
         index: number;
         min: number;
@@ -49,6 +46,4 @@ declare function getPanelBounds(ctx: MachineContext, id?: string | null): {
         down(step: number): number;
     };
 } | undefined;
-declare function clamp(value: number, min: number, max: number): number;
-
-export { clamp, getHandleBounds, getHandlePanels, getNormalizedPanels, getPanelBounds };
+export declare function clamp(value: number, min: number, max: number): number;

package/dist/splitter.utils.js

@@ -1,32 +1,7 @@
-"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';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-// src/splitter.utils.ts
-var splitter_utils_exports = {};
-__export(splitter_utils_exports, {
-  clamp: () => clamp,
-  getHandleBounds: () => getHandleBounds,
-  getHandlePanels: () => getHandlePanels,
-  getNormalizedPanels: () => getNormalizedPanels,
-  getPanelBounds: () => getPanelBounds
-});
-module.exports = __toCommonJS(splitter_utils_exports);
 function validateSize(key, size) {
   if (Math.floor(size) > 100) {
     throw new Error(`Total ${key} of panels cannot be greater than 100`);
@@ -37,7 +12,7 @@ function getNormalizedPanels(ctx) {
   let totalSize = 0;
   let totalMinSize = 0;
   const panels = ctx.size.map((panel) => {
-    const minSize = panel.minSize ?? 10;
+    const minSize = panel.minSize ?? 0;
     const maxSize = panel.maxSize ?? 100;
     totalMinSize += minSize;
     if (panel.size == null) {
@@ -147,11 +122,9 @@ function getPanelBounds(ctx, id) {
 function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  clamp,
-  getHandleBounds,
-  getHandlePanels,
-  getNormalizedPanels,
-  getPanelBounds
-});
+
+exports.clamp = clamp;
+exports.getHandleBounds = getHandleBounds;
+exports.getHandlePanels = getHandlePanels;
+exports.getNormalizedPanels = getNormalizedPanels;
+exports.getPanelBounds = getPanelBounds;

package/dist/splitter.utils.mjs

@@ -1,14 +1,122 @@
-import {
-  clamp,
-  getHandleBounds,
-  getHandlePanels,
-  getNormalizedPanels,
-  getPanelBounds
-} from "./chunk-MV44GBQY.mjs";
-export {
-  clamp,
-  getHandleBounds,
-  getHandlePanels,
-  getNormalizedPanels,
-  getPanelBounds
-};
+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);
+}
+
+export { clamp, getHandleBounds, getHandlePanels, getNormalizedPanels, getPanelBounds };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/splitter",
-  "version": "0.10.1",
+  "version": "0.10.3",
   "description": "Core logic for the splitter widget implemented as a state machine",
   "keywords": [
     "js",
@@ -28,13 +28,13 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.10.1",
-    "@zag-js/core": "0.10.1",
-    "@zag-js/types": "0.10.1",
-    "@zag-js/dom-query": "0.10.1",
-    "@zag-js/dom-event": "0.10.1",
-    "@zag-js/number-utils": "0.10.1",
-    "@zag-js/utils": "0.10.1"
+    "@zag-js/anatomy": "0.10.3",
+    "@zag-js/core": "0.10.3",
+    "@zag-js/types": "0.10.3",
+    "@zag-js/dom-query": "0.10.3",
+    "@zag-js/dom-event": "0.10.3",
+    "@zag-js/number-utils": "0.10.3",
+    "@zag-js/utils": "0.10.3"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
@@ -52,13 +52,8 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build-fast": "tsup src",
-    "start": "pnpm build --watch",
-    "build": "tsup src --dts",
-    "test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
+    "build": "vite build -c ../../../vite.config.ts",
     "lint": "eslint src --ext .ts,.tsx",
-    "test-ci": "pnpm test --ci --runInBand",
-    "test-watch": "pnpm test --watch -u",
     "typecheck": "tsc --noEmit"
   }
 }

package/src/splitter.connect.ts

@@ -30,20 +30,20 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
      */
     setToMinSize(id: PanelId) {
       const panel = panels.find((panel) => panel.id === id)
-      send({ type: "SET_SIZE", id, size: panel?.minSize, src: "collapse" })
+      send({ type: "SET_PANEL_SIZE", id, size: panel?.minSize, src: "setToMinSize" })
     },
     /**
      * Function to set a panel to its maximum size.
      */
     setToMaxSize(id: PanelId) {
       const panel = panels.find((panel) => panel.id === id)
-      send({ type: "SET_SIZE", id, size: panel?.maxSize, src: "expand" })
+      send({ type: "SET_PANEL_SIZE", id, size: panel?.maxSize, src: "setToMaxSize" })
     },
     /**
      * Function to set the size of a panel.
      */
     setSize(id: PanelId, size: number) {
-      send({ type: "SET_SIZE", id, size })
+      send({ type: "SET_PANEL_SIZE", id, size })
     },
     /**
      * Returns the state details for a resize trigger.

package/src/splitter.machine.ts

@@ -37,22 +37,7 @@ export function machine(userContext: UserDefinedContext) {
       },
 
       on: {
-        COLLAPSE: {
-          actions: "setStartPanelToMin",
-        },
-        EXPAND: {
-          actions: "setStartPanelToMax",
-        },
-        TOGGLE: [
-          {
-            guard: "isStartPanelAtMin",
-            actions: "setStartPanelToMax",
-          },
-          {
-            actions: "setStartPanelToMin",
-          },
-        ],
-        SET_SIZE: {
+        SET_PANEL_SIZE: {
           actions: "setPanelSize",
         },
       },

package/src/splitter.utils.ts

@@ -12,7 +12,7 @@ export function getNormalizedPanels(ctx: Ctx): NormalizedPanelData {
   let totalMinSize = 0
 
   const panels = ctx.size.map((panel) => {
-    const minSize = panel.minSize ?? 10
+    const minSize = panel.minSize ?? 0
     const maxSize = panel.maxSize ?? 100
 
     totalMinSize += minSize