@zag-js/splitter 0.2.6 → 0.2.8

package/dist/splitter.types.d.ts

@@ -1,90 +1,53 @@
 import { StateMachine } from '@zag-js/core';
 import { RequiredBy, DirectionProperty, CommonProperties, Context } from '@zag-js/types';
 
-type ElementIds = Partial<{
-    root: string;
-    splitter: string;
-    label: string;
-    toggleBtn: string;
-    primaryPane: string;
-    secondaryPane: string;
-}>;
+type PanelId = string | number;
+type PanelSizeData = {
+    id: PanelId;
+    size?: number;
+    minSize?: number;
+    maxSize?: number;
+};
+type ResizeDetails = {
+    size: PanelSizeData[];
+    activeHandleId: string | null;
+};
 type PublicContext = DirectionProperty & CommonProperties & {
-    /**
-     * The ids of the elements in the splitter. Useful for composition.
-     */
-    ids?: ElementIds;
-    /**
-     * Whether to allow the separator to be dragged.
-     */
-    fixed?: boolean;
-    /**
-     * The orientation of the split view.
-     */
     orientation: "horizontal" | "vertical";
-    /**
-     * The minimum size of the primary pane.
-     */
-    min: number;
-    /**
-     * The maximum size of the primary pane.
-     */
-    max: number;
-    /**
-     * The size of the primary pane.
-     */
-    value: number;
-    /**
-     * The step increments of the primary pane when it is dragged
-     * or resized with keyboard.
-     */
-    step: number;
-    /**
-     * Callback to be invoked when the primary pane is resized.
-     */
-    onChange?: (details: {
-        value: number;
-    }) => void;
-    /**
-     * Callback to be invoked when the primary pane's resize session starts
-     */
-    onChangeStart?: (details: {
-        value: number;
-    }) => void;
-    /**
-     * Callback to be invoked when the primary pane's resize session ends
-     */
-    onChangeEnd?: (details: {
-        value: number;
-    }) => void;
-    /**
-     * Whether the primary pane is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * The minimum offset needed to snap the primary pane to its minimum or maximum size.
-     */
-    snapOffset: number;
+    size: PanelSizeData[];
+    onResize?: (details: ResizeDetails) => void;
+    onResizeStart?: (details: ResizeDetails) => void;
+    onResizeEnd?: (details: ResizeDetails) => void;
 };
 type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type NormalizedPanelData = Array<Required<PanelSizeData> & {
+    remainingSize: number;
+    minSize: number;
+    maxSize: number;
+    start: number;
+    end: number;
+}>;
 type ComputedContext = Readonly<{
-    /**
-     * @computed
-     * Whether the primary pane is at its minimum size.
-     */
-    isAtMin: boolean;
-    /**
-     * @computed
-     * Whether the primary pane is at its maximum size.
-     */
-    isAtMax: boolean;
-    /**
-     * @computed
-     * Whether the orientation is horizontal.
-     */
     isHorizontal: boolean;
+    panels: NormalizedPanelData;
+    activeResizeBounds?: {
+        min: number;
+        max: number;
+    };
+    activeResizePanels?: {
+        before: PanelSizeData;
+        after: PanelSizeData;
+    };
+}>;
+type PrivateContext = Context<{
+    activeResizeId: string | null;
+    previousPanels: NormalizedPanelData;
+    activeResizeState: {
+        isAtMin: boolean;
+        isAtMax: boolean;
+    };
+    initialSize: Array<Required<Pick<PanelSizeData, "id" | "size">>>;
 }>;
