@essential-js/ui/menu/menu.browser.mjs

EssentialJS UI

import * as dependency_0 from '@beyond-js/kernel/bundle';
import * as dependency_1 from '@beyond-js/kernel/styles';
import * as dependency_2 from 'react';

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

__pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1],['react', dependency_2]]);

brequire('@beyond-js/kernel/styles').styles.register('@essential-js/ui@1.0.0/menu')


const ims = new Map();

/**********************
INTERNAL MODULE: ./card
**********************/

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Card = Card;
var _react = require("react");
/*bundle*/function Card({
  children,
  ...props
}) {
  return _react.default.createElement("article", {
    ...props,
    className: `essential__card ${props.className}`
  }, children);
}
}});

/*******************************
INTERNAL MODULE: ./element-title
*******************************/

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ElementTitle = ElementTitle;
var _react = require("react");
const DEFAULT_APARITION_TIME = 500;
const DEFAULT_OFFSET = 10;
/*bundle*/function ElementTitle({
  offsetX = DEFAULT_OFFSET,
  offsetY = DEFAULT_OFFSET,
  children,
  aparitionTime = DEFAULT_APARITION_TIME,
  message,
  ...props
}) {
  const [showTooltip, setShowTooltip] = _react.default.useState(false);
  const [mousePosition, setMousePosition] = _react.default.useState({
    x: 0,
    y: 0
  });
  const tooltipRef = _react.default.useRef(null);
  const messageRef = _react.default.useRef(null);
  _react.default.useEffect(() => {
    const handleClickOutside = event => {
      if (tooltipRef.current && messageRef.current && !tooltipRef.current.contains(event.target) && !messageRef.current.contains(event.target)) {
        setShowTooltip(false);
      }
    };
    document.addEventListener('click', handleClickOutside);
    return () => {
      document.removeEventListener('click', handleClickOutside);
    };
  }, []);
  const handleMouseMove = event => {
    setMousePosition({
      x: event.pageX,
      y: event.pageY
    });
  };
  function handleMouseEnter() {
    setTimeout(() => {
      setShowTooltip(true);
    }, aparitionTime ?? DEFAULT_APARITION_TIME);
  }
  function handleMouseLeave() {
    setShowTooltip(false);
  }
  return _react.default.createElement("div", {
    ...props,
    ref: tooltipRef,
    className: "essential__title",
    onMouseEnter: handleMouseEnter,
    onMouseLeave: handleMouseLeave,
    onMouseMove: handleMouseMove
  }, _react.default.createElement("div", {
    ref: messageRef
  }, children), showTooltip && _react.default.createElement("div", {
    className: "title__element",
    style: {
      top: mousePosition.y + offsetY,
      left: mousePosition.x + offsetX
    }
  }, message));
}
}});

/***********************
INTERNAL MODULE: ./table
***********************/

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Table = Table;
var _react = require("react");
/*bundle*/function Table({
  breakpoint = 750,
  children,
  ...props
}) {
  const breakpointClass = `breakpoint-${breakpoint}px`;
  const styles = props.style;
  return _react.default.createElement("table", {
    ...props,
    style: styles,
    className: `essential__table ${props.className} ${breakpointClass}`
  }, children);
}
}});

__pkg.exports.descriptor = [{"im":"./card","from":"Card","name":"Card"},{"im":"./element-title","from":"ElementTitle","name":"ElementTitle"},{"im":"./table","from":"Table","name":"Table"}];

export let Card, ElementTitle, Table;

// Module exports
__pkg.exports.process = function({require, prop, value}) {
    (require || prop === 'Card') && (Card = require ? require('./card').Card : value);
    (require || prop === 'ElementTitle') && (ElementTitle = require ? require('./element-title').ElementTitle : value);
    (require || prop === 'Table') && (Table = require ? require('./table').Table : 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=menu.browser.mjs.map