@cashub/ui 0.13.13 → 0.14.1

package/modal/StateModal.js

@@ -67,7 +67,7 @@ var StateModal = function StateModal(_ref) {
   var onClose = _ref.onClose,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var rootElement = (0, _utils.appendElementToBody)('StateModalContainer');
+  var rootElement = (0, _utils.appendElementTo)('StateModalContainer');
   var Container = document.createElement('div');
   rootElement.appendChild(Container);
 

package/modal/TitleModal.js

@@ -68,7 +68,7 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
 var TitleModal = function TitleModal(props) {
-  var rootElement = (0, _utils.appendElementToBody)('TitleModalContainer');
+  var rootElement = (0, _utils.appendElementTo)('TitleModalContainer');
   var Container = document.createElement('div');
   rootElement.appendChild(Container);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.13.13",
+  "version": "0.14.1",
   "private": false,
   "author": "CASHUB Team",
   "description": "CASHUB UI components library",
@@ -11,7 +11,7 @@
   "license": "MIT",
   "dependencies": {
     "@cashub/hooks": "^0.2.0",
-    "@cashub/utils": "^0.4.0",
+    "@cashub/utils": "^0.5.0",
     "@popperjs/core": "^2.11.5",
     "@yaireo/tagify": "^4.12.0",
     "brace": "^0.11.1",

package/popover/Popover.js

@@ -21,9 +21,9 @@ var _utils = require("@cashub/utils");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
-var _excluded = ["id"];
+var _excluded = ["container", "id"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -56,10 +56,11 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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; }
 
 var Popover = function Popover(_ref) {
-  var id = _ref.id,
+  var container = _ref.container,
+      id = _ref.id,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var rootElement = (0, _utils.appendElementToBody)('PopoverContainer');
+  var rootElement = (0, _utils.appendElementTo)('PopoverContainer', 'div', container);
 
   var handleClose = function handleClose() {
     // unmount component and clear event handler and state before remove container
@@ -105,18 +106,22 @@ var Box = function Box(_ref2) {
         handleClose();
       }
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PopoverBox, _objectSpread(_objectSpread({
-      id: id,
-      ref: setTooltipElement,
-      style: styles.popper
-    }, attributes.popper), {}, {
-      placement: state && state.placement,
-      children: content
-    }))
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PopoverBox, _objectSpread(_objectSpread({
+        id: id,
+        ref: setTooltipElement,
+        style: styles.popper
+      }, attributes.popper), {}, {
+        placement: state && state.placement,
+        children: content
+      }))
+    })
   });
 };
 
-var PopoverBox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid var(--border-color);\n  color: var(--font-on-background);\n  background: var(--color-background2);\n  box-shadow: var(--box-shadow);\n  border-radius: calc(var(--border-radius) / 2);\n  padding: var(--spacing-xs);\n  z-index: 80;\n  font-size: var(--font-body1);\n  font-weight: var(--font-normal);\n  max-width: 50vw;\n  word-break: break-all;\n"])));
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+
+var PopoverBox = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border: 1px solid var(--border-color);\n  color: var(--font-on-background);\n  background: var(--color-background2);\n  box-shadow: var(--box-shadow);\n  border-radius: calc(var(--border-radius) / 2);\n  padding: var(--spacing-xs);\n  z-index: 80;\n  font-size: var(--font-body1);\n  font-weight: var(--font-normal);\n  max-width: 50vw;\n  word-break: break-all;\n"])));
 
 var _default = Popover;
 exports.default = _default;

package/table/Table.js

@@ -70,6 +70,7 @@ var Table = function Table(_ref) {
       backgroundReverse = _ref.backgroundReverse,
       translation = _ref.translation,
       beforeCreateRow = _ref.beforeCreateRow,
+      popoverContainer = _ref.popoverContainer,
       _ref$centerFooter = _ref.centerFooter,
       centerFooter = _ref$centerFooter === void 0 ? false : _ref$centerFooter;
   var tableRef = (0, _react.useRef)(null);
@@ -112,12 +113,13 @@ var Table = function Table(_ref) {
       event.stopPropagation();
       (0, _Popover.default)({
         id: id,
+        container: popoverContainer,
         target: event.target,
         content: innerText,
         boundary: tableRef.current
       });
     }
-  }, []); // generate sort icon area
+  }, [popoverContainer]); // generate sort icon area
 
   var generateSort = (0, _hooks.useGenerateSort)(sortColumn, sortType);
   var tableHeads = (0, _react.useMemo)(function () {