ar-design 0.4.52 → 0.4.54

package/dist/assets/css/components/charts/gantt/styles.css

@@ -0,0 +1,49 @@
+.ar-gantt-chart {
+  background-color: var(--gray-700);
+  fill: var(--gray-700);
+  border-radius: var(--border-radius-lg);
+  font-family: var(--system);
+  box-shadow: 0px 10px 15px -5px rgba(var(--black-rgb), 0.1);
+
+  > .header {
+    fill: var(--white);
+    height: 75px;
+
+    > .title-group {
+      > .title {
+        fill: var(--gray-700);
+        font-size: 16px;
+        font-weight: bold;
+      }
+
+      > .title-description {
+        fill: var(--gray-500);
+        font-size: 13.28px;
+      }
+    }
+  }
+
+  > .body {
+    > .time-and-bars {
+      transition: transform 250ms ease-in-out;
+
+      &.dragging {
+        transition: none !important;
+      }
+    }
+
+    > .left-axis {
+      fill: var(--white);
+
+      > .label-list {
+        > .label-row {
+          > .label-text {
+            fill: var(--gray-700);
+            font-size: 14px;
+            dominant-baseline: central;
+          }
+        }
+      }
+    }
+  }
+}

package/dist/assets/css/components/feedback/alert/styles.css

