@cashub/ui 0.5.0 → 0.6.1

package/Tab/TabList.js

@@ -40,7 +40,7 @@ var TabList = function TabList(_ref) {
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  border-bottom: var(--border-width) solid var(--border-color);\n  margin-bottom: var(--spacing);\n\n  ", "\n"])), function (_ref2) {
   var noMargin = _ref2.noMargin;
-  return noMargin && "margin-bottom: 0;";
+  return noMargin && 'margin-bottom: 0;';
 });
 
 var _default = TabList;

package/Tab/TabPanel.js

@@ -59,9 +59,9 @@ var TabPanel = function TabPanel(_ref) {
   var tabContent = (0, _react.useMemo)(function () {
     if (rendered) {
       return children;
-    } else {
-      return null;
     }
+
+    return null;
   }, [rendered, children]);
   (0, _react.useEffect)(function () {
     if (name === selected) {
@@ -78,7 +78,7 @@ var TabPanel = function TabPanel(_ref) {
 
 var Panel = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: ", ";\n  position: relative;\n"])), function (_ref2) {
   var $display = _ref2.$display;
-  return $display ? "block" : "none";
+  return $display ? 'block' : 'none';
 });
 
 var _default = TabPanel;

package/animate/Collapse.js

@@ -51,7 +51,7 @@ var Collapse = function Collapse(_ref) {
     var style = {
       transition: "height ".concat(duration, "ms ease-in-out"),
       height: state.height,
-      overflow: "hidden"
+      overflow: 'hidden'
     };
     return style;
   }, [duration, state.height]);

package/animate/NumberCounter.js

@@ -26,7 +26,7 @@ var NumberCounter = function NumberCounter(_ref) {
       end = _ref.end,
       duration = _ref.duration;
 
-  var _useState = (0, _react.useState)(start),
+  var _useState = (0, _react.useState)(start || 0),
       _useState2 = _slicedToArray(_useState, 2),
       number = _useState2[0],
       setNumber = _useState2[1];

package/backdrop/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BaseBackdrop", {
+  enumerable: true,
+  get: function get() {
+    return _BaseBackdrop.default;
+  }
+});
+Object.defineProperty(exports, "LoadingBackdrop", {
+  enumerable: true,
+  get: function get() {
+    return _LoadingBackdrop.default;
+  }
+});
+Object.defineProperty(exports, "ModalBackdrop", {
+  enumerable: true,
+  get: function get() {
+    return _ModalBackdrop.default;
+  }
+});
+
+var _BaseBackdrop = _interopRequireDefault(require("./BaseBackdrop"));
+
+var _LoadingBackdrop = _interopRequireDefault(require("./LoadingBackdrop"));
+
+var _ModalBackdrop = _interopRequireDefault(require("./ModalBackdrop"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/badge/BadgeFill.js

@@ -23,13 +23,13 @@ var BadgeFill = _styledComponents.default.span.attrs(function () {
   };
 })(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  height: auto;\n  width: auto;\n  border-radius: var(--border-radius-l);\n  font-size: 1rem;\n  padding: 0.5rem;\n  margin: 0;\n  color: var(--font-on-background);\n\n  ", "\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), _backgroundColor.default, _colorOnBackground.default, function (_ref) {
   var extraSmall = _ref.extraSmall;
-  return extraSmall && "font-size: 0.75rem; padding: 0.125rem;";
+  return extraSmall && 'font-size: 0.75rem; padding: 0.125rem;';
 }, function (_ref2) {
   var small = _ref2.small;
-  return small && "font-size: 1rem; padding: 0.25rem;";
+  return small && 'font-size: 1rem; padding: 0.25rem;';
 }, function (_ref3) {
   var large = _ref3.large;
-  return large && "font-size: 2rem;";
+  return large && 'font-size: 2rem;';
 });
 
 var _default = BadgeFill;

package/billing/BarChart.js

@@ -17,15 +17,15 @@ var BillingBarChart = function BillingBarChart(_ref) {
       danger = _ref.danger;
   var styles = {
     chart: {
-      position: "relative",
-      width: "100%",
+      position: 'relative',
+      width: '100%',
       height: 16,
       borderRadius: 16,
       backgroundColor: theme.bgColor3,
       marginTop: 8
     },
     bar: {
-      position: "absolute",
+      position: 'absolute',
       width: "".concat(percentage, "%"),
       borderRadius: 16,
       top: 0,

package/billing/Grid.js

@@ -12,10 +12,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 var BillingGrid = function BillingGrid(_ref) {
   var children = _ref.children;
   var styles = {
-    display: "flex",
-    flexWrap: "wrap",
-    flexDirection: "row",
-    margin: "0 -8"
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    margin: '0 -8'
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.View, {
     style: styles,
@@ -29,15 +29,15 @@ var BillingColumn = function BillingColumn(_ref2) {
   var children = _ref2.children,
       flex = _ref2.flex;
   var styles = {
-    padding: "0 8",
-    width: "50%"
+    padding: '0 8',
+    width: '50%'
   };
 
   if (flex) {
-    styles.display = "flex";
-    styles.alignContent = "stretch";
-    styles.alignItems = "stretch";
-    styles.flexDirection = "column";
+    styles.display = 'flex';
+    styles.alignContent = 'stretch';
+    styles.alignItems = 'stretch';
+    styles.flexDirection = 'column';
   }
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.View, {

package/breadcrumb/Breadcrumb.js

@@ -26,12 +26,17 @@ var Breadcrumb = function Breadcrumb(_ref) {
     children: path.map(function (_ref2, index) {
       var name = _ref2.name,
           url = _ref2.url;
-      if (url) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
-        to: url,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-          children: name
-        })
-      }, index);else return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+
+      if (url) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
+          to: url,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: name
+          })
+        }, index);
+      }
+
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         children: name
       }, index);
     })

