@activecollab/components 1.0.243 → 1.0.245

package/dist/index.js

@@ -655,13 +655,6 @@
         onKeyDown(event);
       }
     }, [disableCloseOnEsc, onClose, onKeyDown]);
-    React.useEffect(function () {
-      return function () {
-        typeof onClose === "function" && onClose();
-      };
-      // Dependency is empty because we only want to call onClose when component is unmounted
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
     var handleClick = React.useCallback(function (event) {
       event === null || event === void 0 ? void 0 : event.stopPropagation();
       typeof onClick === "function" && onClick(event);
@@ -9920,7 +9913,8 @@
         return;
       }
       if (handleEmptyAction) {
-        inputEl === null || inputEl === void 0 ? void 0 : inputEl.focus();
+        var _inputEl$current;
+        inputEl === null || inputEl === void 0 ? void 0 : (_inputEl$current = inputEl.current) === null || _inputEl$current === void 0 ? void 0 : _inputEl$current.focus();
         setFilter("");
         handleEmptyAction(filter);
       }
@@ -10032,9 +10026,9 @@
         } else {
           result = id;
         }
-        if (clearInputOnSelect && inputEl) {
-          inputEl.value = "";
-          inputEl.dispatchEvent(new Event("change", {
+        if (clearInputOnSelect && inputEl !== null && inputEl !== void 0 && inputEl.current) {
+          inputEl.current.value = "";
+          inputEl.current.dispatchEvent(new Event("change", {
             bubbles: true
           }));
         }
@@ -10151,9 +10145,9 @@
       });
     }, [filter, flatOptions, toggleSelected, handleDefaultOptionChange, handleEmpty, hover, showAddNew, showDefaultOption]);
     React.useEffect(function () {
-      if (inputEl) {
-        inputEl.onkeydown = handleOnKeyDown;
-        inputEl.onkeyup = handleInputChange;
+      if (inputEl !== null && inputEl !== void 0 && inputEl.current) {
+        inputEl.current.onkeydown = handleOnKeyDown;
+        inputEl.current.onkeyup = handleInputChange;
       }
     }, [handleInputChange, handleOnKeyDown, inputEl]);
     var isDefaultOptionSelected = React.useCallback(function () {
@@ -10438,18 +10432,15 @@
       _ref$preselectDefault = _ref.preselectDefaultValue,
       preselectDefaultValue = _ref$preselectDefault === void 0 ? type === "single" : _ref$preselectDefault,
       prop = _objectWithoutProperties(_ref, _excluded$A);
-    var _useState = React.useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      childNode = _useState2[0],
-      setChildNode = _useState2[1];
+    var childNode = React.useRef();
     var elementRef = React.useRef(null);
-    var handleRef = useForkRef(setChildNode, elementRef);
+    var handleRef = useForkRef(childNode, elementRef);
     var Tag = !target ? "div" : Menu;
     var formRef = React.useRef(null);
-    var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      open = _useState4[0],
-      setOpen = _useState4[1];
+    var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
     var selectedOptions = React.useMemo(function () {
       return selected instanceof Array ? selected : [selected];
     }, [selected]);
@@ -10476,16 +10467,18 @@
       });
     }, [allOptionValues, selectedOptions]);
     React.useEffect(function () {
-      open && (childNode === null || childNode === void 0 ? void 0 : childNode.focus());
+      var _childNode$current;
+      open && (childNode === null || childNode === void 0 ? void 0 : (_childNode$current = childNode.current) === null || _childNode$current === void 0 ? void 0 : _childNode$current.focus());
     }, [childNode, open]);
     var handleChange = React.useCallback(function (selectedValue) {
       if (forceCloseMenu) {
+        if (typeof onSelectClose === "function") onSelectClose();
         setOpen(false);
       }
       if (selectedValue !== selected) {
         onChange(selectedValue);
       }
-    }, [forceCloseMenu, selected, onChange]);
+    }, [forceCloseMenu, selected, onSelectClose, onChange]);
     var onClose = React.useCallback(function () {
       setOpen(false);
       if (onSelectClose) {
@@ -13661,19 +13654,16 @@
     var handleOnChange = React.useCallback(function (e) {
       return setValue(e.target.value);
     }, []);
-    var _useState3 = React.useState(),
-      _useState4 = _slicedToArray(_useState3, 2),
-      childNode = _useState4[0],
-      setChildNode = _useState4[1];
+    var childNode = React.useRef();
     var elementRef = React.useRef(null);
-    var handleRef = useForkRef(setChildNode, elementRef);
+    var handleRef = useForkRef(childNode, elementRef);
     var wrapperRef = React.useRef(null);
     var chipWrapper = React.useRef(null);
     var comboBoxRef = React.useRef(null);
-    var _useState5 = React.useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      open = _useState6[0],
-      setOpen = _useState6[1];
+    var _useState3 = React.useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      open = _useState4[0],
+      setOpen = _useState4[1];
     useOnClickOutside(wrapperRef, function (e) {
       var _comboBoxRef$current;
       if (e.target && (_comboBoxRef$current = comboBoxRef.current) !== null && _comboBoxRef$current !== void 0 && _comboBoxRef$current.contains(e.target)) {
@@ -13692,8 +13682,9 @@
       }
     }, [open, selectedName, type]);
     React.useEffect(function () {
-      open && (childNode === null || childNode === void 0 ? void 0 : childNode.focus());
-      !open && (childNode === null || childNode === void 0 ? void 0 : childNode.blur());
+      var _childNode$current, _childNode$current2;
+      open && (childNode === null || childNode === void 0 ? void 0 : (_childNode$current = childNode.current) === null || _childNode$current === void 0 ? void 0 : _childNode$current.focus());
+      !open && (childNode === null || childNode === void 0 ? void 0 : (_childNode$current2 = childNode.current) === null || _childNode$current2 === void 0 ? void 0 : _childNode$current2.blur());
     }, [childNode, open]);
     React.useEffect(function () {
       setValue(selectedName);