@@ -14,6 +14,7 @@
 }
 
 .ar-alert ul {
+  list-style: none;
   display: flex;
   flex-direction: column;
   gap: 0.5rem 0;

package/dist/assets/css/components/navigation/menu/styles.css

@@ -13,7 +13,7 @@
 
     li {
       list-style: none;
-      height: 2rem;
+      height: auto; /* DÜZELTİLMEDİ: Sabit 2rem kaldırıldı, li'nin alt menüyle büyümesi sağlandı */
 
       > ul.submenu {
         display: grid;
@@ -46,7 +46,7 @@
         align-items: center;
         gap: 0.5rem;
         width: 100%;
-        height: inherit;
+        height: 2rem; /* DÜZELTİLMEDİ: inherit yerine ana eleman yüksekliği buraya sabitlendi */
         padding: 0.3rem;
         white-space: nowrap;
         cursor: pointer;

package/dist/components/charts/gantt/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import "../../../assets/css/components/charts/gantt/styles.css";
+declare const Gantt: React.FC<{}>;
+export default Gantt;

package/dist/components/charts/gantt/index.js

@@ -0,0 +1,193 @@
+import React, { useCallback, useRef, useState } from "react";
+import "../../../assets/css/components/charts/gantt/styles.css";
+const tasks = [
+    {
+        id: "ffa5c782-f482-49ed-acd5-f5cab8b2c39e",
+        name: "Turksat2LoV10000",
+        start: "2026-04-22T09:30:00Z",
+        end: "2026-04-22T14:30:00Z",
+    },
+    {
+        id: "ff68947f-b2c2-4621-b5db-fd57702d037a",
+        name: "Turksat2LoV10000",
+        start: "2026-08-31T09:30:00Z",
+        end: "2026-08-31T14:30:00Z",
+    },
+    {
+        id: "ff2e87f5-9b3c-470d-bda9-dfea1851680c",
+        name: "IRD 6",
+        start: "2026-04-15T10:30:00Z",
+        end: "2026-04-15T17:30:00Z",
+    },
+];
+const Gantt = () => {
+    // refs
+    const _svg = useRef(null);
+    const _mapIsMoveField = useRef(null);
+    // states
+    const [scrollX, setScrollX] = useState(0);
+    const [isDragging, setIsDragging] = useState(false);
+    const [startX, setStartX] = useState(0);
+    // variables
+    const TIMELINE = generateGanttTimeline(tasks);
+    const SVG_WIDTH = "100%";
+    const SVG_HEIGHT = 2400;
+    const HEADER_HEIGHT = 75;
+    const STROKE_WIDTH = 0.5;
+    const LABEL_WIDTH = 120;
+    const ROW_HEIGHT = 45;
+    let PREVMATCHMONT = 0;
+    let PREVMATCHDAY = 0;
+    // methods
+    const handleMouseDown = (e) => {
+        if (e.button !== 0)
+            return;
+        setIsDragging(true);
+        // Tıklanılan ilk X pozisyonu ile mevcut kaydırma değerini hafızaya alıyoruz.
+        setStartX(e.clientX + Math.abs(scrollX));
+    };
+    const handleMouseMove = useCallback((e) => {
+        if (!isDragging)
+            return;
+        let newScrollX = startX - e.clientX;
+        if (newScrollX < 0)
+            newScrollX = 0;
+        setScrollX(newScrollX);
+    }, [isDragging, startX]);
+    const handleMouseUpOrLeave = () => {
+        const svgRect = _svg.current?.getBoundingClientRect();
+        const mapIsMoveFieldRect = _mapIsMoveField.current?.getBoundingClientRect();
+        if (svgRect && mapIsMoveFieldRect) {
+            if (svgRect.right > mapIsMoveFieldRect.right) {
+                const targetLeft = svgRect.width - mapIsMoveFieldRect.width;
+                setScrollX(targetLeft - LABEL_WIDTH);
+            }
+        }
+        setIsDragging(false);
+    };
+    return (React.createElement("svg", { ref: _svg, xmlns: "http://www.w3.org/2000/svg", 
+        // viewBox={`0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`}
+        width: SVG_WIDTH, height: SVG_HEIGHT, className: "ar-gantt-chart" },
+        React.createElement("g", { className: "header", width: "100%" },
+            React.createElement("rect", { x: 0, y: 0, width: "100%", height: HEADER_HEIGHT }),
+            React.createElement("g", { transform: `translate(25, ${HEADER_HEIGHT / 2})`, className: "title-group" },
+                React.createElement("text", { className: "title" }, "Ar Gantt Chart"),
+                React.createElement("text", { y: 20, className: "title-description" }, "Daily View")),
+            React.createElement("line", { x1: "0", y1: HEADER_HEIGHT, x2: "100%", y2: HEADER_HEIGHT, opacity: 0.25, stroke: "var(--black)", strokeWidth: 1 })),
+        React.createElement("g", { className: "body", transform: `translate(0, ${HEADER_HEIGHT + ROW_HEIGHT * 2})` },
+            React.createElement("g", { className: `${isDragging ? "dragging" : "no-dragging"} time-and-bars`, transform: `translate(${LABEL_WIDTH - Math.abs(scrollX)}, 0)`, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUpOrLeave, onMouseLeave: handleMouseUpOrLeave, style: { cursor: isDragging ? "grabbing" : "grab", userSelect: "none" } },
+                React.createElement("g", null,
+                    TIMELINE.days.map((day, index) => {
+                        const xPos = (index + 1) * 60;
+                        const nextDay = new Date(day.date);
+                        nextDay.setDate(nextDay.getDate() + 1);
+                        const isLastDayOfMonth = day.date.getMonth() !== nextDay.getMonth();
+                        const isSunday = day.date.getDay() === 0;
+                        if (!isSunday && !isLastDayOfMonth)
+                            return;
+                        const currentMonthNum = day.date.getMonth();
+                        const currentDayNum = day.date.getDate();
+                        const dayDiff = currentDayNum - (currentMonthNum !== PREVMATCHMONT ? 0 : PREVMATCHDAY);
+                        // Bir sonraki turda kullanabilmek için hafızayı güncelliyoruz.
+                        PREVMATCHMONT = currentMonthNum;
+                        PREVMATCHDAY = currentDayNum;
+                        return (React.createElement("g", { key: index },
+                            React.createElement("line", { x1: xPos, y1: -ROW_HEIGHT * 2, x2: xPos, y2: 0, opacity: 0.25, stroke: "var(--white)", strokeWidth: STROKE_WIDTH }),
+                            React.createElement("text", { x: xPos - (dayDiff * 60) / 2, y: -ROW_HEIGHT * 2 + ROW_HEIGHT / 2, fill: "var(--white)", fontSize: "12", textAnchor: "middle", dominantBaseline: "central" }, day.date.toLocaleDateString("tr-TR", { month: "long" }))));
+                    }),
+                    TIMELINE.days.map((day, index) => {
+                        const xPos = (index + 1) * 60; // 01:00 -> 60px, 02:00 -> 120px...
+                        return (React.createElement("g", { key: index },
+                            React.createElement("text", { x: (index + 1) * 60 - 30, y: -ROW_HEIGHT + ROW_HEIGHT / 2, fill: day.isWeekend ? "var(--red-500)" : "var(--white)", fontSize: "12", textAnchor: "middle", dominantBaseline: "central" },
+                                String(day.number).padStart(2, "0"),
+                                " ",
+                                day.name),
+                            React.createElement("line", { x1: xPos, y1: 0, x2: xPos, y2: SVG_HEIGHT, opacity: 0.25, stroke: "var(--white)", strokeWidth: STROKE_WIDTH, strokeDasharray: "5,5" })));
+                    }),
+                    React.createElement("line", { x1: 0, y1: -ROW_HEIGHT, x2: TIMELINE.days.length * 60, y2: -ROW_HEIGHT, opacity: 0.25, stroke: "var(--white)", strokeWidth: 1 }),
+                    React.createElement("line", { x1: 0, y1: 0, x2: TIMELINE.days.length * 60, y2: 0, opacity: 0.25, stroke: "var(--white)", strokeWidth: 1 })),
+                React.createElement("g", { transform: `translate(0, 0)` }, tasks.map((task, index) => {
+                    const taskStart = new Date(task.start);
+                    const taskEnd = new Date(task.end);
+                    // 1. Proje başlangıcından bu görevin başlangıcına kadar geçen toplam milisaniye
+                    const diffMsFromStart = taskStart.getTime() - Number(TIMELINE.timelineStart?.getTime());
+                    // Milisaniyeyi saate çeviriyoruz
+                    const hoursFromStart = diffMsFromStart / (1000 * 60 * 60);
+                    // X Konumu: Geçen toplam saati, saat başına düşen piksel genişliğiyle çarpıyoruz
+                    const x = hoursFromStart * (60 / 24);
+                    // 2. Görevin toplam süresini saat cinsinden buluyoruz
+                    const durationHours = (taskEnd.getTime() - taskStart.getTime()) / (1000 * 60 * 60);
+                    // Genişlik (Width): Süreyi saat başına düşen pikselle çarpıyoruz
+                    const width = durationHours * (60 / 24);
+                    // 3. Dikey Konumlandırma (Senin mevcut mantığın)
+                    const height = ROW_HEIGHT / 1.5;
+                    const y = index * ROW_HEIGHT + height / 4;
+                    return (React.createElement("g", { key: task.id },
+                        React.createElement("rect", { x: x, y: y, width: width, height: height, fill: "#000", rx: 3 }),
+                        width > 60 && (React.createElement("text", { x: x + width / 2, y: y + height / 2 + 4, fontSize: 12, fontWeight: "600", fill: "var(--black)", textAnchor: "middle" // Metni X koordinatına göre tam ortalar
+                         }, task.name))));
+                })),
+                React.createElement("rect", { ref: _mapIsMoveField, x: 0, y: -ROW_HEIGHT, width: TIMELINE.days.length * 60, height: SVG_HEIGHT, fill: "transparent", pointerEvents: "all" })),
+            React.createElement("g", { className: "left-axis" },
+                React.createElement("rect", { x: 0, y: -ROW_HEIGHT * 2, width: LABEL_WIDTH, height: SVG_HEIGHT }),
+                React.createElement("g", { className: "label-list" }, tasks.map((task, index) => {
+                    const y = index * ROW_HEIGHT;
+                    return (React.createElement("g", { key: task.id, className: "label-row" },
+                        React.createElement("text", { x: "10", y: y + ROW_HEIGHT / 2, className: "label-text" }, task.name),
+                        React.createElement("line", { x1: "0", y1: y + ROW_HEIGHT, x2: LABEL_WIDTH, y2: y + ROW_HEIGHT, stroke: "var(--black)", strokeWidth: "0.5", opacity: 0.25 }),
+                        React.createElement("line", { x1: LABEL_WIDTH, y1: y + ROW_HEIGHT, x2: 24 * 60, y2: y + ROW_HEIGHT, opacity: 0.25, stroke: "var(--white)", strokeWidth: STROKE_WIDTH, strokeDasharray: "5,5" })));
+                }))))));
+};
+const generateGanttTimeline = (tasks) => {
+    if (!tasks || tasks.length === 0) {
+        return { minDate: null, maxDate: null, months: [], days: [] };
+    }
+    // 1. En erken başlangıç ve en geç bitiş tarihlerini buluyoruz.
+    let minDate = new Date(tasks[0].start);
+    let maxDate = new Date(tasks[0].end);
+    tasks.forEach((task) => {
+        const start = new Date(task.start);
+        const end = new Date(task.end);
+        if (start < minDate)
+            minDate = start;
+        if (end > maxDate)
+            maxDate = end;
+    });
+    // Şemanın düzgün görünmesi için başlangıcı o ayın 1'ine,
+    // bitişi ise o ayın son gününe yuvarlamak yerleşim açısından daha iyi sonuç verir.
+    const startTimeline = new Date(minDate.getFullYear(), minDate.getMonth(), 1);
+    const endTimeline = new Date(maxDate.getFullYear(), maxDate.getMonth() + 1, 0); // Ayın son günü
+    const months = [];
+    const days = [];
+    // 2. Günleri ve Ayları döngüyle oluşturuyoruz.
+    const current = new Date(startTimeline);
+    while (current <= endTimeline) {
+        // Gün listesini doldur.
+        const dayOfWeek = current.getDay();
+        days.push({
+            date: new Date(current),
+            number: current.getDate(),
+            name: current.toLocaleDateString("tr-TR", { weekday: "short" }), // Pzt, Sal...
+            isWeekend: dayOfWeek === 0 || dayOfWeek === 6, // Hafta sonu kontrolü (Gantt'ta boyamak için).
+        });
+        // Ay listesini doldur. (Eğer listede bu ay henüz yoksa ekle)
+        const year = current.getFullYear();
+        const number = current.getMonth();
+        const name = current.toLocaleDateString("tr-TR", { month: "long" }); // Ocak, Şubat...
+        const monthExists = months.some((m) => m.year === year && m.number === number);
+        if (!monthExists) {
+            // O ayın toplam gün sayısını bulalım.
+            const totalDays = new Date(year, number + 1, 0).getDate();
+            months.push({ year, number, name, totalDays });
+        }
+        // Bir sonraki güne geç.
+        current.setDate(current.getDate() + 1);
+    }
+    return {
+        timelineStart: startTimeline,
+        timelineEnd: endTimeline,
+        months, // Üst zaman bandı için (Örn: Ocak, Şubat)
+        days, // Alt zaman bandı için (Örn: 1, 2, 3... veya haftalık kırılım için)
+    };
+};
+export default Gantt;

package/dist/components/form/input/phone/Phone.js

@@ -1,5 +1,5 @@
 "use client";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import Input from "..";
 import Select from "../../select";
 import PHONE from "../../../../libs/infrastructure/shared/PHONE";
@@ -9,6 +9,9 @@ const Phone = ({ variant, color, options, values, onSelected, validation, ...att
     // states
     const [_value, setValue] = useState("");
     const [selected, setSelected] = useState(undefined);
+    // options referans kararlılığı için JSON key
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const optionsKey = useMemo(() => JSON.stringify(options), [options]);
     // methods
     const handleClick = () => {
         const input = _input.current;
@@ -21,31 +24,18 @@ const Phone = ({ variant, color, options, values, onSelected, validation, ...att
     useEffect(() => {
         setValue(values.value);
         setSelected(options?.find((option) => option.value === values.option));
-    }, [values]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [values.value, values.option, optionsKey]);
     return (React.createElement("div", { className: "ar-input-phone-wrapper" },
         options && (React.createElement(Select, { style: { width: 130 }, variant: "outlined", color: "light", options: options, value: selected, onChange: (option) => {
                 onSelected?.(option);
                 setSelected(option);
-            } })),
+            }, validation: validation, config: { validation: { text: "hidden" } } })),
         React.createElement(Input, { ref: _input, ...attributes, ...(!options ? { style: { borderRadius: "var(--border-radius-sm)" } } : {}), variant: variant, color: color, value: PHONE.FormatByMask(selected?.value, _value), type: "tel", inputMode: "decimal", onChange: (event) => {
                 if (attributes.disabled)
                     return;
-                (() => {
-                    if (attributes.onChange) {
-                        const { id, name, value, type, dataset } = event.target;
-                        attributes.onChange({
-                            ...event,
-                            target: {
-                                ...event.target,
-                                id: id,
-                                name: name,
-                                value: value,
-                                type: type,
-                                dataset: dataset,
-                            },
-                        });
-                    }
-                })();
+                setValue(event.target.value);
+                attributes.onChange?.(event);
             }, onClick: handleClick, validation: validation })));
 };
 export default Phone;

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

@@ -28,5 +28,8 @@ export type Props = {
     readOnly?: boolean;
     config?: {
         clear?: boolean;
+        validation?: {
+            text: "visible" | "hidden";
+        };
     };
 } & (IMultiple | ISingle) & IVariant & IColors & IBorder & IIcon & ISize & IUpperCase & IValidation & IDisabled;

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

@@ -1,12 +1,12 @@
 "use client";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState, useMemo } from "react";
 import Input from "../input";
 import "../../../assets/css/components/form/select/styles.css";
 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, color, border = { radius: "sm" }, style, options, value, onChange, onSearch, onClick, onCreate, multiple, placeholder, validation, upperCase, disabled, readOnly, config = { clear: true }, }) => {
+const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }, style, options, value, onChange, onSearch, onClick, onCreate, multiple, placeholder, validation, upperCase, disabled, readOnly, config = { clear: true, validation: { text: "visible" } }, }) => {
     const _selectionClassName = ["selections"];
     // refs
     const _arSelect = useRef(null);
@@ -16,16 +16,18 @@ const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }
     const _options = useRef(null);
     const _optionItems = useRef([]);
     const _searchField = useRef(null);