package/button/IconButton.js

@@ -23,7 +23,7 @@ var IconButton = _styledComponents.default.div.attrs(function () {
   };
 })(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 40px;\n  height: 40px;\n  transition: 0.3s;\n  position: relative;\n  border-radius: var(--border-radius-l);\n  color: ", ";\n  cursor: ", ";\n  margin: auto;\n\n  ", "\n\n  &:hover {\n    ", "\n  }\n\n  > svg {\n    font-size: 1.5rem;\n    position: relative;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n\n    ", "\n\n    ", "\n  }\n"])), function (_ref) {
   var disabled = _ref.disabled;
-  return disabled ? "var(--color-grey)" : "var(--color-white)";
+  return disabled ? 'var(--color-grey)' : 'var(--color-white)';
 }, function (_ref2) {
   var disabled = _ref2.disabled;
   return disabled ? 'no-drop' : 'pointer';

package/chart/BarChart.js

@@ -51,18 +51,18 @@ var BarChart = function BarChart(_ref) {
           maxBarNumber: customOptions.maxBarNumber
         },
         legend: {
-          position: "bottom",
+          position: 'bottom',
           display: customOptions.showLegend
         },
         tooltip: {
           enabled: false,
           intersect: false,
           filter: function filter(context) {
-            return !customOptions.onlyFirstTooltips || context.datasetIndex === 0 && context.label !== "null";
+            return !customOptions.onlyFirstTooltips || context.datasetIndex === 0 && context.label !== 'null';
           },
           callbacks: {
             title: function title(context) {
-              return context[0] ? context[0].label.match(/(.{1,20})/g) : "";
+              return context[0] ? context[0].label.match(/(.{1,20})/g) : '';
             },
             label: function label(context) {
               var label = context.dataset.data[context.dataIndex];
@@ -114,7 +114,7 @@ var BarChart = function BarChart(_ref) {
       }
     };
   }, [customOptions, theme.fontOnPrimary]);
-  console.log("defaultOptions", defaultOptions);
+  console.log('defaultOptions', defaultOptions);
   var Chart = (0, _react.useMemo)(function () {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactChartjs.Bar, {
       height: height,

package/chart/DoughnutChart.js

@@ -34,7 +34,7 @@ var DoughnutChart = function DoughnutChart(_ref) {
       aspectRatio: 1,
       plugins: {
         legend: {
-          position: "bottom",
+          position: 'bottom',
           labels: {
             padding: 24
           }

package/chart/LineChart.js

@@ -32,15 +32,15 @@ var LineChart = function LineChart(_ref) {
   var customOptions = (0, _react.useMemo)(function () {
     return {
       suggestedMax: options.suggestedMax ? options.suggestedMax : 10,
-      tooltipTitlePrefix: "",
-      tooltipLabelPrefix: ""
+      tooltipTitlePrefix: '',
+      tooltipLabelPrefix: ''
     };
   }, [options]);
 
   if (options.tooltips) {
     var tooltipsOptions = options.tooltips;
-    customOptions.tooltipTitlePrefix = tooltipsOptions.titlePrefix || "";
-    customOptions.tooltipLabelPrefix = tooltipsOptions.labelPrefix || "";
+    customOptions.tooltipTitlePrefix = tooltipsOptions.titlePrefix || '';
+    customOptions.tooltipLabelPrefix = tooltipsOptions.labelPrefix || '';
   }
 
   var defaultOptions = (0, _react.useMemo)(function () {
@@ -56,11 +56,11 @@ var LineChart = function LineChart(_ref) {
           enabled: false,
           intersect: false,
           filter: function filter(context) {
-            return context.datasetIndex === 0 && context.label !== "null";
+            return context.datasetIndex === 0 && context.label !== 'null';
           },
           callbacks: {
             title: function title(context) {
-              var content = context[0] ? context[0].label.match(/(.{1,20})/g) : "";
+              var content = context[0] ? context[0].label.match(/(.{1,20})/g) : '';
               return "".concat(customOptions.tooltipTitlePrefix).concat(content);
             },
             label: function label(context) {

package/chart/SingleBarChart.js

@@ -19,12 +19,12 @@ var SingleBarChart = _styledComponents.default.div.attrs(function () {
   return {
     primary: true
   };
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  height: 1rem;\n  border-radius: var(--border-radius);\n  background: var(--color-background3);\n\n  &::before {\n    position: absolute;\n    content: \"\";\n    width: ", "%;\n    border-radius: var(--border-radius);\n    top: 0;\n    bottom: 0;\n\n    ", "\n  }\n\n  ", "\n"])), function (_ref) {
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  height: 1rem;\n  border-radius: var(--border-radius);\n  background: var(--color-background3);\n\n  &::before {\n    position: absolute;\n    content: '';\n    width: ", "%;\n    border-radius: var(--border-radius);\n    top: 0;\n    bottom: 0;\n\n    ", "\n  }\n\n  ", "\n"])), function (_ref) {
   var percentage = _ref.percentage;
   return percentage;
 }, _backgroundColor.default, function (_ref2) {
   var marginTop = _ref2.marginTop;
-  return marginTop && "margin-top: var(--spacing-s)";
+  return marginTop && 'margin-top: var(--spacing-s)';
 });
 
 var _default = SingleBarChart;

package/cropper/Cropper.js

@@ -30,9 +30,9 @@ var CropperWrapper = function CropperWrapper(_ref) {
 
     if (node !== null) {
       var cropper = new _cropperjs.default(node, {
+        dragMode: dragMode,
         viewMode: 1,
         initialAspectRatio: 9 / 16,
-        dragMode: dragMode,
         background: true,
         cropBoxResizable: false,
         data: {

package/datetimePicker/Accordion.js

@@ -141,13 +141,13 @@ var Accordion = function Accordion(_ref) {
   }, [setCurrentDisplayType, setSelectedYear]);
   var handleYearItemDisable = (0, _react.useCallback)(function (year) {
     if (minDate !== undefined && maxDate !== undefined) {
-      return minYear <= year && year <= maxYear ? false : true;
+      return !(minYear <= year && year <= maxYear);
     }
 
     if (minDate) {
-      return minYear > year ? true : false;
+      return minYear > year;
     } else if (maxDate) {
-      return maxYear < year ? true : false;
+      return maxYear < year;
     }
 
     return false;
@@ -156,11 +156,11 @@ var Accordion = function Accordion(_ref) {
     var date = (0, _formatDate.default)(new Date(selectedYear, month, selectedDay));
 
     if (minDate !== undefined && maxDate !== undefined) {
-      return minDate <= date && date <= maxDate ? false : true;
+      return !(minDate <= date && date <= maxDate);
     } else if (minDate) {
-      return minDate <= date ? false : true;
+      return !(minDate <= date);
     } else if (maxDate) {
-      return date <= maxDate ? false : true;
+      return !(date <= maxDate);
     }
 
     return false;
@@ -168,13 +168,13 @@ var Accordion = function Accordion(_ref) {
   var handleDisableArrow = (0, _react.useCallback)(function (arrowType) {
     if (type === 'year') {
       if (arrowType === 'previous') {
-        return minYear > selectedYear - 1 ? true : false;
+        return minYear > selectedYear - 1;
       } else if (arrowType === 'next') {
         if (maxYear) {
-          return maxYear < selectedYear + 1 ? true : false;
-        } else {
-          return false;
+          return maxYear < selectedYear + 1;
         }
+
+        return false;
       }
     } else if (type === 'month') {
       var date = arrowType === 'previous' ? (0, _formatDate.default)(new Date(selectedYear, selectedMonth - 1 < 0 ? 11 : selectedMonth - 1, 1)) : (0, _formatDate.default)(new Date(selectedYear, selectedMonth + 1 > 11 ? 0 : selectedMonth + 1, 1));
@@ -190,11 +190,11 @@ var Accordion = function Accordion(_ref) {
         var maxDate1st = (0, _formatDate.default)(new Date(maxYear, maxMonth, 1));
 
         if (minDate && !maxDate) {
-          return minDate1st <= date ? false : true;
+          return !(minDate1st <= date);
         } else if (maxDate && !minDate) {
-          return maxDate1st >= date ? false : true;
+          return !(maxDate1st >= date);
         } else if (minDate && maxDate) {
-          return minDate1st <= date && maxDate1st >= date ? false : true;
+          return !(minDate1st <= date && maxDate1st >= date);
         }
       }
     }

package/datetimePicker/CustomTimeInput.js

@@ -25,18 +25,18 @@ var CustomTimeInput = function CustomTimeInput(_ref) {
   var date = _ref.date,
       onCustomChange = _ref.onCustomChange;
 
-  var _useState = (0, _react.useState)(""),
+  var _useState = (0, _react.useState)(''),
       _useState2 = _slicedToArray(_useState, 2),
       time = _useState2[0],
       setTime = _useState2[1];
 
   var changeDate = function changeDate() {
-    var hh = "";
-    var mm = "";
-    var ss = "";
+    var hh = '';
+    var mm = '';
+    var ss = '';
 
-    if (time.indexOf(":") !== -1) {
-      var _time$split = time.split(":");
+    if (time.indexOf(':') !== -1) {
+      var _time$split = time.split(':');
 
       var _time$split2 = _slicedToArray(_time$split, 3);
 
@@ -56,14 +56,14 @@ var CustomTimeInput = function CustomTimeInput(_ref) {
 
   (0, _react.useEffect)(function () {
     var defaultTime = date instanceof Date && !isNaN(date) ? // Getting time from Date beacuse `value` comes here without seconds
-    date.toLocaleTimeString("it-IT") : "";
+    date.toLocaleTimeString('it-IT') : '';
     setTime(defaultTime);
   }, [date]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
     value: time,
     onBlur: changeDate,
-    onKeyUp: function onKeyUp(e) {
-      if (e.key === "Enter") {
+    onKeyUp: function onKeyUp(event) {
+      if (event.key === 'Enter') {
         changeDate();
       }
     },

package/datetimePicker/DatePicker.js

@@ -156,11 +156,15 @@ var DatePicker = function DatePicker(_ref) {
   var handleChangeYear = function handleChangeYear(selected) {
     if (selected === 'previous') {
       setSelectedYear(function (previousParams) {
-        if (previousParams <= 1) return previousParams;else return previousParams -= 1;
+        if (previousParams <= 1) {
+          return previousParams;
+        }
+
+        return previousParams - 1;
       });
     } else if (selected === 'next') {
       setSelectedYear(function (previousParams) {
-        return previousParams += 1;
+        return previousParams + 1;
       });
     }
 
@@ -170,11 +174,19 @@ var DatePicker = function DatePicker(_ref) {
   var handleChangeMonth = function handleChangeMonth(selected) {
     if (selected === 'previous') {
       setSelectedMonth(function (previousParams) {
-        return previousParams <= 0 ? 11 : previousParams -= 1;
+        if (previousParams <= 0) {
+          return 11;
+        }
+
+        return previousParams - 1;
       });
     } else if (selected === 'next') {
       setSelectedMonth(function (previousParams) {
-        return previousParams >= 11 ? 0 : previousParams += 1;
+        if (previousParams >= 11) {
+          return 0;
+        }
+
+        return previousParams + 1;
       });
     }
 
@@ -191,7 +203,7 @@ var DatePicker = function DatePicker(_ref) {
     if (fixedYear) {
       var disabledDateInDec = selectedMonth === 11 && dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth;
       var disabledDateInJan = selectedMonth === 0 && dayIndex < firstWeekOfMonth;
-      return disabledDateInDec || disabledDateInJan ? true : false;
+      return !!(disabledDateInDec || disabledDateInJan);
     }
 
     return false;
@@ -243,7 +255,7 @@ var DatePicker = function DatePicker(_ref) {
       if (firstWeekOfMonth === 6 && lastWeekOfMonth === 6) {
         return true;
       } else if (firstWeekOfMonth !== 6 && lastWeekOfMonth === 6) {
-        return index + 1 > firstWeekOfMonth ? true : false;
+        return index + 1 > firstWeekOfMonth;
       } else {
         return index + 1 >= firstWeekOfMonth && index + 1 <= daysOfMonthForSelectedDate + firstWeekOfMonth ? true : false;
       }
@@ -262,14 +274,14 @@ var DatePicker = function DatePicker(_ref) {
     }
 
     if (firstWeekOfMonth !== 0) {
-      for (var i = daysOfPrevioueMonthForSelectedDate; i > daysOfPrevioueMonthForSelectedDate - firstWeekOfMonth; i--) {
-        days.unshift(i);
+      for (var index = daysOfPrevioueMonthForSelectedDate; index > daysOfPrevioueMonthForSelectedDate - firstWeekOfMonth; index -= 1) {
+        days.unshift(index);
       }
     }
 
     if (lastWeekOfMonth !== 6) {
-      for (var _i3 = 1; _i3 <= 6 - lastWeekOfMonth; _i3++) {
-        days.push(_i3);
+      for (var _index = 1; _index <= 6 - lastWeekOfMonth; _index += 1) {
+        days.push(_index);
       }
     }
 
@@ -374,9 +386,9 @@ var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject
 
 var Week = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  min-width: 36px;\n  height: 36px;\n  border-radius: var(--border-radius-s);\n  line-height: 36px;\n  text-align: center;\n"])));
 
-var Day = _styledComponents.default.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  min-width: 36px;\n  height: 36px;\n  border-radius: var(--border-radius-s);\n  line-height: 36px;\n  text-align: center;\n  padding: 0;\n  border: 0;\n  background: var(--color-background1);\n  color: var(--color-white);\n  &:hover {\n    background: var(--color-primary);\n  }\n  ", "\n  ", "\n"])), function (_ref3) {
+var Day = _styledComponents.default.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  min-width: 36px;\n  height: 36px;\n  border-radius: var(--border-radius-s);\n  line-height: 36px;\n  text-align: center;\n  padding: 0;\n  border: 0;\n  background: var(--color-background1);\n  color: var(--color-white);\n  &:hover {\n    background: var(--color-primary);\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref3) {
   var selected = _ref3.selected;
-  return selected && "background: var(--color-hover);";
+  return selected && 'background: var(--color-hover);';
 }, function (_ref4) {
   var disabled = _ref4.disabled;
   return disabled && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      color: var(--font-on-mute);\n      background: none;\n      &:hover {\n        background: none;\n      }\n    "])));