-type PrivateContext = Context<{}>;
 type MachineContext = PublicContext & ComputedContext & PrivateContext;
 type MachineState = {
     value: "unknown" | "idle" | "hover:temp" | "hover" | "dragging" | "focused";
@@ -92,5 +55,14 @@ type MachineState = {
 };
 type State = StateMachine.State<MachineContext, MachineState>;
 type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+type PanelProps = {
+    id: PanelId;
+    snapSize?: number;
+};
+type ResizeTriggerProps = {
+    id: `${PanelId}:${PanelId}`;
+    step?: number;
+    disabled?: boolean;
+};
 
-export { MachineContext, MachineState, Send, State, UserDefinedContext };
+export { MachineContext, MachineState, NormalizedPanelData, PanelId, PanelProps, ResizeTriggerProps, Send, State, UserDefinedContext };

package/dist/splitter.utils.d.ts

@@ -0,0 +1,54 @@
+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): {
+    before: {
+        index: number;
+        id: PanelId;
+        size: number;
+        minSize: number;
+        maxSize: number;
+        remainingSize: number;
+        start: number;
+        end: number;
+    };
+    after: {
+        index: number;
+        id: PanelId;
+        size: number;
+        minSize: number;
+        maxSize: number;
+        remainingSize: number;
+        start: number;
+        end: number;
+    };
+} | undefined;
+declare function getHandleBounds(ctx: MachineContext, id?: string | null): {
+    min: number;
+    max: number;
+} | undefined;
+declare function getPanelBounds(ctx: MachineContext, id?: string | null): {
+    before: {
+        index: number;
+        min: number;
+        max: number;
+        isAtMin: boolean;
+        isAtMax: boolean;
+        up(step: number): number;
+        down(step: number): number;
+    };
+    after: {
+        index: number;
+        min: number;
+        max: number;
+        isAtMin: boolean;
+        isAtMax: boolean;
+        up(step: number): number;
+        down(step: number): number;
+    };
+} | undefined;
+declare function clamp(value: number, min: number, max: number): number;
+
+export { clamp, getHandleBounds, getHandlePanels, getNormalizedPanels, getPanelBounds };

package/dist/splitter.utils.js

@@ -0,0 +1,159 @@
+"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);
+
+// 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`);
+  }
+}
+function getNormalizedPanels(ctx) {
+  let numOfPanelsWithoutSize = 0;
+  let totalSize = 0;
+  let totalMinSize = 0;
+  const panels = ctx.size.map((panel) => {
+    var _a, _b;
+    const minSize = (_a = panel.minSize) != null ? _a : 10;
+    const maxSize = (_b = panel.maxSize) != null ? _b : 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) {
+  var _a;
+  const [beforeId, afterId] = (_a = id == null ? void 0 : id.split(":")) != null ? _a : [];
+  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);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  clamp,
+  getHandleBounds,
+  getHandlePanels,
+  getNormalizedPanels,
+  getPanelBounds
+});

package/dist/splitter.utils.mjs

