@activecollab/components 1.0.138 → 1.0.141

package/dist/index.js

@@ -1279,6 +1279,22 @@
   ArrowCollapseMultipleIcon.displayName = "ArrowCollapseMultipleIcon";
   var ArrowCollapseMultipleIcon$1 = ArrowCollapseMultipleIcon;
 
+  var ArrowDownLongIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
+    return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
+      width: 24,
+      height: 24,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "var(--color-theme-600)",
+      ref: svgRef
+    }, props), /*#__PURE__*/React__default["default"].createElement("path", {
+      d: "M13 5v9h4l-5 5-5-5h4V5z",
+      fillRule: "evenodd"
+    }));
+  });
+  ArrowDownLongIcon.displayName = "ArrowDownLongIcon";
+  var ArrowDownLongIcon$1 = ArrowDownLongIcon;
+
   var ArrowExpandeMultipleIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
@@ -1358,6 +1374,22 @@
   ArrowRightIcon.displayName = "ArrowRightIcon";
   var ArrowRightIcon$1 = ArrowRightIcon;
 
+  var ArrowUpLongIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
+    return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
+      width: 24,
+      height: 24,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "var(--color-theme-600)",
+      ref: svgRef
+    }, props), /*#__PURE__*/React__default["default"].createElement("path", {
+      d: "M13 19v-9h4l-5-5-5 5h4v9z",
+      fillRule: "evenodd"
+    }));
+  });
+  ArrowUpLongIcon.displayName = "ArrowUpLongIcon";
+  var ArrowUpLongIcon$1 = ArrowUpLongIcon;
+
   var AssignIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
@@ -3845,8 +3877,10 @@
   var StyledTooltip = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledTooltip",
     componentId: "sc-rur9b5-0"
-  })(["", " ", " border-radius:8px;max-width:200px;padding:4px 10px;text-align:center;background-color:rgba(0,0,0,0.9);font-size:12px;font-weight:500;line-height:normal;color:#fff;margin:4px;", ""], BoxSizingStyle, FontStyle, function (props) {
+  })(["", " ", " border-radius:8px;padding:4px 10px;text-align:center;background-color:rgba(0,0,0,0.9);font-size:12px;font-weight:500;line-height:normal;color:#fff;margin:4px;", " ", ""], BoxSizingStyle, FontStyle, function (props) {
     return props.$isLight && styled.css(["background-color:var(--page-paper-main);box-shadow:var(--shadow-secondary);color:var(--color-theme-700);"]);
+  }, function (props) {
+    return props.$width && styled.css(["width:", "px;"], props.$width);
   });
 
   var _excluded$S = ["children"];
@@ -3873,7 +3907,9 @@
         TransitionComponent = _ref2$TransitionCompo === void 0 ? TooltipAnimation : _ref2$TransitionCompo,
         popperTooltipStyle = _ref2.popperTooltipStyle,
         popperTooltipClassName = _ref2.popperTooltipClassName,
-        disable = _ref2.disable;
+        disable = _ref2.disable,
+        _ref2$width = _ref2.width,
+        width = _ref2$width === void 0 ? 200 : _ref2$width;
 
     var _useLayerContext = useLayerContext(),
         _useLayerContext$zInd = _useLayerContext.zIndex,
@@ -3934,7 +3970,8 @@
         style: style
       }), /*#__PURE__*/React__default["default"].createElement(StyledTooltip, {
         className: classnames__default["default"]("c-tooltip-ds", className),
-        $isLight: isLight
+        $isLight: isLight,
+        $width: width
       }, title));
     })));
   });
@@ -6339,7 +6376,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);", " ", " ", ""], {
@@ -6356,7 +6393,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);
@@ -6367,7 +6408,8 @@
       title: name,
       onMouseEnter: handleOnMouseEnter,
       className: classnames__default["default"]("c-option", className),
-      hover: hover
+      hover: hover,
+      onClick: onClick
     }, renderOption ? renderOption : name);
   });
   Option.displayName = "Option";
@@ -6433,9 +6475,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) {
@@ -6486,24 +6528,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";
 
@@ -6753,12 +6806,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);"], {
@@ -6766,13 +6819,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";
@@ -6807,7 +6860,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) {
@@ -6964,6 +7021,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({
@@ -6977,13 +7072,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,
@@ -7003,8 +7096,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,
@@ -7019,7 +7113,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,
@@ -7063,8 +7157,8 @@
           return;
         }
 
-        if (handleChange) {
-          handleChange(hover.item);
+        if (hover.item) {
+          toggleSelected(hover.item);
           setFilter("");
         }
 
@@ -7075,18 +7169,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;
@@ -7113,7 +7196,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,
@@ -7126,6 +7208,10 @@
         ref: itemRef,
         hover: hover.item === null,
         onMouseEnter: handleMouseEnter,
+        onClick: function onClick(e) {
+          e.preventDefault();
+          toggleSelected(null);
+        },
         renderOption: renderOption({
           name: defaultValue,
           id: null
@@ -7136,8 +7222,8 @@
             return null;
           }
         })
-      }), list.map(function (item) {
-        return handleRenderOption(item);
+      }), list.map(function (item, index) {
+        return handleRenderOption(item, index);
       }), showNoResult && renderNoResult, showAddNew && renderAddNew));
     });
   };
@@ -7370,7 +7456,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,
@@ -7400,6 +7486,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(),
@@ -7452,41 +7539,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);
 
@@ -7545,6 +7603,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,
@@ -7556,7 +7618,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, {
@@ -10364,7 +10426,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,
@@ -10373,6 +10435,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({
@@ -10386,7 +10449,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";
 
@@ -11318,11 +11381,13 @@
   exports.AddCrossTinyIcon = AddCrossTinyIcon$1;
   exports.ApplauseIcon = ApplauseIcon$1;
   exports.ArrowCollapseMultipleIcon = ArrowCollapseMultipleIcon$1;
+  exports.ArrowDownLongIcon = ArrowDownLongIcon$1;
   exports.ArrowExpandeMultipleIcon = ArrowExpandeMultipleIcon$1;
   exports.ArrowLeftBoxIcon = ArrowLeftBoxIcon$1;
   exports.ArrowLeftIcon = ArrowLeftIcon$1;
   exports.ArrowRefreshIcon = ArrowRefreshIcon$1;
   exports.ArrowRightIcon = ArrowRightIcon$1;
+  exports.ArrowUpLongIcon = ArrowUpLongIcon$1;
   exports.AssignIcon = AssignIcon$1;
   exports.AttachmentIcon = AttachmentIcon$1;
   exports.AutoResizeTextarea = AutoResizeTextarea;