-    // const _searchTimeOut = useRef<NodeJS.Timeout | null>(null);
     let _otoFocus = useRef(null).current;
     let _navigationIndex = useRef(0);
     // states
     const [optionsOpen, setOptionsOpen] = useState(false);
-    const [filteredOptions, setFilteredOptions] = useState([]);
+    const [filteredOptions, setFilteredOptions] = useState(() => options ?? []);
     const [isSearchTextEqual, setIsSearchTextEqual] = useState(false);
     const [searchText, setSearchText] = useState("");
     const [singleInputText, setSingleInputText] = useState("");
     const [navigationIndex, setNavigationIndex] = useState(0);
+    // options referans kararlılığı için JSON key
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const optionsKey = useMemo(() => JSON.stringify(options), [options]);
     _selectionClassName.push(...Utils.GetClassName(variant, undefined, validation?.text ? "red" : "light", border, undefined, undefined, undefined));
     // methods
     const handleClickOutSide = (event) => {
@@ -38,22 +40,14 @@ const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }
         const optionItems = _optionItems.current.filter((optionItem) => optionItem !== null);
         if (key === "ArrowUp" || key === "ArrowLeft") {
             setNavigationIndex((prev) => {
-                let result = 0;
-                if (prev > 0)
-                    result = prev - 1;
-                if (prev === 0)
-                    result = optionItems.length - 1;
+                const result = prev > 0 ? prev - 1 : optionItems.length - 1;
                 _navigationIndex.current = result;
                 return result;
             });
         }
         else if (key === "ArrowDown" || key === "ArrowRight") {
             setNavigationIndex((prev) => {
-                let result = 0;
-                if (prev === optionItems.length - 1)
-                    result = 0;
-                if (prev < optionItems.length - 1)
-                    result = prev + 1;
+                const result = prev === optionItems.length - 1 ? 0 : prev + 1;
                 _navigationIndex.current = result;
                 return result;
             });
@@ -63,17 +57,10 @@ const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }
                 return;
             optionItems[_navigationIndex.current]?.click();
         }
