@activecollab/components 1.0.139 → 1.0.140

package/dist/index.js

@@ -6371,7 +6371,7 @@
     }
   };
 
-  var StyledOption = styled__default["default"].label.withConfig({
+  var StyledOption = styled__default["default"].li.withConfig({
     displayName: "Styles__StyledOption",
     componentId: "sc-1232l97-0"
   })(["", " font-size:14px;display:flex;justify-content:space-between;height:28px;padding-left:16px;padding-right:16px;margin-top:4px;margin-bottom:4px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition-duration:0.1s;color:var(--color-theme-900);", " ", " ", ""], {
@@ -6388,7 +6388,11 @@
         hover = _ref.hover,
         className = _ref.className,
         renderOption = _ref.renderOption,
-        onMouseEnter = _ref.onMouseEnter;
+        onMouseEnter = _ref.onMouseEnter,
+        _ref$onClick = _ref.onClick,
+        onClick = _ref$onClick === void 0 ? function () {
+      return null;
+    } : _ref$onClick;
     var handleOnMouseEnter = React.useCallback(function () {
       if (onMouseEnter) {
         onMouseEnter(id);
@@ -6399,7 +6403,8 @@
       title: name,
       onMouseEnter: handleOnMouseEnter,
       className: classnames__default["default"]("c-option", className),
-      hover: hover
+      hover: hover,
+      onClick: onClick
     }, renderOption ? renderOption : name);
   });
   Option.displayName = "Option";
@@ -6465,9 +6470,9 @@
   var StyledOptionGroupHeader = styled__default["default"].h3.withConfig({
     displayName: "Styles__StyledOptionGroupHeader",
     componentId: "sc-16v5afu-1"
-  })(["height:28px;display:flex;justify-content:space-between;padding:0 16px;color:var(--color-theme-900);margin:6px 0;*{margin:auto 0;}"]);
+  })(["height:28px;display:flex;justify-content:space-between;align-items:center;padding:0 16px;color:var(--color-theme-900);margin:6px 0;*{margin:auto 0;}"]);
   StyledOptionGroupHeader.displayName = "StyledOptionGroupHeader";
-  var StyledOptionGroupOption = styled__default["default"].label.withConfig({
+  var StyledOptionGroupOption = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledOptionGroupOption",
     componentId: "sc-16v5afu-2"
   })(["", ""], function (props) {
@@ -6518,24 +6523,35 @@
       e.stopPropagation();
 
       if (onChange) {
-        onChange(allOptionValues);
+        if (isAllOptionsChecked) {
+          onChange(checked.filter(function (i) {
+            return allOptionValues.includes(i) === false;
+          }));
+        } else {
+          var values = [].concat(_toConsumableArray(checked), _toConsumableArray(allOptionValues));
+          var unique = values.filter(function (item, pos) {
+            return values.indexOf(item) === pos;
+          });
+          onChange(unique);
+        }
       }
-    }, [allOptionValues, onChange]);
-    return /*#__PURE__*/React__default["default"].createElement(StyledOptionGroup, {
+    }, [allOptionValues, checked, isAllOptionsChecked, onChange]);
+    return /*#__PURE__*/React__default["default"].createElement("li", {
       key: id,
-      className: classnames__default["default"]("c-option-group", optionGroupClassName)
+      className: classnames__default["default"]("c-option-group tw-flex-col", optionGroupClassName)
+    }, /*#__PURE__*/React__default["default"].createElement(StyledOptionGroup, {
+      key: id
     }, /*#__PURE__*/React__default["default"].createElement(StyledOptionGroupOption, {
-      title: name,
       onMouseEnter: handleHover,
       hover: hover === id && type === "multiple"
-    }, /*#__PURE__*/React__default["default"].createElement(StyledOptionGroupHeader, null, /*#__PURE__*/React__default["default"].createElement("div", null, name), type === "multiple" && /*#__PURE__*/React__default["default"].createElement(Checkbox, {
+    }, /*#__PURE__*/React__default["default"].createElement(StyledOptionGroupHeader, null, name, type === "multiple" && /*#__PURE__*/React__default["default"].createElement(Checkbox, {
       id: "".concat(id),
       checked: isAllOptionsChecked,
       onChange: handleClick,
       type: "checkbox"
-    }))), list.map(function (item) {
-      return renderOptions && renderOptions(item);
-    }));
+    }))), /*#__PURE__*/React__default["default"].createElement(List, null, list.map(function (item, index) {
+      return typeof renderOptions === "function" ? renderOptions(item, index) : item.name;
+    }))));
   };
   OptionGroup.displayName = "OptionGroup";
 
