{"version":3,"file":"index.cjs","names":[],"sources":["../../../src/hooks/useFocus/index.ts"],"sourcesContent":["import { type RefObject, useCallback, useRef, useState } from 'react';\nimport { useEventListener } from '../../hooks/useEventListener';\n\ninterface UseFocusProps {\n  onFocus?: (event: FocusEvent) => void;\n  onBlur?: (event: FocusEvent) => void;\n}\n\ninterface UseFocusReturnType<T extends HTMLElement> {\n  ref: RefObject<T | null>;\n  isFocus: boolean;\n  setFocus: () => void;\n}\n\n/**\n * @description 대상 요소를 기준으로 포커스 상태를 반환하고, 포커스 상태에 따른 액션을 정의할 수 있는 커스텀 훅입니다.\n *\n * @template T - HTML 엘리먼트 타입을 지정합니다.\n * @param {{\n *  onFocus?: (event: FocusEvent) => void;\n *  onBlur?: (event: FocusEvent) => void;\n * }} props - 포커스 상태에 따른 콜백 함수를 포함한 선택적 속성입니다.\n * - `onFocus`: 요소에 포커스가 들어올 때 호출되는 함수입니다. 기본값은 `noop` 함수입니다.\n * - `onBlur`: 요소에서 포커스가 빠져나갈 때 호출되는 함수입니다. 기본값은 `noop` 함수입니다.\n *\n * @returns {UseFocusReturnType<T>} `ref`, `isFocus`, `setFocus`를 포함한 객체를 반환합니다.\n * - `ref`: 추적할 대상 요소의 참조입니다.\n * - `isFocus`: 요소가 포커스 상태인지 여부를 나타내는 불리언 값입니다.\n * - `setFocus`: 요소에 포커스를 참 값으로 설정하는 함수입니다.\n *\n * @example\n * ```tsx\n * const { ref, isFocused, setFocus } = useFocus<HTMLInputElement>({\n *   onFocus: () => console.log(\"focus\"),\n *   onBlur: () => console.log(\"blur\")\n * });\n *\n * <input ref={ref} />\n * <button onClick={() => setFocus()}>focus trigger</button>\n * <div>{isFocused ? 'focus' : 'blur'}</div>\n * ```\n */\nexport function useFocus<T extends HTMLElement>({\n  onFocus,\n  onBlur,\n}: UseFocusProps = {}): UseFocusReturnType<T> {\n  const [isFocus, setIsFocus] = useState(false);\n\n  const ref = useRef<T>(null);\n\n  const focusAction = (event: FocusEvent) => {\n    setIsFocus(true);\n    onFocus?.(event);\n  };\n\n  const blurAction = (event: FocusEvent) => {\n    setIsFocus(false);\n    onBlur?.(event);\n  };\n\n  const setFocus = useCallback(() => {\n    if (!ref.current) return;\n\n    ref.current.focus();\n    setIsFocus(true);\n  }, []);\n\n  useEventListener(ref, 'focus', focusAction);\n  useEventListener(ref, 'blur', blurAction);\n\n  return { ref, isFocus, setFocus };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,SAAgB,SAAgC,EAC9C,SACA,WACiB,EAAE,EAAyB;CAC5C,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,MAAM;CAE7C,MAAM,OAAA,GAAA,MAAA,QAAgB,KAAK;CAE3B,MAAM,eAAe,UAAsB;EACzC,WAAW,KAAK;EAChB,UAAU,MAAM;;CAGlB,MAAM,cAAc,UAAsB;EACxC,WAAW,MAAM;EACjB,SAAS,MAAM;;CAGjB,MAAM,YAAA,GAAA,MAAA,mBAA6B;EACjC,IAAI,CAAC,IAAI,SAAS;EAElB,IAAI,QAAQ,OAAO;EACnB,WAAW,KAAK;IACf,EAAE,CAAC;CAEN,cAAA,iBAAiB,KAAK,SAAS,YAAY;CAC3C,cAAA,iBAAiB,KAAK,QAAQ,WAAW;CAEzC,OAAO;EAAE;EAAK;EAAS;EAAU"}