@sydsoft/base 1.58.0 → 2.0.0

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

@@ -0,0 +1,75 @@
+/**
+ * @author    : izzetseydaoglu
+ * @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
+ * @version   : 2026-02-11 18:48:47
+ */
+import React from 'react';
+import { propsDialog } from '../form';
+import { PopoverConfigBaseProps } from '../popover';
+interface BaseProps {
+    style?: React.CSSProperties;
+    itemProps?: any;
+    disabled?: boolean;
+    noRender?: boolean;
+    [key: string]: any;
+}
+interface SeperatorProps extends BaseProps {
+    seperator: boolean;
+    title?: never;
+    icon?: never;
+    fullComponent?: never;
+    href?: never;
+    target?: never;
+    onClick?: never;
+    dialog?: never;
+}
+interface FullComponentProps extends BaseProps {
+    fullComponent: React.ReactElement;
+    seperator?: never;
+    title?: never;
+    icon?: never;
+    href?: never;
+    target?: never;
+    onClick?: never;
+    dialog?: never;
+}
+interface ItemComponentProps extends BaseProps {
+    seperator?: false;
+    fullComponent?: never;
+    type?: never;
+    title: string;
+    icon?: React.ReactNode;
+    rightComponent?: React.ReactNode;
+    href?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    onClick?: (e: React.MouseEvent<HTMLLIElement>) => void;
+    dialog?: propsDialog;
+}
+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;
+    target?: never;
+    onClick?: never;
+    dialog?: never;
+}
+export type typeMenu = SeperatorProps | FullComponentProps | ItemComponentProps | SubMenuProps;
+interface Props {
+    menu: typeMenu[];
+    className?: string;
+    style?: React.CSSProperties;
+    withIcon?: boolean | 'auto';
+}
+export declare const Menu: React.NamedExoticComponent<Props>;
+export {};

package/dist/esm/menu/index.js

@@ -0,0 +1,59 @@
+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-11 18:48:47
+ */
+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.disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        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, noRender = _a.noRender, fullComponent = _a.fullComponent, icon = _a.icon, title = _a.title, rightComponent = _a.rightComponent, seperator = _a.seperator, href = _a.href, target = _a.target, style = _a.style, itemProps = _a.itemProps, type = _a.type, items = _a.items, menuProps = _a.menuProps, subMenuPopoverProps = _a.subMenuPopoverProps, disabled = _a.disabled, other = __rest(_a, ["noRender", "fullComponent", "icon", "title", "rightComponent", "seperator", "href", "target", "style", "itemProps", "type", "items", "menuProps", "subMenuPopoverProps", "disabled"]);
+            if (noRender)
+                return null;
+            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: 'menuicon', children: icon }), _jsx("div", { className: 'menutitle', children: title }), withRightComponent && _jsx("div", { className: 'menuright', children: rightComponent })] }));
+            if (hasSubmenu) {
+                return (_jsx(Popover, __assign({ component: _jsx("li", __assign({ style: style, disabled: disabled }, itemProps, other, { children: Component })), position: "right-top" }, (subMenuPopoverProps || {}), { children: _jsx(Menu, __assign({ menu: items }, (menuProps || {}))) }), key));
+            }
+            return (_jsx("li", __assign({ style: style, disabled: disabled }, itemProps, other, { onClick: function (e) { return handleClick(item, e); }, children: href ? (_jsx(Link, { href: href, target: target, children: Component })) : (Component) }), key));
+        }) }));
+});

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

@@ -0,0 +1,106 @@
+.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;
+}
+
+.ul > li:hover :global(.menutitle){
+    text-shadow: 0.3px 0 0 currentColor;
+}
+
+.ul > li[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+.ul > li :global(.menuicon) {
+    display: inline-flex;
+    overflow: hidden;
+    width: 30px;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    color: #606060;
+}
+
+.ul > li :global(.menuicon) img {
+    max-height: 19px;
+    width: auto !important;
+    height: auto !important;
+}
+
+.ul > li :global(.menutitle) {
+    display: inline-flex;
+    flex: 1;
+    align-items: center;
+    justify-content: flex-start;
+    margin: 0 10px;
+}
+
+.ul > li :global(.menuright) {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    color: #909090;
+    font-size: 12px;
+    width: 50px;
+}
+.ul > li :global(.menuright) > 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 @@
+/**
+ * @author    : izzetseydaoglu
+ * @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
+ * @version   : 2026-02-10 20:26:27
+ */
+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";
+/**
+ * @author    : izzetseydaoglu
+ * @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
+ * @version   : 2026-02-10 20:26:27
+ */
+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,83 @@
+/**
+ * @author    : izzetseydaoglu
+ * @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
+ * @version   : 2026-02-10 20:25:31
+ */
+
+.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-11 18:50:06
+ */
+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 {};