pragmate-ui/context-menu/context-menu.browser.mjs

An advanced, on-demand React UI library optimized for BeyondJS. Pragmate UI provides modular, responsive, and accessible components with a focus on efficient bundle sizes and a streamlined development process.

import * as dependency_0 from '@beyond-js/kernel/bundle';
import * as dependency_1 from 'react';
import * as dependency_2 from '@beyond-js/reactive/model';
import * as dependency_3 from 'pragmate-ui/base';
import * as dependency_4 from 'pragmate-ui/icons';
import * as dependency_5 from '@beyond-js/kernel/styles';

const {Bundle: __Bundle} = dependency_0;
const __pkg = new __Bundle({"module":{"vspecifier":"pragmate-ui@1.0.1/context-menu"},"type":"code"}, import.meta.url).package();;

__pkg.dependencies.update([['react', dependency_1],['@beyond-js/reactive/model', dependency_2],['pragmate-ui/base', dependency_3],['pragmate-ui/icons', dependency_4],['@beyond-js/kernel/styles', dependency_5]]);

brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/context-menu')


const ims = new Map();

/***************************
INTERNAL MODULE: ./container
***************************/

ims.set('./container', {hash: 648905027, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ContextMenuContainer = ContextMenuContainer;
var _react = require("react");
var _context = require("./context");
/*bundle*/function ContextMenuContainer({
  children
}) {
  const [showContextMenu, toggleContextMenu] = _react.default.useState();
  const onClick = event => {
    event.stopPropagation();
    event.preventDefault();
    toggleContextMenu({
      x: event.clientX,
      y: event.clientY
    });
  };
  const closeContextMenu = () => toggleContextMenu(null);
  return _react.default.createElement(_context.ContextMenuContext.Provider, {
    value: {
      closeContextMenu,
      opened: !!showContextMenu,
      position: showContextMenu
    }
  }, _react.default.createElement("span", {
    className: 'context-menu__container',
    onClick: onClick
  }, children));
}
}});

/******************************
INTERNAL MODULE: ./context-menu
******************************/

ims.set('./context-menu', {hash: 3144112597, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ContextMenuManager = exports.ContextMenu = void 0;
var _model = require("@beyond-js/reactive/model");
class ContextMenu extends _model.ReactiveModel {
  _event;
  constructor() {
    super();
    this._event = null;
    this.init();
  }
  get event() {
    return this._event;
  }
  get currentTarget() {
    return this._event?.currentTarget || null;
  }
  get target() {
    return this._event?.target || null;
  }
  init() {
    globalThis.oncontextmenu = event => {
      this._event = event;
      const target = event.target; // Assuming target is always an HTMLElement
      const parentContext = target.closest('[data-context]');
      if (target.dataset.context || parentContext) {
        event.preventDefault();
        event.stopPropagation();
        const contextEvent = target.dataset.context || parentContext?.dataset.context;
        this.triggerEvent('closed');
        if (contextEvent) {
          this.triggerEvent(`fired.${contextEvent}`);
        }
        return;
      }
      if (target.classList.contains('ds-context-menu') || target.closest('.ds-context-menu')) {
        this.triggerEvent('closed');
      }
    };
  }
}
exports.ContextMenu = ContextMenu;
/*bundle */const ContextMenuManager = exports.ContextMenuManager = new ContextMenu();
}});

/*************************
INTERNAL MODULE: ./context
*************************/

ims.set('./context', {hash: 197579782, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useContextMenuContext = exports.ContextMenuContext = void 0;
var _react = require("react");
const ContextMenuContext = exports.ContextMenuContext = _react.default.createContext({});
const useContextMenuContext = () => _react.default.useContext(ContextMenuContext);
exports.useContextMenuContext = useContextMenuContext;
}});

/*****************************
INTERNAL MODULE: ./definitions
*****************************/

ims.set('./definitions', {hash: 2944976739, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
}});

/***********************
INTERNAL MODULE: ./index
***********************/

