curls/dist/cjs/createAriaPopup.js

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

'use strict'

exports.__esModule = true
exports.default = exports.useAriaPopup = void 0

var _react = _interopRequireWildcard(require('react'))

var _passiveLayoutEffect = _interopRequireDefault(
  require('@react-hook/passive-layout-effect')
)

var _mergedRef = _interopRequireDefault(require('@react-hook/merged-ref'))

var _Box = require('./Box')

var _utils = require('./utils')

var _core = require('@style-hooks/core')

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : {default: obj}
}

function _interopRequireWildcard(obj) {
  if (obj && obj.__esModule) {
    return obj
  } else {
    var newObj = {}
    if (obj != null) {
      for (var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
          var desc =
            Object.defineProperty && Object.getOwnPropertyDescriptor
              ? Object.getOwnPropertyDescriptor(obj, key)
              : {}
          if (desc.get || desc.set) {
            Object.defineProperty(newObj, key, desc)
          } else {
            newObj[key] = obj[key]
          }
        }
      }
    }
    newObj.default = obj
    return newObj
  }
}

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
}

const useAriaPopup = (props, context) => {
  const focusRef = (0, _react.useRef)(null)

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

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

  ;(0, _passiveLayoutEffect.default)(() => {
    // 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 (0, _utils.pushCss)(props, context.css)
}

exports.useAriaPopup = useAriaPopup

var _default = (useContext, usePopupBox) =>
  _react.default.forwardRef((_ref, ref) => {
    let {portal} = _ref,
      props = _objectWithoutProperties(_ref, ['portal'])

    const nextProps = useAriaPopup(
      (0, _Box.useBox)(usePopupBox(props)),
      useContext()
    )
    nextProps.ref = (0, _mergedRef.default)(ref, nextProps.ref)
    return (0, _utils.portalize)(
      (0, _core.createElement)('div', nextProps),
      portal
    )
  })

exports.default = _default