@cashub/ui 0.25.5 → 0.26.0

package/package.json

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

package/select/Select.js

@@ -21,6 +21,8 @@ var _SearchBox = _interopRequireDefault(require("./subComponent/SearchBox"));
 var _Options = _interopRequireDefault(require("./subComponent/Options"));
 var _OptionGroup = _interopRequireDefault(require("./subComponent/OptionGroup"));
 var _Option = _interopRequireDefault(require("./subComponent/Option"));
+var _figure = require("../figure");
+var _image = require("../image");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -263,7 +265,7 @@ const Select = _ref => {
           })]
         }, option.text);
       }
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Option.default, {
         role: "option",
         tabIndex: "0",
         id: option.id,
@@ -271,7 +273,17 @@ const Select = _ref => {
         focus: focusedOption && focusedOption.id === option.id.toString(),
         selected: option.selected,
         "aria-selected": option.selected,
-        children: option.text
+        children: [option.icon && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_figure.IconFigure, {
+            size: "medium",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.ImageFluid, {
+              crossOrigin: "anonymous",
+              src: option.icon,
+              alt: "",
+              roundedS: true
+            })
+          }), "\xA0"]
+        }), option.text]
       }, option.id);
     });
   }, [optionList, focusedOption, handleOnSelect]);

package/select/subComponent/Option.js

@@ -9,7 +9,7 @@ var _templateObject, _templateObject2;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const Option = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  max-width: 100%;\n  word-break: break-all;\n  padding: 12px var(--spacing-s);\n  background: var(--color-background1);\n  transition: background 0.3s;\n\n  &:hover {\n    background: var(--color-hover);\n  }\n\n  ", "\n"])), _ref => {
+const Option = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  max-width: 100%;\n  word-break: break-all;\n  padding: 12px var(--spacing-s);\n  background: var(--color-background1);\n  transition: background 0.3s;\n\n  &:hover {\n    background: var(--color-hover);\n  }\n\n  ", "\n"])), _ref => {
   let {
     selected,
     focus