ims.set('./index', {hash: 1105731779, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ContextMenu = ContextMenu;
var _react = require("react");
var _context = require("./context");
var _useContext = require("./use-context");
/*bundle*/function ContextMenu({
  className,
  unmount,
  children
}) {
  const container = document.createElement('span');
  const ref = (0, _react.useRef)(null);
  const {
    opened,
    position
  } = (0, _context.useContextMenuContext)();
  (0, _useContext.useContextMenu)(container, ref, position, unmount);
  if (!opened) {
    return null;
  }
  const styles = {
    position: 'absolute',
    top: `${position.y}px`,
    left: `${position.x}px`
  };
  const cls = `pui-context-menu ${className || ''}`;
  return _react.default.createElement("div", {
    style: styles,
    ref: ref,
    className: cls
  }, children);
}
}});

/**********************
INTERNAL MODULE: ./item
**********************/

ims.set('./item', {hash: 2629990627, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ContextItem = ContextItem;
var _react = require("react");
var _icons = require("pragmate-ui/icons");
var _context = require("./context");
/*bundle */function ContextItem({
  onClick,
  icon,
  label
}) {
  const {
    closeContextMenu
  } = (0, _context.useContextMenuContext)();
  const onClickEvent = async event => {
    event.stopPropagation();
    await onClick(event);
    closeContextMenu();
  };
  return _react.default.createElement("li", {
    onClick: onClickEvent
  }, icon ? _react.default.createElement(_icons.Icon, {
    icon: icon
  }) : _react.default.createElement("span", null), label);
}
}});

/*****************************
INTERNAL MODULE: ./use-context
*****************************/

ims.set('./use-context', {hash: 3365751087, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useContextMenu = useContextMenu;
var _react = require("react");
function useContextMenu(container, ref, position, unmount) {
  (0, _react.useEffect)(() => {
    const close = () => {
      document.removeEventListener('click', close);
      unmount(false);
    };
    const body = document.querySelector('body');
    if (!body) return;
    document.addEventListener('click', close);
    body.appendChild(container);
    const refCurrent = ref.current;
    if (!refCurrent) return;
    const {
      offsetWidth,
      offsetHeight
    } = refCurrent;
    const tWidth = offsetWidth + position.x;
    const tHeight = offsetHeight + position.y;
    if (tWidth > globalThis.innerWidth) {
      refCurrent.style.left = `${position.x - offsetWidth}px`;
    }
    if (tHeight > globalThis.innerHeight) {
      refCurrent.style.top = `${position.y - offsetHeight}px`;
    }
    return () => {
      document.removeEventListener('click', close);
      container.remove();
    };
  }, [position.x, position.y, container, ref, unmount]);
}
}});

__pkg.exports.descriptor = [{"im":"./container","from":"ContextMenuContainer","name":"ContextMenuContainer"},{"im":"./context-menu","from":"ContextMenuManager","name":"ContextMenuManager"},{"im":"./index","from":"ContextMenu","name":"ContextMenu"},{"im":"./item","from":"ContextItem","name":"ContextItem"}];

export let ContextMenuContainer, ContextMenuManager, ContextMenu, ContextItem;

// Module exports
__pkg.exports.process = function({require, prop, value}) {
    (require || prop === 'ContextMenuContainer') && (ContextMenuContainer = require ? require('./container').ContextMenuContainer : value);
    (require || prop === 'ContextMenuManager') && (ContextMenuManager = require ? require('./context-menu').ContextMenuManager : value);
    (require || prop === 'ContextMenu') && (ContextMenu = require ? require('./index').ContextMenu : value);
    (require || prop === 'ContextItem') && (ContextItem = require ? require('./item').ContextItem : value);

};
export const __beyond_pkg = __pkg;

export const hmr = new (function () {
    this.on = (event, listener) => void 0;
    this.off = (event, listener) => void 0;
});


__pkg.initialise(ims);
//# sourceMappingURL=context-menu.browser.mjs.map