message: refactor to JS behavior
diff: -import React, {useEffect, useCallback} from 'react'
  -
  export type UseInitialFocusProps = {
  - initialFocusRef?: React.RefObject<HTMLElement>
  - containerRef: React.RefObject<HTMLElement>
  + initialFocusElement?: HTMLElement
  + containerElement: HTMLElement
  isOpen: boolean
  }
  @@ -11,31 +9,25 @@ function visible(el: HTMLInputElement) {
  return !el.hidden && (!el.type || el.type !== 'hidden') && (el.offsetWidth > 0 || el.offsetHeight > 0)
  }
  -function focusable(el: Element) {
  +function focusable(el: HTMLElement) {
  const inputEl = el as HTMLInputElement
  return inputEl.tabIndex >= 0 && !inputEl.disabled && visible(inputEl)
  }
  -export const useInitialFocus = ({initialFocusRef, containerRef, isOpen}: UseInitialFocusProps) => {
  - useEffect(() => {
  - if (isOpen) {
  - if (initialFocusRef && initialFocusRef.current) {
  - initialFocusRef.current.focus()
  - } else {
  - const firstItem = getFirstFocusableItem()
  - firstItem ? firstItem.focus() : null
  - }
  - }
  - }, [isOpen, initialFocusRef])
  -
  - const getFirstFocusableItem = useCallback(() => {
  +function getFirstFocusableItem(containerElement: HTMLElement){
  let firstItem = null
  - if (containerRef && containerRef.current) {
  - const items = Array.from(containerRef.current.querySelectorAll('*')).filter(focusable)
  + const items = Array.from(containerElement.querySelectorAll<HTMLElement>('*')).filter(focusable)
  if (items.length === 0) return
  firstItem = items[0]
  - }
  return firstItem as HTMLElement
  - },[containerRef])
  +}
  +
  +export const useInitialFocus = ({initialFocusElement, containerElement, isOpen}: UseInitialFocusProps) => {
  + if (isOpen && initialFocusElement) {
  + initialFocusElement.focus()
  + } else {
  + const firstItem = getFirstFocusableItem(containerElement)
  + firstItem ? firstItem.focus() : null
  + }
  }
  \ No newline at end of file
  