@sydsoft/base 1.44.0 → 1.47.0

package/dist/esm/_lib/inputMask.js

@@ -40,7 +40,8 @@ var createMaskCore = function () {
         if (reverse === void 0) { reverse = false; }
         if (!maskTokens.length)
             return inputValue;
-        var cleanValue = inputValue.replace(/[^\w\s]/g, "");
+        var normalizedValue = inputValue == null ? "" : String(inputValue);
+        var cleanValue = normalizedValue.replace(/[^\w\s]/g, "");
         if (reverse) {
             return applyReverseMask(cleanValue, maskTokens);
         }

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

@@ -1,4 +1,4 @@
-import { isDev } from "@sydsoft/base";
+import { isDev } from "../baseFunctions";
 var encDecDataKeys = [3, 5, 8, 11, 15, 22];
 export var encData = function (data, keys) {
     if (keys === void 0) { keys = encDecDataKeys; }

package/dist/esm/form/Dialog.d.ts

@@ -1,19 +1,20 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode } from 'react';
 export type propsDialog = {
     message: any;
     acceptButtonShow?: boolean;
     cancelButtonShow?: boolean;
     acceptButtonText?: string | ReactNode;
     cancelButtonText?: string | ReactNode;
-    acceptButtonClass?: "default" | "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link";
-    cancelButtonClass?: "default" | "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link";
-    vertialAlign?: "flex-start" | "center" | "flex-end";
-    horizontalAlign?: "flex-start" | "center" | "flex-end";
+    acceptButtonClass?: 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link';
+    cancelButtonClass?: 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link';
+    vertialAlign?: 'flex-start' | 'center' | 'flex-end';
+    horizontalAlign?: 'flex-start' | 'center' | 'flex-end';
     hideBackdrop?: boolean;
     hideEsc?: boolean;
     styleMessage?: React.CSSProperties;
     styleBox?: React.CSSProperties;
     styleBoxFooter?: React.CSSProperties;
-    autoFocus?: "accept" | "cancel";
+    autoFocus?: 'accept' | 'cancel';
+    backdropStyle?: React.CSSProperties;
 };
 export declare const Dialog: (config: propsDialog) => Promise<unknown>;

package/dist/esm/form/Dialog.js

@@ -1,25 +1,25 @@
 import { __assign } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, BoxFooter } from "../box";
