ar-design 0.1.57 → 0.1.58

package/dist/assets/css/components/data-display/chip/chip.css

@@ -1,6 +1,14 @@
 .ar-chip {
-  padding: 0.25rem 0.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0 0.5rem;
+  height: 1.75rem;
+  padding: 0 0.5rem;
   font-size: 0.75rem;
   font-weight: 600;
   white-space: nowrap;
+  user-select: none;
+  -webkit-text-stroke: 0.5px var(--white);
+  letter-spacing: 1px;
 }

package/dist/assets/css/components/data-display/table/table.css

@@ -97,6 +97,7 @@
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
+  align-items: center;
 }
 
 @import url("./scroll.css");

package/dist/assets/css/components/feedback/modal/modal.css

@@ -6,7 +6,6 @@
   position: fixed;
   inset: 0;
   background-color: rgba(var(--black-rgb), 0.5);
-  backdrop-filter: blur(10px);
 }
 
 /* #region Open or Close */
@@ -17,19 +16,19 @@
   z-index: 100;
 }
 .ar-modal-wrapper:is(.opened) > .ar-modal {
-  top: 4.5rem;
+  top: 1.75rem;
   transition: top 250ms ease-in-out;
 }
 
 .ar-modal-wrapper:is(.closed) {
   visibility: hidden;
   opacity: 0;
-  transition: visibility 250ms 300ms, opacity 250ms 300ms ease-in-out;
+  transition: visibility 250ms, opacity 250ms ease-in-out;
   z-index: 99;
 }
 .ar-modal-wrapper:is(.closed) > .ar-modal {
   top: -100%;
-  transition: top 250ms 300ms ease-in-out;
+  transition: top 250ms ease-in-out;
 }
 /* #endregion */
 /* Open or Close */

package/dist/assets/css/components/feedback/notification/notification.css

@@ -1,38 +1,11 @@
-.notification {
-  background-color: var(--danger);
-  position: fixed;
-  display: flex;
-  flex-direction: column-reverse;
-  gap: 1.25rem 0;
-  user-select: none;
-  z-index: 1051;
-}
-
-.notification.top-left {
-  top: 1rem;
-  left: 1rem;
-}
-.notification.top-right {
-  top: 1rem;
-  right: 1rem;
-}
-.notification.bottom-left {
-  bottom: 1rem;
-  left: 1rem;
-}
-.notification.bottom-right {
-  bottom: 1rem;
-  right: 1rem;
-}
-
 .ar-notification-item {
+  opacity: 1;
   position: fixed;
   left: 2rem;
   display: flex;
   flex-direction: row;
   gap: 0 0.5rem;
-  background-color: rgba(var(--white-rgb), 0.5);
-  backdrop-filter: blur(5px);
+  background-color: var(--white);
   width: 350px;
   height: 7.5rem;
   border-radius: var(--border-radius-xl);
@@ -40,7 +13,16 @@
   transition: all 250ms ease-in-out;
   overflow: hidden;
   /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
-  animation: openSnackbar ease-in-out 500ms 0s 1 normal both;
+  animation: openedSnackbar ease-in-out 500ms 0s 1 normal both;
+  z-index: 1051;
+}
+.ar-notification-item.previous {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: previousSnackbar ease-in-out 500ms 0s 1 normal both;
+}
+.ar-notification-item.closed {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: closedSnackbar ease-in-out 500ms 0s 1 normal both;
 }
 
 .ar-notification-item > .icon {
@@ -147,7 +129,7 @@
   }
 }
 
-@keyframes openSnackbar {
+@keyframes openedSnackbar {
   0% {
     transform: translateX(-500px);
   }
@@ -156,7 +138,16 @@
   }
 }
 
