@cashub/ui 0.48.15 → 0.48.16

package/package.json

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

package/select/Select.js

@@ -28,7 +28,7 @@ var _Footer = _interopRequireDefault(require("./subComponent/Footer"));
 var _figure = require("../figure");
 var _image = require("../image");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 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) } })); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -128,6 +128,31 @@ const Select = _ref => {
     }
     return false;
   }, [displayMode, multiple]);
+  const getOptionText = (0, _react.useCallback)(option => {
+    return [option.text, option.suffix].filter(text => text || text === 0).join(' ');
+  }, []);
+  const renderOptionContent = (0, _react.useCallback)(option => {
+    var _option$highlightText;
+    const text = getOptionText(option);
+    const highlightText = (_option$highlightText = option.highlightText) === null || _option$highlightText === void 0 ? void 0 : _option$highlightText.toString();
+    if (highlightText && text.includes(highlightText)) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionLabel, {
+        children: text.split(highlightText).map((textPart, index, textParts) => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+            children: [textPart, index < textParts.length - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionHighlight, {
+              $color: option.highlightColor,
+              children: highlightText
+            })]
+          }, "".concat(highlightText, "-").concat(index));
+        })
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(OptionLabel, {
+      children: [option.text, option.suffix && /*#__PURE__*/(0, _jsxRuntime.jsxs)(OptionBadge, {
+        children: ["\xA0", option.suffix]
+      })]
+    });
+  }, [getOptionText]);
 
   // set focused option
   const handleFocusItem = (0, _react.useCallback)(element => {
@@ -272,7 +297,7 @@ const Select = _ref => {
             }] = selectedOptions;
           } else {
             text = selectedOptions.map(value => {
-              return value.text;
+              return getOptionText(value);
             }).join(', ');
           }
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedMultipleText.default, {
@@ -281,14 +306,14 @@ const Select = _ref => {
         }
         if (selectedOptions[0].id === allOptionId) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedMultipleTags.default, {
-            content: selectedOptions[0].text,
+            content: renderOptionContent(selectedOptions[0]),
             onClick: event => handleOnDeselect(event, selectedOptions[0].id),
             disabled: disabled
           }, selectedOptions[0].id);
         }
         return selectedOptions.map(value => {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedMultipleTags.default, {
-            content: value.text,
+            content: renderOptionContent(value),
             onClick: event => handleOnDeselect(event, value.id),
             disabled: disabled
           }, value.id);
@@ -297,11 +322,11 @@ const Select = _ref => {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SelectedSingle.default, {
         children: [selectedOptions[0].icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
           src: selectedOptions[0].icon
-        }), selectedOptions[0].text]
+        }), renderOptionContent(selectedOptions[0])]
       });
     }
     return placeholder;
-  }, [placeholder, handleOnDeselect, multiple, displayMode, selectedOptions, disabled, allOptionId]);
+  }, [placeholder, handleOnDeselect, multiple, displayMode, selectedOptions, disabled, allOptionId, getOptionText, renderOptionContent]);
   const optionItem = (0, _react.useMemo)(() => {
     if (optionList.length <= 0) return null;
     return optionList.map(option => {
@@ -313,7 +338,7 @@ const Select = _ref => {
             id: option.text,
             children: option.text
           }), option.child.map(option => {
-            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Option.default, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
               role: "option",
               tabIndex: option.isDisable ? '-1' : '0',
               id: option.id,
@@ -323,9 +348,7 @@ const Select = _ref => {
               "aria-selected": option.selected,
               "aria-disabled": option.isDisable,
               disabled: option.isDisable,
-              children: [option.text, option.suffix && /*#__PURE__*/(0, _jsxRuntime.jsxs)(OptionBadge, {
-                children: ["\xA0", option.suffix]
-              })]
+              children: renderOptionContent(option)
             }, option.id);
           })]
         }, option.text);
@@ -345,12 +368,10 @@ const Select = _ref => {
           disabled: option.isDisable
         }), option.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
           src: option.icon
-        }), option.text, option.suffix && /*#__PURE__*/(0, _jsxRuntime.jsxs)(OptionBadge, {
-          children: ["\xA0", option.suffix]
-        })]
+        }), renderOptionContent(option)]
       }, option.id);
     });
-  }, [optionList, focusedOption, handleOnSelect, showCheckbox]);
+  }, [optionList, focusedOption, handleOnSelect, showCheckbox, renderOptionContent]);
 
   // show or hide listbox
   // and set listbox width according to combobox current width
@@ -547,18 +568,18 @@ const Select = _ref => {
     const tmpFilteredOptions = [];
     newOptions.forEach(option => {
       if (option.child && option.child.length > 0) {
-        const tmpFilteredChildOptions = option.child.filter(option => option.text.toLowerCase().indexOf(search.toLowerCase().trim()) !== -1);
+        const tmpFilteredChildOptions = option.child.filter(option => getOptionText(option).toLowerCase().indexOf(search.toLowerCase().trim()) !== -1);
         if (tmpFilteredChildOptions.length > 0) {
           tmpFilteredOptions.push(_objectSpread(_objectSpread({}, option), {}, {
             child: tmpFilteredChildOptions
           }));
         }
-      } else if (option.text.toLowerCase().indexOf(search.toLowerCase().trim()) !== -1) {
+      } else if (getOptionText(option).toLowerCase().indexOf(search.toLowerCase().trim()) !== -1) {
         tmpFilteredOptions.push(option);
       }
     });
     setFilteredOptions(tmpFilteredOptions);
-  }, [search, newOptions]);
+  }, [search, newOptions, getOptionText]);
   (0, _react.useEffect)(() => {
     if (display) {
       setupFocus();
@@ -705,4 +726,11 @@ ExpandArrow.displayName = 'ExpandArrow';
 const Message = _styledComponents.default.p(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 12px var(--spacing-s);\n"])));
 Message.displayName = 'Message';
 const OptionBadge = _styledComponents.default.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: var(--color-danger);\n  font-style: italic;\n"])));
+const OptionLabel = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  min-width: 0;\n"])));
+const OptionHighlight = _styledComponents.default.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), _ref15 => {
+  let {
+    $color
+  } = _ref15;
+  return $color || 'var(--color-danger)';
+});
 var _default = exports.default = Select;