@@ -6785,12 +6801,12 @@
     });
   });
   StyledAutocompleteScrollShadow.displayName = "StyledAutocompleteScrollShadow";
-  var StyledAutocompleteBody = styled__default["default"].div.withConfig({
+  var StyledAutocompleteBody = styled__default["default"](List).withConfig({
     displayName: "Styles__StyledAutocompleteBody",
     componentId: "sc-1bc1vz9-1"
   })(["max-height:340px;overflow:auto;margin-bottom:6px;"]);
   StyledAutocompleteBody.displayName = "StyledAutocompleteBody";
-  var StyledAutocompleteNoResult = styled__default["default"].div.withConfig({
+  var StyledAutocompleteNoResult = styled__default["default"].li.withConfig({
     displayName: "Styles__StyledAutocompleteNoResult",
     componentId: "sc-1bc1vz9-2"
   })(["", ";padding:6px 16px;margin:4px 0;&:hover{background-color:var(--color-theme-200);}color:var(--color-theme-600);"], {
@@ -6798,13 +6814,13 @@
     "userSelect": "none"
   });
   StyledAutocompleteNoResult.displayName = "StyledAutocompleteNoResult";
-  var StyledAutocompleteNewItem = styled__default["default"].label.withConfig({
+  var StyledAutocompleteNewItem = styled__default["default"](StyledOption).withConfig({
     displayName: "Styles__StyledAutocompleteNewItem",
     componentId: "sc-1bc1vz9-3"
-  })(["", ";", " padding:6px 16px;margin:4px 0;font-weight:normal;color:var(--color-primary);&:before{content:\"+ \";}", ""], {
+  })(["", ";justify-content:start;&:before{content:\"+ \";margin-right:4px;}", ""], {
     "cursor": "pointer",
     "userSelect": "none"
-  }, FontStyle, function (props) {
+  }, function (props) {
     return props.hover && styled.css(["background-color:var(--color-theme-200);content:\"+ \";"]);
   });
   StyledAutocompleteNewItem.displayName = "StyledAutocompleteNewItem";
@@ -6839,7 +6855,11 @@
     var itemRef = React.useRef(null);
     var listRef = React.useRef(null);
     var selectedOptions = React.useMemo(function () {
-      return selected instanceof Array ? selected : [selected];
+      if (Array.isArray(selected)) {
+        return selected;
+      }
+
+      return [selected];
     }, [selected]);
     var handleSort = React.useCallback(function (opts) {
       if (keepSameOptionsOrder) {
@@ -6996,6 +7016,44 @@
         setFilter(e.target.value);
       }
     }, []);
+    var handleHoverCallback = React.useCallback(function (e) {
+      setHover({
+        item: e,
+        by: "mouse"
+      });
+    }, []);
+    var toggleSelected = React.useCallback(function (id) {
+      var result;
+
+      if (id !== null) {
+        if (type === "multiple") {
+          if (selectedOptions.includes(id)) {
+            result = selectedOptions.filter(function (_id) {
+              return _id !== id;
+            });
+          } else {
+            result = [].concat(_toConsumableArray(selectedOptions), [id]);
+          }
+        } else {
+          if (selectedOptions.includes(id)) {
+            result = null;
+          } else {
+            result = id;
+          }
+        }
+
+        setFilter("");
+      } else {
+        if (typeof handleDefaultOptionChange === "function") {
+          handleDefaultOptionChange();
+          return;
+        }
+      }
+
+      if (typeof handleChange === "function") {
+        handleChange(result);
+      }
+    }, [handleChange, handleDefaultOptionChange, selectedOptions, type]);
     var handleMouseEnter = React.useCallback(function (e) {
       if (e === undefined || e === null) {
         return setHover({
@@ -7009,13 +7067,11 @@
         by: "mouse"
       });
     }, []);
-    var handleHoverCallback = React.useCallback(function (e) {
-      setHover({
-        item: e,
-        by: "mouse"
-      });
-    }, []);
-    var handleRenderOption = React.useCallback(function (item) {
+    var handleClick = React.useCallback(function (e) {
+      e.preventDefault();
+      toggleSelected(hover.item);
+    }, [toggleSelected, hover]);
+    var handleRenderOption = React.useCallback(function (item, index) {
       if (isGroup(item)) {
         return /*#__PURE__*/React__default["default"].createElement(OptionGroup, {
           checked: selectedOptions,
@@ -7035,8 +7091,9 @@
       return /*#__PURE__*/React__default["default"].createElement(Option, {
         name: item.name,
         ref: itemRef,
-        key: item.id,
+        key: index,
         onMouseEnter: handleMouseEnter,
+        onClick: handleClick,
         id: item.id,
         hover: item.id === hover.item,
         className: optionClassName,
@@ -7051,7 +7108,7 @@
           }
         })
       });
-    }, [handleMouseEnter, hover.item, optionClassName, renderOption, filter, selectedOptions, handleHoverCallback, type, handleChange]);
+    }, [handleClick, handleMouseEnter, hover.item, optionClassName, renderOption, filter, selectedOptions, handleHoverCallback, type, handleChange]);
     var handleOnMouseLeave = React.useCallback(function () {
       setHover({
         item: undefined,
@@ -7095,8 +7152,8 @@
           return;
         }
 
-        if (handleChange) {
-          handleChange(hover.item);
+        if (hover.item) {
+          toggleSelected(hover.item);
           setFilter("");
         }
 
@@ -7107,18 +7164,7 @@
         item: handleKeyboardMovement(e, hover.item, flatOptions, showAddNew, showDefaultOption),
         by: "keyboard"
       });
-    }, [filter, flatOptions, handleChange, handleDefaultOptionChange, handleEmpty, hover, showAddNew, showDefaultOption]);
-    var handleClick = React.useCallback(function () {
-      if (hover.item === null && handleDefaultOptionChange) {
-        handleDefaultOptionChange();
-      }
-
-      if (handleChange) {
-        handleChange(hover === null || hover === void 0 ? void 0 : hover.item);
-      }
-
-      setFilter("");
-    }, [handleChange, handleDefaultOptionChange, hover]);
+    }, [filter, flatOptions, toggleSelected, handleDefaultOptionChange, handleEmpty, hover, showAddNew, showDefaultOption]);
     React.useEffect(function () {
       if (inputEl) {
         inputEl.onkeydown = handleOnKeyDown;
@@ -7145,7 +7191,6 @@
       var onScroll = _ref2.onScroll;
       return /*#__PURE__*/React__default["default"].createElement(StyledAutocompleteBody, {
         key: "body",
-        onChange: handleClick,
         onMouseLeave: handleOnMouseLeave
       }, /*#__PURE__*/React__default["default"].createElement(reactCustomScrollbars.Scrollbars, {
         ref: listRef,
@@ -7158,6 +7203,10 @@
         ref: itemRef,
         hover: hover.item === null,
         onMouseEnter: handleMouseEnter,
+        onClick: function onClick(e) {
+          e.preventDefault();
+          toggleSelected(null);
+        },
         renderOption: renderOption({
           name: defaultValue,
           id: null
@@ -7168,8 +7217,8 @@
             return null;
           }
         })
-      }), list.map(function (item) {
-        return handleRenderOption(item);
+      }), list.map(function (item, index) {
+        return handleRenderOption(item, index);
       }), showNoResult && renderNoResult, showAddNew && renderAddNew));
     });
   };
@@ -7402,7 +7451,7 @@
   };
   OptionContent.displayName = "OptionContent";
 
-  var _excluded$t = ["type", "mode", "target", "options", "selected", "position", "onChange", "actionIcon", "actionLabel", "placeholder", "emptyAction", "disableSearch", "forceCloseMenu", "selectClassName", "keepSameOptionsOrder", "onSelectOpen", "onSelectClose"];
+  var _excluded$t = ["type", "mode", "target", "options", "selected", "position", "onChange", "actionIcon", "actionLabel", "placeholder", "emptyAction", "disableSearch", "forceCloseMenu", "selectClassName", "keepSameOptionsOrder", "onSelectOpen", "onSelectClose", "renderOption"];
   var Select = function Select(_ref) {
     var _ref$type = _ref.type,
         type = _ref$type === void 0 ? "single" : _ref$type,
@@ -7432,6 +7481,7 @@
         keepSameOptionsOrder = _ref$keepSameOptionsO === void 0 ? false : _ref$keepSameOptionsO,
         onSelectOpen = _ref.onSelectOpen,
         onSelectClose = _ref.onSelectClose,
+        renderOption = _ref.renderOption,
         prop = _objectWithoutProperties(_ref, _excluded$t);
 
     var _useState = React.useState(),
@@ -7484,41 +7534,12 @@
       open && (childNode === null || childNode === void 0 ? void 0 : childNode.focus());
     }, [childNode, open]);
     var handleChange = React.useCallback(function (selectedValue) {
-      if (selectedValue !== null) {
-        if (type === "single") {
-          if (forceCloseMenu) {
-            setOpen(false);
-          }
-
-          return onChange(selectedValue);
-        } // multiple
-
-
-        var value = function value() {
-          if (selectedValue instanceof Array) {
-            if (selectedValue.every(function (v) {
-              return selectedOptions.includes(v);
-            })) {
-              return selectedOptions.filter(function (v) {
-                return !selectedValue.includes(v);
-              });
-            }
-
-            return selectedValue.concat(selectedOptions);
-          }
-
-          if (selectedOptions.includes(selectedValue)) {
-            return selectedOptions.filter(function (option) {
-              return option !== selectedValue;
-            });
-          }
-
-          return [].concat(_toConsumableArray(selectedOptions), [selectedValue]);
-        };
-
-        return onChange(value());
+      if (forceCloseMenu) {
+        setOpen(false);
       }
-    }, [onChange, type, forceCloseMenu, selectedOptions]);
+
+      onChange(selectedValue);
+    }, [onChange, forceCloseMenu]);
     var onClose = React.useCallback(function () {
       setOpen(false);
 
@@ -7577,6 +7598,10 @@
       }
     }, [onChange, type, forceCloseMenu, selectedOptions.length, allOptionValues]);
     var handleRenderOption = React.useCallback(function (option, props) {
+      if (typeof renderOption === "function") {
+        return renderOption(option, props);
+      }
+
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(OptionContent, {
         imageUrl: option.image,
         color: option.color,
@@ -7588,7 +7613,7 @@
       }, props)) : /*#__PURE__*/React__default["default"].createElement(StyledRadioButton, _extends({
         checked: selectedOptions.length < 1 || !selectedOptions[0]
       }, props)) : type === "multiple" ? /*#__PURE__*/React__default["default"].createElement(StyledCheckbox, props) : /*#__PURE__*/React__default["default"].createElement(StyledRadioButton, props));
