@zag-js/splitter 1.34.1 → 1.35.0

package/dist/splitter.types.d.mts

@@ -0,0 +1,237 @@
+import { Machine, EventObject, Service } from '@zag-js/core';
+import { PropTypes, RequiredBy, DirectionProperty, CommonProperties } from '@zag-js/types';
+
+type ResizeEvent = PointerEvent | KeyboardEvent;
+type PanelId = string;
+type ResizeTriggerId = `${PanelId}:${PanelId}`;
+interface PanelData {
+    /**
+     * The id of the panel.
+     */
+    id: PanelId;
+    /**
+     * The order of the panel. useful of you intend to conditionally render the panel.
+     */
+    order?: number | undefined;
+    /**
+     * The minimum size of the panel.
+     */
+    minSize?: number | undefined;
+    /**
+     * The maximum size of the panel.
+     */
+    maxSize?: number | undefined;
+    /**
+     * Whether the panel is collapsible.
+     */
+    collapsible?: boolean | undefined;
+    /**
+     * The size of the panel when collapsed.
+     */
+    collapsedSize?: number | undefined;
+}
+interface CursorState {
+    isAtMin: boolean;
+    isAtMax: boolean;
+}
+interface ResizeDetails {
+    size: number[];
+    resizeTriggerId: string | null;
+    layout: string;
+    expandToSizes: Record<string, number>;
+}
+interface ResizeEndDetails {
+    size: number[];
+    resizeTriggerId: string | null;
+}
+interface ExpandCollapseDetails {
+    panelId: string;
+    size: number;
+}
+type ElementIds = Partial<{
+    root: string;
+    resizeTrigger: (id: string) => string;
+    label: (id: string) => string;
+    panel: (id: string | number) => string;
+}>;
+interface SplitterProps extends DirectionProperty, CommonProperties {
+    /**
+     * The orientation of the splitter. Can be `horizontal` or `vertical`
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical" | undefined;
+    /**
+     * The controlled size data of the panels
+     */
+    size?: number[] | undefined;
+    /**
+     * The initial size of the panels when rendered.
+     * Use when you don't need to control the size of the panels.
+     */
+    defaultSize?: number[] | undefined;
+    /**
+     * The size constraints of the panels.
+     */
+    panels: PanelData[];
+    /**
+     * Function called when the splitter is resized.
+     */
+    onResize?: ((details: ResizeDetails) => void) | undefined;
+    /**
+     * Function called when the splitter resize starts.
+     */
+    onResizeStart?: (() => void) | undefined;
+    /**
+     * Function called when the splitter resize ends.
+     */
+    onResizeEnd?: ((details: ResizeEndDetails) => void) | undefined;
+    /**
+     * The ids of the elements in the splitter. Useful for composition.
+     */
+    ids?: ElementIds | undefined;
+    /**
+     * The number of pixels to resize the panel by when the keyboard is used.
+     */
+    keyboardResizeBy?: number | null | undefined;
+    /**
+     * The nonce for the injected splitter cursor stylesheet.
+     */
+    nonce?: string | undefined;
+    /**
+     * Function called when a panel is collapsed.
+     */
+    onCollapse?: ((details: ExpandCollapseDetails) => void) | undefined;
+    /**
+     * Function called when a panel is expanded.
+     */
+    onExpand?: ((details: ExpandCollapseDetails) => void) | undefined;
+}
+type PropsWithDefault = "orientation" | "panels";
+interface DragState {
+    resizeTriggerId: string;
+    resizeTriggerRect: DOMRect;
+    initialCursorPosition: number;
+    initialSize: number[];
+}
+interface KeyboardState {
+    resizeTriggerId: string;
+}
+interface Context {
+    dragState: DragState | null;
+    keyboardState: KeyboardState | null;
+    size: number[];
+}
+interface Refs {
+    panelSizeBeforeCollapse: Map<string, number>;
+    panelIdToLastNotifiedSizeMap: Map<string, number>;
+    prevDelta: number;
+}
+interface SplitterSchema {
+    state: "idle" | "hover:temp" | "hover" | "dragging" | "focused";
+    tag: "focus";
+    props: RequiredBy<SplitterProps, PropsWithDefault>;
+    context: Context;
+    computed: {
+        horizontal: boolean;
+    };
+    refs: Refs;
+    action: string;
+    event: EventObject;
+    effect: string;
+    guard: string;
+}
+type SplitterService = Service<SplitterSchema>;
+type SplitterMachine = Machine<SplitterSchema>;
+interface PanelProps {
+    id: PanelId;
+}
+interface ResizeTriggerProps {
+    id: ResizeTriggerId;
+    disabled?: boolean | undefined;
+}
+interface ResizeTriggerState {
+    dragging: boolean;
+    focused: boolean;
+    disabled: boolean;
+}
+interface PanelItem {
+    type: "panel";
+    id: PanelId;
+}
+interface ResizeTriggerItem {
+    type: "handle";
+    id: ResizeTriggerId;
+}
+type SplitterItem = PanelItem | ResizeTriggerItem;
+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.
+     */
+    getSizes: () => number[];
+    /**
+     * Sets the sizes of the panels.
+     */
+    setSizes: (size: number[]) => void;
+    /**
+     * 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.
+     */
+    getPanelSize: (id: PanelId) => number;
+    /**
+     * Returns whether the specified panel is collapsed.
+     */
+    isPanelCollapsed: (id: PanelId) => boolean;
+    /**
+     * Returns whether the specified panel is expanded.
+     */
+    isPanelExpanded: (id: PanelId) => boolean;
+    /**
+     * Collapses the specified panel.
+     */
+    collapsePanel: (id: PanelId) => void;
+    /**
+     * Expands the specified panel.
+     */
+    expandPanel: (id: PanelId, minSize?: number) => void;
+    /**
+     * Resizes the specified panel.
+     */
+    resizePanel: (id: PanelId, unsafePanelSize: number) => void;
+    /**
+     * Returns the layout of the splitter.
+     */
+    getLayout: () => string;
+    /**
+     * 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"];
+}
+
+export type { CursorState, DragState, ElementIds, ExpandCollapseDetails, KeyboardState, PanelData, PanelId, PanelItem, PanelProps, ResizeDetails, ResizeEndDetails, ResizeEvent, ResizeTriggerId, ResizeTriggerItem, ResizeTriggerProps, ResizeTriggerState, SplitterApi, SplitterItem, SplitterMachine, SplitterProps, SplitterSchema, SplitterService };

package/dist/splitter.types.d.ts

@@ -0,0 +1,237 @@
+import { Machine, EventObject, Service } from '@zag-js/core';
+import { PropTypes, RequiredBy, DirectionProperty, CommonProperties } from '@zag-js/types';
+
+type ResizeEvent = PointerEvent | KeyboardEvent;
+type PanelId = string;
+type ResizeTriggerId = `${PanelId}:${PanelId}`;
+interface PanelData {
+    /**
+     * The id of the panel.
+     */
+    id: PanelId;
+    /**
+     * The order of the panel. useful of you intend to conditionally render the panel.
+     */
+    order?: number | undefined;
+    /**
+     * The minimum size of the panel.
+     */
+    minSize?: number | undefined;
+    /**
+     * The maximum size of the panel.
+     */
+    maxSize?: number | undefined;
+    /**
+     * Whether the panel is collapsible.
+     */
+    collapsible?: boolean | undefined;
+    /**
+     * The size of the panel when collapsed.
+     */
+    collapsedSize?: number | undefined;
+}
+interface CursorState {
+    isAtMin: boolean;
+    isAtMax: boolean;
+}
+interface ResizeDetails {
+    size: number[];
+    resizeTriggerId: string | null;
+    layout: string;
+    expandToSizes: Record<string, number>;
+}
+interface ResizeEndDetails {
+    size: number[];
+    resizeTriggerId: string | null;
+}
+interface ExpandCollapseDetails {
+    panelId: string;
+    size: number;
+}
+type ElementIds = Partial<{
+    root: string;
+    resizeTrigger: (id: string) => string;
+    label: (id: string) => string;
+    panel: (id: string | number) => string;
+}>;
+interface SplitterProps extends DirectionProperty, CommonProperties {
+    /**
+     * The orientation of the splitter. Can be `horizontal` or `vertical`
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical" | undefined;
+    /**
+     * The controlled size data of the panels
+     */
+    size?: number[] | undefined;
+    /**
+     * The initial size of the panels when rendered.
+     * Use when you don't need to control the size of the panels.
+     */
+    defaultSize?: number[] | undefined;
+    /**
+     * The size constraints of the panels.
+     */
+    panels: PanelData[];
+    /**
+     * Function called when the splitter is resized.
+     */
+    onResize?: ((details: ResizeDetails) => void) | undefined;
+    /**
+     * Function called when the splitter resize starts.
+     */
+    onResizeStart?: (() => void) | undefined;
+    /**
+     * Function called when the splitter resize ends.
+     */
+    onResizeEnd?: ((details: ResizeEndDetails) => void) | undefined;
+    /**
+     * The ids of the elements in the splitter. Useful for composition.
+     */
+    ids?: ElementIds | undefined;
+    /**
+     * The number of pixels to resize the panel by when the keyboard is used.
+     */
+    keyboardResizeBy?: number | null | undefined;
+    /**
+     * The nonce for the injected splitter cursor stylesheet.
+     */
+    nonce?: string | undefined;
+    /**
+     * Function called when a panel is collapsed.
+     */
+    onCollapse?: ((details: ExpandCollapseDetails) => void) | undefined;
+    /**
+     * Function called when a panel is expanded.
+     */
+    onExpand?: ((details: ExpandCollapseDetails) => void) | undefined;
+}
+type PropsWithDefault = "orientation" | "panels";
+interface DragState {
+    resizeTriggerId: string;
+    resizeTriggerRect: DOMRect;
+    initialCursorPosition: number;
+    initialSize: number[];
+}
+interface KeyboardState {
+    resizeTriggerId: string;
+}
+interface Context {
+    dragState: DragState | null;
+    keyboardState: KeyboardState | null;
+    size: number[];
+}
+interface Refs {
+    panelSizeBeforeCollapse: Map<string, number>;
+    panelIdToLastNotifiedSizeMap: Map<string, number>;
+    prevDelta: number;
+}
+interface SplitterSchema {
+    state: "idle" | "hover:temp" | "hover" | "dragging" | "focused";
+    tag: "focus";
+    props: RequiredBy<SplitterProps, PropsWithDefault>;
+    context: Context;
+    computed: {
+        horizontal: boolean;
+    };
+    refs: Refs;
+    action: string;
+    event: EventObject;
+    effect: string;
+    guard: string;
+}
+type SplitterService = Service<SplitterSchema>;
+type SplitterMachine = Machine<SplitterSchema>;
+interface PanelProps {
+    id: PanelId;
+}
+interface ResizeTriggerProps {
+    id: ResizeTriggerId;
+    disabled?: boolean | undefined;
+}
+interface ResizeTriggerState {
+    dragging: boolean;
+    focused: boolean;
+    disabled: boolean;
+}
+interface PanelItem {
+    type: "panel";
+    id: PanelId;
+}
+interface ResizeTriggerItem {
+    type: "handle";
+    id: ResizeTriggerId;
+}
+type SplitterItem = PanelItem | ResizeTriggerItem;
+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.
+     */
+    getSizes: () => number[];
+    /**
+     * Sets the sizes of the panels.
+     */
+    setSizes: (size: number[]) => void;
+    /**
+     * 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.
+     */
+    getPanelSize: (id: PanelId) => number;
+    /**
+     * Returns whether the specified panel is collapsed.
+     */
+    isPanelCollapsed: (id: PanelId) => boolean;
+    /**
+     * Returns whether the specified panel is expanded.
+     */
+    isPanelExpanded: (id: PanelId) => boolean;
+    /**
+     * Collapses the specified panel.
+     */
+    collapsePanel: (id: PanelId) => void;
+    /**
+     * Expands the specified panel.
+     */
+    expandPanel: (id: PanelId, minSize?: number) => void;
+    /**
+     * Resizes the specified panel.
+     */
+    resizePanel: (id: PanelId, unsafePanelSize: number) => void;
+    /**
+     * Returns the layout of the splitter.
+     */
+    getLayout: () => string;
+    /**
+     * 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"];
+}
+
+export type { CursorState, DragState, ElementIds, ExpandCollapseDetails, KeyboardState, PanelData, PanelId, PanelItem, PanelProps, ResizeDetails, ResizeEndDetails, ResizeEvent, ResizeTriggerId, ResizeTriggerItem, ResizeTriggerProps, ResizeTriggerState, SplitterApi, SplitterItem, SplitterMachine, SplitterProps, SplitterSchema, SplitterService };

package/dist/splitter.types.js

@@ -0,0 +1,18 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/splitter.types.ts
+var splitter_types_exports = {};
+module.exports = __toCommonJS(splitter_types_exports);

package/dist/utils/aria.d.mts

@@ -0,0 +1,27 @@
+import { PanelData } from '../splitter.types.mjs';
+import '@zag-js/core';
+import '@zag-js/types';
+
+/**
+ * This code was modified from react-resizable-panels by Brian Vaughn
+ * @see https://github.com/bvaughn/react-resizable-panels
+ */
+
+declare function calculateAriaValues({ size, panels, pivotIndices, }: {
+    size: number[];
+    panels: PanelData[];
+    pivotIndices: number[];
+}): {
+    valueMax: number;
+    valueMin: number;
+    valueNow: number;
+};
+declare function getAriaValue(size: number[], panels: PanelData[], handleId: string): {
+    beforeId: string;
+    afterId: string;
+    valueMax: number;
+    valueMin: number;
+    valueNow: number | undefined;
+};
+
+export { calculateAriaValues, getAriaValue };

