@window-splitter/interface 0.7.0

package/dist/esm/move.js

@@ -0,0 +1,121 @@
+// import {disableTextSelection, restoreTextSelection}  from './textSelection';
+/**
+ * Handles move interactions across mouse, touch, and keyboard, including dragging with
+ * the mouse or touch, and using the arrow keys. Normalizes behavior across browsers and
+ * platforms, and ignores emulated mouse events on touch devices.
+ */
+export function move(props) {
+    const { onMoveStart, onMove: onMoveProp, onMoveEnd } = props;
+    const state = { didMove: false, lastPosition: null, id: null };
+    const onMove = (originalEvent, pointerType, deltaX, deltaY) => {
+        if (deltaX === 0 && deltaY === 0) {
+            return;
+        }
+        if (!state.didMove) {
+            state.didMove = true;
+            onMoveStart?.({
+                type: "movestart",
+                pointerType,
+                shiftKey: originalEvent.shiftKey,
+                metaKey: originalEvent.metaKey,
+                ctrlKey: originalEvent.ctrlKey,
+                altKey: originalEvent.altKey,
+            });
+        }
+        onMoveProp?.({
+            type: "move",
+            pointerType,
+            deltaX: deltaX,
+            deltaY: deltaY,
+            shiftKey: originalEvent.shiftKey,
+            metaKey: originalEvent.metaKey,
+            ctrlKey: originalEvent.ctrlKey,
+            altKey: originalEvent.altKey,
+        });
+    };
+    const end = (originalEvent, pointerType) => {
+        // restoreTextSelection();
+        if (state.didMove) {
+            onMoveEnd?.({
+                type: "moveend",
+                pointerType,
+                shiftKey: originalEvent.shiftKey,
+                metaKey: originalEvent.metaKey,
+                ctrlKey: originalEvent.ctrlKey,
+                altKey: originalEvent.altKey,
+            });
+        }
+    };
+    const moveProps = {};
+    const start = () => {
+        // disableTextSelection();
+        state.didMove = false;
+    };
+    const onPointerMove = (e) => {
+        if (e.pointerId === state.id) {
+            const pointerType = (e.pointerType || "mouse");
+            // Problems with PointerEvent#movementX/movementY:
+            // 1. it is always 0 on macOS Safari.
+            // 2. On Chrome Android, it's scaled by devicePixelRatio, but not on Chrome macOS
+            onMove(e, pointerType, e.pageX - (state.lastPosition?.pageX ?? 0), e.pageY - (state.lastPosition?.pageY ?? 0));
+            state.lastPosition = { pageX: e.pageX, pageY: e.pageY };
+        }
+    };
+    const onPointerUp = (e) => {
+        if (e.pointerId === state.id) {
+            const pointerType = (e.pointerType || "mouse");
+            end(e, pointerType);
+            state.id = null;
+            window.removeEventListener("pointermove", onPointerMove, false);
+            window.removeEventListener("pointerup", onPointerUp, false);
+            window.removeEventListener("pointercancel", onPointerUp, false);
+        }
+    };
+    moveProps.onPointerDown = (e) => {
+        if (e.button === 0 && state.id == null) {
+            start();
+            e.stopPropagation();
+            e.preventDefault();
+            state.lastPosition = { pageX: e.pageX, pageY: e.pageY };
+            state.id = e.pointerId;
+            window.addEventListener("pointermove", onPointerMove, false);
+            window.addEventListener("pointerup", onPointerUp, false);
+            window.addEventListener("pointercancel", onPointerUp, false);
+        }
+    };
+    const triggerKeyboardMove = (e, deltaX, deltaY) => {
+        start();
+        onMove(e, "keyboard", deltaX, deltaY);
+        end(e, "keyboard");
+    };
+    moveProps.onKeyDown = (e) => {
+        switch (e.key) {
+            case "Left":
+            case "ArrowLeft":
+                e.preventDefault();
+                e.stopPropagation();
+                triggerKeyboardMove(e, -1, 0);
+                break;
+            case "Right":
+            case "ArrowRight":
+                e.preventDefault();
+                e.stopPropagation();
+                triggerKeyboardMove(e, 1, 0);
+                break;
+            case "Up":
+            case "ArrowUp":
+                e.preventDefault();
+                e.stopPropagation();
+                triggerKeyboardMove(e, 0, -1);
+                break;
+            case "Down":
+            case "ArrowDown":
+                e.preventDefault();
+                e.stopPropagation();
+                triggerKeyboardMove(e, 0, 1);
+                break;
+        }
+    };
+    return { moveProps: moveProps };
+}
+//# sourceMappingURL=move.js.map

