@cashub/ui 0.43.10 → 0.44.0

package/package.json

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

package/select/Select.js

@@ -16,12 +16,15 @@ var _hooks = require("@cashub/hooks");
 var _utils = require("@cashub/utils");
 var _media = _interopRequireDefault(require("../styles/mixin/media"));
 var _SelectedSingle = _interopRequireDefault(require("./subComponent/SelectedSingle"));
-var _SelectedMultiple = _interopRequireDefault(require("./subComponent/SelectedMultiple"));
+var _SelectedMultipleTags = _interopRequireDefault(require("./subComponent/SelectedMultipleTags"));
+var _SelectedMultipleText = _interopRequireDefault(require("./subComponent/SelectedMultipleText"));
 var _ListBox = _interopRequireDefault(require("./subComponent/ListBox"));
 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 _Checkbox = _interopRequireDefault(require("./subComponent/Checkbox"));
+var _Footer = _interopRequireDefault(require("./subComponent/Footer"));
 var _figure = require("../figure");
 var _image = require("../image");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -41,6 +44,7 @@ const Select = _ref => {
     onSelect,
     onDeselect,
     multiple = false,
+    displayMode = 'tags',
     allowClear = false,
     allowSearch = true,
     disabled,
@@ -51,7 +55,8 @@ const Select = _ref => {
     fillReverse,
     onBlur,
     onSearch,
-    flexGrow
+    flexGrow,
+    footer
   } = _ref;
   const {
     t
@@ -110,6 +115,12 @@ const Select = _ref => {
     }
     return parsedSelected;
   }, [multiple, enableSelectAll, newOptions.length, parsedSelected, allOptionId]);
+  const showCheckbox = (0, _react.useMemo)(() => {
+    if (multiple && displayMode === 'text') {
+      return true;
+    }
+    return false;
+  }, [displayMode, multiple]);
 
   // set focused option
   const handleFocusItem = (0, _react.useCallback)(element => {
@@ -227,15 +238,30 @@ const Select = _ref => {
   const selectedItem = (0, _react.useMemo)(() => {
     if (selectedOptions.length > 0) {
       if (multiple) {
+        if (displayMode === 'text') {
+          let text;
+          if (selectedOptions[0].id === allOptionId) {
+            [{
+              text
+            }] = selectedOptions;
+          } else {
+            text = selectedOptions.map(value => {
+              return value.text;
+            }).join(', ');
+          }
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedMultipleText.default, {
+            children: text
+          });
+        }
         if (selectedOptions[0].id === allOptionId) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedMultiple.default, {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedMultipleTags.default, {
             content: selectedOptions[0].text,
             onClick: event => handleOnDeselect(event, selectedOptions[0].id),
             disabled: disabled
           }, selectedOptions[0].id);
         }
         return selectedOptions.map(value => {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedMultiple.default, {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedMultipleTags.default, {
             content: value.text,
             onClick: event => handleOnDeselect(event, value.id),
             disabled: disabled
@@ -249,7 +275,7 @@ const Select = _ref => {
       });
     }
     return placeholder;
-  }, [placeholder, handleOnDeselect, multiple, selectedOptions, disabled, allOptionId]);
+  }, [placeholder, handleOnDeselect, multiple, displayMode, selectedOptions, disabled, allOptionId]);
   const optionItem = (0, _react.useMemo)(() => {
     if (optionList.length <= 0) return null;
     return optionList.map(option => {
@@ -282,12 +308,14 @@ const Select = _ref => {
         focus: focusedOption && focusedOption.id === option.id.toString(),
         selected: option.selected,
         "aria-selected": option.selected,
-        children: [option.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+        children: [showCheckbox && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+          selected: option.selected
+        }), option.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
           src: option.icon
         }), option.text]
       }, option.id);
     });
-  }, [optionList, focusedOption, handleOnSelect]);
+  }, [optionList, focusedOption, handleOnSelect, showCheckbox]);
 
   // show or hide listbox
   // and set listbox width according to combobox current width
@@ -558,6 +586,8 @@ const Select = _ref => {
           children: optionItem || /*#__PURE__*/(0, _jsxRuntime.jsx)(Message, {
             children: "No results found"
           })
+        }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.default, {
+          children: footer
         })]
       })), document.body)]
     })

package/select/subComponent/Checkbox.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _md = require("react-icons/md");
+var _jsxRuntime = require("react/jsx-runtime");
+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 Checkbox = _ref => {
+  let {
+    selected
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+    selected: selected,
+    children: selected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdDone, {})
+  });
+};
+const Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  width: 24px;\n  height: 24px;\n  border: var(--border-width) solid var(--border-color);\n  margin-right: var(--spacing-xs);\n  border-radius: 4px;\n\n  ", "\n\n  > svg {\n    position: absolute;\n    color: var(--font-on-primary);\n    font-size: var(--font-h3);\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n"])), _ref2 => {
+  let {
+    selected
+  } = _ref2;
+  return selected && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      background: var(--color-primary);\n      border-color: var(--color-primary);\n    "])));
+});
+var _default = exports.default = Checkbox;

package/select/subComponent/Footer.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+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 Footer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: var(--spacing-s);\n  border-top: 1px solid var(--border-color);\n"])));
+var _default = exports.default = Footer;

package/select/subComponent/{SelectedMultiple.js → SelectedMultipleTags.js}

@@ -10,7 +10,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
 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 SelectedMultiple = _ref => {
+const SelectedMultipleTags = _ref => {
   let {
     content,
     onClick,
@@ -25,4 +25,4 @@ const SelectedMultiple = _ref => {
   });
 };
 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"])));
-var _default = exports.default = SelectedMultiple;
+var _default = exports.default = SelectedMultipleTags;

package/select/subComponent/SelectedMultipleText.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+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 SelectedMultipleText = _styledComponents.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+var _default = exports.default = SelectedMultipleText;