@zag-js/splitter 0.2.6 → 0.2.8

package/dist/index.mjs

@@ -1,13 +1,14 @@
 import {
   connect
-} from "./chunk-7IDNY7GP.mjs";
+} from "./chunk-UC2SKBKO.mjs";
 import {
   anatomy
-} from "./chunk-DX6NGFGC.mjs";
+} from "./chunk-HPRMFGOY.mjs";
 import {
   machine
-} from "./chunk-F2ZDEPE3.mjs";
-import "./chunk-A3GF7W2N.mjs";
+} from "./chunk-IOEWCDUH.mjs";
+import "./chunk-T56NFB6E.mjs";
+import "./chunk-SQ3UMXCZ.mjs";
 export {
   anatomy,
   connect,

package/dist/splitter.anatomy.d.ts

@@ -1,6 +1,6 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"splitter" | "root" | "secondaryPane" | "primaryPane" | "toggleButton" | "label">;
-declare const parts: Record<"splitter" | "root" | "secondaryPane" | "primaryPane" | "toggleButton" | "label", _zag_js_anatomy.AnatomyPart>;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "panel" | "toggleTrigger" | "resizeTrigger">;
+declare const parts: Record<"root" | "panel" | "toggleTrigger" | "resizeTrigger", _zag_js_anatomy.AnatomyPart>;
 
 export { anatomy, parts };

package/dist/splitter.anatomy.js

@@ -25,14 +25,7 @@ __export(splitter_anatomy_exports, {
 });
 module.exports = __toCommonJS(splitter_anatomy_exports);
 var import_anatomy = require("@zag-js/anatomy");
-var anatomy = (0, import_anatomy.createAnatomy)("splitter").parts(
-  "root",
-  "secondaryPane",
-  "primaryPane",
-  "toggleButton",
-  "label",
-  "splitter"
-);
+var anatomy = (0, import_anatomy.createAnatomy)("splitter").parts("root", "panel", "toggleTrigger", "resizeTrigger");
 var parts = anatomy.build();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/splitter.anatomy.mjs

@@ -1,7 +1,7 @@
 import {
   anatomy,
   parts
-} from "./chunk-DX6NGFGC.mjs";
+} from "./chunk-HPRMFGOY.mjs";
 export {
   anatomy,
   parts

package/dist/splitter.connect.d.ts

@@ -1,23 +1,29 @@
 import { PropTypes, NormalizeProps } from '@zag-js/types';
-import { State, Send } from './splitter.types.js';
+import { State, Send, PanelId, PanelProps, ResizeTriggerProps } from './splitter.types.js';
 import '@zag-js/core';
 
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
-    isCollapsed: boolean;
-    isExpanded: boolean;
     isFocused: boolean;
     isDragging: boolean;
-    value: number;
-    collapse(): void;
-    expand(): void;
-    toggle(): void;
-    setSize(size: number): void;
+    bounds: {
+        min: number;
+        max: number;
+    } | undefined;
+    collapse(id: PanelId): void;
+    expand(id: PanelId): void;
+    toggle(id: PanelId): void;
+    setSize(id: PanelId, size: number): void;
     rootProps: T["element"];
-    secondaryPaneProps: T["element"];
-    primaryPaneProps: T["element"];
-    toggleButtonProps: T["element"];
-    labelProps: T["element"];
-    splitterProps: T["element"];
+    getPanelProps(props: PanelProps): T["element"];
+    getResizeTriggerState(props: ResizeTriggerProps): {
+        isDisabled: boolean;
+        isFocused: boolean;
+        panelIds: string[];
+        min: number | undefined;
+        max: number | undefined;
+        value: number;
+    };
+    getResizeTriggerProps(props: ResizeTriggerProps): T["element"];
 };
 
 export { connect };

package/dist/splitter.connect.js

@@ -56,25 +56,7 @@ function defineDomHelpers(helpers) {
       return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
     },
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
-    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
-    createEmitter: (ctx, target) => {
-      const win = dom2.getWin(ctx);
-      return function emit(evt, detail, options) {
-        const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
-        const eventName = `zag:${evt}`;
-        const init = { bubbles, cancelable, composed, detail };
-        const event = new win.CustomEvent(eventName, init);
-        target.dispatchEvent(event);
-      };
-    },
-    createListener: (target) => {
-      return function listen(evt, handler) {
-        const eventName = `zag:${evt}`;
-        const listener = (e) => handler(e);
-        target.addEventListener(eventName, listener);
-        return () => target.removeEventListener(eventName, listener);
-      };
-    }
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
   return {
     ...dom2,
@@ -119,222 +101,261 @@ function getEventStep(event) {
   }
 }
 
