@zag-js/splitter 1.39.1 → 1.41.0

package/dist/utils/size.js

@@ -0,0 +1,138 @@
+"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);
+
+// src/utils/size.ts
+var size_exports = {};
+__export(size_exports, {
+  getGroupSize: () => getGroupSize,
+  normalizePanels: () => normalizePanels,
+  parsePanelSize: () => parsePanelSize,
+  resolvePanelSizes: () => resolvePanelSizes,
+  toCssPanelSize: () => toCssPanelSize
+});
+module.exports = __toCommonJS(size_exports);
+var sizeRegex = /^(-?\d*\.?\d+)(%|px|em|rem|vw|vh)?$/;
+var percentRegex = /^(-?\d*\.?\d+)%$/;
+function getRootSize(rootEl, orientation) {
+  if (!rootEl) return 0;
+  const rect = rootEl.getBoundingClientRect();
+  return orientation === "horizontal" ? rect.width : rect.height;
+}
+function getGroupSize(rootEl, orientation) {
+  return getRootSize(rootEl, orientation);
+}
+function toPixelValue(value, unit, rootEl) {
+  const win = rootEl.ownerDocument.defaultView;
+  if (!win) return void 0;
+  switch (unit) {
+    case "px":
+      return value;
+    case "em": {
+      const fontSize = Number.parseFloat(win.getComputedStyle(rootEl).fontSize);
+      return value * fontSize;
+    }
+    case "rem": {
+      const fontSize = Number.parseFloat(win.getComputedStyle(rootEl.ownerDocument.documentElement).fontSize);
+      return value * fontSize;
+    }
+    case "vw":
+      return value / 100 * win.innerWidth;
+    case "vh":
+      return value / 100 * win.innerHeight;
+    default:
+      return void 0;
+  }
+}
+function parsePanelSize(size, rootEl, orientation) {
+  if (size == null) return void 0;
+  if (typeof size === "number") {
+    return size;
+  }
+  const match = size.trim().match(sizeRegex);
+  if (!match) return void 0;
+  const value = Number.parseFloat(match[1]);
+  if (!Number.isFinite(value)) return void 0;
+  const unit = match[2];
+  if (unit == null || unit === "%") {
+    return value;
+  }
+  if (!rootEl) return void 0;
+  const rootSize = getRootSize(rootEl, orientation);
+  if (rootSize === 0) return void 0;
+  const px = toPixelValue(value, unit, rootEl);
+  return px == null ? void 0 : px / rootSize * 100;
+}
+function toCssPanelSize(size) {
+  if (size == null) return void 0;
+  if (typeof size === "number") {
+    return `${size}%`;
+  }
+  const trimmed = size.trim();
+  if (percentRegex.test(trimmed)) {
+    return trimmed;
+  }
+  const match = trimmed.match(sizeRegex);
+  if (!match) return void 0;
+  const value = Number.parseFloat(match[1]);
+  if (!Number.isFinite(value)) return void 0;
+  const unit = match[2];
+  return unit == null ? `${value}%` : `${value}${unit}`;
+}
+function resolvePanelSizes({
+  sizes,
+  panels,
+  rootEl,
+  orientation
+}) {
+  const nextSize = Array(panels.length);
+  let remainingSize = 100;
+  let numPanelsWithSizes = 0;
+  for (let index = 0; index < panels.length; index++) {
+    const size = parsePanelSize(sizes?.[index], rootEl, orientation);
+    if (size == null) continue;
+    numPanelsWithSizes++;
+    nextSize[index] = size;
+    remainingSize -= size;
+  }
+  for (let index = 0; index < panels.length; index++) {
+    if (nextSize[index] != null) continue;
+    const numRemainingPanels = panels.length - numPanelsWithSizes;
+    const size = numRemainingPanels > 0 ? remainingSize / numRemainingPanels : 0;
+    numPanelsWithSizes++;
+    nextSize[index] = size;
+    remainingSize -= size;
+  }
+  return nextSize;
+}
+function normalizePanels(panels, rootEl, orientation) {
+  return panels.map((panel) => ({
+    ...panel,
+    minSize: parsePanelSize(panel.minSize, rootEl, orientation),
+    maxSize: parsePanelSize(panel.maxSize, rootEl, orientation),
+    collapsedSize: parsePanelSize(panel.collapsedSize, rootEl, orientation)
+  }));
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getGroupSize,
+  normalizePanels,
+  parsePanelSize,
+  resolvePanelSizes,
+  toCssPanelSize
+});

package/dist/utils/size.mjs

