ar-design 0.4.63 → 0.4.64

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

@@ -9,6 +9,12 @@ const Tooltip = ({ children, text, direction = "top" }) => {
     // states
     const [mouseEnter, setMouseEnter] = useState(false);
     const [_direction, setDirection] = useState(direction);
+    // 💡 Donma ve sonsuz döngüyü engellemek için dışarıdan seçilen ana yönü bir ref'te saklıyoruz
+    const currentInitialDirection = useRef(direction);
+    useEffect(() => {
+        currentInitialDirection.current = direction;
+        setDirection(direction); // Storybook panelinden elle yön değiştiğinde senkronize et
+    }, [direction]);
     // methods
     const handlePosition = useCallback(() => {
         const child = _children.current;
@@ -17,21 +23,46 @@ const Tooltip = ({ children, text, direction = "top" }) => {
             return;
         const margin = 17.5;
         const windowWidth = window.innerWidth;
-        const screenCenterX = windowWidth / 2;
+        const windowHeight = window.innerHeight;
         const childRect = child.getBoundingClientRect();
         const tooltipRect = tooltip.getBoundingClientRect();
-        const isOnRight = childRect.left > screenCenterX;
-        if (direction === "top" || direction === "bottom") {
-            if (isOnRight && tooltipRect.right > windowWidth - 10) {
-                direction = "left";
-            }
-            else if (!isOnRight && tooltipRect.left < 10) {
-                direction = "right";
-            }
+        const spaceTop = childRect.top;
+        const spaceBottom = windowHeight - childRect.bottom;
+        const spaceLeft = childRect.left;
+        const spaceRight = windowWidth - childRect.right;
+        // 💡 Hesaplamaya state'ten değil, doğrudan orijinal seçilen yönden başlıyoruz
+        let finalDirection = currentInitialDirection.current;
+        // Sıkışma durumlarına göre yönü dinamik değiştir
+        if (finalDirection === "top" && spaceTop < tooltipRect.height + margin) {
+            finalDirection = "bottom";
+        }
+        else if (finalDirection === "bottom" && spaceBottom < tooltipRect.height + margin) {
+            finalDirection = "top";
+        }
+        else if (finalDirection === "left" && spaceLeft < tooltipRect.width + margin) {
+            finalDirection = "right";
+        }
+        else if (finalDirection === "right" && spaceRight < tooltipRect.width + margin) {
+            finalDirection = "left";
+        }
+        // Eğer hala hiçbir yere sığmıyorsa en geniş boşluğu bul
+        const maxSpace = Math.max(spaceTop, spaceBottom, spaceLeft, spaceRight);
+        if ((finalDirection === "top" && spaceTop < tooltipRect.height + margin) ||
+            (finalDirection === "bottom" && spaceBottom < tooltipRect.height + margin) ||
+            (finalDirection === "left" && spaceLeft < tooltipRect.width + margin) ||
+            (finalDirection === "right" && spaceRight < tooltipRect.width + margin)) {
+            if (maxSpace === spaceTop)
+                finalDirection = "top";
+            else if (maxSpace === spaceBottom)
+                finalDirection = "bottom";
+            else if (maxSpace === spaceLeft)
+                finalDirection = "left";
+            else if (maxSpace === spaceRight)
+                finalDirection = "right";
         }
         let top = 0;
         let left = 0;
-        switch (direction) {
+        switch (finalDirection) {
             case "top":
                 top = childRect.top - tooltipRect.height - margin;
                 left = childRect.left + childRect.width / 2 - tooltipRect.width / 2;
@@ -49,12 +80,26 @@ const Tooltip = ({ children, text, direction = "top" }) => {
                 left = childRect.left - tooltipRect.width - margin;
                 break;
         }
+        // Ekran taşma koruması
+        if (left < 10)
+            left = 10;
+        if (left + tooltipRect.width > windowWidth - 10) {
+            left = windowWidth - tooltipRect.width - 10;
+        }
         tooltip.style.top = `${top}px`;
         tooltip.style.left = `${left}px`;
-        setDirection(direction);
-    }, []);
-    //useEffects
+        // 💡 KRİTİK DEĞİŞİKLİK: Sadece yön gerçekten değiştiyse state güncellenir.
+        // Bu kontrol MutationObserver'ın yarattığı kısır döngüyü anında kırar.
+        setDirection((prev) => {
+            if (prev !== finalDirection)
+                return finalDirection;
+            return prev;
+        });
+    }, []); // Bağımlılık dizisini boş bırakarak fonksiyonun kimliğini sabitliyoruz
+    // useEffects
     useEffect(() => {
+        window.addEventListener("resize", handlePosition);
+        window.addEventListener("scroll", handlePosition, { passive: true });
         const observer = new MutationObserver(() => {
             handlePosition();
         });
@@ -64,17 +109,19 @@ const Tooltip = ({ children, text, direction = "top" }) => {
             subtree: true,
         });
         return () => {
+            window.removeEventListener("resize", handlePosition);
+            window.removeEventListener("scroll", handlePosition);
             observer.disconnect();
         };
-    }, []);
+    }, [handlePosition]);
     useEffect(() => {
         if (mouseEnter)
             setTimeout(() => handlePosition(), 0);
-    }, [mouseEnter]);
+    }, [mouseEnter, handlePosition]);
     return (React.createElement("div", { className: "ar-tooltip-wrapper" },
         React.createElement("div", { ref: _children, onMouseEnter: () => setMouseEnter(true), onMouseLeave: () => setMouseEnter(false) }, children),
         mouseEnter &&
-            ReactDOM.createPortal(React.createElement("div", { ref: _arTooltip, className: `ar-tooltip ${_direction}` }, Array.isArray(text) ? (text.map((t) => (React.createElement("span", { className: "text" },
+            ReactDOM.createPortal(React.createElement("div", { ref: _arTooltip, className: `ar-tooltip ${_direction}` }, Array.isArray(text) ? (text.map((t, index) => (React.createElement("span", { key: index, className: "text" },
                 React.createElement("span", { className: "bullet" }, "\u2022"),
                 React.createElement("span", null, t))))) : (React.createElement("span", { className: "text" }, text))), document.body)));
 };

package/dist/components/form/date-picker/Props.d.ts

@@ -1,6 +1,5 @@
 import { IBorder, IColors, IStatus, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
 type Props = {
-    label?: string;
     onChange: (value: string) => void;
     config?: {
         locale?: Intl.LocalesArgument;

package/dist/components/form/input/otp/Otp.js

@@ -1,107 +1,122 @@
 "use client";
-import React, { useRef, useCallback } from "react";
+import React, { useRef, useCallback, useState, useEffect } from "react";
 import Input from "..";
 const Otp = ({ character, onChange, ...attributes }) => {
     // refs
     const _inputs = useRef([]);
-    const _isPasteCombo = useRef(false);
-    const _value = useRef({});
+    // states
+    const [otpValues, setOtpValues] = useState(() => Array(character).fill(""));
     // methods
-    const handleInput = useCallback((index) => (event) => {
-        if (attributes.disabled)
-            return;
-        if (_isPasteCombo.current)
-            return;
-        let { value } = event.currentTarget;
-        _value.current = { ..._value.current, [index]: value };
-        if (value.length >= 1) {
-            if (!_inputs.current[index + 1]) {
-                _inputs.current[character - 1]?.focus();
-                _inputs.current[character - 1]?.select();
-            }
-            else {
-                _inputs.current[index + 1]?.focus();
-            }
-        }
+    const triggerChange = (newValues, event) => {
+        setOtpValues(newValues);
+        const combinedValue = newValues.join("");
         onChange?.({
             ...event,
             target: {
                 ...event.currentTarget,
                 name: attributes.name ?? "",
-                value: Object.keys(_value.current)
-                    .sort((a, b) => Number(a) - Number(b))
-                    .map((key) => _value.current[Number(key)])
-                    .join(""),
+                value: combinedValue,
             },
         });
-    }, [onChange, attributes.name, attributes.disabled]);
-    const handleKeyUp = useCallback((index) => (event) => {
-        const input = event.currentTarget;
-        const { value } = input;
-        const beforeInput = _inputs.current[index];
-        // referans
-        const beforeInputValue = beforeInput.value;
-        if (beforeInputValue.length > 1) {
-            let i = 0;
-            const chars = beforeInputValue.split("");
-            const interval = setInterval(() => {
-                const input = _inputs.current[i];
-                if (input) {
-                    input.value = chars[i];
-                    _value.current = { ..._value.current, [i]: chars[i] };
-                    onChange?.({
-                        ...event,
-                        target: {
-                            ...event.currentTarget,
-                            name: attributes.name ?? "",
-                            value: Object.keys(_value.current)
-                                .sort((a, b) => Number(a) - Number(b))
-                                .map((key) => _value.current[Number(key)])
-                                .join(""),
-                        },
-                    });
-                    input.focus();
-                }
-                i++;
-                if (i >= chars.length)
-                    clearInterval(interval);
-            }, 50);
+    };
+    const handleKeyDown = useCallback((index) => (event) => {
+        if (attributes.disabled)
+            return;
+        const { key } = event;
+        const currentInput = _inputs.current[index];
+        // Sol / Aşağı Ok Tuşları
+        if (key === "ArrowDown" || key === "ArrowLeft") {
+            event.preventDefault(); // Tarayıcı imleç hareketini engelle
+            if (index > 0) {
+                const prevInput = _inputs.current[index - 1];
+                prevInput?.focus();
+                setTimeout(() => prevInput?.select(), 0);
+            }
             return;
         }
-        const lastChar = value.slice(-1);
-        event.currentTarget.value = lastChar;
-        if (event.key === "Backspace" && value.length === 0) {
-            _inputs.current[index - 1]?.focus();
-        }
-    }, []);
-    const handleKeyDown = useCallback((index) => (event) => {
-        _isPasteCombo.current = (event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "v";
-        if (_isPasteCombo.current)
+        // Sağ / Yukarı Ok Tuşları
+        if (key === "ArrowUp" || key === "ArrowRight") {
+            event.preventDefault(); // Tarayıcı imleç hareketini engelle
+            if (index < character - 1) {
+                const nextInput = _inputs.current[index + 1];
+                nextInput?.focus();
+                setTimeout(() => nextInput?.select(), 0);
+            }
             return;
-        if (index === 0 && (event.key === "ArrowDown" || event.key === "ArrowLeft"))
-            event.preventDefault();
-        if (index + 1 >= character && (event.key === "ArrowUp" || event.key === "ArrowRight"))
+        }
+        // Backspace (Silme) İşlemi
+        if (key === "Backspace") {
             event.preventDefault();
-        if (!/[0-9]/.test(event.key) && event.key.length === 1)
+            const newValues = [...otpValues];
+            if (otpValues[index] !== "") {
+                // Mevcut kutu doluysa temizle
+                newValues[index] = "";
+                triggerChange(newValues, event);
+            }
+            else if (index > 0) {
+                // Mevcut kutu boşsa bir öncekini temizle ve focus ol
+                newValues[index - 1] = "";
+                triggerChange(newValues, event);
+                _inputs.current[index - 1]?.focus();
+                setTimeout(() => _inputs.current[index - 1]?.select(), 0);
+            }
+            return;
+        }
+        // Sadece rakamlara izin ver (Meta tuşları hariç: Ctrl+V, Cmd+V vb.)
+        if (!/[0-9]/.test(key) && key.length === 1 && !event.ctrlKey && !event.metaKey) {
             event.preventDefault();
-        if (event.key === "ArrowDown" || event.key === "ArrowLeft") {
-            _inputs.current[index - 1]?.focus();
-            setTimeout(() => _inputs.current[index - 1]?.select(), 0);
+            return;
         }
-        else if (event.key === "ArrowUp" || event.key === "ArrowRight") {
-            _inputs.current[index + 1]?.focus();
-            setTimeout(() => _inputs.current[index + 1]?.select(), 0);
+        // Eğer tek bir rakam basıldıysa ve input seçiliyse (üzerine yazma mantığı)
+        if (/[0-9]/.test(key) && key.length === 1) {
+            event.preventDefault();
+            const newValues = [...otpValues];
+            newValues[index] = key; // Değeri set et (seçili olduğu için direkt üzerine yazar)
+            triggerChange(newValues, event);
+            // Son kutuda değilsek bir sonrakine geç ve seç
+            if (index < character - 1) {
+                const nextInput = _inputs.current[index + 1];
+                nextInput?.focus();
+                setTimeout(() => nextInput?.select(), 0);
+            }
+            else {
+                // Son kutudaysa sadece seçili bırak ki tekrar basıldığında üzerine yazabilsin
+                setTimeout(() => currentInput?.select(), 0);
+            }
         }
-    }, [character]);
+    }, [character, otpValues, attributes.disabled, onChange, attributes.name]);
+    const handlePaste = useCallback((index) => (event) => {
+        event.preventDefault();
+        if (attributes.disabled)
+            return;
+        const pastedData = event.clipboardData.getData("text").trim();
+        if (!/^\d+$/.test(pastedData))
+            return; // Sadece rakam ise kabul et
+        const digits = pastedData.split("").slice(0, character - index);
+        const newValues = [...otpValues];
+        digits.forEach((digit, i) => {
+            if (index + i < character) {
+                newValues[index + i] = digit;
+            }
+        });
+        triggerChange(newValues, event);
+        // Yapıştırılan son karaktere veya son input'a focus at
+        const focusIndex = Math.min(index + digits.length, character - 1);
+        const targetInput = _inputs.current[focusIndex];
+        targetInput?.focus();
+        setTimeout(() => targetInput?.select(), 0);
+    }, [character, otpValues, attributes.disabled]);
     const handleClick = useCallback((event) => {
-        const input = event.currentTarget;
-        if (document.activeElement === input)
-            input.select();
+        event.currentTarget.select();
     }, []);
+    // useEffects
+    useEffect(() => {
+        setOtpValues(Array(character).fill(""));
+    }, [character]);
     return (React.createElement("div", { className: "ar-input-otp-wrapper" }, Array.from({ length: character }, (_, index) => (React.createElement("span", { key: index },
         React.createElement(Input, { ref: (el) => {
                 _inputs.current[index] = el;
-            }, ...attributes, value: _value.current[index] ?? "", onInput: handleInput(index), onKeyUp: handleKeyUp(index), onKeyDown: handleKeyDown(index), onFocus: (event) => event.target.select(), onClick: handleClick, size: 1, placeholder: undefined, autoFocus: index === 0, autoComplete: "off" }))))));
+            }, ...attributes, value: otpValues[index], onChange: () => { }, onKeyDown: handleKeyDown(index), onPaste: handlePaste(index), onFocus: (event) => event.target.select(), onClick: handleClick, size: 1, maxLength: 1, placeholder: undefined, autoFocus: index === 0, autoComplete: "off" }))))));
 };
 Otp.displayName = "Input.Otp";
 export default Otp;

package/dist/components/form/radio/IProps.d.ts

@@ -1,29 +1,7 @@
 import { IBorder, IColors, IIcon, ISize, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
 import { Color } from "../../../libs/types";
 interface IProps extends IVariant, IColors, IBorder, IIcon, ISize, IUpperCase, IValidation, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size" | "color"> {
-    /**
-     * Bileşenin başlığı veya etiket metnidir.
-     *
-     * Genellikle input, buton gibi öğelerin ne amaçla kullanıldığını belirtmek için görüntülenir.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Radio label="Kullanıcı Adı" />
-     * ```
-     */
     label?: string;
-    /**
-     * Bileşenin izlenebilir bir durum göstergesi (trace) olup olmadığını belirtir.
-     *
-     * - `color`: İzleme durumunu belirtmek için kullanılır. `Status` tipiyle tanımlanır (örneğin "success", "error", "warning" gibi).
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Radio trace={{ color: "success" }} />
-     * ```
-     */
     trace?: {
         color: Color;
     };

package/dist/components/form/switch/IProps.d.ts

@@ -1,16 +1,5 @@
 import { IBorder, IColors, IDisabled, IIcon, ISize, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
 interface IProps extends IVariant, IColors, IBorder, IIcon, ISize, IUpperCase, IValidation, IDisabled, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size" | "color"> {
-    /**
-     * Bileşenin başlığı veya etiket metnidir.
-     *
-     * Genellikle input, buton gibi öğelerin ne amaçla kullanıldığını belirtmek için görüntülenir.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Switch label="Kullanıcı Adı" />
-     * ```
-     */
     label?: string;
 }
 export default IProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.4.63",
+  "version": "0.4.64",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -32,7 +32,7 @@
     "react",
     "next",
     "ui",
-    "desing"
+    "design"
   ],
   "author": "Kaan ÇETİN",
   "license": "MIT",