@mantine/hooks 9.2.2 → 9.3.1

package/lib/use-splitter/use-splitter.d.ts

@@ -0,0 +1,94 @@
+export interface UseSplitterPanel {
+    /** Initial size as percentage (0-100). All panels must sum to 100. */
+    defaultSize: number;
+    /** Minimum size percentage, `0` by default */
+    min?: number;
+    /** Maximum size percentage, `100` by default */
+    max?: number;
+    /** Whether this panel can be collapsed, `false` by default */
+    collapsible?: boolean;
+    /** Size below which the panel snaps to collapsed (percentage), defaults to `min` */
+    collapseThreshold?: number;
+}
+export interface UseSplitterRedistributeInput {
+    /** Current sizes before applying delta */
+    sizes: number[];
+    /** Panel configurations */
+    panels: UseSplitterPanel[];
+    /** Index of the handle being dragged */
+    handleIndex: number;
+    /** Requested size change in percentage (positive = grow before-panel) */
+    delta: number;
+}
+export type UseSplitterRedistributeFn = (input: UseSplitterRedistributeInput) => number[];
+export interface UseSplitterOptions {
+    /** Panel configuration array (minimum 2 panels) */
+    panels: UseSplitterPanel[];
+    /** Layout direction, `'horizontal'` by default */
+    orientation?: 'horizontal' | 'vertical';
+    /** Controlled sizes (percentages summing to 100) */
+    sizes?: number[];
+    /** Called during resize with updated sizes */
+    onSizeChange?: (sizes: number[]) => void;
+    /** Called when drag starts */
+    onResizeStart?: (handleIndex: number) => void;
+    /** Called when drag ends */
+    onResizeEnd?: (handleIndex: number, sizes: number[]) => void;
+    /** Called when a panel collapses or expands */
+    onCollapseChange?: (panelIndex: number, collapsed: boolean) => void;
+    /** How to borrow space from non-adjacent panels when the immediate neighbor is at its min/max.
+     * `'nearest'` takes from the nearest panel in the drag direction first.
+     * `'equal'` distributes equally among all panels in the drag direction.
+     * A function receives sizes, panels, handleIndex and delta, and returns new sizes.
+     * When not set, only the two adjacent panels are affected. */
+    redistribute?: 'nearest' | 'equal' | UseSplitterRedistributeFn;
+    /** Keyboard step size in percentage, `1` by default */
+    step?: number;
+    /** Shift+arrow step size in percentage, `10` by default */
+    shiftStep?: number;
+    /** Text direction for keyboard nav, `'ltr'` by default */
+    dir?: 'ltr' | 'rtl';
+    /** Enable/disable the hook, `true` by default */
+    enabled?: boolean;
+}
+export interface UseSplitterReturnValue<T extends HTMLElement = any> {
+    /** Ref callback for the container element */
+    ref: React.RefCallback<T | null>;
+    /** Current panel sizes as percentages */
+    sizes: number[];
+    /** Which panels are currently collapsed */
+    collapsed: boolean[];
+    /** Index of handle being dragged, or -1 */
+    activeHandle: number;
+    /** Get props to spread on each resize handle */
+    getHandleProps: (input: {
+        index: number;
+    }) => {
+        ref: React.RefCallback<HTMLElement>;
+        role: 'separator';
+        'aria-orientation': 'horizontal' | 'vertical';
+        'aria-valuenow': number;
+        'aria-valuemin': number;
+        'aria-valuemax': number;
+        tabIndex: number;
+        onKeyDown: React.KeyboardEventHandler;
+        'data-active': boolean | undefined;
+        'data-orientation': 'horizontal' | 'vertical';
+    };
+    /** Programmatically set sizes */
+    setSizes: (sizes: number[]) => void;
+    /** Collapse a panel */
+    collapse: (panelIndex: number) => void;
+    /** Expand a collapsed panel */
+    expand: (panelIndex: number) => void;
+    /** Toggle collapse of a panel */
+    toggleCollapse: (panelIndex: number) => void;
+}
+export declare function useSplitter<T extends HTMLElement = any>(options: UseSplitterOptions): UseSplitterReturnValue<T>;
+export declare namespace useSplitter {
+    type Panel = UseSplitterPanel;
+    type Options = UseSplitterOptions;
+    type RedistributeInput = UseSplitterRedistributeInput;
+    type RedistributeFn = UseSplitterRedistributeFn;
+    type ReturnValue<T extends HTMLElement = any> = UseSplitterReturnValue<T>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/hooks",
-  "version": "9.2.2",
+  "version": "9.3.1",
   "description": "A collection of 50+ hooks for state and UI management",
   "homepage": "https://mantine.dev",
   "license": "MIT",