@sydsoft/base 1.47.0 → 1.49.0

package/popover/index.tsx

@@ -0,0 +1,392 @@
+/**
+ * @author    : izzetseydaoglu
+ * @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
+ * @version   : 2026-02-10 16:12:35
+ */
+
+import React, { cloneElement, memo, useEffect, useRef } from 'react';
+
+import { createRoot } from 'react-dom/client';
+import styles from './index.module.css';
+
+type PopoverSide = 'top' | 'bottom' | 'left' | 'right';
+type PopoverPosition =
+    | 'top'
+    | 'top-left'
+    | 'top-right'
+    | 'bottom'
+    | 'bottom-left'
+    | 'bottom-right'
+    | 'left'
+    | 'left-top'
+    | 'left-center'
+    | 'left-bottom'
+    | 'right'
+    | 'right-top'
+    | 'right-center'
+    | 'right-bottom';
+type HorizontalAlign = 'left' | 'center' | 'right';
+type VerticalAlign = 'top' | 'center' | 'bottom';
+type AlignClass = 'start' | 'center' | 'end';
+type ArrowColor = 'auto' | string;
+
+export interface PopoverConfigBaseProps {
+    position?: PopoverPosition;
+    removeWhenClickInside?: boolean;
+    hideBackdrop?: boolean;
+    arrow?: boolean;
+    distance?: number;
+    fade?: boolean;
+    arrowColor?: ArrowColor;
+    hover?: boolean;
+    hoverCloseDelay?: number;
+    keepMounted?: boolean;
+}
+
+interface PopoverProps extends PopoverConfigBaseProps {
+    component: any;
+    children: React.ReactNode;
+}
+
+export const Popover = memo(function MemoFunction({
+    children,
+    component,
+    position = 'top',
+    arrow = false,
+    distance = 5,
+    removeWhenClickInside = false,
+    hideBackdrop = true,
+    fade = true,
+    arrowColor = 'auto',
+    hover = false,
+    hoverCloseDelay = 120,
+    keepMounted = false,
+    ...other
+}: PopoverProps) {
+    const refComponent = useRef<any>(null);
+    const closeTimer = useRef<number | null>(null);
+    const hoverCloseTimer = useRef<number | null>(null);
+    const popoverRef = useRef<HTMLDivElement | null>(null);
+    const rootRef = useRef<any>(null);
+    const zIndexRef = useRef<number | null>(null);
+
+    useEffect(() => {
+        if (typeof window === 'undefined') return;
+        return () => {
+            popoverSil(false);
+        };
+    }, []);
+
+    const checkHideBackDrop = (e: any) => {
+        const spopover = popoverRef.current;
+        if (!spopover) return;
+
+        if (!(e?.target instanceof Node)) {
+            popoverSil();
+            return;
+        }
+
+        if (!spopover.contains(e.target)) popoverSil();
+    };
+
+    const popoverEkle = (e: any) => {
+        if (popoverRef.current && keepMounted) {
+            const popover = popoverRef.current;
+            const target = e.currentTarget;
+            const wasVisible = popover.classList.contains(styles.visible);
+            rootRef.current?.render?.(children);
+            applyArrowColor(popover);
+            popoverPosition({ target, position: position });
+            popover.style.zIndex = String(nextPopoverZIndex());
+            popover.classList.remove(styles.closing);
+            popover.classList.add(styles.visible);
+            if (!wasVisible) {
+                if (hideBackdrop) {
+                    window.addEventListener('mousedown', checkHideBackDrop);
+                    window.addEventListener('blur', checkHideBackDrop);
+                }
+                if (removeWhenClickInside) popover.addEventListener('mouseup', popoverGecikmeliSil);
+                if (hover) {
+                    popover.addEventListener('mouseenter', clearHoverClose);
+                    popover.addEventListener('mouseleave', scheduleHoverClose);
+                }
+                incrementBodyPopover();
+            }
+            return;
+        }
+        popoverSil(false);
+        const popover = document.createElement('div');
+        popover.classList.add('spopover', styles.popover);
+        const zIndex = nextPopoverZIndex();
+        zIndexRef.current = zIndex;
+        document.body.appendChild(popover);
+        // ReactDOM.render(children, popover)
+        const root = createRoot(popover!);
+        root.render(children);
+        popoverRef.current = popover;
+        rootRef.current = root;
+        const target = e.currentTarget;
+        refComponent.current && refComponent.current.classList.add('spopover_active');
+        setTimeout(() => {
+            applyArrowColor(popover);
+            popoverPosition({ target, position: position });
+            popover.style.zIndex = String(zIndexRef.current ?? zIndex);
+            popover.classList.add(styles.visible);
+        }, 100);
+        if (hideBackdrop) {
+            window.addEventListener('mousedown', checkHideBackDrop);
+            window.addEventListener('blur', checkHideBackDrop);
+        }
+        if (removeWhenClickInside) popover.addEventListener('mouseup', popoverGecikmeliSil);
+        if (hover) {
+            popover.addEventListener('mouseenter', clearHoverClose);
+            popover.addEventListener('mouseleave', scheduleHoverClose);
+        }
+        incrementBodyPopover();
+    };
+
+    const popoverSil = (animate = true) => {
+        refComponent.current && refComponent.current.classList.remove('spopover_active');
+        const check = popoverRef.current;
+        const wasVisible = !!check?.classList.contains(styles.visible);
+        if (check) {
+            if (removeWhenClickInside) check.removeEventListener('mouseup', popoverGecikmeliSil);
+            if (hover) {
+                check.removeEventListener('mouseenter', clearHoverClose);
+                check.removeEventListener('mouseleave', scheduleHoverClose);
+            }
+            if (closeTimer.current) window.clearTimeout(closeTimer.current);
+            if (hoverCloseTimer.current) window.clearTimeout(hoverCloseTimer.current);
+            if (!fade || !animate) {
+                if (!keepMounted) {
+                    const root = rootRef.current;
+                    window.setTimeout(() => {
+                        root?.unmount?.();
+                    }, 0);
+                    check.remove();
+                    popoverRef.current = null;
+                    rootRef.current = null;
+                } else {
+                    check.classList.remove(styles.visible);
+                    check.classList.remove(styles.closing);
+                }
+            } else if (!check.classList.contains(styles.closing)) {
+                check.classList.add(styles.closing);
+                closeTimer.current = window.setTimeout(() => {
+                    if (!keepMounted) {
+                        const root = rootRef.current;
+                        root?.unmount?.();
+                        check.remove();
+                        popoverRef.current = null;
+                        rootRef.current = null;
+                    } else {
+                        check.classList.remove(styles.visible);
+                        check.classList.remove(styles.closing);
+                    }
+                }, FADE_DURATION);
+            }
+        }
+        if (hideBackdrop) {
+            window.removeEventListener('mousedown', checkHideBackDrop);
+            window.removeEventListener('blur', checkHideBackDrop);
+        }
+        if (wasVisible) decrementBodyPopover();
+    };
+
+    const popoverGecikmeliSil = () => setTimeout(() => popoverSil(), 100);
+    const clearHoverClose = () => {
+        if (hoverCloseTimer.current) window.clearTimeout(hoverCloseTimer.current);
+        hoverCloseTimer.current = null;
+    };
+    const scheduleHoverClose = () => {
+        clearHoverClose();
+        hoverCloseTimer.current = window.setTimeout(() => popoverSil(), hoverCloseDelay);
+    };
+
+    const popoverPosition = ({ target, position }: { target: HTMLElement; position: PopoverPosition }) => {
+        const popover: any = popoverRef.current;
+        if (popover) {
+            const arrowMargin = arrow ? 5 : 0;
+            const margin = distance + arrowMargin;
+            const { side: preferredSide, align: preferredAlign } = normalizePosition(position);
+            const targetPosition = target.getBoundingClientRect();
+            const popoverPosition = popover.getBoundingClientRect();
+
+            const style = [];
+
+            let side = preferredSide;
+            if (side === 'top' && targetPosition.top - popoverPosition.height - margin < 0) side = 'bottom';
+            if (side === 'bottom' && targetPosition.bottom + popoverPosition.height + margin > window.innerHeight) side = 'top';
+            if (side === 'left' && targetPosition.left - popoverPosition.width - margin < 0) side = 'right';
+            if (side === 'right' && targetPosition.right + popoverPosition.width + margin > window.innerWidth) side = 'left';
+
+            if (side === 'top') style.push('top:' + (targetPosition.top - popoverPosition.height - margin) + 'px');
+            if (side === 'bottom') style.push('top:' + (targetPosition.bottom + margin) + 'px');
+            if (side === 'left') style.push('left:' + (targetPosition.left - popoverPosition.width - margin) + 'px');
+            if (side === 'right') style.push('left:' + (targetPosition.right + margin) + 'px');
+
+            let alignClass: AlignClass = 'center';
+            if (side === 'top' || side === 'bottom') {
+                const { left, alignClass: resolvedAlign } = resolveHorizontalAlign(preferredAlign as HorizontalAlign, targetPosition, popoverPosition);
+                alignClass = resolvedAlign;
+                style.push('left:' + left + 'px');
+            } else {
+                const { top, alignClass: resolvedAlign } = resolveVerticalAlign(preferredAlign as VerticalAlign, targetPosition, popoverPosition);
+                alignClass = resolvedAlign;
+                style.push('top:' + top + 'px');
+            }
+
+            const classNames = ['spopover', styles.popover, arrow ? styles.arrow : '', fade ? '' : styles.noFade, sideClass[side], alignClassMap[alignClass]].filter(Boolean);
+
+            popover.className = classNames.join(' ');
+            popover.setAttribute('style', style.join(';'));
+            applyArrowColor(popover);
+        }
+    };
+
+    function applyArrowColor(popoverEl: HTMLElement) {
+        if (!arrowColor) {
+            popoverEl.style.removeProperty('--popover-arrow-color');
+            return;
+        }
+        if (arrowColor === 'auto') {
+            const targetEl = (popoverEl.firstElementChild as HTMLElement | null) ?? popoverEl;
+            let bg = window.getComputedStyle(targetEl).backgroundColor;
+            if (bg === 'rgba(0, 0, 0, 0)' || bg === 'transparent') {
+                const parent = targetEl.parentElement;
+                if (parent) bg = window.getComputedStyle(parent).backgroundColor;
+            }
+            if (bg) popoverEl.style.setProperty('--popover-arrow-color', bg);
+            return;
+        }
+        popoverEl.style.setProperty('--popover-arrow-color', arrowColor);
+    }
+
+    function incrementBodyPopover() {
+        const body = document.body;
+        const count = Number(body.dataset.spopoverCount || '0') + 1;
+        body.dataset.spopoverCount = String(count);
+        if (count > 0) body.classList.add('spopover_open');
+    }
+
+    function decrementBodyPopover() {
+        const body = document.body;
+        const count = Math.max(0, Number(body.dataset.spopoverCount || '0') - 1);
+        if (count === 0) {
+            delete body.dataset.spopoverCount;
+            body.classList.remove('spopover_open');
+        } else {
+            body.dataset.spopoverCount = String(count);
+        }
+    }
+
+    function nextPopoverZIndex() {
+        const body = document.body;
+        const current = Number(body.dataset.spopoverZIndex || '10000');
+        const next = current + 1;
+        body.dataset.spopoverZIndex = String(next);
+        return next;
+    }
+
+    const componentProps: Record<string, any> = {
+        ref: refComponent,
+        onClick: (e: any) => {
+            component.props?.onClick?.(e);
+            popoverEkle(e);
+        },
+        ...other
+    };
+
+    if (hover) {
+        componentProps.onMouseEnter = (e: any) => {
+            component.props?.onMouseEnter?.(e);
+            clearHoverClose();
+            popoverEkle(e);
+        };
+        componentProps.onMouseLeave = (e: any) => {
+            component.props?.onMouseLeave?.(e);
+            scheduleHoverClose();
+        };
+    }
+
+    return cloneElement(component, componentProps);
+});
+
+const sideClass: Record<PopoverSide, string> = {
+    top: styles.top,
+    bottom: styles.bottom,
+    left: styles.left,
+    right: styles.right
+};
+
+const alignClassMap: Record<AlignClass, string> = {
+    start: styles.alignStart,
+    center: styles.alignCenter,
+    end: styles.alignEnd
+};
+
+const FADE_DURATION = 160;
+
+const normalizePosition = (position: PopoverPosition): { side: PopoverSide; align: HorizontalAlign | VerticalAlign } => {
+    const [side, rawAlign] = position.split('-') as [PopoverSide, string | undefined];
+    if (side === 'top' || side === 'bottom') {
+        const align: HorizontalAlign = rawAlign === 'left' || rawAlign === 'right' ? rawAlign : 'center';
+        return { side, align };
+    }
+    const align: VerticalAlign = rawAlign === 'top' || rawAlign === 'bottom' ? rawAlign : 'center';
+    return { side, align };
+};
+
+const resolveHorizontalAlign = (align: HorizontalAlign, target: DOMRect, popover: DOMRect): { left: number; alignClass: AlignClass } => {
+    const clamp = 2;
+    let left = 0;
+    let alignClass: AlignClass = 'center';
+
+    if (align === 'left') {
+        left = target.left;
+        alignClass = 'start';
+    } else if (align === 'right') {
+        left = target.right - popover.width;
+        alignClass = 'end';
+    } else {
+        left = target.left + target.width / 2 - popover.width / 2;
+        alignClass = 'center';
+    }
+
+    if (left < clamp) {
+        left = clamp;
+        alignClass = 'start';
+    } else if (left + popover.width > window.innerWidth - clamp) {
+        left = window.innerWidth - popover.width - clamp;
+        alignClass = 'end';
+    }
+
+    return { left, alignClass };
+};
+
+const resolveVerticalAlign = (align: VerticalAlign, target: DOMRect, popover: DOMRect): { top: number; alignClass: AlignClass } => {
+    const clamp = 2;
+    let top = 0;
+    let alignClass: AlignClass = 'center';
+
+    if (align === 'top') {
+        top = target.top;
+        alignClass = 'start';
+    } else if (align === 'bottom') {
+        top = target.bottom - popover.height;
+        alignClass = 'end';
+    } else {
+        top = target.top + target.height / 2 - popover.height / 2;
+        alignClass = 'center';
+    }
+
+    if (top < clamp) {
+        top = clamp;
+        alignClass = 'start';
+    } else if (top + popover.height > window.innerHeight - clamp) {
+        top = window.innerHeight - popover.height - clamp;
+        alignClass = 'end';
+    }
+
+    return { top, alignClass };
+};