package/dist/utils/aria.d.ts

@@ -0,0 +1,27 @@
+import { PanelData } from '../splitter.types.js';
+import '@zag-js/core';
+import '@zag-js/types';
+
+/**
+ * This code was modified from react-resizable-panels by Brian Vaughn
+ * @see https://github.com/bvaughn/react-resizable-panels
+ */
+
+declare function calculateAriaValues({ size, panels, pivotIndices, }: {
+    size: number[];
+    panels: PanelData[];
+    pivotIndices: number[];
+}): {
+    valueMax: number;
+    valueMin: number;
+    valueNow: number;
+};
+declare function getAriaValue(size: number[], panels: PanelData[], handleId: string): {
+    beforeId: string;
+    afterId: string;
+    valueMax: number;
+    valueMin: number;
+    valueNow: number | undefined;
+};
+
+export { calculateAriaValues, getAriaValue };

package/dist/utils/aria.js

@@ -0,0 +1,79 @@
+"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/aria.ts
+var aria_exports = {};
+__export(aria_exports, {
+  calculateAriaValues: () => calculateAriaValues,
+  getAriaValue: () => getAriaValue
+});
+module.exports = __toCommonJS(aria_exports);
+var import_utils = require("@zag-js/utils");
+function calculateAriaValues({
+  size,
+  panels,
+  pivotIndices
+}) {
+  let currentMinSize = 0;
+  let currentMaxSize = 100;
+  let totalMinSize = 0;
+  let totalMaxSize = 0;
+  const firstIndex = pivotIndices[0];
+  (0, import_utils.ensure)(firstIndex, () => "No pivot index found");
+  panels.forEach((panel, index) => {
+    const { maxSize = 100, minSize = 0 } = panel;
+    if (index === firstIndex) {
+      currentMinSize = minSize;
+      currentMaxSize = maxSize;
+    } else {
+      totalMinSize += minSize;
+      totalMaxSize += maxSize;
+    }
+  });
+  const valueMax = Math.min(currentMaxSize, 100 - totalMinSize);
+  const valueMin = Math.max(currentMinSize, 100 - totalMaxSize);
+  const valueNow = size[firstIndex];
+  return {
+    valueMax,
+    valueMin,
+    valueNow
+  };
+}
+function getAriaValue(size, panels, handleId) {
+  const [beforeId, afterId] = handleId.split(":");
+  const beforeIndex = panels.findIndex((panel) => panel.id === beforeId);
+  const afterIndex = panels.findIndex((panel) => panel.id === afterId);
+  const { valueMax, valueMin, valueNow } = calculateAriaValues({
+    size,
+    panels,
+    pivotIndices: [beforeIndex, afterIndex]
+  });
+  return {
+    beforeId,
+    afterId,
+    valueMax: Math.round(valueMax),
+    valueMin: Math.round(valueMin),
+    valueNow: valueNow != null ? Math.round(valueNow) : void 0
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  calculateAriaValues,
+  getAriaValue
+});

