DOM Utilities

/**
 * Check if DOM is available (browser environment)
 * @returns {boolean} True if DOM APIs are available
 */
function canUseDom(): boolean;

import canUseDom from 'rc-util/lib/Dom/canUseDom';

if (canUseDom()) {
  // Safe to use DOM APIs
  document.getElementById('app');
} else {
  // Server-side rendering or non-browser environment
  console.log('DOM not available');
}

/**
 * Add DOM event listener with React batched updates
 * @param {ReactNode} target - Target element or React node
 * @param {string} eventType - Event type (e.g., 'click', 'scroll')
 * @param {Function} callback - Event handler function
 * @param {any} [option] - Event listener options
 * @returns {{ remove: Function }} Object with remove method
 */
function addEventListener(
  target: ReactNode, 
  eventType: string, 
  callback: Function, 
  option?: any
): { remove: Function };

import addEventListener from 'rc-util/lib/Dom/addEventListener';

// Add click listener with batched updates
const listener = addEventListener(
  document.body,
  'click',
  (e) => {
    // This will be batched with other React updates
    setClicked(true);
  }
);

// Remove listener when done
listener.remove();

/**
 * Check if element has a CSS class
 * @param {HTMLElement} node - Target element
 * @param {string} className - Class name to check
 * @returns {boolean} True if element has the class
 */
function hasClass(node: HTMLElement, className: string): boolean;

/**
 * Add CSS class to element
 * @param {HTMLElement} node - Target element
 * @param {string} className - Class name to add
 */
function addClass(node: HTMLElement, className: string): void;

/**
 * Remove CSS class from element
 * @param {HTMLElement} node - Target element
 * @param {string} className - Class name to remove
 */
function removeClass(node: HTMLElement, className: string): void;

import { hasClass, addClass, removeClass } from 'rc-util/lib/Dom/class';

const element = document.getElementById('myDiv');

// Check class
if (hasClass(element, 'active')) {
  console.log('Element is active');
}

// Add class
addClass(element, 'highlighted');

// Remove class
removeClass(element, 'hidden');

/**
 * Check if node is equal to root or in root's subtree
 * @param {HTMLElement} root - Root element to check within
 * @param {HTMLElement} node - Node to search for
 * @returns {boolean} True if node is root or descendant of root
 */
function contains(root: HTMLElement, node: HTMLElement): boolean;

import contains from 'rc-util/lib/Dom/contains';

const container = document.getElementById('container');
const childElement = document.getElementById('child');

if (contains(container, childElement)) {
  console.log('Child is inside container');
}

/**
 * Get computed style value(s) from element
 * @param {HTMLElement} node - Target element
 * @param {string} [name] - Style property name (optional)
 * @returns {any} Style value or all computed styles
 */
function get(node: HTMLElement, name?: string): any;

/**
 * Set CSS style(s) on element
 * @param {HTMLElement} node - Target element
 * @param {string|object} name - Style property name or styles object
 * @param {any} [value] - Style value (when name is string)
 * @returns {any} Set value or computed styles
 */
function set(node: HTMLElement, name: string | object, value?: any): any;

/**
 * Get element's outer width including borders and scrollbar
 * @param {HTMLElement} el - Target element
 * @returns {number} Outer width in pixels
 */
function getOuterWidth(el: HTMLElement): number;

/**
 * Get element's outer height including borders and scrollbar
 * @param {HTMLElement} el - Target element
 * @returns {number} Outer height in pixels
 */
function getOuterHeight(el: HTMLElement): number;

/**
 * Get document dimensions
 * @returns {{ width: number, height: number }} Document size
 */
function getDocSize(): { width: number, height: number };

/**
 * Get client viewport dimensions
 * @returns {{ width: number, height: number }} Client size
 */
function getClientSize(): { width: number, height: number };

/**
 * Get current scroll position
 * @returns {{ scrollLeft: number, scrollTop: number }} Scroll position
 */
function getScroll(): { scrollLeft: number, scrollTop: number };

/**
 * Get element's offset position relative to document
 * @param {HTMLElement} node - Target element
 * @returns {{ left: number, top: number }} Offset position
 */
function getOffset(node: HTMLElement): { left: number, top: number };

import { get, set, getOuterWidth, getOffset } from 'rc-util/lib/Dom/css';

const element = document.getElementById('myDiv');

// Get styles
const width = get(element, 'width'); // "100px"
const allStyles = get(element); // All computed styles

// Set styles
set(element, 'color', 'red');
set(element, { color: 'blue', fontSize: '16px' });

// Measurements
const outerWidth = getOuterWidth(element); // 120 (including borders)
const position = getOffset(element); // { left: 100, top: 50 }

/**
 * Get list of focusable elements within a container
 * @param {HTMLElement} node - Container element
 * @returns {HTMLElement[]} Array of focusable elements
 */
function getFocusNodeList(node: HTMLElement): HTMLElement[];

/**
 * Save the currently focused element for later restoration
 */
function saveLastFocusNode(): void;

/**
 * Clear the saved focus element
 */
function clearLastFocusNode(): void;

/**
 * Restore focus to the previously saved element
 */
function backLastFocusNode(): void;

/**
 * Limit tab navigation within a container (focus trap)
 * @param {HTMLElement} node - Container element
 * @param {Event} e - Keyboard event
 */
function limitTabRange(node: HTMLElement, e: Event): void;

import { 
  getFocusNodeList, 
  saveLastFocusNode, 
  backLastFocusNode,
  limitTabRange 
} from 'rc-util/lib/Dom/focus';

// Modal focus management
function openModal() {
  saveLastFocusNode(); // Save current focus
  // Show modal and focus first element
}

function closeModal() {
  backLastFocusNode(); // Restore previous focus
}

// Trap focus within modal
function handleModalKeyDown(e) {
  limitTabRange(modalElement, e);
}

// Get focusable elements
const focusableElements = getFocusNodeList(containerElement);

/**
 * Animation support detection
 * @type {boolean | { end: string }} False if not supported, or object with event name
 */
const animation: boolean | { end: string };

/**
 * Transition support detection  
 * @type {boolean | { end: string }} False if not supported, or object with event name
 */
const transition: boolean | { end: string };

import { animation, transition } from 'rc-util/lib/Dom/support';

// Check animation support
if (animation) {
  element.addEventListener(animation.end, handleAnimationEnd);
  element.classList.add('animate');
}

// Check transition support
if (transition) {
  element.addEventListener(transition.end, handleTransitionEnd);
  element.style.transition = 'opacity 0.3s';
}

/**
 * Find DOM node from React component or element
 * @param {any} node - React component or DOM element
 * @returns {HTMLElement | null} DOM element or null
 */
function findDOMNode(node: any): HTMLElement | null;