package/tooltip/index.tsx

@@ -0,0 +1,216 @@
+import React, { ReactElement, memo, useEffect } from "react";
+
+export type typeTooltipPosition = "top" | "bottom" | "left" | "right";
+
+interface Props {
+    children: ReactElement;
+    title: string;
+    position?: typeTooltipPosition;
+    arrow?: boolean;
+    distance?: number;
+}
+
+export const Tooltip = memo(function MemoFunction({children, title, position = "top", arrow = false, distance = 5, ...other}: Props) {
+    useEffect((): any => {
+        if (typeof window === "undefined") return null;
+        const cssCheck = document.getElementsByClassName("stooltip_css")[0];
+        if (!cssCheck) {
+            const head = document.getElementsByTagName('head')[0];
+            const s = document.createElement('style');
+            s.setAttribute('type', 'text/css');
+            s.classList.add("stooltip_css");
+            s.appendChild(document.createTextNode(tooltipCss));
+            head.appendChild(s);
+        }
+        return () => tooltipSil();
+    }, [])
+
+    const tooltipEkle = (e: any) => {
+        tooltipSil();
+        const tooltip = document.createElement("div");
+        tooltip.innerHTML = title;
+        tooltip.classList.add("stooltip");
+        document.body.appendChild(tooltip);
+        tooltipPosition({target: e.currentTarget, position: position});
+    }
+
+    const tooltipSil = () => {
+        const check = document.body.getElementsByClassName("stooltip")[0];
+        if (check) check.remove();
+    }
+
+    const tooltipPosition = ({target, position}: { target: HTMLElement, position: typeTooltipPosition }) => {
+        const tooltip = document.body.getElementsByClassName("stooltip")[0];
+        if (tooltip) {
+
+            const arrowMargin = (arrow) ? 5 : 0;
+            const margin = distance + arrowMargin;
+
+            if (arrow) tooltip.classList.add("arrow");
+
+            const targetPosition = target.getBoundingClientRect();
+            const tooltipPosition = tooltip.getBoundingClientRect();
+
+            const style = [];
+
+            if (position === "top" || position === "bottom") {
+                if (position === "top") {
+                    if ((targetPosition.top - tooltipPosition.height - margin) < 0) {
+                        style.push("top:" + (targetPosition.bottom + margin) + "px");
+                        tooltip.classList.add("bottom");
+                    } else {
+                        style.push("top:" + (targetPosition.top - tooltipPosition.height - margin) + "px");
+                        tooltip.classList.add("top");
+                    }
+                }
+                if (position === "bottom") {
+                    if ((targetPosition.bottom + tooltipPosition.height + margin) > window.innerHeight) {
+                        style.push("top:" + (targetPosition.top - tooltipPosition.height - margin) + "px");
+                        tooltip.classList.add("top");
+                    } else {
+                        style.push("top:" + (targetPosition.bottom + margin) + "px");
+                        tooltip.classList.add("bottom");
+                    }
+                }
+                // if ((targetPosition.left - tooltipPosition.width) < 0) {
+                if ((targetPosition.left + (targetPosition.width / 2) - (tooltipPosition.width / 2)) < 0) {
+                    style.push("left:2px");
+                    tooltip.classList.add("start");
+                } else if ((targetPosition.left + (targetPosition.width / 2) + tooltipPosition.width) > window.innerWidth) {
+                    style.push("right:2px");
+                    tooltip.classList.add("end");
+                } else {
+                    style.push("left:" + (targetPosition.left + (targetPosition.width / 2)) + "px");
+                    style.push("transform:translate(-50%,0)");
+                    tooltip.classList.add("center");
+                }
+            }
+
+            if (position === "left" || position === "right") {
+                if (position === "left") {
+                    if ((targetPosition.left - tooltipPosition.width - margin) < 0) {
+                        style.push("left:" + (targetPosition.right + margin) + "px");
+                        tooltip.classList.add("right");
+                    } else {
+                        style.push("left:" + (targetPosition.left - tooltipPosition.width - margin) + "px");
+                        tooltip.classList.add("left");
+                    }
+                }
+                if (position === "right") {
+                    if ((targetPosition.left + (targetPosition.width / 2) + tooltipPosition.width + margin) > window.innerWidth) {
+                        style.push("left:" + (targetPosition.left - tooltipPosition.width - margin) + "px");
+                        tooltip.classList.add("left");
+                    } else {
+                        style.push("left:" + (targetPosition.right + margin) + "px");
+                        tooltip.classList.add("right");
+                    }
+                }
+
+                if ((targetPosition.top + (targetPosition.height / 2) - (tooltipPosition.height / 2)) < 0) {
+                    style.push("top:2px");
+                    tooltip.classList.add("start");
+                } else if ((targetPosition.top + (targetPosition.height / 2) + (tooltipPosition.height / 2)) > window.innerHeight) {
+                    style.push("bottom:2px");
+                    tooltip.classList.add("end");
+                } else {
+                    style.push("top:" + (targetPosition.top + (targetPosition.height / 2)) + "px");
+                    style.push("transform:translate(0,-50%)");
+                    tooltip.classList.add("center");
+                }
+            }
+
+            tooltip.setAttribute("style", style.join(";"));
+        }
+    }
+
+    return React.cloneElement(children, {
+        onMouseEnter: tooltipEkle,
+        onMouseLeave: tooltipSil,
+        onMouseDown: tooltipSil,
+        ...other
+    });
+})
+
+
+const tooltipCss = `
+.stooltip {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #1a1a1a;
+    color: rgba(255,255,255,0.9);
+    text-align: center;
+    font-size: 0.9rem;
+    font-weight:400;
+    padding: 5px 10px;
+    border-radius: 8px;
+    z-index: 1000000;
+    opacity: 0.9;
+    pointer-events: none;
+    /*transition: all 0.1s;*/
+    white-space:pre-line;
+    max-width: 300px;
+    animation: stooltip_fadein 0.7s;
+}
+
+.stooltip.arrow:after {
+    content: "";
+    position: absolute;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+}
+
+.stooltip.arrow.top:after {
+    top: 100%;
+    border-color: #1a1a1a transparent transparent transparent;
+}
+
+.stooltip.arrow.top.start:after { left: 15px;}
+
+.stooltip.arrow.top.center:after { left: 50%;}
+
+.stooltip.arrow.top.end:after { right: 15px;}
+
+
+.stooltip.arrow.bottom:after {
+    bottom: 100%;
+    border-color: transparent transparent #1a1a1a transparent;
+}
+
+.stooltip.arrow.bottom.start:after { left: 15px;}
+
+.stooltip.arrow.bottom.center:after { left: 50%;}
+
+.stooltip.bottom.end:after { right: 15px;}
+
+.stooltip.arrow.left:after {
+    margin-left: -1px;
+    left: 100%;
+    border-color: transparent transparent transparent #1a1a1a;
+}
+
+.stooltip.arrow.left.start:after { top: 5px;}
+
+.stooltip.arrow.left.center:after { top: 50%; margin-top: -5px;}
+
+.stooltip.arrow.left.end:after { bottom: 15px;}
+
+.stooltip.arrow.right:after {
+    margin-right: -1px;
+    right: 100%;
+    border-color: transparent #1a1a1a transparent transparent;
+}
+
+.stooltip.arrow.right.start:after { top: 5px;}
+
+.stooltip.arrow.right.center:after { top: 50%; margin-top: -5px;}
+
+.stooltip.arrow.right.end:after { bottom: 15px;}
+
+@keyframes stooltip_fadein {
+    from { opacity: 0; }
+    to   { opacity: 0.85; }
+}
+`;

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "target": "ES2018",
+        "module": "esnext",
+        "lib": ["dom", "esnext"],
+        "importHelpers": true,
+        "declaration": true,
+        "sourceMap": false,
+        "rootDir": ".",
+        "outDir": "_dist",
+        "strict": true,
+        "noFallthroughCasesInSwitch": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "moduleResolution": "Node",
+        "jsx": "react-jsx",
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "resolveJsonModule": true,
+        "esModuleInterop": true
+    },
+    "include": ["**/*.ts", "**/*.tsx", "global.d.ts"],
+    "exclude": ["_dist", "node_modules"]
+}

