@activecollab/components 2.0.75 → 2.0.77

package/dist/index.js

@@ -11240,11 +11240,13 @@
   var StyledCheckbox$1 = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledCheckbox",
     componentId: "sc-y7zymm-2"
-  })(["height:16px;width:16px;position:relative;transition-duration:0.2s;border-radius:2px;path{transition-duration:0.2s;stroke:transparent;stroke-dashoffset:12;stroke-dasharray:12;}svg{cursor:pointer;border-radius:2px;fill:transparent;}rect{transition-duration:0.2s;", " ", "}", ":disabled ~ ", "{pointer-events:none;opacity:0.5;}", ":focus ~ ", "{rect{stroke:var(--color-secondary);stroke-width:3px;}}&:not(.c-checkbox__controlled) ", ":hover:not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);", " stroke-width:3px;}}", " ", ":checked ~ ", "{path{", "}rect{stroke:var(--color-secondary);stroke-width:19px;", "}}"], function (props) {
+  })(["height:16px;width:16px;position:relative;transition-duration:0.2s;border-radius:2px;path{transition-duration:0.2s;stroke:transparent;stroke-dashoffset:12;stroke-dasharray:12;}svg{cursor:pointer;border-radius:2px;fill:transparent;}rect{transition-duration:0.2s;", " ", "}", ":disabled ~ ", "{pointer-events:none;opacity:0.5;}", ":focus ~ ", "{", "}&:not(.c-checkbox__controlled) ", ":hover:not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);", " stroke-width:3px;}}", " ", ":checked ~ ", "{path{", "}rect{stroke:var(--color-secondary);stroke-width:19px;", "}}"], function (props) {
     return !props.mixed && styled.css(["stroke:var(--color-theme-500);"]);
   }, function (props) {
     return props.mixed && styled.css(["stroke:transparent;"]);
-  }, StyledInput$3, StyledLabel, StyledInput$3, StyledLabel, StyledInput$3, StyledLabel, function (props) {
+  }, StyledInput$3, StyledLabel, StyledInput$3, StyledLabel, function (props) {
+    return !props.mixed && styled.css(["rect{stroke:var(--color-secondary);stroke-width:3px;}"]);
+  }, StyledInput$3, StyledLabel, function (props) {
     return props.mixed && styled.css(["stroke:transparent;"]);
   }, function (props) {
     return props.hover && !props.mixed && styled.css(["", ":not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}"], StyledInput$3, StyledLabel);
@@ -12076,7 +12078,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 +12110,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 +12146,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 +12185,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 +12431,8 @@
           renderOptions: handleRenderOption,
           type: type,
           onChange: handleChange,
-          filter: filter
+          filter: filter,
+          mixedOptions: mixedOptions
         });
       }
       return /*#__PURE__*/React__default["default"].createElement(Option, {
@@ -12443,7 +12455,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 +12643,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 +12687,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 +12771,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 +12788,7 @@
       handleChange: handleChange,
       renderOption: handleRenderOption,
       options: options,
+      mixedOptions: mixedOptions.current,
       handleDefaultOptionChange: handleDefaultOptionChangeCallback,
       type: type,
       preselectDefaultValue: preselectDefaultValue,