curls/dist/es/createAriaPopup.js

💪 Responsive, expressive UI primitives for React written with Style Hooks and Emotion

function _objectWithoutProperties(source, excluded) {
  if (source == null) return {}
  var target = _objectWithoutPropertiesLoose(source, excluded)
  var key, i
  if (Object.getOwnPropertySymbols) {
    var sourceSymbolKeys = Object.getOwnPropertySymbols(source)
    for (i = 0; i < sourceSymbolKeys.length; i++) {
      key = sourceSymbolKeys[i]
      if (excluded.indexOf(key) >= 0) continue
      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue
      target[key] = source[key]
    }
  }
  return target
}

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {}
  var target = {}
  var sourceKeys = Object.keys(source)
  var key, i
  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i]
    if (excluded.indexOf(key) >= 0) continue
    target[key] = source[key]
  }
  return target
}

import React, {useRef} from 'react'
import useLayoutEffect from '@react-hook/passive-layout-effect'
import useMergedRef from '@react-hook/merged-ref'
import {useBox} from './Box'
import {portalize, pushCss} from './utils'
import {createElement} from '@style-hooks/core'
export const useAriaPopup = (props, context) => {
  const focusRef = useRef(null)

  function _ref2() {
    return focusRef.current.focus()
  }

  function _ref3(event) {
    return parseInt(event.keyCode) === 27 && context.close()
  }

  useLayoutEffect(() => {
    // handles closing the modal when the ESC key is pressed
    if (context.isOpen) {
      setTimeout(_ref2, 100)
      const callback = _ref3
      focusRef.current.addEventListener('keyup', callback)
      return () => focusRef.current.removeEventListener('keyup', callback)
    }
  }, [context.isOpen])
  props.tabIndex = 0
  props.id = props.id || context.id
  props.children =
    typeof children === 'function' ? props.children(context) : props.children
  props.ref = focusRef
  return pushCss(props, context.css)
}
export default (useContext, usePopupBox) =>
  React.forwardRef((_ref, ref) => {
    let {portal} = _ref,
      props = _objectWithoutProperties(_ref, ['portal'])

    const nextProps = useAriaPopup(useBox(usePopupBox(props)), useContext())
    nextProps.ref = useMergedRef(ref, nextProps.ref)
    return portalize(createElement('div', nextProps), portal)
  })