Object and Function Utilities

/**
 * Deep merges objects with React element handling
 * @param target - Target object to merge into
 * @param source - Source object to merge from
 * @param options - Merge options
 * @returns Merged object
 */
function deepmerge<T>(
  target: T,
  source: unknown,
  options?: DeepmergeOptions
): T;

interface DeepmergeOptions {
  /** Set to false to merge source directly into target without cloning */
  clone?: boolean;
}

/**
 * Checks if item is a plain object
 * @param item - Item to check
 * @returns True if item is plain object
 */
function isPlainObject(item: unknown): item is Record<keyof any, unknown>;

import { deepmerge, isPlainObject } from '@mui/utils';

// Basic merge
const merged = deepmerge(
  { styles: { color: 'blue' }, count: 1 },
  { styles: { fontSize: 16 }, enabled: true }
);
// Result: { styles: { color: 'blue', fontSize: 16 }, count: 1, enabled: true }

// Merge without cloning (modifies target)
const target = { a: 1 };
deepmerge(target, { b: 2 }, { clone: false });
// target is now { a: 1, b: 2 }

// Check if object is mergeable
if (isPlainObject(someValue)) {
  const result = deepmerge(defaults, someValue);
}

/**
 * Clamps number between min and max values
 * @param value - Number to clamp
 * @param min - Minimum value
 * @param max - Maximum value
 * @returns Clamped number
 */
function clamp(value: number, min: number, max: number): number;

import { clamp } from '@mui/utils';

const bounded = clamp(150, 0, 100); // 100
const withinRange = clamp(50, 0, 100); // 50
const aboveMin = clamp(-10, 0, 100); // 0

/**
 * Creates function that calls multiple functions in sequence
 * @param funcs - Functions to chain (null/undefined are ignored)
 * @returns Combined function
 */
function unstable_createChainedFunction(
  ...funcs: Array<Function | null | undefined>
): Function;

import { unstable_createChainedFunction as createChainedFunction } from '@mui/utils';

const handleClick1 = (event) => console.log('First handler');
const handleClick2 = (event) => console.log('Second handler');

const combinedHandler = createChainedFunction(handleClick1, handleClick2);
// When called, both functions will execute in order

/**
 * Debounces function calls
 * @param func - Function to debounce
 * @param wait - Milliseconds to wait before execution
 * @param options - Debounce options
 * @returns Debounced function with clear and flush methods
 */
function unstable_debounce<T extends (...args: any[]) => any>(
  func: T,
  wait?: number,
  options?: DebounceOptions
): T & { clear: () => void; flush: () => void };

interface DebounceOptions {
  /** Execute on leading edge of timeout */
  leading?: boolean;
  /** Execute on trailing edge of timeout */
  trailing?: boolean;
}

import { unstable_debounce as debounce } from '@mui/utils';

const searchHandler = debounce((query: string) => {
  console.log('Searching for:', query);
}, 300);

// Usage in component
function SearchInput() {
  const [query, setQuery] = React.useState('');
  
  React.useEffect(() => {
    if (query) {
      searchHandler(query);
    }
  }, [query]);

  return <input value={query} onChange={(e) => setQuery(e.target.value)} />;
}

/**
 * Extracts event handlers from object
 * @param object - Object to extract handlers from
 * @param excludeKeys - Keys to exclude from extraction
 * @returns Object containing only event handlers
 */
function unstable_extractEventHandlers(
  object: Record<string, any>,
  excludeKeys?: string[]
): Record<string, React.EventHandler<any>>;

/**
 * Resolves component props from functions or objects
 * @param componentProps - Props object or function returning props
 * @param ownerState - Owner state for function-based props
 * @param slotState - Optional slot state
 * @returns Resolved props object
 */
function unstable_resolveComponentProps<TProps>(
  componentProps: TProps | ((ownerState: any) => TProps) | undefined,
  ownerState: any,
  slotState?: any
): TProps | {};

/**
 * Resolves props with defaults
 * @param defaultProps - Default props object
 * @param props - Provided props object
 * @returns Merged props with defaults applied
 */
function internal_resolveProps<TProps>(
  defaultProps: Partial<TProps>,
  props: TProps
): TProps;

import { 
  unstable_resolveComponentProps as resolveComponentProps,
  internal_resolveProps as resolveProps 
} from '@mui/utils';

// Function-based props
const dynamicProps = (ownerState) => ({
  className: `button-${ownerState.variant}`,
  'aria-pressed': ownerState.pressed
});

const resolved = resolveComponentProps(dynamicProps, { variant: 'primary', pressed: true });
// { className: 'button-primary', 'aria-pressed': true }

// Default props resolution
const defaults = { variant: 'contained', color: 'primary' };
const userProps = { color: 'secondary', disabled: true };
const finalProps = resolveProps(defaults, userProps);
// { variant: 'contained', color: 'secondary', disabled: true }