@sydsoft/base 1.58.0 → 1.59.0

package/dist/esm/menu/index.js

@@ -0,0 +1,52 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @author    : izzetseydaoglu
+ * @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
+ * @version   : 2026-02-07 19:31:01
+ */
+import React, { memo, useMemo } from 'react';
+import { Dialog } from '../form';
+import { Popover } from '../popover';
+import Link from 'next/link';
+import styles from './index.module.css';
+export var Menu = memo(function MemoFunction(_a) {
+    var menu = _a.menu, className = _a.className, style = _a.style, _b = _a.withIcon, withIcon = _b === void 0 ? 'auto' : _b;
+    var withIconComponent = useMemo(function () {
+        if (withIcon === true)
+            return true;
+        if (withIcon === false)
+            return false;
+        return Object.values(menu).some(function (item) { return 'icon' in item && !!item.icon; });
+    }, [menu, withIcon]);
+    var withRightComponent = useMemo(function () {
+        return Object.values(menu).some(function (item) { return 'rightComponent' in item && !!item.rightComponent; });
+    }, [menu]);
+    var handleClick = function (item, e) {
+        if (!item.onClick)
+            return;
+        if (item.dialog) {
+            Dialog(__assign({}, item.dialog)).then(function (result) {
+                if (result && item.onClick) {
+                    item.onClick(e);
+                }
+            });
+        }
+        else {
+            item.onClick(e);
+        }
+    };
+    return (_jsx("ul", { className: "smenu ".concat(styles.ul, " ").concat(className || ''), style: style, children: Object.values(menu).map(function (item, key) {
+            var _a = item, fullComponent = _a.fullComponent, icon = _a.icon, title = _a.title, rightComponent = _a.rightComponent, seperator = _a.seperator, href = _a.href, style = _a.style, itemProps = _a.itemProps, type = _a.type, items = _a.items, menuProps = _a.menuProps, subMenuPopoverProps = _a.subMenuPopoverProps, other = __rest(_a, ["fullComponent", "icon", "title", "rightComponent", "seperator", "href", "style", "itemProps", "type", "items", "menuProps", "subMenuPopoverProps"]);
+            var hasSubmenu = type === 'submenu' && Array.isArray(items) && items.length > 0;
+            if (fullComponent)
+                return React.cloneElement(fullComponent, { key: key });
+            if (seperator)
+                return _jsx("li", __assign({ className: styles.seperator, style: style }, itemProps, other), key);
+            var Component = (_jsxs(_Fragment, { children: [withIconComponent && _jsx("div", { className: styles.menuicon, children: icon }), _jsx("div", { className: styles.menutitle, children: title }), withRightComponent && _jsx("div", { className: styles.rightmenu, children: rightComponent })] }));
+            if (hasSubmenu) {
+                return (_jsx(Popover, __assign({ component: _jsx("li", __assign({ style: style }, itemProps, other, { children: Component })), position: "right-top" }, (subMenuPopoverProps || {}), { children: _jsx(Menu, __assign({ menu: items }, (menuProps || {}))) }), key));
+            }
+            return (_jsx("li", __assign({ style: style, onClick: function (e) { return handleClick(item, e); } }, itemProps, other, { children: href ? _jsx(Link, { href: href, children: Component }) : Component }), key));
+        }) }));
+});

package/dist/esm/menu/index.module.css

@@ -0,0 +1,92 @@
+.ul {
+    position: relative;
+    width: 100%;
+    max-height: calc(100vh - 94px);
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    background: #fff;
+    letter-spacing: 0.2px;
+    outline: none;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    box-shadow: 0 2px 6px 2px rgba(60, 64, 67, 0.15);
+    overflow-y: auto;
+    user-select: none;
+}
+
+.ul > li {
+    cursor: pointer;
+    padding: 2px 6px;
+    min-height: 25px;
+}
+.ul > li,
+.ul > li a {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    width: 100%;
+}
+.ul > li a,
+.ul > li a:visited {
+    color: inherit;
+    text-decoration: none;
+}
+
+.ul > li:first-child {
+    margin-top: 5px;
+}
+
+.ul > li:last-child {
+    margin-bottom: 5px;
+}
+
+.ul > li:hover {
+    background: #f0f2f5;
+}
+
+.ul > li:global(.spopover_active) {
+    background: #e8f0fe;
+}
+
+.menuicon {
+    display: inline-flex;
+    overflow: hidden;
+    width: 30px;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    color: #606060;
+}
+
+.menutitle {
+    display: inline-flex;
+    flex: 1;
+    align-items: center;
+    justify-content: flex-start;
+    margin: 0 10px;
+}
+
+.rightmenu {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    color: #909090;
+    font-size: 12px;
+    width: 50px;
+}
+.rightmenu span {
+    user-select: none;
+}
+
+.seperator {
+    cursor: default !important;
+    background: #00000014 !important;
+    border: 0;
+    height: 1px;
+    min-height: 1px !important;
+    margin: 4px 0;
+    padding: 0 !important;
+    display: block !important;
+}

