@cashub/ui 0.48.22 → 0.48.24

package/package.json

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

package/select/Select.js

@@ -18,6 +18,7 @@ var _media = _interopRequireDefault(require("../styles/mixin/media"));
 var _SelectedSingle = _interopRequireDefault(require("./subComponent/SelectedSingle"));
 var _SelectedMultipleTags = _interopRequireDefault(require("./subComponent/SelectedMultipleTags"));
 var _SelectedMultipleText = _interopRequireDefault(require("./subComponent/SelectedMultipleText"));
+var _SelectedMultipleCount = _interopRequireDefault(require("./subComponent/SelectedMultipleCount"));
 var _ListBox = _interopRequireDefault(require("./subComponent/ListBox"));
 var _SearchBox = _interopRequireDefault(require("./subComponent/SearchBox"));
 var _Options = _interopRequireDefault(require("./subComponent/Options"));
@@ -304,6 +305,12 @@ const Select = _ref => {
             children: text
           });
         }
+        if (displayMode === 'count') {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedMultipleCount.default, {
+            placeholder: placeholder,
+            count: selectedOptions.length
+          });
+        }
         if (selectedOptions[0].id === allOptionId) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedMultipleTags.default, {
             content: renderOptionContent(selectedOptions[0]),
@@ -315,7 +322,7 @@ const Select = _ref => {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedMultipleTags.default, {
             content: renderOptionContent(value),
             onClick: event => handleOnDeselect(event, value.id),
-            disabled: disabled
+            disabled: disabled || value.isDisable
           }, value.id);
         });
       }

package/select/subComponent/SelectedMultipleCount.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+const SelectedMultipleCount = _ref => {
+  let {
+    placeholder,
+    count
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Text, {
+    children: [placeholder, count > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(CountBadge, {
+      children: count
+    })]
+  });
+};
+const Text = _styledComponents.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: var(--font-on-background);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: flex;\n  align-items: center;\n"])));
+const CountBadge = _styledComponents.default.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  margin-left: 6px;\n  padding: 0 6px;\n  border-radius: var(--border-radius-l);\n  background: var(--color-primary);\n  color: #fff;\n  font-size: var(--font-caption);\n  line-height: 18px;\n"])));
+var _default = exports.default = SelectedMultipleCount;

package/select/subComponent/SelectedMultipleTags.js

@@ -17,6 +17,7 @@ const SelectedMultipleTags = _ref => {
     disabled
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Selected, {
+    $disabled: disabled,
     children: [!disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       onClick: onClick,
       "data-testid": "removeOption",
@@ -24,5 +25,10 @@ const SelectedMultipleTags = _ref => {
     }), content]
   });
 };
-const Selected = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  background: var(--color-background3);\n  border-radius: var(--border-radius-l);\n  padding: 0.25rem calc(var(--spacing-xs) + 4px);\n  margin: 4px 10px 4px 0;\n  color: var(--font-on-background);\n  font-weight: var(--font-normal);\n  word-break: break-all;\n\n  > span {\n    display: flex;\n    align-items: center;\n\n    > svg {\n      margin-right: var(--spacing-xs);\n      color: var(--font-on-background);\n    }\n  }\n"])));
+const Selected = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  background: var(--color-background3);\n  border-radius: var(--border-radius-l);\n  padding: 0.25rem calc(var(--spacing-xs) + 4px);\n  margin: 4px 10px 4px 0;\n  color: var(--font-on-background);\n  font-weight: var(--font-normal);\n  word-break: break-all;\n\n  > span {\n    display: flex;\n    align-items: center;\n\n    > svg {\n      margin-right: var(--spacing-xs);\n      color: var(--font-on-background);\n    }\n  }\n\n  ", "\n"])), _ref2 => {
+  let {
+    $disabled
+  } = _ref2;
+  return $disabled && 'cursor: not-allowed;opacity: 0.5;';
+});
 var _default = exports.default = SelectedMultipleTags;