@zag-js/splitter 0.10.5 → 0.11.0

package/dist/splitter.dom.mjs

@@ -1,58 +0,0 @@
-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,3 +0,0 @@
-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,285 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-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');
-
-function machine(userContext) {
-  const ctx = utils.compact(userContext);
-  return 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) => splitter_utils.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 = splitter_dom.dom.getDoc(ctx2);
-          return domEvent.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) {
-          splitter_dom.dom.setupGlobalCursor(ctx2);
-        },
-        clearGlobalCursor(ctx2) {
-          splitter_dom.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 = splitter_utils.clamp(size, panel.minSize ?? 0, panel.maxSize ?? 100);
-            return panel.id === id ? { ...panel, size: panelSize } : panel;
-          });
-        },
-        setStartPanelToMin(ctx2) {
-          const bounds = splitter_utils.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 = splitter_utils.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 = splitter_utils.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 = splitter_utils.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 = splitter_utils.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) {
-          domQuery.raf(() => {
-            splitter_dom.dom.getActiveHandleEl(ctx2)?.focus({ preventScroll: true });
-          });
-        },
-        blurResizeHandle(ctx2) {
-          domQuery.raf(() => {
-            splitter_dom.dom.getActiveHandleEl(ctx2)?.blur();
-          });
-        },
-        setPreviousPanels(ctx2) {
-          ctx2.previousPanels = ctx2.panels.slice();
-        },
-        setActiveResizeState(ctx2) {
-          const panels = splitter_utils.getPanelBounds(ctx2);
-          if (!panels)
-            return;
-          const { before } = panels;
-          ctx2.activeResizeState = {
-            isAtMin: before.isAtMin,
-            isAtMax: before.isAtMax
-          };
-        },
-        setPointerValue(ctx2, evt) {
-          const panels = splitter_utils.getHandlePanels(ctx2);
-          const bounds = splitter_utils.getHandleBounds(ctx2);
-          if (!panels || !bounds)
-            return;
-          const rootEl = splitter_dom.dom.getRootEl(ctx2);
-          const relativePoint = domEvent.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 = 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;
-          ctx2.size[after.index].size = after.size - offset;
-        }
-      }
-    }
-  );
-}
-
-exports.machine = machine;

package/dist/splitter.machine.mjs

@@ -1,281 +0,0 @@
-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 };