@zag-js/splitter 0.2.5 → 0.2.7

package/dist/chunk-T56NFB6E.mjs

@@ -0,0 +1,102 @@
+// ../../utilities/dom/src/query.ts
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument(el) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+}
+function defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => {
+      var _a, _b;
+      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
+    },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => {
+      var _a;
+      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
+    },
+    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
+  };
+  return {
+    ...dom2,
+    ...helpers
+  };
+}
+
+// ../../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.dom.ts
+var dom = defineDomHelpers({
+  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) {
+    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) {
+    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();
+  }
+});
+
+export {
+  dom
+};

package/dist/chunk-X2M4RMIJ.mjs

@@ -0,0 +1,206 @@
+import {
+  parts
+} from "./chunk-HPRMFGOY.mjs";
+import {
+  dom
+} from "./chunk-T56NFB6E.mjs";
+import {
+  getHandleBounds
+} from "./chunk-SQ3UMXCZ.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 isFocused = state.hasTag("focus");
+  const isDragging = state.matches("dragging");
+  return {
+    isFocused,
+    isDragging,
+    bounds: getHandleBounds(state.context),
+    collapse(id) {
+      send({ type: "COLLAPSE", id });
+    },
+    expand(id) {
+      send({ type: "EXPAND", id });
+    },
+    toggle(id) {
+      send({ type: "TOGGLE", id });
+    },
+    setSize(id, size) {
+      send({ type: "SET_SIZE", id, size });
+    },
+    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)
+      });
+    },
+    getResizeTriggerState(id) {
+      const ids = id.split(":");
+      const panelIds = ids.map((id2) => dom.getPanelId(state.context, id2));
+      const panels = getHandleBounds(state.context, id);
+      return {
+        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 = this.getResizeTriggerState(id);
+      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;
+          }
+          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();
+          }
+        }
+      });
+    }
+  };
+}
+
+export {
+  connect
+};