tiny-essentials
Version:
Collection of small, essential scripts designed to be used across various projects. These simple utilities are crafted for speed, ease of use, and versatility.
128 lines • 4.38 kB
text/typescript
export default TinyTextarea;
export type OnInputInfo = {
/**
* - Total number of `\n` line breaks in the textarea value.
*/
breakLines: number;
/**
* - Final calculated height (in pixels) applied to the textarea.
*/
height: number;
/**
* - Internal scrollHeight before limiting.
*/
scrollHeight: number;
/**
* - Maximum allowed height before scrolling is forced.
*/
maxHeight: number;
/**
* - Height of one line of text, computed from CSS.
*/
lineHeight: number;
/**
* - Maximum number of visible rows allowed.
*/
maxRows: number;
/**
* - Effective number of visual rows being used.
*/
rows: number;
};
/**
* @typedef {Object} OnInputInfo
* @property {number} breakLines - Total number of `\n` line breaks in the textarea value.
* @property {number} height - Final calculated height (in pixels) applied to the textarea.
* @property {number} scrollHeight - Internal scrollHeight before limiting.
* @property {number} maxHeight - Maximum allowed height before scrolling is forced.
* @property {number} lineHeight - Height of one line of text, computed from CSS.
* @property {number} maxRows - Maximum number of visible rows allowed.
* @property {number} rows - Effective number of visual rows being used.
*/
/**
* A lightweight utility class that automatically adjusts the height of a `<textarea>`
* element based on its content. It prevents scrollbars by expanding vertically as needed,
* up to a configurable maximum number of visible rows.
*
* Features:
* - Automatically resizes the textarea as the user types
* - Prevents vertical scrollbars until a maximum row limit is reached
* - Supports additional height padding
* - Provides real-time callbacks for input and resize events
* - Allows manual refresh and cleanup of behavior
*
* Ideal for chat inputs, note editors, or any form where dynamic space usage
* is preferred without relying on scrollbars too early.
*
* @class
* @beta
*/
declare class TinyTextarea {
/**
* Creates a new TinyTextarea instance.
*
* @param {HTMLTextAreaElement} textarea - The `<textarea>` element to enhance.
* @param {Object} [options={}] - Optional configuration parameters.
* @param {number} [options.maxRows] - Maximum number of visible rows before scrolling.
* @param {number} [options.extraHeight] - Additional pixels to add to final height.
* @param {(info: OnInputInfo) => void} [options.onResize] - Callback when the number of rows changes.
* @param {(info: OnInputInfo) => void} [options.onInput] - Callback on every input event.
* @throws {Error} If `textarea` is not a valid `<textarea>` element.
* @throws {TypeError} If provided options are of invalid types.
*/
constructor(textarea: HTMLTextAreaElement, options?: {
maxRows?: number | undefined;
extraHeight?: number | undefined;
onResize?: ((info: OnInputInfo) => void) | undefined;
onInput?: ((info: OnInputInfo) => void) | undefined;
});
/**
* Returns the computed line height in pixels.
* @returns {number}
*/
get lineHeight(): number;
/**
* Returns the maximum number of rows allowed.
* @returns {number}
*/
get maxRows(): number;
/**
* Returns the additional height added to the textarea.
* @returns {number}
*/
get extraHeight(): number;
/**
* Returns the most recently applied height.
* @returns {number}
*/
get currentHeight(): number;
/**
* Returns the most recently calculated row count.
* @returns {number}
*/
get currentRows(): number;
/**
* Returns the original textarea element managed by this instance.
* @returns {HTMLTextAreaElement}
*/
get textarea(): HTMLTextAreaElement;
_handleInput: () => void;
/**
* Returns the latest height and row count of the textarea.
* @returns {{ height: number, rows: number }} - Last known resize state.
*/
getData(): {
height: number;
rows: number;
};
/**
* Manually trigger a resize check.
*/
refresh(): void;
/**
* Cleans up internal listeners and disables dynamic behavior.
*/
destroy(): void;
#private;
}
//# sourceMappingURL=TinyTextarea.d.mts.map