{"version":3,"file":"useDebouncedValue.cjs","names":["useDebouncedState"],"sources":["../../src/debouncer/useDebouncedValue.ts"],"sourcesContent":["import { useEffect } from 'react'\nimport { useDebouncedState } from './useDebouncedState'\nimport type { ReactDebouncer, ReactDebouncerOptions } from './useDebouncer'\nimport type { DebouncerState } from '@tanstack/pacer/debouncer'\n\n/**\n * A React hook that creates a debounced value that updates only after a specified delay.\n * Unlike useDebouncedState, this hook automatically tracks changes to the input value\n * and updates the debounced value accordingly.\n *\n * The debounced value will only update after the specified wait time has elapsed since\n * the last change to the input value. If the input value changes again before the wait\n * time expires, the timer resets and starts waiting again.\n *\n * This is useful for deriving debounced values from props or state that change frequently,\n * like search queries or form inputs, where you want to limit how often downstream effects\n * or calculations occur.\n *\n * The hook returns the current debounced value and the underlying debouncer instance.\n * The debouncer instance can be used to access additional functionality like cancellation\n * and execution counts.\n *\n * ## State Management and Selector\n *\n * The hook uses TanStack Store for reactive state management via the underlying debouncer instance.\n * The `selector` parameter allows you to specify which debouncer state changes will trigger a re-render,\n * optimizing performance by preventing unnecessary re-renders when irrelevant state changes occur.\n *\n * **By default, there will be no reactive state subscriptions** and you must opt-in to state\n * tracking by providing a selector function. This prevents unnecessary re-renders and gives you\n * full control over when your component updates. Only when you provide a selector will the\n * component re-render when the selected state values change.\n *\n * Available debouncer state properties:\n * - `canLeadingExecute`: Whether the debouncer can execute on the leading edge\n * - `executionCount`: Number of function executions that have been completed\n * - `isPending`: Whether the debouncer is waiting for the timeout to trigger execution\n * - `lastArgs`: The arguments from the most recent call to maybeExecute\n * - `status`: Current execution status ('disabled' | 'idle' | 'pending')\n *\n * @example\n * ```tsx\n * // Default behavior - no reactive state subscriptions\n * const [searchQuery, setSearchQuery] = useState('');\n * const [debouncedQuery, debouncer] = useDebouncedValue(searchQuery, {\n *   wait: 500 // Wait 500ms after last change\n * });\n *\n * // Opt-in to re-render when pending state changes (optimized for loading indicators)\n * const [debouncedQuery, debouncer] = useDebouncedValue(\n *   searchQuery,\n *   { wait: 500 },\n *   (state) => ({ isPending: state.isPending })\n * );\n *\n * // Opt-in to re-render when execution count changes (optimized for tracking executions)\n * const [debouncedQuery, debouncer] = useDebouncedValue(\n *   searchQuery,\n *   { wait: 500 },\n *   (state) => ({ executionCount: state.executionCount })\n * );\n *\n * // Opt-in to re-render when debouncing status changes (optimized for status display)\n * const [debouncedQuery, debouncer] = useDebouncedValue(\n *   searchQuery,\n *   { wait: 500 },\n *   (state) => ({\n *     status: state.status,\n *     canLeadingExecute: state.canLeadingExecute\n *   })\n * );\n *\n * // debouncedQuery will update 500ms after searchQuery stops changing\n * useEffect(() => {\n *   fetchSearchResults(debouncedQuery);\n * }, [debouncedQuery]);\n *\n * // Handle input changes\n * const handleChange = (e) => {\n *   setSearchQuery(e.target.value);\n * };\n *\n * // Access the selected debouncer state (will be empty object {} unless selector provided)\n * const { isPending, executionCount } = debouncer.state;\n * ```\n */\nexport function useDebouncedValue<\n  TValue,\n  TSelected = DebouncerState<React.Dispatch<React.SetStateAction<TValue>>>,\n>(\n  value: TValue,\n  options: ReactDebouncerOptions<\n    React.Dispatch<React.SetStateAction<TValue>>,\n    TSelected\n  >,\n  selector?: (\n    state: DebouncerState<React.Dispatch<React.SetStateAction<TValue>>>,\n  ) => TSelected,\n): [\n  TValue,\n  ReactDebouncer<React.Dispatch<React.SetStateAction<TValue>>, TSelected>,\n] {\n  const [debouncedValue, setDebouncedValue, debouncer] = useDebouncedState(\n    value,\n    options,\n    selector,\n  )\n\n  useEffect(() => {\n    setDebouncedValue(value)\n  }, [value, setDebouncedValue])\n\n  return [debouncedValue, debouncer]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFA,SAAgB,kBAId,OACA,SAIA,UAMA;CACA,MAAM,CAAC,gBAAgB,mBAAmB,aAAaA,4CACrD,OACA,SACA,SACD;AAED,4BAAgB;AACd,oBAAkB,MAAM;IACvB,CAAC,OAAO,kBAAkB,CAAC;AAE9B,QAAO,CAAC,gBAAgB,UAAU"}