package/dist/esm/_lib/storage/cookies.d.ts

@@ -1,4 +0,0 @@
-export declare const cerezOku: (context: any | null, key: string) => string | false;
-export declare const cerezKaydet: (context: any | null, key: string, value: string, time?: number) => void;
-export declare const cerezSil: (context: any | null, key: string) => void;
-export declare const cerezTumuSil: (context?: any | null) => void;

package/dist/esm/_lib/storage/cookies.js

@@ -1,34 +0,0 @@
-import { __assign } from "tslib";
-import nookies, { destroyCookie, parseCookies, setCookie } from 'nookies';
-import { getDomain } from '../baseFunctions';
-export var cerezOku = function (context, key) {
-    if (context === void 0) { context = null; }
-    var cookies = context ? nookies.get(context) : parseCookies();
-    return cookies[key] || false;
-};
-export var cerezKaydet = function (context, key, value, time) {
-    if (context === void 0) { context = null; }
-    if (time === void 0) { time = 0; }
-    var newConfig = checkDomain(context);
-    setCookie(context, key, value, __assign({ maxAge: time > 0 ? time : null }, newConfig));
-};
-export var cerezSil = function (context, key) {
-    if (context === void 0) { context = null; }
-    var newConfig = checkDomain(context);
-    destroyCookie(context, key, newConfig);
-};
-export var cerezTumuSil = function (context) {
-    if (context === void 0) { context = null; }
-    var cookies = parseCookies(context);
-    if (cookies) {
-        Object.keys(cookies).forEach(function (key) {
-            destroyCookie(context, key);
-        });
-    }
-};
-var checkDomain = function (context, config) {
-    if (context === void 0) { context = null; }
-    if (config === void 0) { config = {}; }
-    var cookieDomain = getDomain(context);
-    return __assign(__assign({}, config), { domain: '.' + cookieDomain, path: '/' });
-};