package/dist/esm/modal/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023
+ *  @author: izzetseydaoglu
+ *  @last-modified: 9.02.2024 06:07
+ */
+import React from "react";
+interface Props {
+    children: React.ReactNode;
+    open: boolean;
+    close?: Function;
+    keepMounted?: boolean;
+    hideBackdrop?: boolean;
+    hideEsc?: boolean;
+    hideCloseButton?: boolean;
+    fullScreen?: boolean;
+    modalStyle?: React.CSSProperties;
+    backdropStyle?: React.CSSProperties;
+    vertialAlign?: "flex-start" | "center" | "flex-end";
+    horizontalAlign?: "flex-start" | "center" | "flex-end";
+    refModal?: any;
+}
+export declare const Modal: React.NamedExoticComponent<Props>;
+export {};

package/dist/esm/modal/index.js

@@ -0,0 +1,66 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Copyright (c) 2023
+ *  @author: izzetseydaoglu
+ *  @last-modified: 9.02.2024 06:07
+ */
+import { memo, useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+import styles from "./index.module.css";
+export var Modal = memo(function MemoFunction(_a) {
+    var _b = _a.refModal, refModal = _b === void 0 ? null : _b, children = _a.children, _c = _a.open, open = _c === void 0 ? false : _c, close = _a.close, _d = _a.keepMounted, keepMounted = _d === void 0 ? false : _d, _e = _a.fullScreen, fullScreen = _e === void 0 ? false : _e, _f = _a.hideBackdrop, hideBackdrop = _f === void 0 ? true : _f, _g = _a.hideEsc, hideEsc = _g === void 0 ? false : _g, _h = _a.hideCloseButton, hideCloseButton = _h === void 0 ? false : _h, modalStyle = _a.modalStyle, backdropStyle = _a.backdropStyle, _j = _a.vertialAlign, vertialAlign = _j === void 0 ? "center" : _j, _k = _a.horizontalAlign, horizontalAlign = _k === void 0 ? "center" : _k;
+    var _l = useState(null), modalDiv = _l[0], setModalDiv = _l[1];
+    var ref = useRef(null);
+    useEffect(function () {
+        if (refModal)
+            refModal.current = ref.current;
+    }, [ref.current]);
+    var onClose = function () {
+        if (close)
+            close();
+    };
+    var checkHideBackDrop = function (e) {
+        if (open && ref.current && !ref.current.contains(e.target))
+            onClose();
+    };
+    var checkESC = function (e) {
+        if (e.keyCode === 27 || e.key === "Escape" || e.code === "Escape")
+            onClose();
+    };
+    useEffect(function () {
+        if (open) {
+            if (hideBackdrop)
+                window.addEventListener("mousedown", checkHideBackDrop);
+            if (hideEsc)
+                window.addEventListener("keydown", checkESC);
+        }
+        return function () {
+            if (hideBackdrop)
+                window.removeEventListener("mousedown", checkHideBackDrop);
+            if (hideEsc)
+                window.removeEventListener("keydown", checkESC);
+        };
+    });
+    useEffect(function () {
+        if (!modalDiv) {
+            var modalDivCheck = document.getElementById("smodal");
+            if (modalDivCheck) {
+                setModalDiv(modalDivCheck);
+            }
+            else {
+                var div = document.createElement("div");
+                div.setAttribute("id", "smodal");
+                document.body.appendChild(div);
+                setModalDiv(div);
+            }
+        }
+        return function () {
+            onClose();
+        };
+    }, []);
+    if ((!keepMounted && !open) || typeof window === "undefined")
+        return null;
+    var Component = (_jsx("div", { className: "".concat(styles.backdrop, " ").concat(open ? styles.backdrop_open : ""), style: __assign({ alignItems: vertialAlign, justifyContent: horizontalAlign }, backdropStyle), children: _jsxs("div", { ref: ref, className: "smodal ".concat(styles.modal, " ").concat(fullScreen ? styles.fullscreen : ""), style: modalStyle, children: [!hideCloseButton && (_jsx("div", { className: "close ".concat(styles.close_fixed), children: _jsx("div", { className: styles.close, onClick: onClose, children: "\u2715" }) })), children] }) }));
+    return modalDiv ? ReactDOM.createPortal(Component, modalDiv) : null;
+});

package/dist/esm/modal/index.module.css

@@ -0,0 +1,77 @@
+.backdrop {
+    position: fixed;
+    z-index: 1300;
+    inset: 0;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.23);
+    width: 100%;
+    height: 100%;
+    outline: none;
+}
+.backdrop_open {
+    display: flex !important;
+}
+
+.modal {
+    position: relative;
+    min-width: 200px;
+    max-width: 90%;
+    max-height: calc(100% - 64px);
+    overflow-x: hidden;
+    border-radius: 8px;
+    background: transparent;
+    box-shadow:
+        rgb(0 0 0 / 32%) 0 4px 8px,
+        rgb(0 0 0 / 40%) 0 8px 40px;
+    margin: 15px;
+    padding: 0;
+    z-index: 1;
+    outline: none;
+}
+.fullscreen {
+    width: 100vw;
+    max-width: 100vw;
+    height: 100vh;
+    max-height: 100vh;
+    border-radius: 0;
+    margin: 0;
+}
+.close_fixed {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    z-index: 1000;
+    text-align: right;
+    border-radius: inherit;
+}
+
+.close {
+    position: fixed;
+    background: linear-gradient(0deg, transparent, #00000026, transparent);
+    padding: 8px 10px;
+    font-size: 11px;
+    transform: scale(1) translateX(-100%);
+    border-radius: none;
+    cursor: pointer;
+    font-weight: bold;
+    text-shadow: 1px 0px 0px #000000;
+    transition: all 0.3s ease-in-out;
+}
+.close:hover {
+    transform: scale(1.3) translateX(-85%);
+    background: linear-gradient(180deg, transparent, #0000003a, transparent);
+}
+
+.sbox_header {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+.sbox_footer {
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+}

package/dist/esm/popover/index.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @author    : izzetseydaoglu
+ * @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
+ * @version   : 2026-02-10 16:12:35
+ */
+import React from 'react';
+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 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 declare const Popover: React.NamedExoticComponent<PopoverProps>;
+export {};

package/dist/esm/popover/index.js

@@ -0,0 +1,343 @@
+/**
+ * @author    : izzetseydaoglu
+ * @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
+ * @version   : 2026-02-10 16:12:35
+ */
+import { __assign, __rest } from "tslib";
+import { cloneElement, memo, useEffect, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import styles from './index.module.css';
+export var Popover = memo(function MemoFunction(_a) {
+    var children = _a.children, component = _a.component, _b = _a.position, position = _b === void 0 ? 'top' : _b, _c = _a.arrow, arrow = _c === void 0 ? false : _c, _d = _a.distance, distance = _d === void 0 ? 5 : _d, _e = _a.removeWhenClickInside, removeWhenClickInside = _e === void 0 ? false : _e, _f = _a.hideBackdrop, hideBackdrop = _f === void 0 ? true : _f, _g = _a.fade, fade = _g === void 0 ? true : _g, _h = _a.arrowColor, arrowColor = _h === void 0 ? 'auto' : _h, _j = _a.hover, hover = _j === void 0 ? false : _j, _k = _a.hoverCloseDelay, hoverCloseDelay = _k === void 0 ? 120 : _k, _l = _a.keepMounted, keepMounted = _l === void 0 ? false : _l, other = __rest(_a, ["children", "component", "position", "arrow", "distance", "removeWhenClickInside", "hideBackdrop", "fade", "arrowColor", "hover", "hoverCloseDelay", "keepMounted"]);
+    var refComponent = useRef(null);
+    var closeTimer = useRef(null);
+    var hoverCloseTimer = useRef(null);
+    var popoverRef = useRef(null);
+    var rootRef = useRef(null);
+    var zIndexRef = useRef(null);
+    useEffect(function () {
+        if (typeof window === 'undefined')
+            return;
+        return function () {
+            popoverSil(false);
+        };
+    }, []);
+    var checkHideBackDrop = function (e) {
+        var spopover = popoverRef.current;
+        if (!spopover)
+            return;
+        if (!((e === null || e === void 0 ? void 0 : e.target) instanceof Node)) {
+            popoverSil();
+            return;
+        }
+        if (!spopover.contains(e.target))
+            popoverSil();
+    };
+    var popoverEkle = function (e) {
+        var _a, _b;
+        if (popoverRef.current && keepMounted) {
+            var popover_1 = popoverRef.current;
+            var target_1 = e.currentTarget;
+            var wasVisible = popover_1.classList.contains(styles.visible);
+            (_b = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.render) === null || _b === void 0 ? void 0 : _b.call(_a, children);
+            applyArrowColor(popover_1);
+            popoverPosition({ target: target_1, position: position });
+            popover_1.style.zIndex = String(nextPopoverZIndex());
+            popover_1.classList.remove(styles.closing);
+            popover_1.classList.add(styles.visible);
+            if (!wasVisible) {
+                if (hideBackdrop) {
+                    window.addEventListener('mousedown', checkHideBackDrop);
+                    window.addEventListener('blur', checkHideBackDrop);
+                }
+                if (removeWhenClickInside)
+                    popover_1.addEventListener('mouseup', popoverGecikmeliSil);
+                if (hover) {
+                    popover_1.addEventListener('mouseenter', clearHoverClose);
+                    popover_1.addEventListener('mouseleave', scheduleHoverClose);
+                }
+                incrementBodyPopover();
+            }
+            return;
+        }
+        popoverSil(false);
+        var popover = document.createElement('div');
+        popover.classList.add('spopover', styles.popover);
+        var zIndex = nextPopoverZIndex();
+        zIndexRef.current = zIndex;
+        document.body.appendChild(popover);
+        // ReactDOM.render(children, popover)
+        var root = createRoot(popover);
+        root.render(children);
+        popoverRef.current = popover;
+        rootRef.current = root;
+        var target = e.currentTarget;
+        refComponent.current && refComponent.current.classList.add('spopover_active');
+        setTimeout(function () {
+            var _a;
+            applyArrowColor(popover);
+            popoverPosition({ target: target, position: position });
+            popover.style.zIndex = String((_a = zIndexRef.current) !== null && _a !== void 0 ? _a : 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();
+    };
+    var popoverSil = function (animate) {
+        if (animate === void 0) { animate = true; }
+        refComponent.current && refComponent.current.classList.remove('spopover_active');
+        var check = popoverRef.current;
+        var wasVisible = !!(check === null || check === void 0 ? void 0 : 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) {
+                    var root_1 = rootRef.current;
+                    window.setTimeout(function () {
+                        var _a;
+                        (_a = root_1 === null || root_1 === void 0 ? void 0 : root_1.unmount) === null || _a === void 0 ? void 0 : _a.call(root_1);
+                    }, 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(function () {
+                    var _a;
+                    if (!keepMounted) {
+                        var root = rootRef.current;
+                        (_a = root === null || root === void 0 ? void 0 : root.unmount) === null || _a === void 0 ? void 0 : _a.call(root);
+                        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();
+    };
+    var popoverGecikmeliSil = function () { return setTimeout(function () { return popoverSil(); }, 100); };
+    var clearHoverClose = function () {
+        if (hoverCloseTimer.current)
+            window.clearTimeout(hoverCloseTimer.current);
+        hoverCloseTimer.current = null;
+    };
+    var scheduleHoverClose = function () {
+        clearHoverClose();
+        hoverCloseTimer.current = window.setTimeout(function () { return popoverSil(); }, hoverCloseDelay);
+    };
+    var popoverPosition = function (_a) {
+        var target = _a.target, position = _a.position;
+        var popover = popoverRef.current;
+        if (popover) {
+            var arrowMargin = arrow ? 5 : 0;
+            var margin = distance + arrowMargin;
+            var _b = normalizePosition(position), preferredSide = _b.side, preferredAlign = _b.align;
+            var targetPosition = target.getBoundingClientRect();
+            var popoverPosition_1 = popover.getBoundingClientRect();
+            var style = [];
+            var side = preferredSide;
+            if (side === 'top' && targetPosition.top - popoverPosition_1.height - margin < 0)
+                side = 'bottom';
+            if (side === 'bottom' && targetPosition.bottom + popoverPosition_1.height + margin > window.innerHeight)
+                side = 'top';
+            if (side === 'left' && targetPosition.left - popoverPosition_1.width - margin < 0)
+                side = 'right';
+            if (side === 'right' && targetPosition.right + popoverPosition_1.width + margin > window.innerWidth)
+                side = 'left';
+            if (side === 'top')
+                style.push('top:' + (targetPosition.top - popoverPosition_1.height - margin) + 'px');
+            if (side === 'bottom')
+                style.push('top:' + (targetPosition.bottom + margin) + 'px');
+            if (side === 'left')
+                style.push('left:' + (targetPosition.left - popoverPosition_1.width - margin) + 'px');
+            if (side === 'right')
+                style.push('left:' + (targetPosition.right + margin) + 'px');
+            var alignClass = 'center';
+            if (side === 'top' || side === 'bottom') {
+                var _c = resolveHorizontalAlign(preferredAlign, targetPosition, popoverPosition_1), left = _c.left, resolvedAlign = _c.alignClass;
+                alignClass = resolvedAlign;
+                style.push('left:' + left + 'px');
+            }
+            else {
+                var _d = resolveVerticalAlign(preferredAlign, targetPosition, popoverPosition_1), top_1 = _d.top, resolvedAlign = _d.alignClass;
+                alignClass = resolvedAlign;
+                style.push('top:' + top_1 + 'px');
+            }
+            var 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) {
+        var _a;
+        if (!arrowColor) {
+            popoverEl.style.removeProperty('--popover-arrow-color');
+            return;
+        }
+        if (arrowColor === 'auto') {
+            var targetEl = (_a = popoverEl.firstElementChild) !== null && _a !== void 0 ? _a : popoverEl;
+            var bg = window.getComputedStyle(targetEl).backgroundColor;
+            if (bg === 'rgba(0, 0, 0, 0)' || bg === 'transparent') {
+                var parent_1 = targetEl.parentElement;
+                if (parent_1)
+                    bg = window.getComputedStyle(parent_1).backgroundColor;
+            }
+            if (bg)
+                popoverEl.style.setProperty('--popover-arrow-color', bg);
+            return;
+        }
+        popoverEl.style.setProperty('--popover-arrow-color', arrowColor);
+    }
+    function incrementBodyPopover() {
+        var body = document.body;
+        var count = Number(body.dataset.spopoverCount || '0') + 1;
+        body.dataset.spopoverCount = String(count);
+        if (count > 0)
+            body.classList.add('spopover_open');
+    }
+    function decrementBodyPopover() {
+        var body = document.body;
+        var 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() {
+        var body = document.body;
+        var current = Number(body.dataset.spopoverZIndex || '10000');
+        var next = current + 1;
+        body.dataset.spopoverZIndex = String(next);
+        return next;
+    }
+    var componentProps = __assign({ ref: refComponent, onClick: function (e) {
+            var _a, _b;
+            (_b = (_a = component.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            popoverEkle(e);
+        } }, other);
+    if (hover) {
+        componentProps.onMouseEnter = function (e) {
+            var _a, _b;
+            (_b = (_a = component.props) === null || _a === void 0 ? void 0 : _a.onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            clearHoverClose();
+            popoverEkle(e);
+        };
+        componentProps.onMouseLeave = function (e) {
+            var _a, _b;
+            (_b = (_a = component.props) === null || _a === void 0 ? void 0 : _a.onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            scheduleHoverClose();
+        };
+    }
+    return cloneElement(component, componentProps);
+});
+var sideClass = {
+    top: styles.top,
+    bottom: styles.bottom,
+    left: styles.left,
+    right: styles.right
+};
+var alignClassMap = {
+    start: styles.alignStart,
+    center: styles.alignCenter,
+    end: styles.alignEnd
+};
+var FADE_DURATION = 160;
+var normalizePosition = function (position) {
+    var _a = position.split('-'), side = _a[0], rawAlign = _a[1];
+    if (side === 'top' || side === 'bottom') {
+        var align_1 = rawAlign === 'left' || rawAlign === 'right' ? rawAlign : 'center';
+        return { side: side, align: align_1 };
+    }
+    var align = rawAlign === 'top' || rawAlign === 'bottom' ? rawAlign : 'center';
+    return { side: side, align: align };
+};
+var resolveHorizontalAlign = function (align, target, popover) {
+    var clamp = 2;
+    var left = 0;
+    var 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: left, alignClass: alignClass };
+};
+var resolveVerticalAlign = function (align, target, popover) {
+    var clamp = 2;
+    var top = 0;
+    var 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: top, alignClass: alignClass };
+};