-        else if (key === "Escape")
+        else if (key === "Escape") {
             setOptionsOpen(false);
+        }
     };
-    // const handleSearch = (value: string) => {
-    //   if (searchText.length === 0 || !onSearch) return;
-    //   if (_searchTimeOut.current) clearTimeout(_searchTimeOut.current);
-    //   _searchTimeOut.current = setTimeout(() => {
-    //     setSearchText(value);
-    //     onSearch(value);
-    //   }, 750);
-    // };
     const handlePosition = () => {
         if (_options.current) {
             const optionRect = _options.current.getBoundingClientRect();
@@ -134,7 +121,6 @@ const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }
             React.createElement("span", { className: "plus" }, "+"),
             singleInputText.length !== 0 ? singleInputText : searchText))));
     };
-    // Özel büyük harfe dönüştürme işlevi.
     const convertToUpperCase = (str) => {
         return str
             .replace(/ş/g, "S")
@@ -151,45 +137,37 @@ const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }
             .replace(/Ü/g, "U")
             .replace(/[a-z]/g, (match) => match.toUpperCase());
     };
-    // useEffects
+    // value değiştiğinde input metnini güncelle
     useEffect(() => {
         if (multiple)
             setSearchText("");
         else
             setSingleInputText(value?.text ?? "");
-    }, [value]);
-    useEffect(() => setFilteredOptions(options), [options]);
+    }, [value, multiple]);
+    // options dışarıdan değiştiğinde filtreyi güncelle (searchText ile uyumlu)
+    useEffect(() => {
+        setFilteredOptions((options ?? []).filter((option) => option.text.toLocaleLowerCase().includes(searchText.toLocaleLowerCase())));
+        setIsSearchTextEqual((options ?? []).some((option) => option.text.toLocaleLowerCase() === searchText.toLocaleLowerCase()));
+        // optionsKey kullanarak referans karşılaştırması yerine içerik karşılaştırması yapıyoruz
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [optionsKey]);
+    // options paneli açılıp kapandığında
     useEffect(() => {
         if (optionsOpen) {
             setTimeout(() => handlePosition(), 0);
-            if (!multiple) {
-                // const optionItems = _optionItems.current.filter((optionItem) => optionItem !== null);
-                // Scroll ile kaydırma işlemi
-                // if (_options.current) {
-                //   const list = _options.current.querySelector("ul") as HTMLUListElement;
-                //   list.scrollTo({
-                //     top: optionItems[_selectedItemIndex.current].offsetTop,
-                //     behavior: "smooth",
-                //   });
-                // }
-                if (_singleInput.current) {
-                    setSingleInputText("");
-                    _singleInput.current.placeholder = value?.text || `${validation ? "* " : ""}${placeholder ?? ""}` || "";
-                }
+            if (!multiple && _singleInput.current) {
+                setSingleInputText("");
+                _singleInput.current.placeholder = value?.text || `${validation ? "* " : ""}${placeholder ?? ""}` || "";
             }
-            // Options açıldıktan 100ms sonra arama kutusuna otomatik olarak focus oluyor.
             _otoFocus = setTimeout(() => {
                 if (_searchField.current)
                     _searchField.current.focus();
             }, 250);
-            // Options paneli için olay dinleyileri ekleniyor.
-            window.addEventListener("blur", () => setOptionsOpen(false));
+            window.addEventListener("blur", handleBlur);
             document.addEventListener("click", handleClickOutSide);
             document.addEventListener("keydown", handleKeys);
         }
         else {
-            // Options paneli kapanma süresi 250ms.
-            // 300ms sonra temizlenmesinin sebebi kapanırken birder veriler gerliyor ve panel yüksekliği artıyor.
             setTimeout(() => setSearchText(""), 300);
             if (multiple) {
                 if (_searchField.current)
@@ -204,54 +182,51 @@ const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }
         }
         return () => {
             _otoFocus && clearTimeout(_otoFocus);
-            window.removeEventListener("blur", () => setOptionsOpen(false));
+            window.removeEventListener("blur", handleBlur);
             document.removeEventListener("click", handleClickOutSide);
             document.removeEventListener("keydown", handleKeys);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [optionsOpen]);
+    // arama metni değiştiğinde filtrele
     useEffect(() => {
         if (searchText.length > 0 && onSearch) {
             onSearch(searchText);
         }
         else {
-            // Arama kriterlerine uygun olan değerleri bir state e gönderiyoruz.
-            setFilteredOptions(options?.filter((option) => {
+            setFilteredOptions((options ?? []).filter((option) => {
                 if (!optionsOpen)
-                    return option;
+                    return true;
                 return option.text.toLocaleLowerCase().includes(searchText.toLocaleLowerCase());
             }));
-            setIsSearchTextEqual(options?.some((option) => {
+            setIsSearchTextEqual((options ?? []).some((option) => {
                 if (!optionsOpen)
-                    return option;
-                return option.text.toLocaleLowerCase() == searchText.toLocaleLowerCase();
+                    return false;
+                return option.text.toLocaleLowerCase() === searchText.toLocaleLowerCase();
             }));
         }
-        // Arama yapılması durumunda değerleri sıfırla.
         setNavigationIndex(0);
         _navigationIndex.current = 0;
-        // Arama yapılması durumunda arama sonuçlarından ilk olan değeri işaretle.
-        const optionItems = _optionItems.current.filter((optionItem) => optionItem !== null);
+        const optionItems = _optionItems.current.filter((item) => item !== null);
         optionItems[_navigationIndex.current]?.classList.add("navigate-with-arrow-keys");
-        // Yeniden konumlandır.
         setTimeout(() => handlePosition(), 0);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [searchText]);
+    // klavye navigasyonu highlight
     useEffect(() => {
-        // Seçilen öğeye 'navigate-with-arrow-keys' sınıfını ekle
         _optionItems.current
-            .filter((optionItem) => optionItem !== null)
+            .filter((item) => item !== null)
             .forEach((item, index) => {
             if (index === navigationIndex) {
                 item?.classList.add("navigate-with-arrow-keys");
-                item.scrollIntoView({
-                    behavior: "smooth",
-                    block: "nearest",
-                });
+                item.scrollIntoView({ behavior: "smooth", block: "nearest" });
             }
             else {
                 item?.classList.remove("navigate-with-arrow-keys");
             }
         });
     }, [navigationIndex]);
+    const handleBlur = () => setOptionsOpen(false);
     return (React.createElement("div", { ref: _arSelect, className: "ar-select-wrapper" },
         React.createElement("div", { ref: _multipleInput, className: "ar-select" },
             multiple ? (React.createElement("div", { className: "wrapper" },
@@ -270,11 +245,9 @@ const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }
                           )`,
                             },
                         }
-                        : {}), className: _selectionClassName.map((c) => c).join(" "), onClick: () => {
+                        : {}), className: _selectionClassName.join(" "), onClick: () => {
                         onClick && onClick();
-                        (() => {
-                            setOptionsOpen((prev) => !prev);
-                        })();
+                        setOptionsOpen((prev) => !prev);
                     } },
                     React.createElement("div", { className: "items" }, value.map((_value, index) => (React.createElement(Chip, { key: index, variant: status?.selected?.variant || "filled", color: status?.selected?.color || status?.color, text: _value.text }))))),
                 React.createElement("span", { ref: _placeholder, className: `placeholder ${value.length > 0 ? "visible" : "hidden"}`, onClick: () => {
@@ -282,13 +255,9 @@ const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }
                         setOptionsOpen((prev) => !prev);
                     } },
                     validation ? "* " : "",
-                    placeholder))) : (React.createElement(Input, { ref: _singleInput, style: { ...style, paddingRight: config.clear === false ? "1.5rem" : "3.5rem" }, variant: variant, color: !Utils.IsNullOrEmpty(validation?.text) ? "red" : color, 
-                // status={!Utils.IsNullOrEmpty(validation?.text) ? "danger" : status}
-                border: { radius: border.radius }, value: singleInputText, onClick: () => {
+                    placeholder))) : (React.createElement(Input, { ref: _singleInput, style: { ...style, paddingRight: config.clear === false ? "1.5rem" : "3.5rem" }, variant: variant, color: !Utils.IsNullOrEmpty(validation?.text) ? "red" : color, border: { radius: border.radius }, value: singleInputText, onClick: () => {
                     onClick && onClick();
-                    (() => {
-                        setOptionsOpen((prev) => !prev);
-                    })();
+                    setOptionsOpen((prev) => !prev);
                 }, onChange: (event) => {
                     !optionsOpen && setOptionsOpen(true);
                     if (upperCase)
@@ -298,7 +267,10 @@ const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }
                     if (event.key === "Enter")
                         return;
                     setSearchText(event.currentTarget.value);
-                }, placeholder: placeholder, validation: validation, disabled: disabled, readOnly: readOnly })),
+                }, placeholder: placeholder, validation: {
+                    ...validation,
+                    text: config.validation?.text === "visible" ? validation?.text : "",
+                }, disabled: disabled, readOnly: readOnly })),
             React.createElement("div", { className: "buttons" },
                 config?.clear === true && (React.createElement("span", { className: `button-clear ${!disabled && (multiple ? value.length > 0 : value) ? "opened" : "closed"}`, onClick: (event) => {
                         if (disabled)
@@ -313,7 +285,7 @@ const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }
                         event.stopPropagation();
                         setOptionsOpen((prev) => !prev);
                     } })),
-            multiple && validation && React.createElement("span", { className: "validation" }, validation.text)),
+            multiple && validation && config.validation?.text === "visible" && (React.createElement("span", { className: "validation" }, validation.text))),
         !disabled &&
             optionsOpen &&
             ReactDOM.createPortal(React.createElement("div", { ref: _options, className: "ar-select-options" },

package/dist/index.d.ts

@@ -10,6 +10,7 @@ import Select from "./components/form/select";
 import Switch from "./components/form/switch";
 import TextEditor from "./components/form/text-editor";
 import Upload from "./components/form/upload";
+import Gantt from "./components/charts/gantt";
 import Calendar from "./components/data-display/calendar";
 import Card from "./components/data-display/card";
 import Chip from "./components/data-display/chip";
@@ -34,4 +35,4 @@ import Pagination from "./components/navigation/pagination";
 import Steps from "./components/navigation/steps";
 import Grid from "./components/data-display/grid-system";
 import Layout from "./components/layout";
-export { Button, ButtonAction, ButtonGroup, Checkbox, DatePicker, Input, Radio, Select, Switch, TextEditor, Upload, Calendar, Card, Chip, Diagram, Divider, DnD, KanbanBoard, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Drawer, Modal, Popover, Progress, Tooltip, Breadcrumb, Menu, Pagination, Steps, Grid, Layout, };
+export { Button, ButtonAction, ButtonGroup, Checkbox, DatePicker, Input, Radio, Select, Switch, TextEditor, Upload, Gantt, Calendar, Card, Chip, Diagram, Divider, DnD, KanbanBoard, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Drawer, Modal, Popover, Progress, Tooltip, Breadcrumb, Menu, Pagination, Steps, Grid, Layout, };

package/dist/index.js

@@ -11,6 +11,8 @@ import Select from "./components/form/select";
 import Switch from "./components/form/switch";
 import TextEditor from "./components/form/text-editor";
 import Upload from "./components/form/upload";
+// Charts
+import Gantt from "./components/charts/gantt";
 // Data Display
 import Calendar from "./components/data-display/calendar";
 import Card from "./components/data-display/card";
@@ -42,6 +44,8 @@ import Layout from "./components/layout";
 export { 
 // Form Elements
 Button, ButtonAction, ButtonGroup, Checkbox, DatePicker, Input, Radio, Select, Switch, TextEditor, Upload, 
+// Charts
+Gantt, 
 // Data Display
 Calendar, Card, Chip, Diagram, Divider, DnD, KanbanBoard, Paper, SyntaxHighlighter, Table, Tabs, Typography, 
 // Feedback

package/dist/libs/core/application/hooks/useValidation.js

@@ -1,147 +1,151 @@
 "use client";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useCallback, useMemo } from "react";
 import Utils from "../../../infrastructure/shared/Utils";
 const useValidation = function (data, params, step) {
-    // refs
     const _errors = useRef({});
-    // states
     const [errors, setErrors] = useState({});
     const [submit, setSubmit] = useState(false);
-    // methods
-    const onSubmit = (callback) => {
-        setSubmit(true);
-        queueMicrotask(() => {
-            let result = true;
-            if (!data || Object.keys(data).length === 0 || params.length === 0)
-                result = false;
-            if (step) {
-                const filteredErrors = Object.fromEntries(Object.entries(_errors.current)
-                    .filter(([key]) => key.startsWith(`${step}_`))
-                    .map(([key, value]) => [key.replace(/^\d+_/, ""), String(value)]));
-                if (Object.keys(filteredErrors).length > 0)
-                    result = false;
+    const paramsKey = useMemo(() => JSON.stringify(params), [params]);
+    const setError = useCallback((key, message, paramStep, trackByValue) => {
+        let _key = paramStep ? `${paramStep}_${key}` : key;
+        if (trackByValue !== undefined)
+            _key = `${_key}_${trackByValue}`;
+        _errors.current[_key] = message;
+    }, []);
+    const paramsShape = useCallback((param, value, trackByValue) => {
+        const vLength = value ? value.length : 0;
+        const getKey = (subkey) => {
+            if (!subkey)
+                return param.key;
+            const levels = subkey.split(".");
+            return levels[levels.length - 1];
+        };
+        const handleValidation = (key, s) => {
+            // Zorunluluk Kontrolleri (Geliştirildi).
+            if (s.type === "required" && Utils.IsNullOrEmpty(value)) {
+                setError(key, s.message, param.step, trackByValue);
+                return;
             }
-            else {
-                if (Object.keys(_errors.current).length > 0)
-                    result = false;
+            const validationTypes = ["phone", "email", "iban", "account-number"];
+            if (validationTypes.includes(s.type) && Utils.IsNullOrEmpty(value)) {
+                setError(key, s.message, param.step, trackByValue);
+                return;
             }
-            callback(result);
+            // Uzunluk Kontrolleri.
+            if (s.type === "minimum" && vLength < s.value) {
+                setError(key, Utils.StringFormat(s.message, s.value), param.step, trackByValue);
+            }
+            if (s.type === "maximum" && vLength > s.value) {
+                setError(key, Utils.StringFormat(s.message, s.value), param.step, trackByValue);
+            }
+            // Format (Regex) Kontrolleri (Sadece değer doluysa çalışır).
+            if (value && !Utils.IsNullOrEmpty(value)) {
+                const phoneRegex = /^\d{7,14}$/;
+                const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+                const ibanRegex = /^TR\d{24}$/;
+                const accountNumberRegex = /^\d{6,16}$/;
+                if (s.type === "phone" && !phoneRegex.test(value.replace(/\D/g, ""))) {
+                    setError(key, s.message, param.step, trackByValue);
+                }
+                if (s.type === "email" && !emailRegex.test(value)) {
+                    setError(key, s.message, param.step, trackByValue);
+                }
+                if (s.type === "iban" && !ibanRegex.test(value.replace(/\s/g, ""))) {
+                    setError(key, s.message, param.step, trackByValue);
+                }
+                if (s.type === "account-number" && !accountNumberRegex.test(value)) {
+                    setError(key, s.message, param.step, trackByValue);
+                }
+            }
+        };
+        param.shape?.forEach((s) => {
+            const key = getKey(param.subkey);
+            // ÖNEMLİ KONTROL: Eğer bu alan için zaten bir hata basıldıysa,
+            // shape içindeki sonraki kuralları kontrol etme, döngüdeki bu adımı atla!
+            let currentKey = param.step ? `${param.step}_${key}` : key;
+            if (trackByValue !== undefined)
+                currentKey = `${currentKey}_${trackByValue}`;
+            // Hafızada zaten bu alanın hatası var, sonrakileri çalıştırma.
+            if (_errors.current[currentKey])
+                return;
+            if (param.where) {
+                if (param.where(data)) {
+                    setError(param.subkey ? key : param.key, s.message, param.step, trackByValue);
+                }
+                return;
+            }
+            handleValidation(key, s);
         });
-    };
-    const setError = (key, message, step, trackByValue) => {
-        let _key = step ? `${step}_${key}` : key;
-        if (trackByValue !== undefined)
-            _key = `${_key}_${trackByValue}`;
-        setErrors((prev) => ({ ...prev, [_key]: message }));
-        _errors.current = { ..._errors.current, [_key]: message };
-    };
-    const handleParams = (param) => {
+    }, [data, setError]);
+    const handleParams = useCallback((param) => {
         const value = data[param.key];
-        // Eğer subkey varsa, onunla işlem yapılacak.
         if (param.subkey) {
             if (param.subkey.includes(".")) {
-                // Subkey içinde birden fazla seviye varsa, her seviyeye inerek değer alınacak.
                 const levels = param.subkey.split(".");
                 let currentData = value;
                 for (const key of levels) {
-                    // Eğer currentData null ya da undefined ise, işlem sonlandırılır.
                     if (!currentData) {
                         paramsShape(param, currentData);
                         return;
                     }
-                    // Seviye bazında ilerleyerek veriye ulaşılır.
                     currentData = currentData[key];
                 }
-                // Son seviyedeki veriyi paramsShape fonksiyonuna gönder.
                 paramsShape(param, currentData);
             }
             else {
                 if (Array.isArray(value)) {
-                    // Eğer value bir dizi ise ve subkey sadece bir seviye ise,
-                    // dizinin her bir elemanına subkey uygulanabilir.
                     const extractedValues = value.map((item) => ({
                         value: item?.[param.subkey],
                         trackByValue: item?.trackByValue,
                     }));
-                    // Elde edilen değerler topluca paramsShape'e gönderilebilir ya da başka bir şekilde işlenebilir.
-                    extractedValues.map((extractedValue) => paramsShape(param, extractedValue.value, extractedValue.trackByValue));
+                    extractedValues.forEach((extractedValue) => paramsShape(param, extractedValue.value, extractedValue.trackByValue));
                 }
                 else {
-                    // Value bir obje ise, subkey doğrudan kullanılır.
                     paramsShape(param, value?.[param.subkey]);
                 }
             }
         }
         else {
-            // Eğer subkey yoksa, doğrudan param.key üzerinden işlem yapılır.
             paramsShape(param, value);
         }
+    }, [data, paramsShape]);
+    // Tüm kuralları senkron çalıştırıp sonucu dönen fonksiyon.
+    const validateAll = useCallback(() => {
+        _errors.current = {};
+        params.forEach((param) => handleParams(param));
+        setErrors({ ..._errors.current });
+        if (!data || Object.keys(data).length === 0 || params.length === 0)
+            return false;
+        if (step) {
+            const filteredErrors = Object.keys(_errors.current).filter((k) => k.startsWith(`${step}_`));
+            return filteredErrors.length === 0;
+        }
+        return Object.keys(_errors.current).length === 0;
+    }, [data, paramsKey, step, handleParams]);
+    const onSubmit = (callback) => {
+        setSubmit(true);
+        const isValid = validateAll();
+        callback(isValid);
     };
-    const paramsShape = (param, value, trackByValue) => {
-        const vLenght = value ? value.length : 0;
-        const getKey = (subkey) => {
-            if (!subkey)
-                return param.key;
-            const levels = subkey.split(".");
-            return levels[levels.length - 1];
-        };
-        const handleValidation = (key, s) => {
-            if (s.type === "required" && Utils.IsNullOrEmpty(value)) {
-                setError(key, s.message, param.step, trackByValue);
-            }
-            if (s.type === "minimum" && vLenght < s.value) {
-                setError(key, Utils.StringFormat(s.message, s.value), param.step, trackByValue);
-            }
-            if (s.type === "maximum" && vLenght > s.value) {
-                setError(key, Utils.StringFormat(s.message, s.value), param.step, trackByValue);
-            }
-            // Regexes
-            // const phoneRegex = /^((\+90|0)?([2-5]\d{2})\d{7}|\+[1-9]\d{7,14})$/;
-            const phoneRegex = /^\d{7,14}$/;
-            const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-            const ibanRegex = /^TR\d{24}$/;
-            const accountNumberRegex = /^\d{6,16}$/;
-            if (s.type === "phone" && value && !phoneRegex.test(value.replace(/\D/g, ""))) {
-                setError(key, s.message, param.step, trackByValue);
-            }
-            if (s.type === "email" && value && !emailRegex.test(value)) {
-                setError(key, s.message, param.step, trackByValue);
-            }
-            if (s.type === "iban" && value && !ibanRegex.test(value.replace(/\s/g, ""))) {
-                setError(key, s.message, param.step, trackByValue);
-            }
-            if (s.type === "account-number" && value && !accountNumberRegex.test(value)) {
-                setError(key, s.message, param.step, trackByValue);
-            }
-        };
-        param.shape?.forEach((s) => {
-            const key = getKey(param.subkey);
-            if (param.where) {
-                if (param.where(data)) {
-                    setError(param.subkey ? key : param.key, s.message, param.step, trackByValue);
-                }
-            }
-            else {
-                handleValidation(key, s);
-            }
-        });
-    };
-    // useEffects
     useEffect(() => {
-        setErrors({});
-        _errors.current = {};
-        if (!submit)
+        if (!submit) {
+            _errors.current = {};
+            setErrors({});
             return;
-        params.forEach((param) => handleParams(param));
-    }, [submit, data]);
+        }
+        validateAll();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data, submit, paramsKey]);
+    // Adım filtresi.
+    const filteredErrors = step
+        ? Object.fromEntries(Object.entries(errors)
+            .filter(([key]) => key.startsWith(`${step}_`))
+            .map(([key, value]) => [key.replace(/^\d+_/, ""), String(value)]))
+        : errors;
     return {
         onSubmit,
         setSubmit,
-        errors: step
-            ? Object.fromEntries(Object.entries(errors)
-                .filter(([key]) => key.startsWith(`${step}_`))
-                .map(([key, value]) => [key.replace(/^\d+_/, ""), String(value)]))
-            : errors,
+        errors: filteredErrors,
     };
 };
 export default useValidation;

package/package.json

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