@activecollab/components 2.0.74 → 2.0.76

package/dist/index.js

@@ -11141,7 +11141,7 @@
   };
   OptionContent.displayName = "OptionContent";
 
-  var _excluded$S = ["isIndeterminate", "data-testid"];
+  var _excluded$S = ["mixed", "data-testid"];
 
   /**
    * @component CheckboxIcon
@@ -11163,7 +11163,7 @@
    * https://design.activecollab.com/docs/foundations/icons
    */
   var CheckboxIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
-    var isIndeterminate = _ref.isIndeterminate,
+    var mixed = _ref.mixed,
       testId = _ref["data-testid"],
       props = _objectWithoutProperties(_ref, _excluded$S);
     // const [animate, setAnimate] = useState(false);
@@ -11175,9 +11175,9 @@
     //   } else {
     //     mountRef.current = true;
     //   }
-    // }, [isIndeterminate]);
+    // }, [mixed]);
 
-    if (isIndeterminate) {
+    if (mixed) {
       return /*#__PURE__*/React__default["default"].createElement("svg", {
         width: "16",
         height: "16",
@@ -11241,21 +11241,21 @@
     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) {
-    return !props.isIndeterminate && styled.css(["stroke:var(--color-theme-500);"]);
+    return !props.mixed && styled.css(["stroke:var(--color-theme-500);"]);
   }, function (props) {
-    return props.isIndeterminate && styled.css(["stroke:transparent;"]);
+    return props.mixed && styled.css(["stroke:transparent;"]);
   }, StyledInput$3, StyledLabel, StyledInput$3, StyledLabel, StyledInput$3, StyledLabel, function (props) {
-    return props.isIndeterminate && styled.css(["stroke:transparent;"]);
+    return props.mixed && styled.css(["stroke:transparent;"]);
   }, function (props) {
-    return props.hover && !props.isIndeterminate && styled.css(["", ":not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}"], StyledInput$3, StyledLabel);
+    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);
   }, StyledInput$3, StyledLabel, function (props) {
-    return !props.isIndeterminate && styled.css(["stroke:var(--page-paper-main);stroke-dashoffset:24;"]);
+    return !props.mixed && styled.css(["stroke:var(--page-paper-main);stroke-dashoffset:24;"]);
   }, function (props) {
-    return props.isIndeterminate && styled.css(["stroke:transparent;"]);
+    return props.mixed && styled.css(["stroke:transparent;"]);
   });
   StyledCheckbox$1.displayName = "StyledCheckbox";
 
-  var _excluded$R = ["className", "hover", "id", "isIndeterminate"];
+  var _excluded$R = ["className", "hover", "id", "mixed", "onChange"];
   /**
    * Checkbox component
    */
@@ -11264,8 +11264,24 @@
       hover = _ref.hover,
       _ref$id = _ref.id,
       id = _ref$id === void 0 ? "checkbox" : _ref$id,
-      isIndeterminate = _ref.isIndeterminate,
+      _ref$mixed = _ref.mixed,
+      mixed = _ref$mixed === void 0 ? false : _ref$mixed,
+      onChange = _ref.onChange,
       rest = _objectWithoutProperties(_ref, _excluded$R);
+    var _useState = React.useState(mixed),
+      _useState2 = _slicedToArray(_useState, 2),
+      indeterminate = _useState2[0],
+      setIndeterminate = _useState2[1];
+    var handleChange = React.useCallback(function (e) {
+      typeof onChange === "function" && onChange(e);
+      setIndeterminate(false);
+    }, [onChange]);
+    React.useEffect(function () {
+      if (mixed !== indeterminate) {
+        setIndeterminate(mixed);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mixed]);
     return /*#__PURE__*/React__default["default"].createElement(StyledCheckbox$1, {
       className: classNames__default["default"]("c-checkbox", {
         "c-checkbox__hover": hover,
@@ -11273,21 +11289,23 @@
       }, className),
       hover: hover,
       tabIndex: -1,
-      isIndeterminate: isIndeterminate
+      mixed: indeterminate
     }, /*#__PURE__*/React__default["default"].createElement(StyledInput$3, _extends({
       role: "checkbox",
       id: id,
       className: "c-checkbox--input",
       type: "checkbox",
       ref: ref
-    }, rest)), /*#__PURE__*/React__default["default"].createElement(StyledLabel, {
+    }, rest, {
+      onChange: handleChange
+    })), /*#__PURE__*/React__default["default"].createElement(StyledLabel, {
       htmlFor: id,
       className: "c-checkbox--label"
     }, /*#__PURE__*/React__default["default"].createElement(CheckboxIcon$1, {
       "data-testid": "checkbox-icon",
       height: 16,
       width: 16,
-      isIndeterminate: isIndeterminate
+      mixed: indeterminate
     })));
   });
   Checkbox.displayName = "Checkbox";
@@ -12058,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());
@@ -12088,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) {
@@ -12117,9 +12144,7 @@
     }, name), type === "multiple" && /*#__PURE__*/React__default["default"].createElement(Checkbox, {
       id: `${id}`,
       checked: isAllOptionsChecked,
-      isIndeterminate: 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) {
@@ -12158,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 () {
@@ -12402,7 +12429,8 @@
           renderOptions: handleRenderOption,
           type: type,
           onChange: handleChange,
-          filter: filter
+          filter: filter,
+          mixedOptions: mixedOptions
         });
       }
       return /*#__PURE__*/React__default["default"].createElement(Option, {
@@ -12425,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,
@@ -12613,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);
@@ -12636,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) {
@@ -12716,11 +12766,13 @@
         additionalInfo: option.additionalInfo
       }), option.id === null ? type === "multiple" ? /*#__PURE__*/React__default["default"].createElement(StyledCheckbox, _extends({
         checked: isAllOptionsChecked,
-        isIndeterminate: someOptionsChecked && !isAllOptionsChecked
+        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, {
@@ -12734,6 +12786,7 @@
       handleChange: handleChange,
       renderOption: handleRenderOption,
       options: options,
+      mixedOptions: mixedOptions.current,
       handleDefaultOptionChange: handleDefaultOptionChangeCallback,
       type: type,
       preselectDefaultValue: preselectDefaultValue,