package/dist/esm/move.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"move.js","sourceRoot":"","sources":["../../src/move.ts"],"names":[],"mappings":"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","sourcesContent":["// import {disableTextSelection, restoreTextSelection}  from './textSelection';\n\nexport interface MoveResult {\n  /** Props to spread on the target element. */\n  moveProps: {\n    onPointerDown: (e: PointerEvent) => void;\n    onKeyDown: (e: KeyboardEvent) => void;\n  };\n}\n\ninterface EventBase {\n  shiftKey: boolean;\n  ctrlKey: boolean;\n  metaKey: boolean;\n  altKey: boolean;\n}\n\ntype PointerType = \"mouse\" | \"pen\" | \"touch\" | \"keyboard\" | \"virtual\";\n\ninterface BaseMoveEvent {\n  /** The pointer type that triggered the move event. */\n  pointerType: PointerType;\n  /** Whether the shift keyboard modifier was held during the move event. */\n  shiftKey: boolean;\n  /** Whether the ctrl keyboard modifier was held during the move event. */\n  ctrlKey: boolean;\n  /** Whether the meta keyboard modifier was held during the move event. */\n  metaKey: boolean;\n  /** Whether the alt keyboard modifier was held during the move event. */\n  altKey: boolean;\n}\n\ninterface MoveStartEvent extends BaseMoveEvent {\n  /** The type of move event being fired. */\n  type: \"movestart\";\n}\n\ninterface MoveMoveEvent extends BaseMoveEvent {\n  /** The type of move event being fired. */\n  type: \"move\";\n  /** The amount moved in the X direction since the last event. */\n  deltaX: number;\n  /** The amount moved in the Y direction since the last event. */\n  deltaY: number;\n}\n\ninterface MoveEndEvent extends BaseMoveEvent {\n  /** The type of move event being fired. */\n  type: \"moveend\";\n}\n\nexport interface MoveEvents {\n  /** Handler that is called when a move interaction starts. */\n  onMoveStart?: (e: MoveStartEvent) => void;\n  /** Handler that is called when the element is moved. */\n  onMove?: (e: MoveMoveEvent) => void;\n  /** Handler that is called when a move interaction ends. */\n  onMoveEnd?: (e: MoveEndEvent) => void;\n}\n\n/**\n * Handles move interactions across mouse, touch, and keyboard, including dragging with\n * the mouse or touch, and using the arrow keys. Normalizes behavior across browsers and\n * platforms, and ignores emulated mouse events on touch devices.\n */\nexport function move(props: MoveEvents): MoveResult {\n  const { onMoveStart, onMove: onMoveProp, onMoveEnd } = props;\n\n  const state = { didMove: false, lastPosition: null, id: null } as {\n    didMove: boolean;\n    lastPosition: { pageX: number; pageY: number } | null;\n    id: number | null;\n  };\n\n  const onMove = (\n    originalEvent: EventBase,\n    pointerType: PointerType,\n    deltaX: number,\n    deltaY: number\n  ) => {\n    if (deltaX === 0 && deltaY === 0) {\n      return;\n    }\n\n    if (!state.didMove) {\n      state.didMove = true;\n      onMoveStart?.({\n        type: \"movestart\",\n        pointerType,\n        shiftKey: originalEvent.shiftKey,\n        metaKey: originalEvent.metaKey,\n        ctrlKey: originalEvent.ctrlKey,\n        altKey: originalEvent.altKey,\n      });\n    }\n    onMoveProp?.({\n      type: \"move\",\n      pointerType,\n      deltaX: deltaX,\n      deltaY: deltaY,\n      shiftKey: originalEvent.shiftKey,\n      metaKey: originalEvent.metaKey,\n      ctrlKey: originalEvent.ctrlKey,\n      altKey: originalEvent.altKey,\n    });\n  };\n\n  const end = (originalEvent: EventBase, pointerType: PointerType) => {\n    // restoreTextSelection();\n    if (state.didMove) {\n      onMoveEnd?.({\n        type: \"moveend\",\n        pointerType,\n        shiftKey: originalEvent.shiftKey,\n        metaKey: originalEvent.metaKey,\n        ctrlKey: originalEvent.ctrlKey,\n        altKey: originalEvent.altKey,\n      });\n    }\n  };\n\n  const moveProps: Partial<MoveResult[\"moveProps\"]> = {};\n\n  const start = () => {\n    // disableTextSelection();\n    state.didMove = false;\n  };\n\n  const onPointerMove = (e: PointerEvent) => {\n    if (e.pointerId === state.id) {\n      const pointerType = (e.pointerType || \"mouse\") as PointerType;\n\n      // Problems with PointerEvent#movementX/movementY:\n      // 1. it is always 0 on macOS Safari.\n      // 2. On Chrome Android, it's scaled by devicePixelRatio, but not on Chrome macOS\n      onMove(\n        e,\n        pointerType,\n        e.pageX - (state.lastPosition?.pageX ?? 0),\n        e.pageY - (state.lastPosition?.pageY ?? 0)\n      );\n      state.lastPosition = { pageX: e.pageX, pageY: e.pageY };\n    }\n  };\n\n  const onPointerUp = (e: PointerEvent) => {\n    if (e.pointerId === state.id) {\n      const pointerType = (e.pointerType || \"mouse\") as PointerType;\n      end(e, pointerType);\n      state.id = null;\n      window.removeEventListener(\"pointermove\", onPointerMove, false);\n      window.removeEventListener(\"pointerup\", onPointerUp, false);\n      window.removeEventListener(\"pointercancel\", onPointerUp, false);\n    }\n  };\n\n  moveProps.onPointerDown = (e) => {\n    if (e.button === 0 && state.id == null) {\n      start();\n      e.stopPropagation();\n      e.preventDefault();\n      state.lastPosition = { pageX: e.pageX, pageY: e.pageY };\n      state.id = e.pointerId;\n      window.addEventListener(\"pointermove\", onPointerMove, false);\n      window.addEventListener(\"pointerup\", onPointerUp, false);\n      window.addEventListener(\"pointercancel\", onPointerUp, false);\n    }\n  };\n\n  const triggerKeyboardMove = (\n    e: EventBase,\n    deltaX: number,\n    deltaY: number\n  ) => {\n    start();\n    onMove(e, \"keyboard\", deltaX, deltaY);\n    end(e, \"keyboard\");\n  };\n\n  moveProps.onKeyDown = (e) => {\n    switch (e.key) {\n      case \"Left\":\n      case \"ArrowLeft\":\n        e.preventDefault();\n        e.stopPropagation();\n        triggerKeyboardMove(e, -1, 0);\n        break;\n      case \"Right\":\n      case \"ArrowRight\":\n        e.preventDefault();\n        e.stopPropagation();\n        triggerKeyboardMove(e, 1, 0);\n        break;\n      case \"Up\":\n      case \"ArrowUp\":\n        e.preventDefault();\n        e.stopPropagation();\n        triggerKeyboardMove(e, 0, -1);\n        break;\n      case \"Down\":\n      case \"ArrowDown\":\n        e.preventDefault();\n        e.stopPropagation();\n        triggerKeyboardMove(e, 0, 1);\n        break;\n    }\n  };\n\n  return { moveProps: moveProps as MoveResult[\"moveProps\"] };\n}\n"]}

