@zag-js/splitter 1.27.1 → 1.29.0

package/dist/index.d.mts

@@ -3,7 +3,7 @@ import { RequiredBy, DirectionProperty, CommonProperties, PropTypes, NormalizePr
 import * as _zag_js_core from '@zag-js/core';
 import { Service, EventObject, Machine } from '@zag-js/core';
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "panel" | "resizeTrigger">;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "panel" | "resizeTrigger" | "resizeTriggerIndicator">;
 
 type ResizeEvent = PointerEvent | KeyboardEvent;
 type PanelId = string;
@@ -153,6 +153,11 @@ interface ResizeTriggerProps {
     id: ResizeTriggerId;
     disabled?: boolean | undefined;
 }
+interface ResizeTriggerState {
+    dragging: boolean;
+    focused: boolean;
+    disabled: boolean;
+}
 interface PanelItem {
     type: "panel";
     id: PanelId;
@@ -167,6 +172,10 @@ interface SplitterApi<T extends PropTypes = PropTypes> {
      * Whether the splitter is currently being resized.
      */
     dragging: boolean;
+    /**
+     * The orientation of the splitter.
+     */
+    orientation: "horizontal" | "vertical";
     /**
      * Returns the current sizes of the panels.
      */
@@ -179,6 +188,14 @@ interface SplitterApi<T extends PropTypes = PropTypes> {
      * Returns the items of the splitter.
      */
     getItems: () => SplitterItem[];
+    /**
+     * Returns the panels of the splitter.
+     */
+    getPanels: () => PanelData[];
+    /**
+     * Returns the panel with the specified id.
+     */
+    getPanelById: (id: PanelId) => PanelData;
     /**
      * Returns the size of the specified panel.
      */
@@ -211,9 +228,14 @@ interface SplitterApi<T extends PropTypes = PropTypes> {
      * Resets the splitter to its initial state.
      */
     resetSizes: VoidFunction;
+    /**
+     * Returns the state of the resize trigger.
+     */
+    getResizeTriggerState: (props: ResizeTriggerProps) => ResizeTriggerState;
     getRootProps: () => T["element"];
     getPanelProps: (props: PanelProps) => T["element"];
     getResizeTriggerProps: (props: ResizeTriggerProps) => T["element"];
+    getResizeTriggerIndicator: (props: ResizeTriggerProps) => T["element"];
 }
 
 declare function connect<T extends PropTypes>(service: SplitterService, normalize: NormalizeProps<T>): SplitterApi<T>;
@@ -229,4 +251,4 @@ declare const splitResizeTriggerProps: <Props extends ResizeTriggerProps>(props:
 
 declare function getPanelLayout(panels: PanelData[]): string;
 
-export { type SplitterApi as Api, type CursorState, type DragState, type ElementIds, type ExpandCollapseDetails, type SplitterItem as Item, type KeyboardState, type SplitterMachine as Machine, type PanelData, type PanelId, type PanelItem, type PanelProps, type SplitterProps as Props, type ResizeDetails, type ResizeEndDetails, type ResizeEvent, type ResizeTriggerId, type ResizeTriggerItem, type ResizeTriggerProps, type SplitterService as Service, anatomy, connect, getPanelLayout as layout, machine, panelProps, props, resizeTriggerProps, splitPanelProps, splitProps, splitResizeTriggerProps };
+export { type SplitterApi as Api, type CursorState, type DragState, type ElementIds, type ExpandCollapseDetails, type SplitterItem as Item, type KeyboardState, type SplitterMachine as Machine, type PanelData, type PanelId, type PanelItem, type PanelProps, type SplitterProps as Props, type ResizeDetails, type ResizeEndDetails, type ResizeEvent, type ResizeTriggerId, type ResizeTriggerItem, type ResizeTriggerProps, type ResizeTriggerState, type SplitterService as Service, anatomy, connect, getPanelLayout as layout, machine, panelProps, props, resizeTriggerProps, splitPanelProps, splitProps, splitResizeTriggerProps };

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import { RequiredBy, DirectionProperty, CommonProperties, PropTypes, NormalizePr
 import * as _zag_js_core from '@zag-js/core';
 import { Service, EventObject, Machine } from '@zag-js/core';
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "panel" | "resizeTrigger">;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "panel" | "resizeTrigger" | "resizeTriggerIndicator">;
 
 type ResizeEvent = PointerEvent | KeyboardEvent;
 type PanelId = string;
@@ -153,6 +153,11 @@ interface ResizeTriggerProps {
     id: ResizeTriggerId;
     disabled?: boolean | undefined;
 }
+interface ResizeTriggerState {
+    dragging: boolean;
+    focused: boolean;
+    disabled: boolean;
+}
 interface PanelItem {
     type: "panel";
     id: PanelId;
@@ -167,6 +172,10 @@ interface SplitterApi<T extends PropTypes = PropTypes> {
      * Whether the splitter is currently being resized.
      */
     dragging: boolean;
+    /**
+     * The orientation of the splitter.
+     */
+    orientation: "horizontal" | "vertical";
     /**
      * Returns the current sizes of the panels.
      */
@@ -179,6 +188,14 @@ interface SplitterApi<T extends PropTypes = PropTypes> {
      * Returns the items of the splitter.
      */
     getItems: () => SplitterItem[];
+    /**
+     * Returns the panels of the splitter.
+     */
+    getPanels: () => PanelData[];
+    /**
+     * Returns the panel with the specified id.
+     */
+    getPanelById: (id: PanelId) => PanelData;
     /**
      * Returns the size of the specified panel.
      */
@@ -211,9 +228,14 @@ interface SplitterApi<T extends PropTypes = PropTypes> {
      * Resets the splitter to its initial state.
      */
     resetSizes: VoidFunction;
+    /**
+     * Returns the state of the resize trigger.
+     */
+    getResizeTriggerState: (props: ResizeTriggerProps) => ResizeTriggerState;
     getRootProps: () => T["element"];
     getPanelProps: (props: PanelProps) => T["element"];
     getResizeTriggerProps: (props: ResizeTriggerProps) => T["element"];
+    getResizeTriggerIndicator: (props: ResizeTriggerProps) => T["element"];
 }
 
 declare function connect<T extends PropTypes>(service: SplitterService, normalize: NormalizeProps<T>): SplitterApi<T>;
@@ -229,4 +251,4 @@ declare const splitResizeTriggerProps: <Props extends ResizeTriggerProps>(props:
 
 declare function getPanelLayout(panels: PanelData[]): string;
 
-export { type SplitterApi as Api, type CursorState, type DragState, type ElementIds, type ExpandCollapseDetails, type SplitterItem as Item, type KeyboardState, type SplitterMachine as Machine, type PanelData, type PanelId, type PanelItem, type PanelProps, type SplitterProps as Props, type ResizeDetails, type ResizeEndDetails, type ResizeEvent, type ResizeTriggerId, type ResizeTriggerItem, type ResizeTriggerProps, type SplitterService as Service, anatomy, connect, getPanelLayout as layout, machine, panelProps, props, resizeTriggerProps, splitPanelProps, splitProps, splitResizeTriggerProps };
+export { type SplitterApi as Api, type CursorState, type DragState, type ElementIds, type ExpandCollapseDetails, type SplitterItem as Item, type KeyboardState, type SplitterMachine as Machine, type PanelData, type PanelId, type PanelItem, type PanelProps, type SplitterProps as Props, type ResizeDetails, type ResizeEndDetails, type ResizeEvent, type ResizeTriggerId, type ResizeTriggerItem, type ResizeTriggerProps, type ResizeTriggerState, type SplitterService as Service, anatomy, connect, getPanelLayout as layout, machine, panelProps, props, resizeTriggerProps, splitPanelProps, splitProps, splitResizeTriggerProps };

package/dist/index.js

@@ -7,7 +7,7 @@ var core = require('@zag-js/core');
 var types = require('@zag-js/types');
 
 // src/splitter.anatomy.ts
-var anatomy = anatomy$1.createAnatomy("splitter").parts("root", "panel", "resizeTrigger");
+var anatomy = anatomy$1.createAnatomy("splitter").parts("root", "panel", "resizeTrigger", "resizeTriggerIndicator");
 var parts = anatomy.build();
 var getRootId = (ctx) => ctx.ids?.root ?? `splitter:${ctx.id}`;
 var getResizeTriggerId = (ctx, id) => ctx.ids?.resizeTrigger?.(id) ?? `splitter:${ctx.id}:splitter:${id}`;
@@ -222,6 +222,7 @@ function connect(service, normalize) {
   const { state, send, prop, computed, context, scope } = service;
   const horizontal = computed("horizontal");
   const dragging = state.matches("dragging");
+  const orientation = prop("orientation");
   const getPanelStyle = (id) => {
     const panels = prop("panels");
     const panelIndex = panels.findIndex((panel) => panel.id === id);
@@ -235,8 +236,25 @@ function connect(service, normalize) {
       panelIndex
     });
   };
+  const getResizeTriggerState = (props2) => {
+    const { id, disabled } = props2;
+    const dragging2 = context.get("dragState")?.resizeTriggerId === id;
+    const focused = dragging2 || context.get("keyboardState")?.resizeTriggerId === id;
+    return {
+      dragging: dragging2,
+      focused,
+      disabled: !!disabled
+    };
+  };
   return {
     dragging,
+    orientation,
+    getPanels() {
+      return prop("panels");
+    },
+    getPanelById(id) {
+      return getPanelById(prop("panels"), id);
+    },
     getItems() {
       return prop("panels").flatMap((panel, index, arr) => {
         const nextPanel = arr[index + 1];
@@ -297,7 +315,8 @@ function connect(service, normalize) {
     getRootProps() {
       return normalize.element({
         ...parts.root.attrs,
-        "data-orientation": prop("orientation"),
+        "data-orientation": orientation,
+        "data-dragging": domQuery.dataAttr(dragging),
         id: getRootId(scope),
         dir: prop("dir"),
         style: {
@@ -313,7 +332,8 @@ function connect(service, normalize) {
       const { id } = props2;
       return normalize.element({
         ...parts.panel.attrs,
-        "data-orientation": prop("orientation"),
+        "data-orientation": orientation,
+        "data-dragging": domQuery.dataAttr(dragging),
         dir: prop("dir"),
         "data-id": id,
         "data-index": findPanelIndex(prop("panels"), id),
@@ -322,11 +342,22 @@ function connect(service, normalize) {
         style: getPanelStyle(id)
       });
     },
+    getResizeTriggerState,
+    getResizeTriggerIndicator(props2) {
+      const triggerState = getResizeTriggerState(props2);
+      return normalize.element({
+        ...parts.resizeTriggerIndicator.attrs,
+        "data-orientation": orientation,
+        "data-focus": domQuery.dataAttr(triggerState.focused),
+        "data-dragging": domQuery.dataAttr(triggerState.dragging),
+        "data-disabled": domQuery.dataAttr(triggerState.disabled),
+        "data-ownedby": getRootId(scope)
+      });
+    },
     getResizeTriggerProps(props2) {
-      const { id, disabled } = props2;
+      const { id } = props2;
+      const triggerState = getResizeTriggerState(props2);
       const aria = getAriaValue(context.get("size"), prop("panels"), id);
-      const dragging2 = context.get("dragState")?.resizeTriggerId === id;
-      const focused = dragging2 || context.get("keyboardState")?.resizeTriggerId === id;
       return normalize.element({
         ...parts.resizeTrigger.attrs,
         dir: prop("dir"),
@@ -334,27 +365,28 @@ function connect(service, normalize) {
         role: "separator",
         "data-id": id,
         "data-ownedby": getRootId(scope),
-        tabIndex: disabled ? void 0 : 0,
+        tabIndex: triggerState.disabled ? void 0 : 0,
         "aria-valuenow": aria.valueNow,
         "aria-valuemin": aria.valueMin,
         "aria-valuemax": aria.valueMax,
-        "data-orientation": prop("orientation"),
-        "aria-orientation": prop("orientation"),
+        "data-orientation": orientation,
+        "aria-orientation": orientation,
         "aria-controls": `${getPanelId(scope, aria.beforeId)} ${getPanelId(scope, aria.afterId)}`,
-        "data-focus": domQuery.dataAttr(focused),
-        "data-disabled": domQuery.dataAttr(disabled),
+        "data-focus": domQuery.dataAttr(triggerState.focused),
+        "data-dragging": domQuery.dataAttr(triggerState.dragging),
+        "data-disabled": domQuery.dataAttr(triggerState.disabled),
         style: {
           touchAction: "none",
           userSelect: "none",
           WebkitUserSelect: "none",
           flex: "0 0 auto",
-          pointerEvents: dragging2 && !focused ? "none" : void 0,
-          cursor: horizontal ? "col-resize" : "row-resize",
+          pointerEvents: triggerState.disabled ? "none" : triggerState.dragging && !triggerState.focused ? "none" : void 0,
+          cursor: triggerState.disabled ? void 0 : horizontal ? "col-resize" : "row-resize",
           [horizontal ? "minHeight" : "minWidth"]: "0"
         },
         onPointerDown(event) {
           if (!domQuery.isLeftClick(event)) return;
-          if (disabled) {
+          if (triggerState.disabled) {
             event.preventDefault();
             return;
           }
@@ -365,30 +397,30 @@ function connect(service, normalize) {
           event.stopPropagation();
         },
         onPointerUp(event) {
-          if (disabled) return;
+          if (triggerState.disabled) return;
           if (event.currentTarget.hasPointerCapture(event.pointerId)) {
             event.currentTarget.releasePointerCapture(event.pointerId);
           }
         },
         onPointerOver() {
-          if (disabled) return;
+          if (triggerState.disabled) return;
           send({ type: "POINTER_OVER", id });
         },
         onPointerLeave() {
-          if (disabled) return;
+          if (triggerState.disabled) return;
           send({ type: "POINTER_LEAVE", id });
         },
         onBlur() {
-          if (disabled) return;
+          if (triggerState.disabled) return;
           send({ type: "BLUR" });
         },
         onFocus() {
-          if (disabled) return;
+          if (triggerState.disabled) return;
           send({ type: "FOCUS", id });
         },
         onKeyDown(event) {
           if (event.defaultPrevented) return;
-          if (disabled) return;
+          if (triggerState.disabled) return;
           const keyboardResizeBy = prop("keyboardResizeBy");
           let delta = 0;
           if (event.shiftKey) {
@@ -426,7 +458,7 @@ function connect(service, normalize) {
           };
           const key = domQuery.getEventKey(event, {
             dir: prop("dir"),
-            orientation: prop("orientation")
+            orientation
           });
           const exec = keyMap[key];
           if (exec) {
@@ -712,6 +744,7 @@ var machine = core.createMachine({
     }
   },
   entry: ["syncSize"],
+  exit: ["clearGlobalCursor"],
   states: {
     idle: {
       entry: ["clearDraggingState", "clearKeyboardState"],

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { createMachine } from '@zag-js/core';
 import { createProps } from '@zag-js/types';
 
 // src/splitter.anatomy.ts
-var anatomy = createAnatomy("splitter").parts("root", "panel", "resizeTrigger");
+var anatomy = createAnatomy("splitter").parts("root", "panel", "resizeTrigger", "resizeTriggerIndicator");
 var parts = anatomy.build();
 var getRootId = (ctx) => ctx.ids?.root ?? `splitter:${ctx.id}`;
 var getResizeTriggerId = (ctx, id) => ctx.ids?.resizeTrigger?.(id) ?? `splitter:${ctx.id}:splitter:${id}`;
@@ -220,6 +220,7 @@ function connect(service, normalize) {
   const { state, send, prop, computed, context, scope } = service;
   const horizontal = computed("horizontal");
   const dragging = state.matches("dragging");
+  const orientation = prop("orientation");
   const getPanelStyle = (id) => {
     const panels = prop("panels");
     const panelIndex = panels.findIndex((panel) => panel.id === id);
@@ -233,8 +234,25 @@ function connect(service, normalize) {
       panelIndex
     });
   };
+  const getResizeTriggerState = (props2) => {
+    const { id, disabled } = props2;
+    const dragging2 = context.get("dragState")?.resizeTriggerId === id;
+    const focused = dragging2 || context.get("keyboardState")?.resizeTriggerId === id;
+    return {
+      dragging: dragging2,
+      focused,
+      disabled: !!disabled
+    };
+  };
   return {
     dragging,
+    orientation,
+    getPanels() {
+      return prop("panels");
+    },
+    getPanelById(id) {
+      return getPanelById(prop("panels"), id);
+    },
     getItems() {
       return prop("panels").flatMap((panel, index, arr) => {
         const nextPanel = arr[index + 1];
@@ -295,7 +313,8 @@ function connect(service, normalize) {
     getRootProps() {
       return normalize.element({
         ...parts.root.attrs,
-        "data-orientation": prop("orientation"),
+        "data-orientation": orientation,
+        "data-dragging": dataAttr(dragging),
         id: getRootId(scope),
         dir: prop("dir"),
         style: {
@@ -311,7 +330,8 @@ function connect(service, normalize) {
       const { id } = props2;
       return normalize.element({
         ...parts.panel.attrs,
-        "data-orientation": prop("orientation"),
+        "data-orientation": orientation,
+        "data-dragging": dataAttr(dragging),
         dir: prop("dir"),
         "data-id": id,
         "data-index": findPanelIndex(prop("panels"), id),
@@ -320,11 +340,22 @@ function connect(service, normalize) {
         style: getPanelStyle(id)
       });
     },
+    getResizeTriggerState,
+    getResizeTriggerIndicator(props2) {
+      const triggerState = getResizeTriggerState(props2);
+      return normalize.element({
+        ...parts.resizeTriggerIndicator.attrs,
+        "data-orientation": orientation,
+        "data-focus": dataAttr(triggerState.focused),
+        "data-dragging": dataAttr(triggerState.dragging),
+        "data-disabled": dataAttr(triggerState.disabled),
+        "data-ownedby": getRootId(scope)
+      });
+    },
     getResizeTriggerProps(props2) {
-      const { id, disabled } = props2;
+      const { id } = props2;
+      const triggerState = getResizeTriggerState(props2);
       const aria = getAriaValue(context.get("size"), prop("panels"), id);
-      const dragging2 = context.get("dragState")?.resizeTriggerId === id;
-      const focused = dragging2 || context.get("keyboardState")?.resizeTriggerId === id;
       return normalize.element({
         ...parts.resizeTrigger.attrs,
         dir: prop("dir"),
@@ -332,27 +363,28 @@ function connect(service, normalize) {
         role: "separator",
         "data-id": id,
         "data-ownedby": getRootId(scope),
-        tabIndex: disabled ? void 0 : 0,
+        tabIndex: triggerState.disabled ? void 0 : 0,
         "aria-valuenow": aria.valueNow,
         "aria-valuemin": aria.valueMin,
         "aria-valuemax": aria.valueMax,
-        "data-orientation": prop("orientation"),
-        "aria-orientation": prop("orientation"),
+        "data-orientation": orientation,
+        "aria-orientation": orientation,
         "aria-controls": `${getPanelId(scope, aria.beforeId)} ${getPanelId(scope, aria.afterId)}`,
-        "data-focus": dataAttr(focused),
-        "data-disabled": dataAttr(disabled),
+        "data-focus": dataAttr(triggerState.focused),
+        "data-dragging": dataAttr(triggerState.dragging),
+        "data-disabled": dataAttr(triggerState.disabled),
         style: {
           touchAction: "none",
           userSelect: "none",
           WebkitUserSelect: "none",
           flex: "0 0 auto",
-          pointerEvents: dragging2 && !focused ? "none" : void 0,
-          cursor: horizontal ? "col-resize" : "row-resize",
+          pointerEvents: triggerState.disabled ? "none" : triggerState.dragging && !triggerState.focused ? "none" : void 0,
+          cursor: triggerState.disabled ? void 0 : horizontal ? "col-resize" : "row-resize",
           [horizontal ? "minHeight" : "minWidth"]: "0"
         },
         onPointerDown(event) {
           if (!isLeftClick(event)) return;
-          if (disabled) {
+          if (triggerState.disabled) {
             event.preventDefault();
             return;
           }
@@ -363,30 +395,30 @@ function connect(service, normalize) {
           event.stopPropagation();
         },
         onPointerUp(event) {
-          if (disabled) return;
+          if (triggerState.disabled) return;
           if (event.currentTarget.hasPointerCapture(event.pointerId)) {
             event.currentTarget.releasePointerCapture(event.pointerId);
           }
         },
         onPointerOver() {
-          if (disabled) return;
+          if (triggerState.disabled) return;
           send({ type: "POINTER_OVER", id });
         },
         onPointerLeave() {
-          if (disabled) return;
+          if (triggerState.disabled) return;
           send({ type: "POINTER_LEAVE", id });
         },
         onBlur() {
-          if (disabled) return;
+          if (triggerState.disabled) return;
           send({ type: "BLUR" });
         },
         onFocus() {
-          if (disabled) return;
+          if (triggerState.disabled) return;
           send({ type: "FOCUS", id });
         },
         onKeyDown(event) {
           if (event.defaultPrevented) return;
-          if (disabled) return;
+          if (triggerState.disabled) return;
           const keyboardResizeBy = prop("keyboardResizeBy");
           let delta = 0;
           if (event.shiftKey) {
@@ -424,7 +456,7 @@ function connect(service, normalize) {
           };
           const key = getEventKey(event, {
             dir: prop("dir"),
-            orientation: prop("orientation")
+            orientation
           });
           const exec = keyMap[key];
           if (exec) {
@@ -710,6 +742,7 @@ var machine = createMachine({
     }
   },
   entry: ["syncSize"],
+  exit: ["clearGlobalCursor"],
   states: {
     idle: {
       entry: ["clearDraggingState", "clearKeyboardState"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/splitter",
-  "version": "1.27.1",
+  "version": "1.29.0",
   "description": "Core logic for the splitter widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,11 +27,11 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.27.1",
-    "@zag-js/core": "1.27.1",
-    "@zag-js/types": "1.27.1",
-    "@zag-js/dom-query": "1.27.1",
-    "@zag-js/utils": "1.27.1"
+    "@zag-js/anatomy": "1.29.0",
+    "@zag-js/core": "1.29.0",
+    "@zag-js/types": "1.29.0",
+    "@zag-js/dom-query": "1.29.0",
+    "@zag-js/utils": "1.29.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"