+// ../../utilities/dom/src/nodelist.ts
+function queryAll(root, selector) {
+  var _a;
+  return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
+}
+
 // src/splitter.anatomy.ts
 var import_anatomy = require("@zag-js/anatomy");
-var anatomy = (0, import_anatomy.createAnatomy)("splitter").parts(
-  "root",
-  "secondaryPane",
-  "primaryPane",
-  "toggleButton",
-  "label",
-  "splitter"
-);
+var anatomy = (0, import_anatomy.createAnatomy)("splitter").parts("root", "panel", "toggleTrigger", "resizeTrigger");
 var parts = anatomy.build();
 
 // src/splitter.dom.ts
 var dom = defineDomHelpers({
-  getRootId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `splitter:${ctx.id}`;
-  },
-  getSplitterId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.splitter) != null ? _b : `splitter:${ctx.id}:splitter`;
-  },
-  getToggleButtonId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.toggleBtn) != null ? _b : `splitter:${ctx.id}:toggle-btn`;
-  },
-  getLabelId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `splitter:${ctx.id}:label`;
-  },
-  getPrimaryPaneId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.primaryPane) != null ? _b : `splitter:${ctx.id}:primary`;
-  },
-  getSecondaryPaneId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.secondaryPane) != null ? _b : `splitter:${ctx.id}:secondary`;
-  },
-  getSplitterEl: (ctx) => dom.getById(ctx, dom.getSplitterId(ctx)),
-  getPrimaryPaneEl: (ctx) => dom.getById(ctx, dom.getPrimaryPaneId(ctx)),
+  getRootId: (ctx) => `splitter:${ctx.id}`,
+  getResizeTriggerId: (ctx, id) => `splitter:${ctx.id}:splitter:${id}`,
+  getToggleTriggerId: (ctx) => `splitter:${ctx.id}:toggle-btn`,
+  getLabelId: (ctx) => `splitter:${ctx.id}:label`,
+  getPanelId: (ctx, id) => `splitter:${ctx.id}:panel:${id}`,
+  globalCursorId: (ctx) => `splitter:${ctx.id}:global-cursor`,
+  getRootEl: (ctx) => dom.getById(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) {
-    if (ctx.disabled || ctx.fixed)
-      return "default";
     const x = ctx.isHorizontal;
     let cursor = x ? "col-resize" : "row-resize";
-    if (ctx.isAtMin)
+    if (ctx.activeResizeState.isAtMin)
       cursor = x ? "e-resize" : "s-resize";
-    if (ctx.isAtMax)
+    if (ctx.activeResizeState.isAtMax)
       cursor = x ? "w-resize" : "n-resize";
     return cursor;
+  },
+  getPanelStyle(ctx, id) {
+    var _a, _b;
+    const flexGrow = (_b = (_a = ctx.panels.find((panel) => panel.id === id)) == null ? void 0 : _a.size) != null ? _b : "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) {
+    var _a;
+    (_a = dom.getById(ctx, dom.globalCursorId(ctx))) == null ? void 0 : _a.remove();
   }
 });
 
+// src/splitter.utils.ts
+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)
+  };
+}
+
 // 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,
+  const api = {
     isFocused,
     isDragging,
-    value,
-    collapse() {
-      send("COLLAPSE");
+    bounds: getHandleBounds(state.context),
+    collapse(id) {
+      send({ type: "COLLAPSE", id });
     },
-    expand() {
-      send("EXPAND");
+    expand(id) {
+      send({ type: "EXPAND", id });
     },
-    toggle() {
-      send("TOGGLE");
+    toggle(id) {
+      send({ type: "TOGGLE", id });
     },
-    setSize(size) {
-      send({ type: "SET_SIZE", size });
+    setSize(id, size) {
+      send({ type: "SET_SIZE", id, size });
     },
     rootProps: normalize.element({
       ...parts.root.attrs,
       "data-orientation": state.context.orientation,
-      "data-disabled": dataAttr(isDisabled),
       id: dom.getRootId(state.context),
+      dir: state.context.dir,
       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");
+        flexDirection: isHorizontal ? "row" : "column",
+        height: "100%",
+        width: "100%",
+        overflow: "hidden"
       }
     }),
-    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");
+    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)
+      });
+    },
+    getResizeTriggerState(props) {
+      const { id, disabled } = props;
+      const ids = id.split(":");
+      const panelIds = ids.map((id2) => dom.getPanelId(state.context, id2));
+      const panels = getHandleBounds(state.context, id);
+      return {
+        isDisabled: !!disabled,
+        isFocused: state.context.activeResizeId === id && isFocused,
+        panelIds,
+        min: panels == null ? void 0 : panels.min,
+        max: panels == null ? void 0 : panels.max,
+        value: 0
+      };
+    },
+    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": dataAttr(triggerState.isFocused),
+        "data-disabled": 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;
           }
