@cashub/ui 0.26.1 → 0.26.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.26.1",
+  "version": "0.26.3",
   "private": false,
   "author": "CasHUB Team",
   "description": "CasHUB UI components library",

package/select/Select.js

@@ -44,7 +44,8 @@ const Select = _ref => {
     fill,
     fillReverse,
     onBlur,
-    onSearch
+    onSearch,
+    flexGrow
   } = _ref;
   const {
     t
@@ -494,64 +495,70 @@ const Select = _ref => {
       }
     }
   }, [setupFocus, display, allowSearch]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactOutsideClickHandler.default, {
-    onOutsideClick: () => {
-      setDisplay(false);
-      if (onBlur) onBlur();
-      setIsFocusCombobox(false);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      flexGrow: flexGrow ? 1 : 0
     },
-    disabled: !isFocusCombobox,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Combobox, {
-      role: "combobox",
-      tabIndex: "0",
-      "aria-haspopup": "listbox",
-      "aria-expanded": display,
-      "aria-owns": id,
-      ref: setComboboxElement,
-      onClick: handleToggle,
-      onKeyUp: handleKeyUp,
-      onKeyDown: handleKeyDown,
-      $display: display,
-      disabled: disabled,
-      fullWidth: fullWidth,
-      large: large,
-      $fill: fill,
-      fillReverse: fillReverse,
-      onFocus: handleFocus,
-      placeholder: placeholder,
-      children: [selectedItem, selectedOptions.length > 0 && !multiple && !disabled && allowClear && /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseButton, {
-        onClick: () => {
-          onSelect('');
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandArrow, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactOutsideClickHandler.default, {
+      onOutsideClick: () => {
+        setDisplay(false);
+        if (onBlur) onBlur();
+        setIsFocusCombobox(false);
+      },
+      disabled: !isFocusCombobox,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Combobox, {
+        flexGrow: flexGrow,
+        role: "combobox",
+        tabIndex: "0",
         "aria-haspopup": "listbox",
-        "aria-expanded": display
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListBox.default, {
-      role: "listbox",
-      tabIndex: "0",
-      id: id,
-      ref: setListBoxElement,
-      onKeyUp: handleKeyUp,
-      onKeyDown: handleKeyDown,
-      width: listBoxWidth,
-      $display: display,
-      style: styles.popper,
-      ...attributes.popper,
-      placement: state && state.placement,
-      children: [allowSearch && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBox.default, {
-        ref: searchBoxElement,
-        placeholder: "Search",
-        onChange: handleSearchChange,
-        value: search
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Options.default, {
-        ref: optionsElementRef,
-        allowSearch: allowSearch,
-        children: optionItem || /*#__PURE__*/(0, _jsxRuntime.jsx)(Message, {
-          children: "No results found"
-        })
+        "aria-expanded": display,
+        "aria-owns": id,
+        ref: setComboboxElement,
+        onClick: handleToggle,
+        onKeyUp: handleKeyUp,
+        onKeyDown: handleKeyDown,
+        $display: display,
+        disabled: disabled,
+        fullWidth: fullWidth,
+        large: large,
+        $fill: fill,
+        fillReverse: fillReverse,
+        onFocus: handleFocus,
+        placeholder: placeholder,
+        children: [selectedItem, selectedOptions.length > 0 && !multiple && !disabled && allowClear && /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseButton, {
+          onClick: () => {
+            onSelect('');
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandArrow, {
+          "aria-haspopup": "listbox",
+          "aria-expanded": display
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListBox.default, {
+        role: "listbox",
+        tabIndex: "0",
+        id: id,
+        ref: setListBoxElement,
+        onKeyUp: handleKeyUp,
+        onKeyDown: handleKeyDown,
+        width: listBoxWidth,
+        $display: display,
+        style: styles.popper,
+        ...attributes.popper,
+        placement: state && state.placement,
+        children: [allowSearch && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBox.default, {
+          ref: searchBoxElement,
+          placeholder: "Search",
+          onChange: handleSearchChange,
+          value: search
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Options.default, {
+          ref: optionsElementRef,
+          allowSearch: allowSearch,
+          children: optionItem || /*#__PURE__*/(0, _jsxRuntime.jsx)(Message, {
+            children: "No results found"
+          })
+        })]
       })]
-    })]
+    })
   });
 };
 const Icon = _ref2 => {
@@ -570,45 +577,50 @@ const Icon = _ref2 => {
     }), "\xA0"]
   });
 };
-const 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(--font-on-background);\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"])), _ref3 => {
+const Combobox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  min-height: 36px;\n  cursor: pointer;\n  position: relative;\n  background: transparent;\n  color: var(--font-on-background);\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\n  ", "\n"])), _ref3 => {
   let {
     disabled
   } = _ref3;
   return !disabled && "\n        border-color: var(--color-primary);\n        outline: none;\n      ";
 }, _ref4 => {
   let {
-    $display
+    flexGrow
   } = _ref4;
-  return $display && "\n      border-color: var(--color-primary);\n      outline: none;\n    ";
+  return !flexGrow && 'min-width: 160px;';
 }, _ref5 => {
   let {
-    disabled
+    $display
   } = _ref5;
-  return disabled && 'cursor: not-allowed;opacity: 0.5;';
+  return $display && "\n      border-color: var(--color-primary);\n      outline: none;\n    ";
 }, _ref6 => {
   let {
-    placeholder
+    disabled
   } = _ref6;
-  return placeholder && 'color: var(--font-on-mute);';
+  return disabled && 'cursor: not-allowed;opacity: 0.5;';
 }, _ref7 => {
   let {
-    fullWidth
+    placeholder
   } = _ref7;
-  return fullWidth ? 'width: 100%' : 'max-width: 320px';
+  return placeholder && 'color: var(--font-on-mute);';
 }, _ref8 => {
   let {
-    large
+    fullWidth
   } = _ref8;
-  return large && "\n      height: 40px;\n      padding: 12px calc(var(--spacing-s) * 2 + 8px) 12px var(--spacing-s);\n    ";
+  return fullWidth ? 'width: 100%' : 'max-width: 320px';
 }, _ref9 => {
   let {
-    $fill
+    large
   } = _ref9;
-  return $fill && "\n      background: var(--color-background2);\n      border-color: transparent;\n    ";
+  return large && "\n      height: 40px;\n      padding: 12px calc(var(--spacing-s) * 2 + 8px) 12px var(--spacing-s);\n    ";
 }, _ref10 => {
   let {
-    fillReverse
+    $fill
   } = _ref10;
+  return $fill && "\n      background: var(--color-background2);\n      border-color: transparent;\n    ";
+}, _ref11 => {
+  let {
+    fillReverse
+  } = _ref11;
   return fillReverse && "\n      background: var(--color-background1);\n      border-color: transparent;\n    ";
 });
 Combobox.displayName = 'Combobox';