package/dist/esm/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/dist/esm/test.d.ts

@@ -0,0 +1,18 @@
+import { PanelGroupHandle } from "./interface.js";
+export declare function dragHandle(options: {
+    handleId?: string;
+    delta: number;
+    orientation?: "horizontal" | "vertical";
+}): Promise<void>;
+type WaitForFn = <T>(callback: () => T | Promise<T>, options?: {
+    timeout?: number;
+}) => Promise<T>;
+export declare function createTestUtils(options: {
+    waitFor: WaitForFn;
+}): {
+    waitForCondition: (condition: () => boolean) => Promise<void>;
+    waitForMeasurement: (handle: PanelGroupHandle) => Promise<void>;
+    expectTemplate: (handle: PanelGroupHandle, resolvedTemplate: string) => Promise<void>;
+};
+export {};
+//# sourceMappingURL=test.d.ts.map

package/dist/esm/test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test.d.ts","sourceRoot":"","sources":["../../src/test.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,wBAAsB,UAAU,CAAC,OAAO,EAAE;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,iBAgDA;AAED,KAAK,SAAS,GAAG,CAAC,CAAC,EACjB,QAAQ,EAAE,MAAM,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,EAC9B,OAAO,CAAC,EAAE;IACR,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KACE,OAAO,CAAC,CAAC,CAAC,CAAC;AAgEhB,wBAAgB,eAAe,CAAC,OAAO,EAAE;IAAE,OAAO,EAAE,SAAS,CAAA;CAAE;wCA9DA,OAAO;;;EAoErE"}