-        };
-        const key = getEventKey(event, state.context);
-        const exec = keyMap[key];
-        if (exec) {
-          exec(event);
+          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 = 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 = getEventKey(event, state.context);
+          const exec = keyMap[key];
+          if (exec) {
+            exec(event);
+            event.preventDefault();
+          }
         }
-      }
-    })
+      });
+    }
   };
+  return api;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/splitter.connect.mjs

@@ -1,8 +1,9 @@
 import {
   connect
-} from "./chunk-7IDNY7GP.mjs";
-import "./chunk-DX6NGFGC.mjs";
-import "./chunk-A3GF7W2N.mjs";
+} from "./chunk-UC2SKBKO.mjs";
+import "./chunk-HPRMFGOY.mjs";
+import "./chunk-T56NFB6E.mjs";
+import "./chunk-SQ3UMXCZ.mjs";
 export {
   connect
 };

package/dist/splitter.dom.d.ts

@@ -1,6 +1,6 @@
-import { MachineContext } from './splitter.types.js';
+import { JSX } from '@zag-js/types';
+import { MachineContext, PanelId } from './splitter.types.js';
 import '@zag-js/core';
-import '@zag-js/types';
 
 declare const dom: {
     getRootNode: (ctx: {
@@ -18,20 +18,22 @@ declare const dom: {
     getById: <T = HTMLElement>(ctx: {
         getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
     }, id: string) => T | null;
-    createEmitter: (ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
-    }, target: HTMLElement) => (evt: string, detail: Record<string, any>, options?: EventInit | undefined) => void;
-    createListener: (target: HTMLElement) => <T_1 = any>(evt: string, handler: (e: CustomEvent<T_1>) => void) => () => void;
 } & {
     getRootId: (ctx: MachineContext) => string;
-    getSplitterId: (ctx: MachineContext) => string;
-    getToggleButtonId: (ctx: MachineContext) => string;
+    getResizeTriggerId: (ctx: MachineContext, id: string) => string;
+    getToggleTriggerId: (ctx: MachineContext) => string;
     getLabelId: (ctx: MachineContext) => string;
-    getPrimaryPaneId: (ctx: MachineContext) => string;
-    getSecondaryPaneId: (ctx: MachineContext) => string;
-    getSplitterEl: (ctx: MachineContext) => HTMLElement | null;
-    getPrimaryPaneEl: (ctx: MachineContext) => HTMLElement | null;
-    getCursor(ctx: MachineContext): (string & {}) | "col-resize" | "default" | "e-resize" | "n-resize" | "row-resize" | "s-resize" | "w-resize";
+    getPanelId: (ctx: MachineContext, id: string | number) => string;
+    globalCursorId: (ctx: MachineContext) => string;
+    getRootEl: (ctx: MachineContext) => HTMLElement | null;
+    getResizeTriggerEl: (ctx: MachineContext, id: string) => HTMLElement | null;
+    getPanelEl: (ctx: MachineContext, id: string | number) => HTMLElement | null;
+    getCursor(ctx: MachineContext): (string & {}) | "col-resize" | "e-resize" | "n-resize" | "row-resize" | "s-resize" | "w-resize";
+    getPanelStyle(ctx: MachineContext, id: PanelId): JSX.CSSProperties;
+    getActiveHandleEl(ctx: MachineContext): HTMLElement | null | undefined;
+    getResizeTriggerEls(ctx: MachineContext): HTMLElement[];
+    setupGlobalCursor(ctx: MachineContext): void;
+    removeGlobalCursor(ctx: MachineContext): void;
 };
 
 export { dom };