@cashub/ui 0.13.12 → 0.14.0

package/animate/Loader.js

@@ -46,7 +46,7 @@ var Wrapper = (0, _styledComponents.default)(_LoadingBackdrop.default)(_template
   return !$loading && 'display: none;';
 });
 
-var Text = _styledComponents.default.p(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: var(--spacing) 0;\n  font-size: var(--font-h2);\n"])));
+var Text = _styledComponents.default.p(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  white-space: pre-line;\n  margin: var(--spacing) 0;\n  font-size: var(--font-h2);\n  text-align: center;\n"])));
 
 var _default = Loader;
 exports.default = _default;

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.12",
+  "version": "0.14.0",
   "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

@@ -23,7 +23,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
 
-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

package/styles/theme/dark.theme.js

@@ -27,7 +27,7 @@ var colorStyle = {
   bgColor1: '#13142e',
   bgColor2: '#222143',
   bgColor3: '#2d2a5d',
-  backdropBg: 'rgba(0, 0, 0, 0.5)'
+  backdropBg: 'rgba(0, 0, 0, 0.75)'
 }; // Common font style
 
 var fontStyle = {

package/styles/theme/light.theme.js

@@ -27,7 +27,7 @@ var colorStyle = {
   bgColor1: '#F0ECFF',
   bgColor2: '#F8F4FF',
   bgColor3: '#E6E1FF',
-  backdropBg: 'rgba(0, 0, 0, 0.5)'
+  backdropBg: 'rgba(0, 0, 0, 0.75)'
 }; // Common font style
 
 var fontStyle = {

package/styles/theme/white.theme.js

@@ -27,7 +27,7 @@ var colorStyle = {
   bgColor1: '#EEEEEE',
   bgColor2: '#F7F7F7',
   bgColor3: '#FFFFFF',
-  backdropBg: 'rgba(0, 0, 0, 0.5)'
+  backdropBg: 'rgba(0, 0, 0, 0.75)'
 }; // Common font style
 
 var fontStyle = {

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 () {