-    }, [isAllOptionsChecked, selectedOptions, type]);
+    }, [isAllOptionsChecked, renderOption, selectedOptions, type]);
     return /*#__PURE__*/React__default["default"].createElement(Tag, props, /*#__PURE__*/React__default["default"].createElement("div", null, !disableSearch ? /*#__PURE__*/React__default["default"].createElement(StyledSelectForm, {
       ref: formRef
     }, /*#__PURE__*/React__default["default"].createElement(StyledSelectInput, {
@@ -10396,7 +10421,7 @@
   })(["transform:rotate(180deg);margin-left:8px;flex-shrink:0;"]);
   StyledCaretIcon.displayName = "StyledCaretIcon";
 
-  var _excluded$5 = ["children", "type", "size", "invalid"];
+  var _excluded$5 = ["children", "type", "size", "invalid", "endAdornment"];
   var SelectTrigger = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         _ref$type = _ref.type,
@@ -10405,6 +10430,7 @@
         size = _ref$size === void 0 ? "regular" : _ref$size,
         _ref$invalid = _ref.invalid,
         invalid = _ref$invalid === void 0 ? false : _ref$invalid,
+        endAdornment = _ref.endAdornment,
         rest = _objectWithoutProperties(_ref, _excluded$5);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledSelectTrigger, _extends({
@@ -10418,7 +10444,7 @@
       overflow: "truncate",
       whitespace: "no-wrap",
       variant: size === "small" || size === "regular" ? "Body 2" : "Body 1"
-    }, children), /*#__PURE__*/React__default["default"].createElement(StyledCaretIcon, null));
+    }, children), endAdornment ? endAdornment : /*#__PURE__*/React__default["default"].createElement(StyledCaretIcon, null));
   });
   SelectTrigger.displayName = "SelectTrigger";