@sydsoft/base 1.43.0 → 1.47.0

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 {};