{"version":3,"file":"useDebouncedState.cjs","names":["useDebouncer"],"sources":["../../src/debouncer/useDebouncedState.ts"],"sourcesContent":["import { useState } from 'react'\nimport { useDebouncer } from './useDebouncer'\nimport type { ReactDebouncer, ReactDebouncerOptions } from './useDebouncer'\nimport type { DebouncerState } from '@tanstack/pacer/debouncer'\n\n/**\n * A React hook that creates a debounced state value, combining React's useState with debouncing functionality.\n * This hook provides both the current debounced value and methods to update it.\n *\n * The state value is only updated after the specified wait time has elapsed since the last update attempt.\n * If another update is attempted before the wait time expires, the timer resets and starts waiting again.\n * This is useful for handling frequent state updates that should be throttled, like search input values\n * or window resize dimensions.\n *\n * The hook returns a tuple containing:\n * - The current debounced value\n * - A function to update the debounced value\n * - The debouncer instance with additional control methods\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 [searchTerm, setSearchTerm, debouncer] = useDebouncedState('', {\n *   wait: 500 // Wait 500ms after last keystroke\n * });\n *\n * // Opt-in to re-render when pending state changes (optimized for loading indicators)\n * const [searchTerm, setSearchTerm, debouncer] = useDebouncedState(\n *   '',\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 [searchTerm, setSearchTerm, debouncer] = useDebouncedState(\n *   '',\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 [searchTerm, setSearchTerm, debouncer] = useDebouncedState(\n *   '',\n *   { wait: 500 },\n *   (state) => ({\n *     status: state.status,\n *     canLeadingExecute: state.canLeadingExecute\n *   })\n * );\n *\n * // Update value - will be debounced\n * const handleChange = (e) => {\n *   setSearchTerm(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 useDebouncedState<\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  React.Dispatch<React.SetStateAction<TValue>>,\n  ReactDebouncer<React.Dispatch<React.SetStateAction<TValue>>, TSelected>,\n] {\n  const [debouncedValue, setDebouncedValue] = useState(value)\n  const debouncer = useDebouncer(setDebouncedValue, options, selector)\n  return [debouncedValue, debouncer.maybeExecute, debouncer]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6EA,SAAgB,kBAId,OACA,SAIA,UAOA;CACA,MAAM,CAAC,gBAAgB,yCAA8B,MAAM;CAC3D,MAAM,YAAYA,kCAAa,mBAAmB,SAAS,SAAS;AACpE,QAAO;EAAC;EAAgB,UAAU;EAAc;EAAU"}