@cashub/ui 0.10.3 → 0.10.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.10.3",
+  "version": "0.10.5",
   "private": false,
   "author": "CASHUB Team",
   "description": "CASHUB UI components library",

package/select/Select.js

@@ -267,7 +267,7 @@ var Select = function Select(_ref) {
     }
 
     return placeholder;
-  }, [placeholder, handleOnDeselect, multiple, selectedOptions]);
+  }, [placeholder, handleOnDeselect, multiple, selectedOptions, disabled]);
   var optionItem = (0, _react.useMemo)(function () {
     if (optionList.length <= 0) return null;
     return optionList.map(function (option) {
@@ -578,6 +578,7 @@ var Select = function Select(_ref) {
       $fill: fill,
       fillReverse: fillReverse,
       onFocus: handleFocus,
+      placeholder: placeholder,
       children: [selectedItem, selectedOptions.length > 0 && !multiple && !disabled && allowClear && /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseButton, {
         onClick: function onClick() {
           onSelect('');
@@ -614,7 +615,7 @@ var Select = function Select(_ref) {
   });
 };
 
-var Combobox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  min-height: 36px;\n  min-width: 160px;\n  cursor: pointer;\n  position: relative;\n  background: transparent;\n  color: var(--color-white);\n  font-size: var(--font-body1);\n  border: var(--border-width) solid var(--border-color);\n  border-radius: var(--border-radius-l);\n  padding: 0 calc(var(--spacing-s) * 2 + 8px) 0 var(--spacing-s);\n\n  &:focus {\n    ", ";\n  }\n\n  ", "\n\n  ", "\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref2) {
+var Combobox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  min-height: 36px;\n  min-width: 160px;\n  cursor: pointer;\n  position: relative;\n  background: transparent;\n  color: var(--color-white);\n  font-size: var(--font-body1);\n  border: var(--border-width) solid var(--border-color);\n  border-radius: var(--border-radius-l);\n  padding: 0 calc(var(--spacing-s) * 2 + 8px) 0 var(--spacing-s);\n\n  &:focus {\n    ", ";\n  }\n\n  ", "\n\n  ", "\n  ", "\n  \n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref2) {
   var disabled = _ref2.disabled;
   return !disabled && "\n        border-color: var(--color-primary);\n        outline: none;\n      ";
 }, function (_ref3) {
@@ -624,16 +625,19 @@ var Combobox = _styledComponents.default.div(_templateObject || (_templateObject
   var disabled = _ref4.disabled;
   return disabled && 'cursor: not-allowed;opacity: 0.5;';
 }, function (_ref5) {
-  var fullWidth = _ref5.fullWidth;
-  return fullWidth ? 'width: 100%' : 'max-width: 320px';
+  var placeholder = _ref5.placeholder;
+  return placeholder && 'color: var(--font-on-mute);';
 }, function (_ref6) {
-  var large = _ref6.large;
-  return large && "\n      height: 40px;\n      padding: 12px calc(var(--spacing-s) * 2 + 8px) 12px var(--spacing-s);\n    ";
+  var fullWidth = _ref6.fullWidth;
+  return fullWidth ? 'width: 100%' : 'max-width: 320px';
 }, function (_ref7) {
-  var $fill = _ref7.$fill;
-  return $fill && "\n      background: var(--color-background2);\n      border-color: transparent;\n    ";
+  var large = _ref7.large;
+  return large && "\n      height: 40px;\n      padding: 12px calc(var(--spacing-s) * 2 + 8px) 12px var(--spacing-s);\n    ";
 }, function (_ref8) {
-  var fillReverse = _ref8.fillReverse;
+  var $fill = _ref8.$fill;
+  return $fill && "\n      background: var(--color-background2);\n      border-color: transparent;\n    ";
+}, function (_ref9) {
+  var fillReverse = _ref9.fillReverse;
   return fillReverse && "\n      background: var(--color-background1);\n      border-color: transparent;\n    ";
 });
 

package/table/GridTable.js

@@ -62,7 +62,6 @@ var GridTable = function GridTable(_ref) {
       onSortChange = _ref.onSortChange,
       backgroundReverse = _ref.backgroundReverse,
       translation = _ref.translation;
-  var wrapperRef = (0, _react.useRef)(null);
   var tableRef = (0, _react.useRef)(null);
 
   var _useCalculateDataRang = (0, _hooks.useCalculateDataRange)(currentPage, limit, total),
@@ -127,9 +126,7 @@ var GridTable = function GridTable(_ref) {
             onClick: showFullValue,
             children: title
           }), sortable && generateSort(fieldName)]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Resizer.default, {
-          container: wrapperRef.current
-        })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Resizer.default, {})]
       }, "TH".concat(index));
     });
   }, [backgroundReverse, columns, handleSortChange, generateSort, showFullValue]);
@@ -185,7 +182,6 @@ var GridTable = function GridTable(_ref) {
   }, [backgroundReverse, columns, texts]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TableWrapper, {
-      ref: wrapperRef,
       backgroundReverse: backgroundReverse,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ResponsiveTable, {
         ref: tableRef,
@@ -242,7 +238,7 @@ var TableWrapper = _styledComponents.default.div(_templateObject || (_templateOb
   size: 'large'
 }));
 
-var ResponsiveTable = _styledComponents.default.table(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  color: var(--font-on-primary);\n  table-layout: fixed;\n  border-collapse: collapse;\n"])));
+var ResponsiveTable = _styledComponents.default.table(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  /* make fixed width work */\n  width: 0px;\n  color: var(--font-on-primary);\n  table-layout: fixed;\n  border-collapse: collapse;\n"])));
 
 var TD = _styledComponents.default.td(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 48px;\n  padding: 0 var(--spacing-xs);\n  border-top: 1px solid var(--border-color);\n  border-right: 1px solid var(--border-color);\n  border-bottom: 1px solid var(--border-color);\n  text-align: ", ";\n  background: ", ";\n\n  &:last-child {\n    border-right: none;\n  }\n\n  > span {\n    display: inline-block;\n    width: 100%;\n    padding: 0 2px;\n    overflow: hidden;\n    white-space: pre;\n    text-overflow: ellipsis;\n  }\n"])), function (_ref3) {
   var center = _ref3.center;

package/table/subComponent/Resizer.js

@@ -29,9 +29,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var Resizer = function Resizer(_ref) {
-  var container = _ref.container;
-
+var Resizer = function Resizer() {
   var _useState = (0, _react.useState)(null),
       _useState2 = _slicedToArray(_useState, 2),
       parentNode = _useState2[0],
@@ -40,10 +38,9 @@ var Resizer = function Resizer(_ref) {
   var handleMouseMove = (0, _react.useCallback)(function (event) {
     event.stopPropagation();
     event.preventDefault();
-    var horizontalScrollOffset = container ? container.scrollLeft : document.documentElement.scrollLeft;
-    var targetWidth = horizontalScrollOffset + event.clientX - parentNode.getBoundingClientRect().left;
+    var targetWidth = event.clientX - parentNode.getBoundingClientRect().left;
     parentNode.style.width = "".concat(targetWidth, "px");
-  }, [container, parentNode]);
+  }, [parentNode]);
   var handleMouseUp = (0, _react.useCallback)(function (event) {
     event.stopPropagation();
     event.preventDefault();
@@ -52,8 +49,8 @@ var Resizer = function Resizer(_ref) {
     setParentNode(null);
   }, [handleMouseMove]);
 
-  var initResize = function initResize(_ref2) {
-    var target = _ref2.target;
+  var initResize = function initResize(_ref) {
+    var target = _ref.target;
     setParentNode(target.parentNode);
   };