package/dist/esm/test.js

@@ -0,0 +1,81 @@
+import { expect } from "vitest";
+export async function dragHandle(options) {
+    const orientation = options.orientation || "horizontal";
+    const handle = document.querySelector(options.handleId
+        ? `[data-splitter-id="${options.handleId}"]`
+        : '[data-splitter-type="handle"]');
+    if (!handle) {
+        throw new Error(`Handle not found: ${options.handleId}`);
+    }
+    const rect = handle.getBoundingClientRect();
+    const x = rect.x + rect.width / 2;
+    const y = rect.y + rect.height / 2;
+    const step = options.delta > 0 ? 1 : -1;
+    const pointerId = 1;
+    handle.dispatchEvent(new PointerEvent("pointerdown", {
+        bubbles: true,
+        clientX: x,
+        clientY: y,
+        pointerId,
+        button: 0,
+    }));
+    for (let i = 0; i < Math.abs(options.delta - 1); i++) {
+        handle.dispatchEvent(new PointerEvent("pointermove", {
+            bubbles: true,
+            pointerId,
+            clientX: orientation === "horizontal" ? x + i * step : x,
+            clientY: orientation === "vertical" ? y + i * step : y,
+        }));
+        await new Promise((r) => setTimeout(r, 10));
+    }
+    handle.dispatchEvent(new PointerEvent("pointerup", {
+        bubbles: true,
+        pointerId,
+        clientX: orientation === "horizontal" ? x + options.delta : x,
+        clientY: orientation === "vertical" ? y + options.delta : y,
+    }));
+}
+function waitForCondition(waitFor, condition) {
+    const stack = new Error().stack;
+    return waitFor(() => {
+        if (!condition()) {
+            const error = new Error("Not ready");
+            error.stack = stack;
+            throw error;
+        }
+    }, {
+        timeout: 10_000,
+    });
+}
+async function waitForMeasurement(waitFor, handle) {
+    await waitForCondition(waitFor, () => !handle.getTemplate().includes("minmax"));
+    await new Promise((resolve) => setTimeout(resolve, 100));
+}
+async function expectTemplate(waitFor, handle, resolvedTemplate) {
+    const stack = new Error().stack;
+    let template;
+    await waitFor(() => {
+        template = handle.getTemplate();
+        if (!template.includes(resolvedTemplate)) {
+            const e = new Error(`\nExpected: ${resolvedTemplate}\nGot     : ${template}`);
+            e.stack = stack;
+            throw e;
+        }
+        if (handle.getState() !== "idle") {
+            const e = new Error(`\nExpected: idle\nGot     : ${handle.getState()}`);
+            e.stack = stack;
+            throw e;
+        }
+    }, {
+        timeout: 2_000,
+    });
+    expect(template).toBe(resolvedTemplate);
+}
+export function createTestUtils(options) {
+    return {
+        waitForCondition: waitForCondition.bind(null, options.waitFor),
+        waitForMeasurement: waitForMeasurement.bind(null, options.waitFor),
+        expectTemplate: expectTemplate.bind(null, options.waitFor),
+    };
+}
+//# sourceMappingURL=test.js.map

