@activecollab/components 2.0.75 → 2.0.76

package/dist/index.js

@@ -12076,7 +12076,9 @@
       onChange = _ref.onChange,
       setHover = _ref.setHover,
       renderOptions = _ref.renderOptions,
-      optionGroupClassName = _ref.optionGroupClassName;
+      optionGroupClassName = _ref.optionGroupClassName,
+      _ref$mixedOptions = _ref.mixedOptions,
+      mixedOptions = _ref$mixedOptions === void 0 ? [] : _ref$mixedOptions;
     var list = React.useMemo(function () {
       return filter ? options.filter(function (v) {
         return v.name.toLowerCase().includes(filter.trim().toLowerCase());
@@ -12106,6 +12108,13 @@
         return option.id;
       });
     }, [options]);
+    var isMixed = React.useMemo(function () {
+      return (options.some(function (option) {
+        return checked.includes(option.id);
+      }) || mixedOptions.some(function (item) {
+        return allOptionValues.includes(item);
+      })) && !isAllOptionsChecked;
+    }, [allOptionValues, checked, isAllOptionsChecked, mixedOptions, options]);
     var handleClick = React.useCallback(function (e) {
       e.stopPropagation();
       if (onChange) {
@@ -12135,9 +12144,7 @@
     }, name), type === "multiple" && /*#__PURE__*/React__default["default"].createElement(Checkbox, {
       id: `${id}`,
       checked: isAllOptionsChecked,
-      mixed: options.some(function (option) {
-        return checked.includes(option.id);
-      }) && !isAllOptionsChecked,
+      mixed: isMixed,
       onChange: handleClick,
       type: "checkbox"
     }))), /*#__PURE__*/React__default["default"].createElement(List, null, list.map(function (item, index) {
@@ -12176,7 +12183,9 @@
       keepSameOptionsOrder = _ref$keepSameOptionsO === void 0 ? false : _ref$keepSameOptionsO,
       _ref$autoHeightMax = _ref.autoHeightMax,
       autoHeightMax = _ref$autoHeightMax === void 0 ? 340 : _ref$autoHeightMax,
-      clearInputOnSelect = _ref.clearInputOnSelect;
+      clearInputOnSelect = _ref.clearInputOnSelect,
+      _ref$mixedOptions = _ref.mixedOptions,
+      mixedOptions = _ref$mixedOptions === void 0 ? [] : _ref$mixedOptions;
     var itemRef = React.useRef(null);
     var listRef = React.useRef(null);
     var selectedOptions = React.useMemo(function () {
@@ -12420,7 +12429,8 @@
           renderOptions: handleRenderOption,
           type: type,
           onChange: handleChange,
-          filter: filter
+          filter: filter,
+          mixedOptions: mixedOptions
         });
       }
       return /*#__PURE__*/React__default["default"].createElement(Option, {
@@ -12443,7 +12453,7 @@
           }
         })
       });
-    }, [handleClick, handleMouseEnter, hover.item, optionClassName, renderOption, filter, selectedOptions, handleHoverCallback, type, handleChange]);
+    }, [handleClick, handleMouseEnter, hover.item, optionClassName, renderOption, filter, selectedOptions, handleHoverCallback, type, handleChange, mixedOptions]);
     var handleOnMouseLeave = React.useCallback(function () {
       setHover({
         item: undefined,
@@ -12631,6 +12641,27 @@
         return [...acc, ...allGroupOptions];
       }, []);
     }, [selectOptions]);
+    var getMixedOptionsRecursively = React.useCallback(function (options) {
+      var mixedOptions = [];
+      options.forEach(function (option) {
+        if (option.mixed) {
+          mixedOptions.push(option);
+        }
+        if (isOptionGroup(option) && option.options && option.options.length > 0) {
+          var nestedMixedOptions = getMixedOptionsRecursively(option.options);
+          mixedOptions = mixedOptions.concat(nestedMixedOptions);
+        }
+      });
+      return mixedOptions;
+    }, []);
+    var mixedOptions = React.useRef(type === "multiple" && selectOptions ? getMixedOptionsRecursively(selectOptions).map(function (item) {
+      return item.id;
+    }) : []);
+    var removeFromMixedOptions = React.useCallback(function (idsToRemove) {
+      mixedOptions.current = mixedOptions.current.filter(function (mixedOption) {
+        return !idsToRemove.includes(mixedOption);
+      });
+    }, []);
     var isAllOptionsChecked = React.useMemo(function () {
       return allOptionValues.every(function (option) {
         return selectedOptions.includes(option);
@@ -12654,8 +12685,9 @@
       }
       if (selectedValue !== undefined && selectedValue !== selected && !(selectedValue instanceof Array && selectedValue.includes(undefined))) {
         onChange(selectedValue);
+        type === "multiple" && mixedOptions.current.length && removeFromMixedOptions(selectedValue);
       }
-    }, [forceCloseMenu, selected, onSelectClose, onChange]);
+    }, [forceCloseMenu, selected, onSelectClose, onChange, type, removeFromMixedOptions]);
     var onClose = React.useCallback(function () {
       setOpen(false);
       if (onSelectClose) {
@@ -12737,8 +12769,10 @@
         mixed: someOptionsChecked && !isAllOptionsChecked
       }, 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, renderOption, selectedOptions, type, someOptionsChecked]);
+      }, props)) : type === "multiple" ? /*#__PURE__*/React__default["default"].createElement(StyledCheckbox, _extends({
+        mixed: mixedOptions.current.includes(option.id)
+      }, props)) : /*#__PURE__*/React__default["default"].createElement(StyledRadioButton, props));
+    }, [isAllOptionsChecked, renderOption, type, someOptionsChecked, selectedOptions]);
     return /*#__PURE__*/React__default["default"].createElement(Tag, props, /*#__PURE__*/React__default["default"].createElement("div", null, !disableSearch ? /*#__PURE__*/React__default["default"].createElement(StyledSelectForm, {
       ref: formRef
     }, startAdornment ? /*#__PURE__*/React__default["default"].createElement(StyledStartAdornment, null, startAdornment) : null, /*#__PURE__*/React__default["default"].createElement(StyledSelectInput, {
@@ -12752,6 +12786,7 @@
       handleChange: handleChange,
       renderOption: handleRenderOption,
       options: options,
+      mixedOptions: mixedOptions.current,
       handleDefaultOptionChange: handleDefaultOptionChangeCallback,
       type: type,
       preselectDefaultValue: preselectDefaultValue,