ar-design 0.2.18 → 0.2.20

package/dist/components/feedback/notification/index.js

@@ -5,10 +5,6 @@ import "../../../assets/css/components/feedback/notification/notification.css";
 const Notification = ({ title, message, status, direction = "bottom-left", trigger }) => {
     const _firstLoad = useRef(false);
     const _notificationItems = useRef([]);
-    const _interval = useRef();
-    // const _automaticRemoveInterval = useRef<NodeJS.Timeout>();
-    // const _closedInterval = useRef<NodeJS.Timeout>();
-    const _i = useRef(0);
     const [items, setItems] = useState([]);
     useEffect(() => {
         if (!_firstLoad.current) {
@@ -32,29 +28,28 @@ const Notification = ({ title, message, status, direction = "bottom-left", trigg
                 status = "error";
             }
         }
-        setItems((prevItems) => [...prevItems, { id: _i.current++, title, message, status, direction }]);
+        setItems((prev) => [...prev, { id: Math.random(), title, message, status, direction }]);
     }, [trigger]);
     useEffect(() => {
-        if (items.length === 0)
-            return;
-        // const firstNotification = _notificationItems.current[0];
-        // _automaticRemoveInterval.current = setTimeout(() => {
-        //   if (firstNotification) firstNotification.classList.add("closed");
-        //   _interval.current = setTimeout(() => {
-        //     setItems((prevItems) => prevItems.slice(1));
-        //     if (firstNotification) firstNotification.classList.remove("closed");
-        //     clearTimeout(_interval.current);
-        //   }, 500);
-        //   clearTimeout(_automaticRemoveInterval.current);
-        // }, 3000);
-        _interval.current = setTimeout(() => {
-            setItems((prevItems) => prevItems.slice(1));
-            // if (firstNotification) firstNotification.classList.remove("closed");
-            clearTimeout(_interval.current);
-        }, 3000);
+        let clearTimeoutId = undefined;
+        items.forEach((item) => {
+            if (!item.timeoutId) {
+                const timeoutId = setTimeout(() => {
+                    clearTimeoutId = item.timeoutId;
+                    setItems((prev) => prev.filter((_item) => _item.id !== item.id));
+                }, 3000);
+                // Öncesinde timeoutId değerinin tanımlanması yapılıyor.
+                setItems((prev) => prev.map((prevItem) => (prevItem.id === item.id ? { ...prevItem, timeoutId } : prevItem)));
+            }
+        });
         return () => {
-            // clearTimeout(_automaticRemoveInterval.current);
-            clearTimeout(_interval.current);
+            if (items.length === 0)
+                return;
+            const item = items.find((x) => x.timeoutId == clearTimeoutId);
+            if (item) {
+                clearTimeout(item.timeoutId);
+                clearTimeoutId = undefined;
+            }
         };
     }, [items]);
     const getBottomPosition = (index) => {
@@ -63,14 +58,14 @@ const Notification = ({ title, message, status, direction = "bottom-left", trigg
         if (_notificationItems.current[index - 1]) {
             bottom = _notificationItems.current.slice(0, index).reduce((acc, el) => {
                 const rect = el.getBoundingClientRect();
-                return acc + rect.height + 20; // +20 değeri ara boşluğu artıyor.
+                return acc + rect.height + 20; // +20 değeri ara boşluğu arttırıyor.
             }, 30); // 30px'lik boşluğu başlangıçta ekliyoruz.
         }
         return bottom;
     };
     return items.map((item, index) => {
         const bottom = getBottomPosition(index);
-        return (React.createElement("div", { key: index, ref: (element) => (_notificationItems.current[index] = element), className: "ar-notification-item", style: items.length > 5
+        return (React.createElement("div", { key: item.id, ref: (element) => (_notificationItems.current[index] = element), className: "ar-notification-item", style: items.length > 5
                 ? {
                     backgroundColor: `rgba(var(--white-rgb), ${index === items.length - 1 ? 1 : 0.1})`,
                     backdropFilter: "blur(10px)",
@@ -87,15 +82,9 @@ const Notification = ({ title, message, status, direction = "bottom-left", trigg
                 React.createElement("span", { className: "title" }, item.title),
                 React.createElement("span", { className: "message" }, item.message)),
             React.createElement("div", { className: "close", onClick: () => {
-                    // clearTimeout(_automaticRemoveInterval.current);
-                    clearTimeout(_interval.current);
+                    if (item.timeoutId)
+                        clearTimeout(item.timeoutId);
                     setItems((prev) => prev.filter((_item) => _item.id !== item.id));
-                    // if (_notificationItems.current[index]) _notificationItems.current[index]!.classList.add("closed");
-                    // _closedInterval.current = setTimeout(() => {
-                    //   setItems((prev) => prev.filter((_item) => _item.id !== item.id));
-                    //   if (_notificationItems.current[index]) _notificationItems.current[index]!.classList.remove("closed");
-                    //   clearTimeout(_closedInterval.current);
-                    // }, 500);
                 } })));
     });
 };

package/dist/components/form/select/Props.d.ts

@@ -20,6 +20,7 @@ interface ISingle {
 }
 export type Props = {
     options: Option[];
+    onSearch?: (searchText: string) => void;
     onClick?: () => void;
     onCreate?: (option: Option) => void;
     placeholder?: string;

package/dist/components/form/select/index.js

@@ -6,7 +6,7 @@ import Chip from "../../data-display/chip";
 import Checkbox from "../checkbox";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 import ReactDOM from "react-dom";
-const Select = ({ variant = "outlined", status, border = { radius: "sm" }, options, value, onChange, onClick, onCreate, multiple, placeholder, validation, upperCase, disabled, }) => {
+const Select = ({ variant = "outlined", status, border = { radius: "sm" }, options, value, onChange, onSearch, onClick, onCreate, multiple, placeholder, validation, upperCase, disabled, }) => {
     const _selectionClassName = ["selections"];
     // refs
     const _arSelect = useRef(null);
@@ -219,6 +219,8 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
         optionItems[_navigationIndex.current]?.classList.add("navigate-with-arrow-keys");
         // Yeniden konumlandır.
         setTimeout(() => handlePosition(), 0);
+        // Aramayı bileşen dışında kullanmak için dışarı aktarım metodu.
+        onSearch && onSearch(searchText);
     }, [searchText]);
     useEffect(() => {
         // Seçilen öğeye 'navigate-with-arrow-keys' sınıfını ekle

package/dist/components/form/text-editor/index.js

@@ -54,45 +54,48 @@ const TextEditor = ({ name, value, onChange, placeholder, height, validation })
         }
     };
     // useEffects
-    // Iframe Document yüklendikten sonra çalışacaktır. (Bir defa çalışır.)
     useEffect(() => {
+        // Iframe Document yüklendikten sonra çalışacaktır.
         if (!iframeDocument)
             return;
         const selection = iframeDocument.getSelection();
         let range = null;
         // Eğer bir seçim (caret) varsa, konumunu kaydet
-        if (selection && selection.rangeCount > 0) {
+        if (selection && selection.rangeCount > 0)
             range = selection.getRangeAt(0);
-        }
         // Eğer içeriği kendimiz değiştirmedikse ve gelen value farklıysa, içeriği güncelle
-        if (iframeDocument.body.innerHTML !== value) {
+        if (iframeDocument.body.innerHTML !== value)
             iframeDocument.body.innerHTML = value || `<p>${placeholder ?? ""}</p>`;
-        }
         // Cursor (caret) konumunu geri yükle
         if (range) {
             selection?.removeAllRanges();
             selection?.addRange(range);
         }
     }, [value, iframeDocument]);
-    // Iframe yüklendikten sonra çalışacaktır.
     useEffect(() => {
+        // Iframe yüklendikten sonra çalışacaktır.
         if (!iframe)
             return;
         const iframeDocument = iframe.contentDocument || iframe.contentWindow?.document;
-        if (iframeDocument) {
-            setIframeDocument(iframeDocument);
-            iframeDocument.designMode = "on";
-            // Herhangi bir değişikliği izlemek için MutationObserver kullan
-            const observer = new MutationObserver((mutationsList) => {
-                mutationsList.forEach(() => {
-                    iframeDocument.body.innerHTML === "<br>" ? onChange(undefined) : onChange(iframeDocument.body.innerHTML);
-                });
+        if (!iframeDocument)
+            return; // 👈 Güvenlik önlemi
+        // Herhangi bir değişikliği izlemek için MutationObserver kullan
+        const observer = new MutationObserver((mutationsList) => {
+            mutationsList.forEach(() => {
+                iframeDocument?.body.innerHTML === "<br>" ? onChange(undefined) : onChange(iframeDocument.body.innerHTML);
             });
-            // Observer'ı body üzerinde başlat
-            observer.observe(iframeDocument.body, { childList: true, subtree: true, characterData: true, attributes: true });
-            iframeDocument.body.addEventListener("focus", handleFocus);
-            iframeDocument.body.addEventListener("blur", handleBlur);
-        }
+        });
+        setIframeDocument(iframeDocument);
+        iframeDocument.designMode = "on";
+        // Observer'ı body üzerinde başlat
+        observer.observe(iframeDocument.body, { childList: true, subtree: true, characterData: true, attributes: true });
+        iframeDocument.body.addEventListener("focus", handleFocus);
+        iframeDocument.body.addEventListener("blur", handleBlur);
+        return () => {
+            observer.disconnect();
+            iframeDocument?.body.removeEventListener("focus", handleFocus);
+            iframeDocument?.body.removeEventListener("blur", handleBlur);
+        };
     }, [iframe]);
     useEffect(() => {
         if (!_arIframe.current)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.2.18",
+  "version": "0.2.20",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",