curls/dist/cjs/createAriaPopupToggle.js

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

'use strict'

exports.__esModule = true
exports.default = exports.useAriaPopupToggle = 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 _core = require('@style-hooks/core')

var _Button = require('./Button')

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 _extends() {
  _extends =
    Object.assign ||
    function(target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i]
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key]
          }
        }
      }
      return target
    }
  return _extends.apply(this, arguments)
}

const useAriaPopupToggle = (props, context) => {
  const focusRef = (0, _react.useRef)(null)
  const seen = (0, _react.useRef)(false)
  ;(0, _passiveLayoutEffect.default)(() => {
    if (context.isOpen === false) {
      if (seen.current === true) focusRef.current.focus()
      seen.current = true
    }
  }, [context.isOpen])

  const nextProps = _extends(
    {
      tabIndex: 0,
      'aria-controls': context.id,
      'aria-haspopup': 'true',
      'aria-expanded': String(context.isOpen),
      ref: focusRef,
    },
    props
  )

  nextProps.onClick = () => {
    var _props$onClick

    props === null || props === void 0
      ? void 0
      : (_props$onClick = props.onClick) === null || _props$onClick === void 0
      ? void 0
      : _props$onClick.call(props)
    context.toggle()
  }

  return nextProps
}

exports.useAriaPopupToggle = useAriaPopupToggle

var _default = (name, useContext) => {
  const useStylesHook = (0, _core.createStyleHook)(name, {})
  return _react.default.forwardRef((props, ref) => {
    const nextProps = useStylesHook(useAriaPopupToggle(props, useContext()))
    nextProps.ref = (0, _mergedRef.default)(ref, nextProps.ref)
    return (0, _core.createElement)(_Button.Button, nextProps)
  })
}

exports.default = _default