package/dist/esm/test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test.js","sourceRoot":"","sources":["../../src/test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect } from \"vitest\";\nimport { PanelGroupHandle } from \"./interface.js\";\n\nexport async function dragHandle(options: {\n  handleId?: string;\n  delta: number;\n  orientation?: \"horizontal\" | \"vertical\";\n}) {\n  const orientation = options.orientation || \"horizontal\";\n  const handle = document.querySelector(\n    options.handleId\n      ? `[data-splitter-id=\"${options.handleId}\"]`\n      : '[data-splitter-type=\"handle\"]'\n  );\n\n  if (!handle) {\n    throw new Error(`Handle not found: ${options.handleId}`);\n  }\n\n  const rect = handle.getBoundingClientRect();\n  const x = rect.x + rect.width / 2;\n  const y = rect.y + rect.height / 2;\n  const step = options.delta > 0 ? 1 : -1;\n  const pointerId = 1;\n\n  handle.dispatchEvent(\n    new PointerEvent(\"pointerdown\", {\n      bubbles: true,\n      clientX: x,\n      clientY: y,\n      pointerId,\n      button: 0,\n    })\n  );\n\n  for (let i = 0; i < Math.abs(options.delta - 1); i++) {\n    handle.dispatchEvent(\n      new PointerEvent(\"pointermove\", {\n        bubbles: true,\n        pointerId,\n        clientX: orientation === \"horizontal\" ? x + i * step : x,\n        clientY: orientation === \"vertical\" ? y + i * step : y,\n      })\n    );\n    await new Promise((r) => setTimeout(r, 10));\n  }\n\n  handle.dispatchEvent(\n    new PointerEvent(\"pointerup\", {\n      bubbles: true,\n      pointerId,\n      clientX: orientation === \"horizontal\" ? x + options.delta : x,\n      clientY: orientation === \"vertical\" ? y + options.delta : y,\n    })\n  );\n}\n\ntype WaitForFn = <T>(\n  callback: () => T | Promise<T>,\n  options?: {\n    timeout?: number;\n  }\n) => Promise<T>;\n\nfunction waitForCondition(waitFor: WaitForFn, condition: () => boolean) {\n  const stack = new Error().stack;\n\n  return waitFor(\n    () => {\n      if (!condition()) {\n        const error = new Error(\"Not ready\");\n        error.stack = stack;\n        throw error;\n      }\n    },\n    {\n      timeout: 10_000,\n    }\n  );\n}\n\nasync function waitForMeasurement(\n  waitFor: WaitForFn,\n  handle: PanelGroupHandle\n) {\n  await waitForCondition(\n    waitFor,\n    () => !handle.getTemplate().includes(\"minmax\")\n  );\n  await new Promise((resolve) => setTimeout(resolve, 100));\n}\n\nasync function expectTemplate(\n  waitFor: WaitForFn,\n  handle: PanelGroupHandle,\n  resolvedTemplate: string\n) {\n  const stack = new Error().stack;\n  let template;\n\n  await waitFor(\n    () => {\n      template = handle.getTemplate();\n\n      if (!template.includes(resolvedTemplate)) {\n        const e = new Error(\n          `\\nExpected: ${resolvedTemplate}\\nGot     : ${template}`\n        );\n        e.stack = stack;\n        throw e;\n      }\n\n      if (handle.getState() !== \"idle\") {\n        const e = new Error(`\\nExpected: idle\\nGot     : ${handle.getState()}`);\n        e.stack = stack;\n        throw e;\n      }\n    },\n    {\n      timeout: 2_000,\n    }\n  );\n\n  expect(template).toBe(resolvedTemplate);\n}\n\nexport function createTestUtils(options: { waitFor: WaitForFn }) {\n  return {\n    waitForCondition: waitForCondition.bind(null, options.waitFor),\n    waitForMeasurement: waitForMeasurement.bind(null, options.waitFor),\n    expectTemplate: expectTemplate.bind(null, options.waitFor),\n  };\n}\n"]}