package/tooltip/Tooltip.js

@@ -91,11 +91,11 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     })
   });
 });
-const TooltipTooltip = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  white-space: pre-line;\n  visibility: ", ";\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  text-align: left;\n  font-size: var(--font-body1);\n  font-weight: var(--font-normal);\n  line-height: 1.5;\n  word-break: break-word;\n  max-width: 50vw;\n"])), _ref2 => {
+const TooltipTooltip = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  white-space: pre-line;\n  display: ", ";\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  text-align: left;\n  font-size: var(--font-body1);\n  font-weight: var(--font-normal);\n  line-height: 1.5;\n  word-break: break-word;\n  max-width: 50vw;\n"])), _ref2 => {
   let {
     $display
   } = _ref2;
-  return $display ? 'visible' : 'hidden';
+  return $display ? 'block' : 'none';
 });
 const TooltipArrow = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: ", ";\n  top: -0.5rem;\n  left: 0;\n  width: 1rem;\n  height: 1rem;\n\n  &::before {\n    position: absolute;\n    display: block;\n    content: '';\n    border-color: transparent;\n    border-style: solid;\n    top: 0;\n    border-width: 0 0.5rem 0.5rem 0.5rem;\n    border-bottom-color: var(--border-color);\n  }\n"])), _ref3 => {
   let {