package/dist/utils/aria.mjs

@@ -0,0 +1,53 @@
+// src/utils/aria.ts
+import { ensure } from "@zag-js/utils";
+function calculateAriaValues({
+  size,
+  panels,
+  pivotIndices
+}) {
+  let currentMinSize = 0;
+  let currentMaxSize = 100;
+  let totalMinSize = 0;
+  let totalMaxSize = 0;
+  const firstIndex = pivotIndices[0];
+  ensure(firstIndex, () => "No pivot index found");
+  panels.forEach((panel, index) => {
+    const { maxSize = 100, minSize = 0 } = panel;
+    if (index === firstIndex) {
+      currentMinSize = minSize;
+      currentMaxSize = maxSize;
+    } else {
+      totalMinSize += minSize;
+      totalMaxSize += maxSize;
+    }
+  });
+  const valueMax = Math.min(currentMaxSize, 100 - totalMinSize);
+  const valueMin = Math.max(currentMinSize, 100 - totalMaxSize);
+  const valueNow = size[firstIndex];
+  return {
+    valueMax,
+    valueMin,
+    valueNow
+  };
+}
+function getAriaValue(size, panels, handleId) {
+  const [beforeId, afterId] = handleId.split(":");
+  const beforeIndex = panels.findIndex((panel) => panel.id === beforeId);
+  const afterIndex = panels.findIndex((panel) => panel.id === afterId);
+  const { valueMax, valueMin, valueNow } = calculateAriaValues({
+    size,
+    panels,
+    pivotIndices: [beforeIndex, afterIndex]
+  });
+  return {
+    beforeId,
+    afterId,
+    valueMax: Math.round(valueMax),
+    valueMin: Math.round(valueMin),
+    valueNow: valueNow != null ? Math.round(valueNow) : void 0
+  };
+}
+export {
+  calculateAriaValues,
+  getAriaValue
+};