@@ -0,0 +1,14 @@
+import {
+  clamp,
+  getHandleBounds,
+  getHandlePanels,
+  getNormalizedPanels,
+  getPanelBounds
+} from "./chunk-SQ3UMXCZ.mjs";
+export {
+  clamp,
+  getHandleBounds,
+  getHandlePanels,
+  getNormalizedPanels,
+  getPanelBounds
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/splitter",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "Core logic for the splitter widget implemented as a state machine",
   "keywords": [
     "js",
@@ -28,12 +28,12 @@
   },
   "dependencies": {
     "@zag-js/anatomy": "0.1.3",
-    "@zag-js/types": "0.3.2",
-    "@zag-js/core": "0.2.4"
+    "@zag-js/core": "0.2.5",
+    "@zag-js/types": "0.3.3"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
-    "@zag-js/dom-utils": "0.2.2",
+    "@zag-js/dom-utils": "0.2.3",
     "@zag-js/number-utils": "0.2.2",
     "@zag-js/utils": "0.3.2"
   },

package/dist/chunk-7IDNY7GP.mjs

@@ -1,217 +0,0 @@
-import {
-  parts
-} from "./chunk-DX6NGFGC.mjs";
-import {
-  dom
-} from "./chunk-A3GF7W2N.mjs";
-
-// ../../utilities/dom/src/attrs.ts
-var dataAttr = (guard) => {
-  return guard ? "" : void 0;
-};
-
-// ../../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 = {}) {
-  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;
-  }
-}
-
-// src/splitter.connect.ts
-function connect(state, send, normalize) {
-  const isHorizontal = state.context.isHorizontal;
-  const isDisabled = state.context.disabled;
-  const isFocused = state.hasTag("focus");
-  const isDragging = state.matches("dragging");
-  const isAtMin = state.context.isAtMin;
-  const isAtMax = state.context.isAtMax;
-  const min = state.context.min;
-  const max = state.context.max;
-  const value = state.context.value;
-  return {
-    isCollapsed: isAtMin,
-    isExpanded: isAtMax,
-    isFocused,
-    isDragging,
-    value,
-    collapse() {
-      send("COLLAPSE");
-    },
-    expand() {
-      send("EXPAND");
-    },
-    toggle() {
-      send("TOGGLE");
-    },
-    setSize(size) {
-      send({ type: "SET_SIZE", size });
-    },
-    rootProps: normalize.element({
-      ...parts.root.attrs,
-      "data-orientation": state.context.orientation,
-      "data-disabled": dataAttr(isDisabled),
-      id: dom.getRootId(state.context),
-      style: {
-        display: "flex",
-        flex: "1 1 0%",
-        flexDirection: isHorizontal ? "row" : "column"
-      }
-    }),
-    secondaryPaneProps: normalize.element({
-      ...parts.secondaryPane.attrs,
-      "data-disabled": dataAttr(isDisabled),
-      id: dom.getSecondaryPaneId(state.context),
-      style: {
-        height: isHorizontal ? "100%" : "auto",
-        width: isHorizontal ? "auto" : "100%",
-        flex: "1 1 auto",
-        position: "relative"
-      }
-    }),
-    primaryPaneProps: normalize.element({
-      ...parts.primaryPane.attrs,
-      id: dom.getPrimaryPaneId(state.context),
-      "data-disabled": dataAttr(isDisabled),
-      "data-state": isAtMax ? "at-max" : isAtMin ? "at-min" : "between",
-      style: {
-        visibility: "visible",
-        flex: `0 0 ${value}px`,
-        position: "relative",
-        userSelect: isDragging ? "none" : "auto",
-        ...isHorizontal ? { minWidth: `${min}px`, maxWidth: `${max}px` } : { minHeight: `${min}px`, maxHeight: `${max}px` }
-      }
-    }),
-    toggleButtonProps: normalize.element({
-      ...parts.toggleButton.attrs,
-      id: dom.getToggleButtonId(state.context),
-      "aria-label": state.context.isAtMin ? "Expand Primary Pane" : "Collapse Primary Pane",
-      onClick() {
-        send("TOGGLE");
-      }
-    }),
-    labelProps: normalize.element({
-      ...parts.label.attrs,
-      id: dom.getLabelId(state.context)
-    }),
-    splitterProps: normalize.element({
-      ...parts.splitter.attrs,
-      id: dom.getSplitterId(state.context),
-      role: "separator",
-      tabIndex: isDisabled ? void 0 : 0,
-      "aria-valuenow": value,
-      "aria-valuemin": min,
-      "aria-valuemax": max,
-      "aria-orientation": state.context.orientation,
-      "aria-labelledby": dom.getLabelId(state.context),
-      "aria-controls": dom.getPrimaryPaneId(state.context),
-      "data-orientation": state.context.orientation,
-      "data-focus": dataAttr(isFocused),
-      "data-disabled": dataAttr(isDisabled),
-      style: {
-        touchAction: "none",
-        userSelect: "none",
-        WebkitUserSelect: "none",
-        msUserSelect: "none",
-        flex: "0 0 auto",
-        cursor: dom.getCursor(state.context),
-        minHeight: isHorizontal ? "0px" : void 0,
-        minWidth: isHorizontal ? void 0 : "0px"
-      },
-      onPointerDown(event) {
-        if (isDisabled) {
-          event.preventDefault();
-          return;
-        }
-        send("POINTER_DOWN");
-        event.preventDefault();
-        event.stopPropagation();
-      },
-      onPointerOver() {
-        if (isDisabled)
-          return;
-        send("POINTER_OVER");
-      },
-      onPointerLeave() {
-        if (isDisabled)
-          return;
-        send("POINTER_LEAVE");
-      },
-      onBlur() {
-        send("BLUR");
-      },
-      onFocus() {
-        send("FOCUS");
-      },
-      onDoubleClick() {
-        if (isDisabled)
-          return;
-        send("DOUBLE_CLICK");
-      },
-      onKeyDown(event) {
-        if (isDisabled)
-          return;
-        const step = getEventStep(event) * state.context.step;
-        const keyMap = {
-          ArrowUp() {
-            send({ type: "ARROW_UP", step });
-          },
-          ArrowDown() {
-            send({ type: "ARROW_DOWN", step });
-          },
-          ArrowLeft() {
-            send({ type: "ARROW_LEFT", step });
-          },
-          ArrowRight() {
-            send({ type: "ARROW_RIGHT", step });
-          },
-          Home() {
-            send("HOME");
-          },
-          End() {
-            send("END");
-          }
-        };
-        const key = getEventKey(event, state.context);
-        const exec = keyMap[key];
-        if (exec) {
-          exec(event);
-          event.preventDefault();
-        }
-      }
-    })
-  };
-}
-
-export {
-  connect
-};