-import { createRoot } from "react-dom/client";
-import { Modal } from "../modal";
-import { Button } from "./Button";
+import { Box, BoxFooter } from '../box';
+import { createRoot } from 'react-dom/client';
+import { Modal } from '../modal';
+import { Button } from './Button';
 export var Dialog = function (config) {
     return new Promise(function (resolve) {
-        if (typeof window === "undefined")
+        if (typeof window === 'undefined')
             return false;
-        var mainDiv = document.getElementById("sdialog");
+        var mainDiv = document.getElementById('sdialog');
         if (!mainDiv) {
-            var createDiv = document.createElement("div");
-            createDiv.setAttribute("id", "sdialog");
+            var createDiv = document.createElement('div');
+            createDiv.setAttribute('id', 'sdialog');
             document.body.appendChild(createDiv);
             mainDiv = createDiv;
         }
         var root = createRoot(mainDiv);
-        var settings = __assign({ acceptButtonShow: true, cancelButtonShow: true, acceptButtonText: "EVET", cancelButtonText: "HAYIR", acceptButtonClass: "danger", cancelButtonClass: "secondary", vertialAlign: "center", horizontalAlign: "center", hideBackdrop: true, hideEsc: true, styleMessage: {
-                fontSize: "1.1rem",
-                padding: "10px 20px"
-            }, styleBox: { padding: 0, margin: 0, minWidth: 250 }, styleBoxFooter: { padding: "8px 5px" }, autoFocus: "accept" }, config);
+        var settings = __assign({ acceptButtonShow: true, cancelButtonShow: true, acceptButtonText: 'EVET', cancelButtonText: 'HAYIR', acceptButtonClass: 'danger', cancelButtonClass: 'secondary', vertialAlign: 'center', horizontalAlign: 'center', hideBackdrop: true, hideEsc: true, styleMessage: {
+                fontSize: '1.1rem',
+                padding: '10px 20px'
+            }, styleBox: { padding: 0, margin: 0, minWidth: 250 }, styleBoxFooter: { padding: '8px 5px' }, autoFocus: 'accept' }, config);
         var close = function () {
             if (mainDiv) {
                 root.unmount();
@@ -34,7 +34,7 @@ export var Dialog = function (config) {
             resolve(true);
             close();
         };
-        var Component = (_jsx(Modal, { open: true, keepMounted: false, close: onCancel, hideBackdrop: settings.hideBackdrop, hideEsc: settings.hideEsc, hideCloseButton: true, vertialAlign: settings.vertialAlign, horizontalAlign: settings.horizontalAlign, children: _jsxs(Box, { style: settings.styleBox, children: [_jsx("div", { className: "sbox_content", style: settings.styleMessage, dangerouslySetInnerHTML: { __html: settings.message } }), (settings.acceptButtonShow || settings.cancelButtonShow) && (_jsxs(BoxFooter, { style: settings.styleBoxFooter, children: [settings.cancelButtonShow && (_jsx(Button, { autoFocus: settings.autoFocus === "cancel", buttonClass: settings.cancelButtonClass, onClick: onCancel, children: settings.cancelButtonText })), settings.acceptButtonShow && (_jsx(Button, { autoFocus: settings.autoFocus === "accept", buttonClass: settings.acceptButtonClass, onClick: onAccept, children: settings.acceptButtonText }))] }))] }) }));
+        var Component = (_jsx(Modal, { open: true, keepMounted: false, close: onCancel, hideBackdrop: settings.hideBackdrop, hideEsc: settings.hideEsc, hideCloseButton: true, vertialAlign: settings.vertialAlign, horizontalAlign: settings.horizontalAlign, backdropStyle: settings.backdropStyle, children: _jsxs(Box, { style: settings.styleBox, children: [_jsx("div", { className: "sbox_content", style: settings.styleMessage, dangerouslySetInnerHTML: { __html: settings.message } }), (settings.acceptButtonShow || settings.cancelButtonShow) && (_jsxs(BoxFooter, { style: settings.styleBoxFooter, children: [settings.cancelButtonShow && (_jsx(Button, { autoFocus: settings.autoFocus === 'cancel', buttonClass: settings.cancelButtonClass, onClick: onCancel, children: settings.cancelButtonText })), settings.acceptButtonShow && (_jsx(Button, { autoFocus: settings.autoFocus === 'accept', buttonClass: settings.acceptButtonClass, onClick: onAccept, children: settings.acceptButtonText }))] }))] }) }));
         root.render(Component);
     });
 };

package/dist/esm/form/Input.d.ts

@@ -1,3 +1,8 @@
+/**
+ * @author    : izzetseydaoglu
+ * @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
+ * @version   : 2026-01-21 21:35:48
+ */
 import React from 'react';
 type maskSettingsTranslation = {
     [key: string]: {
@@ -34,13 +39,13 @@ export interface PropsInput {
     labelKey?: string;
     multiline?: boolean;
     rows?: number | undefined;
-    onChange?: Function;
-    onFocus?: Function;
-    onBlur?: Function;
-    onClick?: Function;
-    onKeyPress?: Function;
-    onKeyUp?: Function;
-    onKeyDown?: Function;
+    onChange?: (e: any) => void;
+    onFocus?: (e: any) => void;
+    onBlur?: (e: any) => void;
+    onClick?: (e: any) => void;
+    onKeyPress?: (e: any) => void;
+    onKeyUp?: (e: any) => void;
+    onKeyDown?: (e: any) => void;
     propsComponent?: object | any;
     propsInput?: object;
     startAdornment?: any;

package/dist/esm/form/Input.js

@@ -1,22 +1,27 @@
 import { __assign } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @author    : izzetseydaoglu
+ * @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
+ * @version   : 2026-01-21 21:35:48
+ */
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { convertForSEO, inputTumuBuyukCevir, inputTumuKucukCevir } from '../_lib/baseFunctions';
-import { Dialog } from './Dialog';
-import { alert_add } from '../alert';
 import { applyInputMask } from '../_lib/inputMask';
+import { alert_add } from '../alert';
+import { Dialog } from './Dialog';
 import styles from './styles/Input.module.css';
 export var Input = function (_a) {
-    var componentRef = _a.componentRef, inputRef = _a.inputRef, className = _a.className, propsComponent = _a.propsComponent, propsInput = _a.propsInput, id = _a.id, name = _a.name, value = _a.value, type = _a.type, label = _a.label, startAdornment = _a.startAdornment, endAdornment = _a.endAdornment, placeholder = _a.placeholder, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, onClick = _a.onClick, onKeyPress = _a.onKeyPress, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, disabled = _a.disabled, required = _a.required, loading = _a.loading, autoFocus = _a.autoFocus, select = _a.select, _b = _a.valueKey, valueKey = _b === void 0 ? 'value' : _b, _c = _a.labelKey, labelKey = _c === void 0 ? 'label' : _c, ilkSec = _a.ilkSec, multiline = _a.multiline, rows = _a.rows, sadeceYazi = _a.sadeceYazi, sadeceSayi = _a.sadeceSayi, tumuBuyuk = _a.tumuBuyuk, tumuKucuk = _a.tumuKucuk, seoCevir = _a.seoCevir, dosyaNoGiris = _a.dosyaNoGiris, fileNameGiris = _a.fileNameGiris, dateGecmisKontrol = _a.dateGecmisKontrol, autoSelectText = _a.autoSelectText, _d = _a.mask, mask = _d === void 0 ? '' : _d, _e = _a.maskSettings, maskSettings = _e === void 0 ? {
+    var componentRef = _a.componentRef, inputRef = _a.inputRef, className = _a.className, propsComponent = _a.propsComponent, propsInput = _a.propsInput, id = _a.id, name = _a.name, _b = _a.value, value = _b === void 0 ? '' : _b, type = _a.type, label = _a.label, startAdornment = _a.startAdornment, endAdornment = _a.endAdornment, placeholder = _a.placeholder, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, onClick = _a.onClick, onKeyPress = _a.onKeyPress, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.required, required = _d === void 0 ? false : _d, _e = _a.loading, loading = _e === void 0 ? false : _e, _f = _a.autoFocus, autoFocus = _f === void 0 ? false : _f, select = _a.select, _g = _a.valueKey, valueKey = _g === void 0 ? 'value' : _g, _h = _a.labelKey, labelKey = _h === void 0 ? 'label' : _h, _j = _a.ilkSec, ilkSec = _j === void 0 ? false : _j, _k = _a.multiline, multiline = _k === void 0 ? false : _k, _l = _a.rows, rows = _l === void 0 ? 2 : _l, sadeceYazi = _a.sadeceYazi, sadeceSayi = _a.sadeceSayi, tumuBuyuk = _a.tumuBuyuk, tumuKucuk = _a.tumuKucuk, seoCevir = _a.seoCevir, dosyaNoGiris = _a.dosyaNoGiris, fileNameGiris = _a.fileNameGiris, dateGecmisKontrol = _a.dateGecmisKontrol, autoSelectText = _a.autoSelectText, _m = _a.mask, mask = _m === void 0 ? '' : _m, _o = _a.maskSettings, maskSettings = _o === void 0 ? {
         clearIfNotMatch: true,
         reverse: false, //Tersten doldurmaya başla, fiyatlar için geçerli
         selectOnFocus: false
-    } : _e;
+    } : _o;
     var refMain = useRef(null);
     var refInput = useRef(null);
     var refLabel = useRef(null);
-    var _f = useState(value && value.toString().length > 0), inputFilled = _f[0], setInputFilled = _f[1];
-    var _g = useState(false), focus = _g[0], setFocus = _g[1];
+    var _p = useState(value && value.toString().length > 0), inputFilled = _p[0], setInputFilled = _p[1];
+    var _q = useState(false), focus = _q[0], setFocus = _q[1];
     useEffect(function () {
         if (inputRef)
             inputRef.current = refInput.current;
@@ -24,21 +29,17 @@ export var Input = function (_a) {
             componentRef.current = refMain.current;
     }, [componentRef, inputRef]);
     useEffect(function () {
-        if (autoSelectText && !select && (refInput === null || refInput === void 0 ? void 0 : refInput.current)) {
-            refInput.current.select();
-        }
+        autoSelectText && !select && (refInput === null || refInput === void 0 ? void 0 : refInput.current) && refInput.current.select();
     }, [autoSelectText, select]);
     useEffect(function () {
         var _a, _b;
-        var filled = value && String(value) && value.toString().length > 0;
+        var filled = String(value) && value.toString().length > 0 ? true : false;
         setInputFilled(filled);
-        if (filled) {
-            (_b = (_a = refMain === null || refMain === void 0 ? void 0 : refMain.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove(styles.error);
-        }
+        filled && ((_b = (_a = refMain === null || refMain === void 0 ? void 0 : refMain.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove(styles.error));
     }, [value]);
     useEffect(function () {
         // if (type === "number") sadeceSayi = true; //TODO: sadeceSayi burada değiştirelemez ki!!!
-        if (select && ilkSec && (value === '' || !value)) {
+        if (select && ilkSec && (value === '' || value === null || value === undefined)) {
             if (select.length) {
                 var ilkItem = select[0][valueKey] ? select[0][valueKey] : '';
                 onChange && onChange({ target: { name: name, value: ilkItem } });
@@ -62,7 +63,6 @@ export var Input = function (_a) {
             maskInstance_1 === null || maskInstance_1 === void 0 ? void 0 : maskInstance_1.setValue(value ? value : null);
             return function () { return maskInstance_1 === null || maskInstance_1 === void 0 ? void 0 : maskInstance_1.destroy(); };
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [mask]);
     var Change = useCallback(function (e) {
         if (tumuBuyuk)
@@ -174,7 +174,7 @@ export var Input = function (_a) {
     else {
         component = _jsx("input", __assign({ className: "".concat(styles.input), type: type }, ortakProps, propsInput));
     }
-    var classList = useCallback(function () {
+    var classList = function () {
         var list = ['sInputComponent', styles.component];
         if (className)
             list.push(className);
@@ -183,7 +183,7 @@ export var Input = function (_a) {
         }
         // if (props.required && (value.length === 0 || !value)) list.push("error");
         return list.join(' ');
-    }, [value, className]);
+    };
     useEffect(function () {
         if (propsComponent && propsComponent.hasOwnProperty('style')) {
             var background = propsComponent.style.background ? propsComponent.style.background : propsComponent.style.backgroundColor ? propsComponent.style.backgroundColor : null;
@@ -194,13 +194,3 @@ export var Input = function (_a) {
     }, [propsComponent]);
     return (_jsxs("div", __assign({ ref: refMain, className: classList(), "data-disabled": disabled }, propsComponent, { children: [startAdornment && _jsx("div", { className: "adornment_start ".concat(styles.adornment, " ").concat(styles.start), children: startAdornment }), _jsxs("div", { className: "".concat(styles.inputBase, " ").concat(inputFilled || focus || type == 'date' ? styles.open : ''), children: [component, label && (_jsxs("div", { ref: refLabel, className: "label ".concat(styles.label), children: [label, required && _jsx("span", { className: styles.required, children: "*" })] }))] }), (endAdornment || loading) && (_jsxs("div", { className: "adornment_end ".concat(styles.adornment, " ").concat(styles.end), children: [endAdornment, loading && _jsx("div", { className: styles.loading })] }))] })));
 };
-Input.defaultProps = {
-    value: '',
-    disabled: false,
-    required: false,
-    ilkSec: false,
-    multiline: false,
-    rows: 2,
-    loading: false,
-    autoFocus: false
-};

package/dist/esm/form/Label.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 interface Props {
     children: React.ReactNode;
     required?: boolean;

package/dist/esm/form/Label.js

@@ -1,12 +1,9 @@
 import { __assign, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from "react";
-import { Tooltip } from "../tooltip";
-import styles from "./styles/Label.module.css";
-export var Label = memo(function FMemo(props) {
-    var required = props.required, children = props.children, other = __rest(props, ["required", "children"]);
-    return (_jsxs("label", __assign({ className: styles.label }, other, { children: [children, _jsx(Tooltip, { title: "Zorunlu Alan", children: _jsx("span", { className: styles.required, children: required && "*" }) })] })));
+import { memo } from 'react';
+import { Tooltip } from '../tooltip';
+import styles from './styles/Label.module.css';
+export var Label = memo(function FMemo(_a) {
+    var _b = _a.required, required = _b === void 0 ? false : _b, children = _a.children, other = __rest(_a, ["required", "children"]);
+    return (_jsxs("label", __assign({ className: styles.label }, other, { children: [children, _jsx(Tooltip, { title: 'Zorunlu Alan', children: _jsx("span", { className: styles.required, children: required && '*' }) })] })));
 });
-Label.defaultProps = {
-    required: false
-};

package/dist/esm/icon/index.js

@@ -6,18 +6,21 @@ var defaultIconStyle = {
     userSelect: 'none',
     width: '1em',
     height: '1em',
-    display: 'inline-block',
+    // display: 'inline-block',
     verticalAlign: 'middle',
-    flexShrink: 0
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
 };
 export var Icon = function (_a) {
     var name = _a.name, iconMui = _a.iconMui, customIcon = _a.customIcon, fontSize = _a.fontSize, color = _a.color, className = _a.className, style = _a.style, other = __rest(_a, ["name", "iconMui", "customIcon", "fontSize", "color", "className", "style"]);
     if (iconMui) {
-        return (_jsx("span", __assign({ className: "material-icons ".concat(className || ''), style: __assign(__assign(__assign({}, defaultIconStyle), style), { fontSize: fontSize || '1.5rem', color: color || 'inherit' }), "aria-hidden": "true" }, other, { children: iconMui })));
+        return (_jsx("span", __assign({ className: "material-icons ".concat(className || ''), style: __assign(__assign(__assign({}, defaultIconStyle), style), { fontSize: fontSize || '1.3rem', color: color || 'inherit' }), "aria-hidden": "true" }, other, { children: iconMui })));
     }
     var iconComponent = name ? iconMap[name] : customIcon;
     if (!iconComponent) {
         return _jsx("span", { children: "\u26A0\uFE0F" });
     }
-    return (_jsx("span", __assign({ className: className, style: __assign(__assign(__assign({}, defaultIconStyle), style), { fontSize: fontSize || '1.5rem', color: color || 'inherit' }) }, other, { children: _jsx("svg", { viewBox: iconComponent.viewBox, fill: 'currentColor', xmlns: "http://www.w3.org/2000/svg", children: iconComponent.content }) })));
+    return (_jsx("span", __assign({ className: className, style: __assign(__assign(__assign({}, defaultIconStyle), style), { fontSize: fontSize || '1.5rem', color: color || 'inherit' }) }, other, { children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: iconComponent.viewBox, fill: 'currentColor', width: "1em", height: "1em", style: { display: 'block', flexShrink: 0 }, children: iconComponent.content }) })));
 };

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

@@ -1,5 +1,11 @@
-import { propsDialog } from "../form";
-import React from "react";
+/**
+ * @author    : izzetseydaoglu
+ * @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
+ * @version   : 2026-02-07 19:31:01
+ */
+import React from 'react';
+import { propsDialog } from '../form';
+import { PopoverConfigBaseProps } from '../popover';
 interface BaseProps {
     style?: React.CSSProperties;
     itemProps?: any;
@@ -26,18 +32,38 @@ interface FullComponentProps extends BaseProps {
 interface ItemComponentProps extends BaseProps {
     seperator?: false;
     fullComponent?: never;
+    type?: never;
     title: string;
     icon?: React.ReactNode;
+    rightComponent?: React.ReactNode;
     href?: string;
     onClick?: (e: React.MouseEvent<HTMLLIElement>) => void;
     dialog?: propsDialog;
 }
-export type typeMenu = SeperatorProps | FullComponentProps | ItemComponentProps;
+interface SubMenuProps extends BaseProps {
+    type: 'submenu';
+    title: string;
+    items: typeMenu[];
+    icon?: React.ReactNode;
+    subMenuPopoverProps?: PopoverConfigBaseProps;
+    rightComponent?: React.ReactNode;
+    menuProps?: {
+        className?: string;
+        style?: React.CSSProperties;
+        withIcon?: boolean | 'auto';
+    };
+    seperator?: never;
+    fullComponent?: never;
+    href?: never;
+    onClick?: never;
+    dialog?: never;
+}
+export type typeMenu = SeperatorProps | FullComponentProps | ItemComponentProps | SubMenuProps;
 interface Props {
     menu: typeMenu[];
     className?: string;
     style?: React.CSSProperties;
-    withIcon?: boolean;
+    withIcon?: boolean | 'auto';
 }
 export declare const Menu: React.NamedExoticComponent<Props>;
 export {};

package/dist/esm/menu/index.js

@@ -1,11 +1,27 @@
 import { __assign, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dialog } from "../form";
-import React, { memo } from "react";
-import Link from "next/link";
-import styles from "./index.module.css";
+/**
+ * @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 ? true : _b;
+    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;
@@ -20,13 +36,17 @@ export var Menu = memo(function MemoFunction(_a) {
             item.onClick(e);
         }
     };
-    return (_jsx("ul", { className: "smenu ".concat(styles.ul, " ").concat(className || ""), style: style, children: Object.values(menu).map(function (item, key) {
-            var fullComponent = item.fullComponent, icon = item.icon, title = item.title, onClick = item.onClick, seperator = item.seperator, href = item.href, style = item.style, itemProps = item.itemProps, other = __rest(item, ["fullComponent", "icon", "title", "onClick", "seperator", "href", "style", "itemProps"]);
+    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: "".concat(styles.li, " ").concat(styles.seperator), style: style }, itemProps, other), key);
-            var Component = (_jsxs(_Fragment, { children: [withIcon && _jsx("div", { className: styles.menuicon, children: icon }), _jsx("div", { className: styles.menutitle, children: title })] }));
-            return (_jsx("li", __assign({ className: "".concat(styles.li), style: style, onClick: function (e) { return handleClick(item, e); } }, itemProps, other, { children: (href) ? _jsx(Link, { href: href, children: Component }) : Component }), key));
+                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

@@ -1,60 +1,61 @@
 .ul {
     position: relative;
     width: 100%;
-    background-color: #fff;
-    box-shadow: 0 2px 4px rgb(0 0 0 / 40%), 0 8px 16px rgb(0 0 0 / 10%);
-    border-radius: 8px;
-    margin: 0;
-    padding: 4px 0;
+    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;
 }
-.li {
+
+.ul > li {
     cursor: pointer;
-    padding: 7px 15px;
+    padding: 2px 6px;
     min-height: 25px;
 }
-.li,
-.li a {
+.ul > li,
+.ul > li a {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     width: 100%;
 }
-.li a,
-.li a:visited {
+.ul > li a,
+.ul > li a:visited {
     color: inherit;
     text-decoration: none;
 }
 
-.li.seperator {
-    display: block;
-    border-bottom: 1px #ced0d4 solid;
-    margin: 4px;
-    padding: 0;
-    cursor: default;
-    min-height: unset;
-}
-
-.li:first-child {
+.ul > li:first-child {
     margin-top: 5px;
 }
 
-.li:last-child {
+.ul > li:last-child {
     margin-bottom: 5px;
 }
 
-.li:hover {
+.ul > li:hover {
     background: #f0f2f5;
 }
 
+.ul > li:global(.spopover_active) {
+    background: #e8f0fe;
+}
+
 .menuicon {
     display: inline-flex;
     overflow: hidden;
-    width: 35px;
+    width: 30px;
     flex: 0 0 auto;
     align-items: center;
     justify-content: center;
-    margin-right: 15px;
     color: #606060;
 }
 
@@ -63,5 +64,29 @@
     flex: 1;
     align-items: center;
     justify-content: flex-start;
-    margin-right: 10px;
+    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.module.css

@@ -11,7 +11,7 @@
     outline: none;
 }
 .backdrop_open {
-    display: flex !important; 
+    display: flex !important;
 }
 
 .modal {
@@ -22,7 +22,9 @@
     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;
+    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;
@@ -38,8 +40,8 @@
 }
 .close_fixed {
     position: absolute;
-    top: 1px;
-    right: 1px;
+    top: 2px;
+    right: 2px;
     z-index: 1000;
     text-align: right;
     border-radius: inherit;
@@ -47,20 +49,19 @@
 
 .close {
     position: fixed;
-    background: #e7e7e7;
+    background: linear-gradient(0deg, transparent, #00000026, transparent);
     padding: 8px 10px;
     font-size: 11px;
-    transform: translateX(-100%);
-    border-radius: inherit;
-    border-top-left-radius: 0;
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 50%;
+    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 {
-    zoom: 1.3;
+    transform: scale(1.3) translateX(-85%);
+    background: linear-gradient(180deg, transparent, #0000003a, transparent);
 }
 
 .sbox_header {

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

@@ -1,12 +1,26 @@
-import React from "react";
-type position = "top" | "bottom" | "left" | "right";
-interface Props {
-    component: React.ReactElement;
-    children: React.ReactNode;
-    position?: position;
+/**
+ * @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<Props>;
+export declare const Popover: React.NamedExoticComponent<PopoverProps>;
 export {};

package/dist/esm/popover/index.js

@@ -1,142 +1,343 @@
+/**
+ * @author    : izzetseydaoglu
+ * @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
+ * @version   : 2026-02-10 16:12:35
+ */
 import { __assign, __rest } from "tslib";
-import React, { memo, useEffect } from "react";
-import { createRoot } from "react-dom/client";
+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) {
-    // const refChildren = useRef<any>(null);
-    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, other = __rest(_a, ["children", "component", "position", "arrow", "distance", "removeWhenClickInside"]);
+    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 null;
-        var cssCheck = document.getElementsByClassName("spopover_css")[0];
-        if (!cssCheck) {
-            var head = document.getElementsByTagName("head")[0];
-            var s = document.createElement("style");
-            s.setAttribute("type", "text/css");
-            s.classList.add("spopover_css");
-            s.appendChild(document.createTextNode(popoverCss));
-            head.appendChild(s);
-        }
+        if (typeof window === 'undefined')
+            return;
         return function () {
-            popoverSil();
+            popoverSil(false);
         };
     }, []);
     var checkHideBackDrop = function (e) {
-        var spopover = document.querySelector(".spopover");
-        if (spopover && !spopover.contains(e.target))
+        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) {
-        popoverSil();
-        var popover = document.createElement("div");
-        popover.classList.add("spopover");
+        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); // createRoot(container!) if you use TypeScript
+        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);
-        window.addEventListener("mousedown", checkHideBackDrop);
+        if (hideBackdrop) {
+            window.addEventListener('mousedown', checkHideBackDrop);
+            window.addEventListener('blur', checkHideBackDrop);
+        }
         if (removeWhenClickInside)
-            popover.addEventListener("mouseup", popoverGecikmeliSil);
-        document.body.classList.add("spopover_open");
+            popover.addEventListener('mouseup', popoverGecikmeliSil);
+        if (hover) {
+            popover.addEventListener('mouseenter', clearHoverClose);
+            popover.addEventListener('mouseleave', scheduleHoverClose);
+        }
+        incrementBodyPopover();
     };
-    var popoverSil = function () {
-        var check = document.body.getElementsByClassName("spopover")[0];
+    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);
-            check.remove();
+                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);
         }
-        window.removeEventListener("mousedown", checkHideBackDrop);
-        document.body.classList.remove("spopover_open");
+        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 = document.body.getElementsByClassName("spopover")[0];
+        var popover = popoverRef.current;
         if (popover) {
             var arrowMargin = arrow ? 5 : 0;
             var margin = distance + arrowMargin;
-            if (arrow)
-                popover.classList.add("arrow");
+            var _b = normalizePosition(position), preferredSide = _b.side, preferredAlign = _b.align;
             var targetPosition = target.getBoundingClientRect();
             var popoverPosition_1 = popover.getBoundingClientRect();
             var style = [];
-            if (position === "top" || position === "bottom") {
-                if (position === "top") {
-                    if (targetPosition.top - popoverPosition_1.height - margin < 0) {
-                        style.push("top:" + (targetPosition.bottom + margin) + "px");
-                        popover.classList.add("bottom");
-                    }
-                    else {
-                        style.push("top:" + (targetPosition.top - popoverPosition_1.height - margin) + "px");
-                        popover.classList.add("top");
-                    }
-                }
-                if (position === "bottom") {
-                    if (targetPosition.bottom + popoverPosition_1.height + margin > window.innerHeight) {
-                        style.push("top:" + (targetPosition.top - popoverPosition_1.height - margin) + "px");
-                        popover.classList.add("top");
-                    }
-                    else {
-                        style.push("top:" + (targetPosition.bottom + margin) + "px");
-                        popover.classList.add("bottom");
-                    }
-                }
-                if (targetPosition.left + targetPosition.width / 2 - popoverPosition_1.width / 2 < 0) {
-                    style.push("left:2px");
-                    popover.classList.add("start");
-                }
-                else if (targetPosition.left + targetPosition.width / 2 + popoverPosition_1.width > window.innerWidth) {
-                    style.push("right:2px");
-                    popover.classList.add("end");
-                }
-                else {
-                    style.push("left:" + (targetPosition.left + targetPosition.width / 2) + "px");
-                    style.push("transform:translate(-50%,0)");
-                    popover.classList.add("center");
-                }
+            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');
             }
-            if (position === "left" || position === "right") {
-                if (position === "left") {
-                    if (targetPosition.left - popoverPosition_1.width - margin < 0) {
-                        style.push("left:" + (targetPosition.right + margin) + "px");
-                        popover.classList.add("right");
-                    }
-                    else {
-                        style.push("left:" + (targetPosition.left - popoverPosition_1.width - margin) + "px");
-                        popover.classList.add("left");
-                    }
-                }
-                if (position === "right") {
-                    if (targetPosition.left + targetPosition.width / 2 + popoverPosition_1.width + margin > window.innerWidth) {
-                        style.push("left:" + (targetPosition.left - popoverPosition_1.width - margin) + "px");
-                        popover.classList.add("left");
-                    }
-                    else {
-                        style.push("left:" + (targetPosition.right + margin) + "px");
-                        popover.classList.add("right");
-                    }
-                }
-                if (targetPosition.top + targetPosition.height / 2 - popoverPosition_1.height / 2 < 0) {
-                    style.push("top:2px");
-                    popover.classList.add("start");
-                }
-                else if (targetPosition.top + targetPosition.height / 2 + popoverPosition_1.height / 2 > window.innerHeight) {
-                    style.push("bottom:2px");
-                    popover.classList.add("end");
-                }
-                else {
-                    style.push("top:" + (targetPosition.top + targetPosition.height / 2) + "px");
-                    style.push("transform:translate(0,-50%)");
-                    popover.classList.add("center");
-                }
+            else {
+                var _d = resolveVerticalAlign(preferredAlign, targetPosition, popoverPosition_1), top_1 = _d.top, resolvedAlign = _d.alignClass;
+                alignClass = resolvedAlign;
+                style.push('top:' + top_1 + 'px');
             }
-            popover.setAttribute("style", style.join(";"));
+            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);
         }
     };
-    return React.cloneElement(component, __assign({ onClick: popoverEkle }, other));
+    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 popoverCss = "\n.spopover {\n    position: fixed;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 10000;\n}\n\n.spopover.arrow:after {\n    content: \"\";\n    position: absolute;\n    margin-left: -5px;\n    border-width: 5px;\n    border-style: solid;\n}\n\n.spopover.arrow.top:after {\n    top: 100%;\n    border-color: #757575 transparent transparent transparent;\n}\n\n.spopover.arrow.top.start:after { left: 15px;}\n\n.spopover.arrow.top.center:after { left: 50%;}\n\n.spopover.arrow.top.end:after { right: 15px;}\n\n\n.spopover.arrow.bottom:after {\n    bottom: 100%;\n    border-color: transparent transparent #757575 transparent;\n}\n\n.spopover.arrow.bottom.start:after { left: 15px;}\n\n.spopover.arrow.bottom.center:after { left: 50%;}\n\n.spopover.bottom.end:after { right: 15px;}\n\n.spopover.arrow.left:after {\n    margin-left: -1px;\n    left: 100%;\n    border-color: transparent transparent transparent #757575;\n}\n\n.spopover.arrow.left.start:after { top: 5px;}\n\n.spopover.arrow.left.center:after { top: 50%; margin-top: -5px;}\n\n.spopover.arrow.left.end:after { bottom: 15px;}\n\n.spopover.arrow.right:after {\n    margin-right: -1px;\n    right: 100%;\n    border-color: transparent #757575 transparent transparent;\n}\n\n.spopover.arrow.right.start:after { top: 5px;}\n\n.spopover.arrow.right.center:after { top: 50%; margin-top: -5px;}\n\n.spopover.arrow.right.end:after { bottom: 15px;}\n";
+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 };
+};

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

@@ -0,0 +1,89 @@
+.popover {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity 160ms ease;
+}
+
+.noFade {
+    transition: none;
+}
+
+.visible {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+}
+
+.closing {
+    opacity: 0;
+}
+
+.arrow::after {
+    content: "";
+    position: absolute;
+    border-width: 5px;
+    border-style: solid;
+    width: 0;
+    height: 0;
+    border-color: var(--popover-arrow-color, #757575);
+}
+
+.arrow.top::after {
+    top: 100%;
+    border-color: var(--popover-arrow-color, #757575) transparent transparent transparent;
+}
+
+.arrow.bottom::after {
+    bottom: 100%;
+    border-color: transparent transparent var(--popover-arrow-color, #757575) transparent;
+}
+
+.arrow.left::after {
+    left: 100%;
+    margin-left: -1px;
+    border-color: transparent transparent transparent var(--popover-arrow-color, #757575);
+}
+
+.arrow.right::after {
+    right: 100%;
+    margin-right: -1px;
+    border-color: transparent var(--popover-arrow-color, #757575) transparent transparent;
+}
+
+.arrow.top.alignStart::after,
+.arrow.bottom.alignStart::after {
+    left: 12px;
+}
+
+.arrow.top.alignCenter::after,
+.arrow.bottom.alignCenter::after {
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.arrow.top.alignEnd::after,
+.arrow.bottom.alignEnd::after {
+    right: 12px;
+}
+
+.arrow.left.alignStart::after,
+.arrow.right.alignStart::after {
+    top: 12px;
+}
+
+.arrow.left.alignCenter::after,
+.arrow.right.alignCenter::after {
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.arrow.left.alignEnd::after,
+.arrow.right.alignEnd::after {
+    bottom: 12px;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@sydsoft/base",
     "private": false,
-    "version": "1.44.0",
+    "version": "1.47.0",
     "description": "",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",