{"version":3,"file":"useQueuedValue.cjs","names":["useQueuedState"],"sources":["../../src/queuer/useQueuedValue.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\nimport { useQueuedState } from './useQueuedState'\nimport type { ReactQueuer, ReactQueuerOptions } from './useQueuer'\nimport type { QueuerState } from '@tanstack/pacer/queuer'\n\n/**\n * A React hook that creates a queued value that processes state changes in order with an optional delay.\n * This hook uses useQueuer internally to manage a queue of state changes and apply them sequentially.\n *\n * The queued value will process changes in the order they are received, with optional delays between\n * processing each change. This is useful for handling state updates that need to be processed\n * in a specific order, like animations or sequential UI updates.\n *\n * The hook returns a tuple containing:\n * - The current queued value\n * - The queuer instance with control methods\n *\n * ## State Management and Selector\n *\n * The hook uses TanStack Store for reactive state management via the underlying queuer instance.\n * The `selector` parameter allows you to specify which queuer 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 queuer state properties:\n * - `executionCount`: Number of items that have been processed by the queuer\n * - `expirationCount`: Number of items that have been removed due to expiration\n * - `isEmpty`: Whether the queuer has no items to process\n * - `isFull`: Whether the queuer has reached its maximum capacity\n * - `isIdle`: Whether the queuer is not currently processing any items\n * - `isRunning`: Whether the queuer is active and will process items automatically\n * - `items`: Array of items currently waiting to be processed\n * - `itemTimestamps`: Timestamps when items were added for expiration tracking\n * - `pendingTick`: Whether the queuer has a pending timeout for processing the next item\n * - `rejectionCount`: Number of items that have been rejected from being added\n * - `size`: Number of items currently in the queue\n * - `status`: Current processing status ('idle' | 'running' | 'stopped')\n *\n * @example\n * ```tsx\n * // Default behavior - no reactive state subscriptions\n * const [value, queuer] = useQueuedValue(initialValue, {\n *   wait: 500, // Wait 500ms between processing each change\n *   started: true // Start processing immediately\n * });\n *\n * // Opt-in to re-render when queue processing state changes (optimized for loading indicators)\n * const [value, queuer] = useQueuedValue(\n *   initialValue,\n *   { wait: 500, started: true },\n *   (state) => ({\n *     isRunning: state.isRunning,\n *     isIdle: state.isIdle,\n *     status: state.status,\n *     pendingTick: state.pendingTick\n *   })\n * );\n *\n * // Opt-in to re-render when queue contents change (optimized for displaying queue status)\n * const [value, queuer] = useQueuedValue(\n *   initialValue,\n *   { wait: 500, started: true },\n *   (state) => ({\n *     size: state.size,\n *     isEmpty: state.isEmpty,\n *     isFull: state.isFull\n *   })\n * );\n *\n * // Opt-in to re-render when execution metrics change (optimized for stats display)\n * const [value, queuer] = useQueuedValue(\n *   initialValue,\n *   { wait: 500, started: true },\n *   (state) => ({\n *     executionCount: state.executionCount,\n *     expirationCount: state.expirationCount,\n *     rejectionCount: state.rejectionCount\n *   })\n * );\n *\n * // Add changes to the queue\n * const handleChange = (newValue) => {\n *   queuer.addItem(newValue);\n * };\n *\n * // Control the queue\n * const pauseProcessing = () => {\n *   queuer.stop();\n * };\n *\n * const resumeProcessing = () => {\n *   queuer.start();\n * };\n *\n * // Access the selected queuer state (will be empty object {} unless selector provided)\n * const { size, isRunning, executionCount } = queuer.state;\n * ```\n */\nexport function useQueuedValue<\n  TValue,\n  TSelected extends Pick<QueuerState<TValue>, 'items'> = Pick<\n    QueuerState<TValue>,\n    'items'\n  >,\n>(\n  initialValue: TValue,\n  options: ReactQueuerOptions<TValue, TSelected> = {},\n  selector?: (state: QueuerState<TValue>) => TSelected,\n): [TValue, ReactQueuer<TValue, TSelected>] {\n  const [value, setValue] = useState<TValue>(initialValue)\n\n  const [, addItem, queuer] = useQueuedState(\n    (item) => {\n      setValue(item)\n    },\n    options,\n    selector,\n  )\n\n  useEffect(() => {\n    addItem(initialValue)\n  }, [initialValue, addItem])\n\n  return [value, queuer]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsGA,SAAgB,eAOd,cACA,UAAiD,EAAE,EACnD,UAC0C;CAC1C,MAAM,CAAC,OAAO,gCAA6B,aAAa;CAExD,MAAM,GAAG,SAAS,UAAUA,uCACzB,SAAS;AACR,WAAS,KAAK;IAEhB,SACA,SACD;AAED,4BAAgB;AACd,UAAQ,aAAa;IACpB,CAAC,cAAc,QAAQ,CAAC;AAE3B,QAAO,CAAC,OAAO,OAAO"}