(function() {
  var useEffect = React.useEffect;
  var useRef = React.useRef;
  var GlassSurface = window.GlassSurface;

  function GlassMenu(props) {
    var open = props.open;
    var onClose = props.onClose;
    var items = props.items || [];
    var children = props.children;
    var className = props.className || '';
    var style = props.style || {};
    var anchor = props.anchor;

    var ref = useRef(null);

    useEffect(function() {
      if (!open) return;
      function onDoc(e) {
        if (ref.current && !ref.current.contains(e.target) && anchor && !anchor.contains(e.target)) {
          if (onClose) onClose();
        }
      }
      function onKey(e) {
        if (e.key === 'Escape' && onClose) onClose();
      }
      document.addEventListener('mousedown', onDoc);
      document.addEventListener('keydown', onKey);
      return function() {
        document.removeEventListener('mousedown', onDoc);
        document.removeEventListener('keydown', onKey);
      };
    }, [open, onClose, anchor]);

    if (!open) return null;

    return React.createElement('div', { ref: ref, style: style },
      React.createElement(GlassSurface, {
        elevation: 0,
        radius: 'lg',
        chrome: true,
        className: 'glass-menu ' + className
      },
        children,
        items.map(function(it, i) {
          if (it.divider) {
            return React.createElement('div', { key: 'd-' + i, className: 'glass-menu-divider' });
          }
          return React.createElement('button', {
            key: it.label || i,
            type: 'button',
            className: 'glass-menu-item',
            onClick: function() {
              if (it.run) it.run();
              if (onClose) onClose();
            }
          },
            it.icon && React.createElement('span', {
              className: 'glass-menu-ico',
              // 28px: image icons need more room than the old emoji did.
              style: { width: 28, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }
            }, it.icon),
            React.createElement('span', { style: { minWidth: 0 } },
              React.createElement('span', { style: { display: 'block', fontSize: 13, fontWeight: 500 } }, it.label),
              it.hint && React.createElement('span', { style: { display: 'block', fontSize: 11, opacity: 0.55, marginTop: 1 } }, it.hint)
            )
          );
        })
      )
    );
  }

  window.GlassMenu = GlassMenu;
})();