-@keyframes removeSnackbar {
+@keyframes previousSnackbar {
+  0% {
+    transform: translateX(0) translateY(0);
+  }
+  100% {
+    transform: translateX(0) translateY(120px);
+  }
+}
+
+@keyframes closedSnackbar {
   0% {
     transform: translateX(0);
   }

package/dist/components/data-display/chip/index.js

@@ -2,9 +2,11 @@
 import React from "react";
 import "../../../assets/css/components/data-display/chip/chip.css";
 import Utils from "../../../libs/infrastructure/shared/Utils";
-const Chip = ({ variant = "outlined", status = "primary", border = { radius: "sm" }, text, }) => {
+const Chip = ({ variant = "outlined", status = "primary", border = { radius: "sm" }, text, icon, }) => {
     let _chipClassName = ["ar-chip"];
     _chipClassName.push(...Utils.GetClassName(variant, status, border, undefined, undefined, undefined));
-    return React.createElement("span", { className: _chipClassName.map((c) => c).join(" ") }, text);
+    return (React.createElement("div", { className: _chipClassName.map((c) => c).join(" ") },
+        icon?.element && React.createElement("span", null, icon?.element),
+        React.createElement("span", null, text)));
 };
 export default Chip;

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

@@ -40,12 +40,12 @@ const Confirm = ({ children, title, message, content, onConfirm }) => {
             document.addEventListener("click", handleClickOutSide);
             document.addEventListener("keydown", handleKeys);
             document.addEventListener("scroll", handleScroll);
+        }
+        else {
             // Dinleyicileri kaldır.
-            return () => {
-                document.removeEventListener("click", handleClickOutSide);
-                document.removeEventListener("keydown", handleKeys);
-                document.removeEventListener("scroll", handleScroll);
-            };
+            document.removeEventListener("click", handleClickOutSide);
+            document.removeEventListener("keydown", handleKeys);
+            document.removeEventListener("scroll", handleScroll);
         }
     }, [open]);
     return (React.createElement("div", { ref: _arConfirmWrapper, className: "ar-confirm-wrapper", role: "dialog" },

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

@@ -25,13 +25,14 @@ const Modal = ({ children, open, title, size = "normal", footer }) => {
     // useEffects
     useEffect(() => {
         if (open.get) {
+            document.body.style.overflow = "hidden";
             // document.addEventListener("click", handleClickOutSide);
             document.addEventListener("keydown", handleKeys);
-            // Dinleyicileri kaldır.
-            return () => {
-                // document.removeEventListener("click", handleClickOutSide);
-                document.removeEventListener("keydown", handleKeys);
-            };
+        }
+        else {
+            document.body.style.removeProperty("overflow");
+            // document.removeEventListener("click", handleClickOutSide);
+            document.removeEventListener("keydown", handleKeys);
         }
     }, [open.get]);
     return (React.createElement("div", { className: _modalWrapperClassName.map((c) => c).join(" ") },

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

@@ -3,40 +3,63 @@ import { useEffect, useRef, useState } from "react";
 import React from "react";
 import "../../../assets/css/components/feedback/notification/notification.css";
 const Notification = ({ title, message, status, direction = "bottom-left", trigger }) => {
-    // useRefs
     const _firstLoad = useRef(false);
-    // const _index = useRef<number>(0);
     const _notificationItems = useRef([]);
     const _interval = useRef();
-    // useStates
+    // const _automaticRemoveInterval = useRef<NodeJS.Timeout>();
+    // const _closedInterval = useRef<NodeJS.Timeout>();
+    const _i = useRef(0);
     const [items, setItems] = useState([]);
-    // useEffects
     useEffect(() => {
         if (!_firstLoad.current) {
             _firstLoad.current = true;
             return;
         }
-        setItems((items) => [...items, { title, message, status, direction }]);
+        setItems((prevItems) => [...prevItems, { id: _i.current++, title, message, status, direction }]);
     }, [trigger]);
     useEffect(() => {
         if (items.length === 0)
             return;
-        // Ekleme işlemi bittikten bir süre sonra tekrar kaldırma işlemi yapılmaktadır.
+        // 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((items) => items.slice(1));
+            setItems((prevItems) => prevItems.slice(1));
+            // if (firstNotification) firstNotification.classList.remove("closed");
             clearTimeout(_interval.current);
         }, 3000);
+        return () => {
+            // clearTimeout(_automaticRemoveInterval.current);
+            clearTimeout(_interval.current);
+        };
     }, [items]);
-    return items.map((item, index) => {
-        let bottom = 0;
-        // Önceki öğenin yüksekliğini dikkate alarak `bottom` hesaplanıyor.
-        if (_notificationItems.current[index - 1] && index > 0) {
+    const getBottomPosition = (index) => {
+        let bottom = 30; // Başlangıçta 30px'lik bir boşluk ekliyoruz.
+        // Önceki öğenin yüksekliğini dikkate alarak bottom hesaplanıyor.
+        if (_notificationItems.current[index - 1]) {
             bottom = _notificationItems.current.slice(0, index).reduce((acc, el) => {
                 const rect = el.getBoundingClientRect();
-                return acc + rect.height + 20; // Önceki öğelerin yüksekliğini topluyoruz.
-            }, 0);
+                return acc + rect.height + 20; // +20 değeri ara boşluğu artıyor.
+            }, 30); // 30px'lik boşluğu başlangıçta ekliyoruz.
         }
-        return (React.createElement("div", { key: index, ref: (element) => (_notificationItems.current[index] = element), className: "ar-notification-item", style: { bottom: `${items.length > 5 ? index * 10.5 : bottom}px` } },
+        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
+                ? {
+                    backgroundColor: `rgba(var(--white-rgb), ${index === items.length - 1 ? 1 : 0.1})`,
+                    backdropFilter: "blur(10px)",
+                    bottom: (index === 0 ? 30 : 10) * (index + 1),
+                }
+                : { bottom } },
             React.createElement("div", { className: "icon" },
                 React.createElement("span", { className: item.status }),
                 React.createElement("span", { className: item.status }),
@@ -46,7 +69,17 @@ const Notification = ({ title, message, status, direction = "bottom-left", trigg
             React.createElement("div", { className: "content" },
                 React.createElement("span", { className: "title" }, item.title),
                 React.createElement("span", { className: "message" }, item.message)),
-            React.createElement("div", { className: "close", onClick: () => setItems((items) => items.filter((_, _index) => _index !== index)) })));
+            React.createElement("div", { className: "close", onClick: () => {
+                    // clearTimeout(_automaticRemoveInterval.current);
+                    clearTimeout(_interval.current);
+                    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);
+                } })));
     });
 };
 export default Notification;

package/dist/components/form/button-action/index.js

@@ -27,14 +27,13 @@ const ButtonAction = ({ buttons }) => {
         if (open) {
             document.addEventListener("click", handleClickOutSide);
             document.addEventListener("keydown", handleKeys);
-            // Sayfa boyutu değiştirilmesi söz konusu olursa eğer bu kısım çalışacaktır.
             window.addEventListener("resize", handleResizeEvent);
+        }
+        else {
             // Dinleyicileri kaldır.
-            return () => {
-                document.removeEventListener("click", handleClickOutSide);
-                document.removeEventListener("keydown", handleKeys);
-                window.removeEventListener("resize", handleResizeEvent);
-            };
+            document.removeEventListener("click", handleClickOutSide);
+            document.removeEventListener("keydown", handleKeys);
+            window.removeEventListener("resize", handleResizeEvent);
         }
     }, [open]);
     return (React.createElement("div", { ref: _arButtonAction, className: "ar-button-action" },

package/dist/components/form/date-picker/index.js

@@ -114,7 +114,7 @@ const DatePicker = ({ onChange, isClock, ...attributes }) => {
             if (isNaN(inputDate.getTime()))
                 return;
             const [date, time] = inputDate.toISOString().split("T");
-            const [clock, ms] = time.split(".");
+            const [clock, _] = time.split(".");
             _beginDate.current.value = !_clockOpen.current ? date : `${date}T${clock}`;
         }
     };
@@ -216,14 +216,12 @@ const DatePicker = ({ onChange, isClock, ...attributes }) => {
             document.addEventListener("click", handleClickOutSide);
             document.addEventListener("keydown", handleKeys);
             document.addEventListener("scroll", handleScroll);
-            // Dinleyicileri kaldır ve zamanlayıcıyı temizle.
-            return () => {
-                document.removeEventListener("click", handleClickOutSide);
-                document.removeEventListener("keydown", handleKeys);
-                document.removeEventListener("scroll", handleScroll);
-            };
         }
         else {
+            // Dinleyicileri kaldır ve zamanlayıcıyı temizle.
+            document.removeEventListener("click", handleClickOutSide);
+            document.removeEventListener("keydown", handleKeys);
+            document.removeEventListener("scroll", handleScroll);
             setCalendarClassName((prev) => [...prev, "closed"]);
         }
     }, [dateTrigger, calendarOpen]);

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

@@ -153,15 +153,13 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
             document.addEventListener("click", handleClickOutSide);
             document.addEventListener("keydown", handleKeys);
             document.addEventListener("scroll", handleScroll);
-            // Dinleyicileri kaldır ve zamanlayıcıyı temizle.
-            return () => {
-                clearTimeout(_otoFocus);
-                document.removeEventListener("click", handleClickOutSide);
-                document.removeEventListener("keydown", handleKeys);
-                document.removeEventListener("scroll", handleScroll);
-            };
         }
         else {
+            // Dinleyicileri kaldır ve zamanlayıcıyı temizle.
+            clearTimeout(_otoFocus);
+            document.removeEventListener("click", handleClickOutSide);
+            document.removeEventListener("keydown", handleKeys);
+            document.removeEventListener("scroll", handleScroll);
             // Options paneli kapanma süresi 250ms.
             // 300ms sonra temizlenmesinin sebebi kapanırken birder veriler gerliyor ve panel yüksekliği artıyor.
             setTimeout(() => {

package/package.json

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