@syncfusion/react-popups/src/common/resize.d.ts

A package of React popup components such as Tooltip that is used to display information or messages in separate pop-ups.

import * as React from 'react';
import { ResizeDirections } from '@syncfusion/react-base';
import { ResizeEvent } from '../index';
export { ResizeDirections };
/**
 * Specifies the options for the useResize hook.
 */
export interface IResize {
    /**
     * Specifies whether resizing is enabled. When false, all resize capabilities are disabled
     * and handles will not be rendered.
     *
     * @default false
     */
    enabled?: boolean;
    /**
     * Specifies which edges or corners of the element can be dragged to resize it.
     * Array of directions like 'North', 'SouthEast', etc. Use 'All' to enable all handles.
     * Cardinal directions create border handles, while corner directions create corner handles.
     *
     * @default ['SouthEast']
     */
    handles?: ResizeDirections[];
    /**
     * Specifies the minimum width constraint for the resizable element.
     *
     * @default 100
     */
    minWidth?: number | string;
    /**
     * Specifies the minimum height constraint for the resizable element.
     *
     * @default 100
     */
    minHeight?: number | string;
    /**
     * Specifies the maximum width constraint for the resizable element.
     * Can be specified as pixels, percentage, or other CSS units.
     * Prevents resizing beyond this width.
     *
     * @default Number.MAX_SAFE_INTEGER
     */
    maxWidth?: number | string;
    /**
     * Specifies the maximum height constraint for the resizable element.
     * Can be specified as pixels, percentage, or other CSS units.
     * Prevents resizing beyond this height.
     *
     * @default Number.MAX_SAFE_INTEGER
     */
    maxHeight?: number | string;
    /**
     * Specifies the element that defines the boundaries for resizing.
     * The element cannot be resized beyond the boundaries of this container.
     *
     * @default document.body
     */
    boundary?: HTMLElement;
    /**
     * Specifies the callback fired when resize operation starts.
     * Receives a ResizeEvent object with current dimensions and direction.
     *
     * @event resizeStart
     */
    onResizeStart?: (args: ResizeEvent) => void;
    /**
     * Specifies the callback fired continuously during resize operation.
     * Receives a ResizeEvent object with updated dimensions and direction.
     *
     * @event resize
     */
    onResize?: (args: ResizeEvent) => void;
    /**
     * Specifies the callback fired when resize operation ends.
     * Receives a ResizeEvent object with final dimensions and direction.
     *
     * @event resizeStop
     */
    onResizeStop?: (args: ResizeEvent) => void;
}
/**
 * Specifies the state and functionality returned by the useResize hook.
 * Provides access to current dimensions, resize direction information, and methods for rendering resize handles.
 */
export interface IResizeContext {
    /**
     * Specifies the current width of the resized element in pixels.
     * Updates dynamically during resize operations.
     */
    width: number;
    /**
     * Specifies the current height of the resized element in pixels.
     * Updates dynamically during resize operations.
     */
    height: number;
    /**
     * Specifies the current active resize direction if a resize is in progress.
     */
    direction: ResizeDirections;
    /**
     * Specifies the function to render resize handles with optional icon for corner handles.
     * Automatically positions handles based on configured directions.
     *
     * @param iconComponent Optional React element to display in corner handles
     * @returns Array of resize handle elements ready to be rendered
     */
    renderResizeHandles: (iconComponent?: React.ReactNode) => React.ReactNode[];
}
/**
 * Specifies a custom hook that provides resize functionality for React components.
 * Allows elements to be resized by dragging handles on the edges and corners,
 * with support for minimum/maximum size constraints and multiple resize directions.
 *
 * @param {React.RefObject<HTMLElement>} elementRef - Reference to the element that will be made resizable
 * @param {IResize} options - Resize configuration options including constraints and event handlers
 * @returns {IResizeContext} Resize state and handle rendering function
 */
export declare function useResize(elementRef: React.RefObject<HTMLElement>, options: IResize): IResizeContext;