@sydsoft/base 1.44.0 → 1.48.0

package/dist/esm/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/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,16 +1,30 @@
-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";
-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 handleClick = function (item, e) {
+/**
+ * @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 const Menu = memo(function MemoFunction({ menu, className, style, withIcon = 'auto' }) {
+    const withIconComponent = useMemo(() => {
+        if (withIcon === true)
+            return true;
+        if (withIcon === false)
+            return false;
+        return Object.values(menu).some((item) => 'icon' in item && !!item.icon);
+    }, [menu, withIcon]);
+    const withRightComponent = useMemo(() => {
+        return Object.values(menu).some((item) => 'rightComponent' in item && !!item.rightComponent);
+    }, [menu]);
+    const handleClick = (item, e) => {
         if (!item.onClick)
             return;
         if (item.dialog) {
-            Dialog(__assign({}, item.dialog)).then(function (result) {
+            Dialog({ ...item.dialog }).then((result) => {
                 if (result && item.onClick) {
                     item.onClick(e);
                 }
@@ -20,13 +34,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 ${styles.ul} ${className || ''}`, style: style, children: Object.values(menu).map((item, key) => {
+            const { fullComponent, icon, title, rightComponent, seperator, href, style, itemProps, type, items, menuProps, subMenuPopoverProps, ...other } = item;
+            const 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", { className: styles.seperator, style: style, ...itemProps, ...other }, key);
+            const 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, { component: _jsx("li", { style: style, ...itemProps, ...other, children: Component }), position: "right-top", ...(subMenuPopoverProps || {}), children: _jsx(Menu, { menu: items, ...(menuProps || {}) }) }, key));
+            }
+            return (_jsx("li", { style: style, onClick: (e) => handleClick(item, e), ...itemProps, ...other, children: href ? _jsx(Link, { href: href, children: Component }) : Component }, key));
         }) }));
 });

package/dist/esm/modal/index.js

@@ -1,4 +1,3 @@
-import { __assign } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Copyright (c) 2023
@@ -8,59 +7,58 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 () {
+export const Modal = memo(function MemoFunction({ refModal = null, children, open = false, close, keepMounted = false, fullScreen = false, hideBackdrop = true, hideEsc = false, hideCloseButton = false, modalStyle, backdropStyle, vertialAlign = "center", horizontalAlign = "center" }) {
+    const [modalDiv, setModalDiv] = useState(null);
+    const ref = useRef(null);
+    useEffect(() => {
         if (refModal)
             refModal.current = ref.current;
     }, [ref.current]);
-    var onClose = function () {
+    const onClose = () => {
         if (close)
             close();
     };
-    var checkHideBackDrop = function (e) {
+    const checkHideBackDrop = (e) => {
         if (open && ref.current && !ref.current.contains(e.target))
             onClose();
     };
-    var checkESC = function (e) {
+    const checkESC = (e) => {
         if (e.keyCode === 27 || e.key === "Escape" || e.code === "Escape")
             onClose();
     };
-    useEffect(function () {
+    useEffect(() => {
         if (open) {
             if (hideBackdrop)
                 window.addEventListener("mousedown", checkHideBackDrop);
             if (hideEsc)
                 window.addEventListener("keydown", checkESC);
         }
-        return function () {
+        return () => {
             if (hideBackdrop)
                 window.removeEventListener("mousedown", checkHideBackDrop);
             if (hideEsc)
                 window.removeEventListener("keydown", checkESC);
         };
     });
-    useEffect(function () {
+    useEffect(() => {
         if (!modalDiv) {
-            var modalDivCheck = document.getElementById("smodal");
+            const modalDivCheck = document.getElementById("smodal");
             if (modalDivCheck) {
                 setModalDiv(modalDivCheck);
             }
             else {
-                var div = document.createElement("div");
+                const div = document.createElement("div");
                 div.setAttribute("id", "smodal");
                 document.body.appendChild(div);
                 setModalDiv(div);
             }
         }
-        return function () {
+        return () => {
             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] }) }));
+    const Component = (_jsx("div", { className: `${styles.backdrop} ${open ? styles.backdrop_open : ""}`, style: { alignItems: vertialAlign, justifyContent: horizontalAlign, ...backdropStyle }, children: _jsxs("div", { ref: ref, className: `smodal ${styles.modal} ${fullScreen ? styles.fullscreen : ""}`, style: modalStyle, children: [!hideCloseButton && (_jsx("div", { className: `close ${styles.close_fixed}`, children: _jsx("div", { className: styles.close, onClick: onClose, children: "\u2715" }) })), children] }) }));
     return modalDiv ? ReactDOM.createPortal(Component, modalDiv) : null;
 });

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