@oliasoft-open-source/react-ui-library 4.15.1 → 4.15.2-beta-1

package/dist/index.js

@@ -20651,10 +20651,15 @@ const Layer = ({
   closeLayer,
   testId
 }) => {
+  const isMounted = useRef(true);
   useEffect(() => {
-    if (firstSelectedOptionIndex && firstSelectedOptionIndex !== null && listRef.current !== null) {
+    if (!isMounted.current) return;
+    if (firstSelectedOptionIndex !== void 0 && firstSelectedOptionIndex !== null && listRef.current !== null && typeof listRef.current.scrollToItem === "function") {
       listRef.current.scrollToItem(firstSelectedOptionIndex, "start");
     }
+    return () => {
+      isMounted.current = false;
+    };
   }, [firstSelectedOptionIndex, listRef]);
   const optionHeight = small2 ? 24 : 30;
   return /* @__PURE__ */ jsx(
@@ -20762,6 +20767,12 @@ const MultiSelectedOptions = ({
   const isFontLoaded = useFontsReady();
   const [displayedOptions, setDisplayedOptions] = useState([]);
   const [overflowOptions, setOverflowOptions] = useState([]);
+  const isMounted = useRef(true);
+  useEffect(() => {
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
   useEffect(() => {
     let displayed = [];
     let overflow = [];
@@ -20776,8 +20787,10 @@ const MultiSelectedOptions = ({
         overflow.push(option2);
       }
     });
-    setDisplayedOptions(displayed);
-    setOverflowOptions(overflow);
+    if (isMounted.current) {
+      setDisplayedOptions(displayed);
+      setOverflowOptions(overflow);
+    }
   }, [selectedOptions, isFontLoaded, width2]);
   return /* @__PURE__ */ jsxs(
     "div",
@@ -20820,6 +20833,12 @@ const Input = ({
   testId
 }) => {
   const containerRef = useRef(null);
+  const isMounted = useRef(true);
+  useEffect(() => {
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
   const isMulti2 = Array.isArray(selectedOptions);
   const hasSelectedValues = isMulti2 ? selectedOptions.length > 0 : !!selectedOptions;
   const inputSize = searchValue ? searchValue.length + 1 : 1;
@@ -20892,6 +20911,12 @@ const Trigger = ({
 }) => {
   var _a2;
   const [inputRef, setInputFocus] = useFocus();
+  const isMounted = useRef(true);
+  useEffect(() => {
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
   const hasSelection2 = Array.isArray(selectedOptions) ? selectedOptions.length > 0 && ((_a2 = selectedOptions[0]) == null ? void 0 : _a2.value) : selectedOptions == null ? void 0 : selectedOptions.value;
   const canClear = clearable && hasSelection2;
   const order2 = (() => {
@@ -20931,11 +20956,14 @@ const Trigger = ({
           order2
         ),
         onClick: (evt) => {
-          evt.stopPropagation();
+          onClickTrigger(evt);
           if (typeof setInputFocus === "function") {
-            setInputFocus();
+            requestAnimationFrame(() => {
+              if (isMounted == null ? void 0 : isMounted.current) {
+                setInputFocus();
+              }
+            });
           }
-          onClickTrigger(evt);
         },
         onFocus,
         onBlur,
@@ -21189,22 +21217,32 @@ const useCustomSelectLogic = ({
   firstSelectedOptionIndex,
   createAble,
   listRef,
-  autoLayerWidth
+  autoLayerWidth,
+  isMounted
 }) => {
+  const safeDispatch = (action2) => {
+    if (isMounted.current) {
+      dispatch(action2);
+    }
+  };
   const closeLayer = () => {
     if (state.isLayerOpen) {
-      dispatch({ type: ActionTypes.CLOSE_LAYER });
+      safeDispatch({ type: ActionTypes.CLOSE_LAYER });
     }
     setTriggerFocus();
   };
-  const openLayer = () => dispatch({ type: ActionTypes.OPEN_LAYER });
+  const openLayer = () => safeDispatch({ type: ActionTypes.OPEN_LAYER });
   const isFirstRun = useRef(true);
   useEffect(() => {
+    console.log("isFirstRun mounted");
     if (isFirstRun.current) {
       isFirstRun.current = false;
     } else {
-      dispatch({ type: ActionTypes.SET_VISIBLE_OPTIONS, options });
+      safeDispatch({ type: ActionTypes.SET_VISIBLE_OPTIONS, options });
     }
+    return () => {
+      console.log("isFirstRun unmounted");
+    };
   }, [options]);
   const onSelectOption = (evt, option2, close2) => {
     if (!(disabled2 || disabledContext)) {
@@ -21241,7 +21279,7 @@ const useCustomSelectLogic = ({
           }
         }
       }
-      dispatch({ type: ActionTypes.CLEAR_SEARCH, options });
+      safeDispatch({ type: ActionTypes.CLEAR_SEARCH, options });
       setTriggerFocus();
     }
   };
@@ -21277,7 +21315,7 @@ const useCustomSelectLogic = ({
       closeLayer();
       return;
     }
-    dispatch({
+    safeDispatch({
       type: ActionTypes.RESET_LAYER_FOCUS,
       options,
       firstSelectedOptionIndex
@@ -21286,13 +21324,17 @@ const useCustomSelectLogic = ({
   };
   const isFirstRender = useRef(true);
   useEffect(() => {
+    console.log("isFirstRender mounted");
     if (isFirstRender.current) {
       isFirstRender.current = false;
     } else {
       if (!state.isLayerOpen) {
-        dispatch({ type: ActionTypes.CLEAR_SEARCH, options });
+        safeDispatch({ type: ActionTypes.CLEAR_SEARCH, options });
       }
     }
+    return () => {
+      console.log("isFirstRender unmounted");
+    };
   }, [state.isLayerOpen]);
   const onClickDeselectOption = (evt, options2) => {
     const newSelectedOptions = selectedOptions instanceof Array ? selectedOptions.filter((option2) => option2.value !== options2.value) : null;
@@ -21306,7 +21348,7 @@ const useCustomSelectLogic = ({
       onChange(evt, newSelectedOptions);
     }
   };
-  const onChangeSearch = (value) => dispatch({
+  const onChangeSearch = (value) => safeDispatch({
     type: ActionTypes.ON_CHANGE_SEARCH,
     options,
     value,
@@ -21314,7 +21356,7 @@ const useCustomSelectLogic = ({
   });
   const clickTrigger = () => {
     openLayer();
-    dispatch({ type: ActionTypes.BLUR_TRIGGER_INPUTS });
+    safeDispatch({ type: ActionTypes.BLUR_TRIGGER_INPUTS });
   };
   const scrollToItem = (index2) => {
     if (listRef.current && Number.isInteger(index2)) {
@@ -21323,11 +21365,14 @@ const useCustomSelectLogic = ({
   };
   const focusNextLayerOption = (ICustomSelectDirection2) => {
     const next2 = nextLayerFocus(ICustomSelectDirection2, state.layerFocus);
-    dispatch({ type: ActionTypes.FOCUS_LAYER_OPTIONS, nextLayerFocus: next2 });
+    safeDispatch({
+      type: ActionTypes.FOCUS_LAYER_OPTIONS,
+      nextLayerFocus: next2
+    });
     scrollToItem(next2.current);
   };
   const focusTriggerInputs = (ICustomSelectDirection2) => {
-    dispatch({
+    safeDispatch({
       type: ActionTypes.FOCUS_TRIGGER_INPUTS,
       ICustomSelectDirection: ICustomSelectDirection2,
       selectedOptions
@@ -21448,6 +21493,12 @@ const CustomSelect = (props) => {
       isLayerOpen: false
     })
   );
+  const isMounted = useRef(true);
+  useEffect(() => {
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
   const {
     getTriggerWidth,
     onKeyEvent,
@@ -21471,7 +21522,8 @@ const CustomSelect = (props) => {
     disabledContext,
     isFontLoaded,
     createAble,
-    listRef
+    listRef,
+    isMounted
   });
   return /* @__PURE__ */ jsx("div", { style: { width: getTriggerWidth() }, children: /* @__PURE__ */ jsxs(
     KeyboardEventHandler,