@zag-js/splitter 0.10.1 → 0.10.3

package/dist/index.d.ts

@@ -1,7 +1,4 @@
-export { anatomy } from './splitter.anatomy.js';
-export { connect } from './splitter.connect.js';
-export { machine } from './splitter.machine.js';
-export { UserDefinedContext as Context, MachineState, PanelProps, ResizeTriggerProps } from './splitter.types.js';
-import '@zag-js/anatomy';
-import '@zag-js/types';
-import '@zag-js/core';
+export { anatomy } from "./splitter.anatomy";
+export { connect } from "./splitter.connect";
+export { machine } from "./splitter.machine";
+export type { MachineState, UserDefinedContext as Context, PanelProps, ResizeTriggerProps } from "./splitter.types";

package/dist/index.js

@@ -1,689 +1,13 @@
-"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/index.ts
-var src_exports = {};
-__export(src_exports, {
-  anatomy: () => anatomy,
-  connect: () => connect,
-  machine: () => machine
-});
-module.exports = __toCommonJS(src_exports);
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-// src/splitter.anatomy.ts
-var import_anatomy = require("@zag-js/anatomy");
-var anatomy = (0, import_anatomy.createAnatomy)("splitter").parts("root", "panel", "toggleTrigger", "resizeTrigger");
-var parts = anatomy.build();
+const splitter_anatomy = require('./splitter.anatomy.js');
+const splitter_connect = require('./splitter.connect.js');
+const splitter_machine = require('./splitter.machine.js');
 
-// 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 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();
-  }
-});
 
-// 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 ?? 10;
-    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.connect.ts
-function connect(state, send, normalize) {
-  const isHorizontal = state.context.isHorizontal;
-  const isFocused = state.hasTag("focus");
-  const isDragging = state.matches("dragging");
-  const panels = state.context.panels;
-  const api = {
-    /**
-     * Whether the splitter is focused.
-     */
-    isFocused,
-    /**
-     * Whether the splitter is being dragged.
-     */
-    isDragging,
-    /**
-     *  The bounds of the currently dragged splitter handle.
-     */
-    bounds: getHandleBounds(state.context),
-    /**
-     * Function to set a panel to its minimum size.
-     */
-    setToMinSize(id) {
-      const panel = panels.find((panel2) => panel2.id === id);
-      send({ type: "SET_SIZE", id, size: panel?.minSize, src: "collapse" });
-    },
-    /**
-     * Function to set a panel to its maximum size.
-     */
-    setToMaxSize(id) {
-      const panel = panels.find((panel2) => panel2.id === id);
-      send({ type: "SET_SIZE", id, size: panel?.maxSize, src: "expand" });
-    },
-    /**
-     * 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 panels2 = getHandleBounds(state.context, id);
-      return {
-        isDisabled: !!disabled,
-        isFocused: state.context.activeResizeId === id && isFocused,
-        panelIds,
-        min: panels2?.min,
-        max: panels2?.max,
-        value: 0
-      };
-    },
-    rootProps: normalize.element({
-      ...parts.root.attrs,
-      "data-orientation": state.context.orientation,
-      id: dom.getRootId(state.context),
-      dir: state.context.dir,
-      style: {
-        display: "flex",
-        flexDirection: isHorizontal ? "row" : "column",
-        height: "100%",
-        width: "100%",
-        overflow: "hidden"
-      }
-    }),
-    getPanelProps(props) {
-      const { id } = props;
-      return normalize.element({
-        ...parts.panel.attrs,
-        dir: state.context.dir,
-        id: dom.getPanelId(state.context, id),
-        "data-ownedby": dom.getRootId(state.context),
-        style: dom.getPanelStyle(state.context, id)
-      });
-    },
-    getResizeTriggerProps(props) {
-      const { id, disabled, step = 1 } = props;
-      const triggerState = api.getResizeTriggerState(props);
-      return normalize.element({
-        ...parts.resizeTrigger.attrs,
-        dir: state.context.dir,
-        id: dom.getResizeTriggerId(state.context, id),
-        role: "separator",
-        "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": state.context.orientation,
-        "aria-orientation": state.context.orientation,
-        "aria-controls": triggerState.panelIds.join(" "),
-        "data-focus": (0, import_dom_query2.dataAttr)(triggerState.isFocused),
-        "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
-        style: {
-          touchAction: "none",
-          userSelect: "none",
-          flex: "0 0 auto",
-          pointerEvents: isDragging && !triggerState.isFocused ? "none" : void 0,
-          cursor: isHorizontal ? "col-resize" : "row-resize",
-          [isHorizontal ? "minHeight" : "minWidth"]: "0"
-        },
-        onPointerDown(event) {
-          if (disabled) {
-            event.preventDefault();
-            return;
-          }
-          send({ type: "POINTER_DOWN", id });
-          event.preventDefault();
-          event.stopPropagation();
-        },
-        onPointerOver() {
-          if (disabled)
-            return;
-          send({ type: "POINTER_OVER", id });
-        },
-        onPointerLeave() {
-          if (disabled)
-            return;
-          send({ type: "POINTER_LEAVE", id });
-        },
-        onBlur() {
-          send("BLUR");
-        },
-        onFocus() {
-          send({ type: "FOCUS", id });
-        },
-        onDoubleClick() {
-          if (disabled)
-            return;
-          send({ type: "DOUBLE_CLICK", id });
-        },
-        onKeyDown(event) {
-          if (disabled)
-            return;
-          const moveStep = (0, import_dom_event.getEventStep)(event) * step;
-          const keyMap = {
-            Enter() {
-              send("ENTER");
-            },
-            ArrowUp() {
-              send({ type: "ARROW_UP", step: moveStep });
-            },
-            ArrowDown() {
-              send({ type: "ARROW_DOWN", step: moveStep });
-            },
-            ArrowLeft() {
-              send({ type: "ARROW_LEFT", step: moveStep });
-            },
-            ArrowRight() {
-              send({ type: "ARROW_RIGHT", step: moveStep });
-            },
-            Home() {
-              send("HOME");
-            },
-            End() {
-              send("END");
-            }
-          };
-          const key = (0, import_dom_event.getEventKey)(event, state.context);
-          const exec = keyMap[key];
-          if (exec) {
-            exec(event);
-            event.preventDefault();
-          }
-        }
-      });
-    }
-  };
-  return api;
-}
-
-// 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 = (0, import_utils.compact)(userContext);
-  return (0, import_core.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: {
-        COLLAPSE: {
-          actions: "setStartPanelToMin"
-        },
-        EXPAND: {
-          actions: "setStartPanelToMax"
-        },
-        TOGGLE: [
-          {
-            guard: "isStartPanelAtMin",
-            actions: "setStartPanelToMax"
-          },
-          {
-            actions: "setStartPanelToMin"
-          }
-        ],
-        SET_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 (0, import_dom_event2.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) {
-          (0, import_dom_query3.raf)(() => {
-            dom.getActiveHandleEl(ctx2)?.focus({ preventScroll: true });
-          });
-        },
-        blurResizeHandle(ctx2) {
-          (0, import_dom_query3.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 = (0, import_dom_event2.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;
-        }
-      }
-    }
-  );
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  anatomy,
-  connect,
-  machine
-});
+exports.anatomy = splitter_anatomy.anatomy;
+exports.connect = splitter_connect.connect;
+exports.machine = splitter_machine.machine;