package/eslint.config.js

@@ -0,0 +1,3 @@
+import base from "@internal/eslint-config/base.js";
+
+export default base;

package/package.json

@@ -0,0 +1,83 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "name": "@window-splitter/interface",
+  "sideEffects": false,
+  "version": "0.7.0",
+  "description": "Shared component interface for window splitter components",
+  "homepage": "https://react-window-splitter-six.vercel.app",
+  "repository": {
+    "url": "https://github.com/hipstersmoothie/react-splitter",
+    "directory": "packages/interface"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": {
+    "name": "Andrew Lisowski",
+    "email": "lisowski54@gmail.com"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "build": "tshy",
+    "dev": "tshy -w",
+    "lint": "eslint .",
+    "clean": "rm -rf dist .turbo .tshy .tshy-build"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@internal/eslint-config": "0.7.0",
+    "@testing-library/jest-dom": "^6.4.8",
+    "eslint": "^9.9.0",
+    "tshy": "^3.0.2",
+    "typescript": "^5.5.4",
+    "vitest": "^3.1.2"
+  },
+  "dependencies": {
+    "@window-splitter/state": "0.7.0"
+  },
+  "tshy": {
+    "exclude": [
+      "src/**/*.test.ts",
+      "node_modules"
+    ],
+    "exports": {
+      ".": "./src/index.ts",
+      "./test": "./src/test.ts"
+    }
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/commonjs/index.d.ts",
+        "default": "./dist/commonjs/index.js"
+      }
+    },
+    "./test": {
+      "import": {
+        "types": "./dist/esm/test.d.ts",
+        "default": "./dist/esm/test.js"
+      },
+      "require": {
+        "types": "./dist/commonjs/test.d.ts",
+        "default": "./dist/commonjs/test.js"
+      }
+    }
+  },
+  "main": "./dist/commonjs/index.js",
+  "module": "./dist/esm/index.js",
+  "keywords": [
+    "panel",
+    "splitter",
+    "resizable",
+    "window"
+  ],
+  "types": "./dist/commonjs/index.d.ts",
+  "gitHead": "cf734f23404e11dbc51119898b2c78d166500b15"
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./interface.js";
+export * from "./move.js";
+export * from "./mergeAttributes.js";

package/src/interface.ts