@@ -0,0 +1,111 @@
+import "../chunk-QZ7TP4HQ.mjs";
+
+// src/utils/size.ts
+var sizeRegex = /^(-?\d*\.?\d+)(%|px|em|rem|vw|vh)?$/;
+var percentRegex = /^(-?\d*\.?\d+)%$/;
+function getRootSize(rootEl, orientation) {
+  if (!rootEl) return 0;
+  const rect = rootEl.getBoundingClientRect();
+  return orientation === "horizontal" ? rect.width : rect.height;
+}
+function getGroupSize(rootEl, orientation) {
+  return getRootSize(rootEl, orientation);
+}
+function toPixelValue(value, unit, rootEl) {
+  const win = rootEl.ownerDocument.defaultView;
+  if (!win) return void 0;
+  switch (unit) {
+    case "px":
+      return value;
+    case "em": {
+      const fontSize = Number.parseFloat(win.getComputedStyle(rootEl).fontSize);
+      return value * fontSize;
+    }
+    case "rem": {
+      const fontSize = Number.parseFloat(win.getComputedStyle(rootEl.ownerDocument.documentElement).fontSize);
+      return value * fontSize;
+    }
+    case "vw":
+      return value / 100 * win.innerWidth;
+    case "vh":
+      return value / 100 * win.innerHeight;
+    default:
+      return void 0;
+  }
+}
+function parsePanelSize(size, rootEl, orientation) {
+  if (size == null) return void 0;
+  if (typeof size === "number") {
+    return size;
+  }
+  const match = size.trim().match(sizeRegex);
+  if (!match) return void 0;
+  const value = Number.parseFloat(match[1]);
+  if (!Number.isFinite(value)) return void 0;
+  const unit = match[2];
+  if (unit == null || unit === "%") {
+    return value;
+  }
+  if (!rootEl) return void 0;
+  const rootSize = getRootSize(rootEl, orientation);
+  if (rootSize === 0) return void 0;
+  const px = toPixelValue(value, unit, rootEl);
+  return px == null ? void 0 : px / rootSize * 100;
+}
+function toCssPanelSize(size) {
+  if (size == null) return void 0;
+  if (typeof size === "number") {
+    return `${size}%`;
+  }
+  const trimmed = size.trim();
+  if (percentRegex.test(trimmed)) {
+    return trimmed;
+  }
+  const match = trimmed.match(sizeRegex);
+  if (!match) return void 0;
+  const value = Number.parseFloat(match[1]);
+  if (!Number.isFinite(value)) return void 0;
+  const unit = match[2];
+  return unit == null ? `${value}%` : `${value}${unit}`;
+}
+function resolvePanelSizes({
+  sizes,
+  panels,
+  rootEl,
+  orientation
+}) {
+  const nextSize = Array(panels.length);
+  let remainingSize = 100;
+  let numPanelsWithSizes = 0;
+  for (let index = 0; index < panels.length; index++) {
+    const size = parsePanelSize(sizes?.[index], rootEl, orientation);
+    if (size == null) continue;
+    numPanelsWithSizes++;
+    nextSize[index] = size;
+    remainingSize -= size;
+  }
+  for (let index = 0; index < panels.length; index++) {
+    if (nextSize[index] != null) continue;
+    const numRemainingPanels = panels.length - numPanelsWithSizes;
+    const size = numRemainingPanels > 0 ? remainingSize / numRemainingPanels : 0;
+    numPanelsWithSizes++;
+    nextSize[index] = size;
+    remainingSize -= size;
+  }
+  return nextSize;
+}
+function normalizePanels(panels, rootEl, orientation) {
+  return panels.map((panel) => ({
+    ...panel,
+    minSize: parsePanelSize(panel.minSize, rootEl, orientation),
+    maxSize: parsePanelSize(panel.maxSize, rootEl, orientation),
+    collapsedSize: parsePanelSize(panel.collapsedSize, rootEl, orientation)
+  }));
+}
+export {
+  getGroupSize,
+  normalizePanels,
+  parsePanelSize,
+  resolvePanelSizes,
+  toCssPanelSize
+};

package/dist/utils/validate-sizes.d.mts

@@ -1,4 +1,4 @@
-import { PanelData } from '../splitter.types.mjs';
+import { NormalizedPanelData } from '../splitter.types.mjs';
 import '@zag-js/core';
 import '@zag-js/types';
 import './registry.mjs';
@@ -10,7 +10,7 @@ import './registry.mjs';
 
 declare function validateSizes({ size: prevSize, panels }: {
     size: number[];
-    panels: PanelData[];
+    panels: NormalizedPanelData[];
 }): number[];
 
 export { validateSizes };

package/dist/utils/validate-sizes.d.ts

@@ -1,4 +1,4 @@
-import { PanelData } from '../splitter.types.js';
+import { NormalizedPanelData } from '../splitter.types.js';
 import '@zag-js/core';
 import '@zag-js/types';
 import './registry.js';
@@ -10,7 +10,7 @@ import './registry.js';
 
 declare function validateSizes({ size: prevSize, panels }: {
     size: number[];
-    panels: PanelData[];
+    panels: NormalizedPanelData[];
 }): number[];
 
 export { validateSizes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/splitter",
-  "version": "1.39.1",
+  "version": "1.41.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.39.1",
-    "@zag-js/core": "1.39.1",
-    "@zag-js/dom-query": "1.39.1",
-    "@zag-js/types": "1.39.1",
-    "@zag-js/utils": "1.39.1"
+    "@zag-js/anatomy": "1.41.0",
+    "@zag-js/core": "1.41.0",
+    "@zag-js/dom-query": "1.41.0",
+    "@zag-js/types": "1.41.0",
+    "@zag-js/utils": "1.41.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"