package/dist/utils/fuzzy.d.mts

@@ -0,0 +1,10 @@
+/**
+ * This code was modified from react-resizable-panels by Brian Vaughn
+ * @see https://github.com/bvaughn/react-resizable-panels
+ */
+declare const PRECISION = 10;
+declare function fuzzyCompareNumbers(actual: number, expected: number, fractionDigits?: number): number;
+declare function fuzzyNumbersEqual(actual: number | undefined, expected: number | undefined, fractionDigits?: number): boolean;
+declare function fuzzySizeEqual(actual: number[], expected: number[], fractionDigits?: number): boolean;
+
+export { PRECISION, fuzzyCompareNumbers, fuzzyNumbersEqual, fuzzySizeEqual };

package/dist/utils/fuzzy.d.ts

@@ -0,0 +1,10 @@
+/**
+ * This code was modified from react-resizable-panels by Brian Vaughn
+ * @see https://github.com/bvaughn/react-resizable-panels
+ */
+declare const PRECISION = 10;
+declare function fuzzyCompareNumbers(actual: number, expected: number, fractionDigits?: number): number;
+declare function fuzzyNumbersEqual(actual: number | undefined, expected: number | undefined, fractionDigits?: number): boolean;
+declare function fuzzySizeEqual(actual: number[], expected: number[], fractionDigits?: number): boolean;
+
+export { PRECISION, fuzzyCompareNumbers, fuzzyNumbersEqual, fuzzySizeEqual };