@primer/react/dist/PageLayout/usePaneWidth.d.ts

An implementation of GitHub's Primer Design System using React

import React from 'react';
type Measurement = `${number}px`;
export type CustomWidthOptions = {
    min: Measurement;
    default: Measurement;
    max: Measurement;
};
export type PaneWidth = 'small' | 'medium' | 'large';
export type UsePaneWidthOptions = {
    width: PaneWidth | CustomWidthOptions;
    minWidth: number;
    resizable: boolean;
    widthStorageKey: string;
    paneRef: React.RefObject<HTMLDivElement | null>;
    handleRef: React.RefObject<HTMLDivElement | null>;
};
export type UsePaneWidthResult = {
    /** Current width for React state (used in ARIA attributes) */
    currentWidth: number;
    /** Mutable ref tracking width during drag operations */
    currentWidthRef: React.MutableRefObject<number>;
    /** Minimum allowed pane width */
    minPaneWidth: number;
    /** Maximum allowed pane width (updates on viewport resize) */
    maxPaneWidth: number;
    /** Calculate current max width constraint */
    getMaxPaneWidth: () => number;
    /** Persist width to localStorage and sync React state */
    saveWidth: (value: number) => void;
    /** Reset to default width */
    getDefaultWidth: () => number;
};
/**
 * Default value for --pane-max-width-diff CSS variable.
 * Imported from CSS to ensure JS fallback matches the CSS default.
 */
export declare const DEFAULT_MAX_WIDTH_DIFF: number;
/**
 * Default max pane width for SSR when viewport is unknown.
 * Updated to actual value in layout effect before paint.
 */
export declare const SSR_DEFAULT_MAX_WIDTH = 600;
/**
 * Pixel increment for keyboard arrow key resizing.
 * @see https://github.com/github/accessibility/issues/5101#issuecomment-1822870655
 */
export declare const ARROW_KEY_STEP = 3;
/** Default widths for preset size options */
export declare const defaultPaneWidth: Record<PaneWidth, number>;
export declare const isCustomWidthOptions: (width: PaneWidth | CustomWidthOptions) => width is CustomWidthOptions;
export declare const isPaneWidth: (width: PaneWidth | CustomWidthOptions) => width is PaneWidth;
export declare const getDefaultPaneWidth: (w: PaneWidth | CustomWidthOptions) => number;
/**
 * Gets the --pane-max-width-diff CSS variable value from a pane element.
 * This value is set by CSS media queries and controls the max pane width constraint.
 * Note: This calls getComputedStyle which forces layout - cache the result when possible.
 */
export declare function getPaneMaxWidthDiff(paneElement: HTMLElement | null): number;
export declare const updateAriaValues: (handle: HTMLElement | null, values: {
    current?: number;
    min?: number;
    max?: number;
}) => void;
/**
 * Manages pane width state with localStorage persistence and viewport constraints.
 * Handles initialization from storage, clamping on viewport resize, and provides
 * functions to save and reset width.
 */
export declare function usePaneWidth({ width, minWidth, resizable, widthStorageKey, paneRef, handleRef, }: UsePaneWidthOptions): UsePaneWidthResult;
export {};
//# sourceMappingURL=usePaneWidth.d.ts.map