How to use @s-ui/js - 7 common examples

const handleKeyDown = ev => {
    ev.persist()
    const isEnabledKey = ENABLED_KEYS.includes(ev.key)
    const options = refsMoleculeSelectOptions.current.map(getTarget)
    const domSourceEvent = ev.target
    const domMoleculeSelect = refMoleculeSelect.current

    if (!isOpen && isEnabledKey) {
      domSourceEvent === domMoleculeSelect && handleToggle(ev)
    } else {
      const currentElementFocused = getCurrentElementFocused()
      const isSomeOptionFocused = [...options].includes(currentElementFocused)
      if (ev.key === 'Escape') closeList(ev)
      if (ev.key === 'ArrowDown' && !isSomeOptionFocused)
        focusFirstOption(ev, {options})
    }
  }

setTimeout(() => {
      const currentElementFocused = getCurrentElementFocused()
      const focusOutFromOutside = ![domInnerInput, ...options].includes(
        currentElementFocused
      )
      if (focusOutFromOutside) {
        isOpen ? closeList(ev) : setFocus(false)
      }
    }, 1)
    setFocus(true)

setTimeout(() => {
      const currentElementFocused = getCurrentElementFocused()
      const isSomeOptionFocused = [...options].includes(currentElementFocused)
      const isOptionListFocused = firstOption
        ? currentElementFocused.isSameNode(firstOption.parentNode)
        : false

      if (!isSomeOptionFocused && !isOptionListFocused && isOpen) {
        closeList(ev)
      }
    }, 1)
    setFocus(false)

const scrollStep = () => {
    const container = getTarget(refContainer)
    const {scrollTop} = container
    const {current: intervalId} = intervalRef

    if (scrollTop === 0) clearInterval(intervalId)
    if (scrollTop) container.scrollTop = scrollTop - scrollSteps
  }

useEffect(() => {
    const container = getTarget(refContainer)
    const {scrollHeight, clientHeight} = container
    const halfHeight = Math.floor((scrollHeight - clientHeight) / 2)

    const handleScroll = () => {
      const {scrollTop} = container
      if (scrollTop > halfHeight) {
        if (!show) {
          setShow(true)
        }
      } else {
        if (show) {
          setShow(false)
          setHover(false)
        }
      }
    }

return (...args) => {
    if (
      (typeof window !== 'undefined' && window.__SUI_CACHE_DISABLED__) ||
      (typeof global !== 'undefined' && global.__SUI_CACHE_DISABLED__)
    ) {
      return original.apply(instance, args)
    }

    const key = `${target.constructor.name}::${fnName}::${createHash(
      JSON.stringify(args)
    )}`
    const now = Date.now()
    if (cache.get(key) === undefined) {
      cache.set(key, {createdAt: now, returns: original.apply(instance, args)})
    }

    if (isPromise(cache.get(key).returns)) {
      cache.get(key).returns.catch(() => cache.del(key))
    }

    if (now - cache.get(key).createdAt > ttl) {
      cache.del(key)
    }

    return cache.get(key) !== undefined

      .map(token => slugify(this.t(token), allowQueryParams))
      .join('/')