@@ -0,0 +1,214 @@
+import {
+  Constraints,
+  getUnitPercentageValue,
+  GroupMachineContextValue,
+  OnResizeCallback,
+  PanelData,
+  ParsedUnit,
+  PixelUnit,
+  Rect,
+  Unit,
+} from "@window-splitter/state";
+
+export interface PanelGroupHandle {
+  /** The id of the group */
+  getId: () => string;
+  /** Get the sizes of all the items in the layout as pixels */
+  getPixelSizes: () => Array<number>;
+  /** Get the sizes of all the items in the layout as percentages of the group size */
+  getPercentageSizes: () => Array<number>;
+  /**
+   * Set the size of all the items in the layout.
+   * This just calls `setSize` on each item. It is up to
+   * you to make sure the sizes make sense.
+   *
+   * NOTE: Setting handle sizes will do nothing.
+   */
+  setSizes: (items: Array<Unit>) => void;
+  /** Get the template for the group in pixels. Useful for testing */
+  getTemplate: () => string;
+  getState: () => "idle" | "dragging";
+}
+
+export interface SharedPanelGroupProps
+  extends Partial<
+    Pick<GroupMachineContextValue, "orientation" | "autosaveStrategy">
+  > {
+  /** Persisted state to initialized the machine with */
+  snapshot?: GroupMachineContextValue;
+  /** An id to use for autosaving the layout */
+  autosaveId?: string;
+}
+
+export interface PanelHandle {
+  /** Collapse the panel */
+  collapse: () => void;
+  /** Returns true if the panel is collapsed */
+  isCollapsed: () => boolean;
+  /** Expand the panel */
+  expand: () => void;
+  /** Returns true if the panel is expanded */
+  isExpanded: () => boolean;
+  /** The id of the panel */
+  getId: () => string;
+  /** Get the size of the panel in pixels */
+  getPixelSize: () => number;
+  /** Get percentage of the panel relative to the group */
+  getPercentageSize: () => number;
+  /**
+   * Set the size of the panel in pixels.
+   *
+   * This will be clamped to the min/max values of the panel.
+   * If you want the panel to collapse/expand you should use the
+   * expand/collapse methods.
+   */
+  setSize: (size: Unit) => void;
+}
+export interface SharedPanelProps<CollapsValue>
+  extends Constraints<Unit>,
+    Pick<PanelData, "collapseAnimation"> {
+  /** Callback called when the panel is resized */
+  onResize?: OnResizeCallback;
+  /**
+   * __CONTROLLED COMPONENT__
+   *
+   * If this prop is used it will be used as the source of truth for the collapsed state.
+   * It should be used in conjunction with the `onCollapseChange` prop.
+   *
+   * Use this if you want full control over the collapsed state. When trying to
+   * collapse a panel it will defer to onCollapseChange to determine if it should
+   * be collapsed.
+   */
+  collapsed?: CollapsValue;
+  /**
+   * __CONTROLLED COMPONENT__
+   *
+   * A callback called with the new desired collapsed state. If paired w
+   * with the `collapsed` prop this will be used to control the collapsed state.
+   *
+   * Otherwise this will just be called with the new collapsed state so you can
+   * use it to update your own state.
+   */
+  onCollapseChange?: (isCollapsed: boolean) => void;
+}
+
+export function getPanelDomAttributes({
+  groupId,
+  id,
+  collapsible,
+  collapsed,
+}: {
+  groupId: string | undefined;
+  id: string;
+  collapsible: boolean | undefined;
+  collapsed: boolean | undefined;
+}) {
+  return {
+    id: id,
+    "data-splitter-group-id": groupId,
+    "data-splitter-type": "panel",
+    "data-splitter-id": id,
+    "data-collapsed": collapsible ? collapsed : undefined,
+  };
+}
+
+export interface SharedPanelResizerProps
+  extends Partial<Pick<PanelHandle, "setSize">> {
+  /** If the handle is disabled */
+  disabled?: boolean;
+  /** The size of the handle */
+  size?: PixelUnit;
+  /** Called when the user starts dragging the handle */
+  onDragStart?: () => void;
+  /** Called when the user drags the handle */
+  onDrag?: () => void;
+  /** Called when the user stops dragging the handle */
+  onDragEnd?: () => void;
+}
+
+export function getPanelResizerDomAttributes({
+  groupId,
+  id,
+  orientation,
+  isDragging,
+  activeDragHandleId,
+  disabled,
+  controlsId,
+  min,
+  max,
+  currentValue,
+  groupSize,
+}: {
+  groupId: string | undefined;
+  id: string;
+  orientation: "horizontal" | "vertical";
+  isDragging: boolean;
+  activeDragHandleId: string | undefined;
+  disabled: boolean | undefined;
+  controlsId: string | undefined;
+  min: ParsedUnit | undefined;
+  max: ParsedUnit | "1fr" | undefined;
+  currentValue: ParsedUnit | undefined;
+  groupSize: number;
+}) {
+  return {
+    id: id,
+    role: "separator" as const,
+    "data-splitter-type": "handle",
+    "data-splitter-id": id,
+    "data-splitter-group-id": groupId,
+    "data-handle-orientation": orientation,
+    "data-state": isDragging
+      ? "dragging"
+      : activeDragHandleId
+        ? "inactive"
+        : "idle",
+    "aria-label": "Resize Handle",
+    "aria-disabled": disabled,
+    "aria-controls": controlsId,
+    "aria-valuemin": min ? getUnitPercentageValue(groupSize, min) : undefined,
+    "aria-valuemax":
+      max === "1fr"
+        ? 100
+        : max
+          ? getUnitPercentageValue(groupSize, max)
+          : undefined,
+    "aria-valuenow": currentValue
+      ? getUnitPercentageValue(groupSize, currentValue)
+      : undefined,
+  };
+}
+
+export function measureGroupChildren(
+  groupId: string,
+  cb: (childrenSizes: Record<string, Rect>) => void
+) {
+  const childrenObserver = new ResizeObserver((childrenEntries) => {
+    const childrenSizes: Record<string, { width: number; height: number }> = {};
+
+    for (const childEntry of childrenEntries) {
+      const child = childEntry.target as HTMLElement;
+      const childId = child.getAttribute("data-splitter-id");
+      const childSize = childEntry.borderBoxSize[0];
+
+      if (childId && childSize) {
+        childrenSizes[childId] = {
+          width: childSize.inlineSize,
+          height: childSize.blockSize,
+        };
+      }
+    }
+
+    cb(childrenSizes);
+  });
+
+  const c = document.querySelectorAll(`[data-splitter-group-id="${groupId}"]`);
+
+  for (const child of c) {
+    childrenObserver.observe(child);
+  }
+
+  return () => {
+    childrenObserver.disconnect();
+  };
+}

package/src/mergeAttributes.ts

@@ -0,0 +1,84 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+function chain(...callbacks: any[]): (...args: any[]) => void {
+  return (...args: any[]) => {
+    for (const callback of callbacks) {
+      if (typeof callback === "function") {
+        callback(...args);
+      }
+    }
+  };
+}
+
+type Props = Record<string, any>;
+
+type PropsArg = Props | null | undefined;
+
+// taken from: https://stackoverflow.com/questions/51603250/typescript-3-parameter-list-intersection-type/51604379#51604379
+type TupleTypes<T> = { [P in keyof T]: T[P] } extends { [key: number]: infer V }
+  ? NullToObject<V>
+  : never;
+type NullToObject<T> = T extends null | undefined ? object : T;
+
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
+  k: infer I
+) => void
+  ? I
+  : never;
+
+/**
+ * Merges multiple props objects together. Event handlers are chained,
+ * classNames are combined, and ids are deduplicated - different ids
+ * will trigger a side-effect and re-render components hooked up with `useId`.
+ * For all other props, the last prop object overrides all previous ones.
+ * @param args - Multiple sets of props to merge together.
+ */
+export function mergeAttributes<T extends PropsArg[]>(
+  ...args: T
+): UnionToIntersection<TupleTypes<T>> {
+  // Start with a base clone of the first argument. This is a lot faster than starting
+  // with an empty object and adding properties as we go.
+  const result: Props = { ...args[0] };
+  for (let i = 1; i < args.length; i++) {
+    const props = args[i];
+    for (const key in props) {
+      const a = result[key];
+      const b = props[key];
+
+      // Chain events
+      if (
+        typeof a === "function" &&
+        typeof b === "function" &&
+        // This is a lot faster than a regex.
+        key[0] === "o" &&
+        key[1] === "n" &&
+        key.charCodeAt(2) >= /* 'A' */ 65 &&
+        key.charCodeAt(2) <= /* 'Z' */ 90
+      ) {
+        result[key] = chain(a, b);
+      } else if (
+        key === "style" &&
+        typeof a === "object" &&
+        typeof b === "object"
+      ) {
+        result[key] = { ...b, ...a };
+      } else {
+        result[key] = b !== undefined ? b : a;
+      }
+    }
+  }
+
+  return result as UnionToIntersection<TupleTypes<T>>;
+}