@sydsoft/base 1.47.0 → 1.49.0

package/index.ts

@@ -0,0 +1,21 @@
+export * from './_lib/baseFunctions';
+export * from './_lib/inputMask';
+export * from './_lib/listFunctions';
+export * from './_lib/storage/cookies';
+export * from './_lib/storage/encData';
+export * from './_lib/storage/localStorage';
+export * from './_lib/storage/sessionStorage';
+export * from './_lib/useInterval';
+
+export * from './alert';
+export * from './box';
+export * from './countDown';
+export * from './dateTime';
+export * from './form';
+export * from './grid';
+export * from './icon';
+export * from './menu';
+export * from './modal';
+export * from './popover';
+export * from './tooltip';
+

package/menu/index.module.css

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

package/menu/index.tsx

@@ -0,0 +1,143 @@
+/**
+ * @author    : izzetseydaoglu
+ * @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
+ * @version   : 2026-02-07 19:31:01
+ */
+
+import React, { memo, useMemo } from 'react';
+import { Dialog, propsDialog } from '../form';
+import { Popover, PopoverConfigBaseProps } from '../popover';
+
+import Link from 'next/link';
+import styles from './index.module.css';
+
+interface BaseProps {
+    style?: React.CSSProperties;
+    itemProps?: any;
+    [key: string]: any;
+}
+interface SeperatorProps extends BaseProps {
+    seperator: boolean;
+    title?: never;
+    icon?: never;
+    fullComponent?: never;
+    href?: never;
+    onClick?: never;
+    dialog?: never;
+}
+interface FullComponentProps extends BaseProps {
+    fullComponent: React.ReactElement;
+    seperator?: never;
+    title?: never;
+    icon?: never;
+    href?: 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;
+    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;
+    onClick?: never;
+    dialog?: never;
+}
+
+export type typeMenu = SeperatorProps | FullComponentProps | ItemComponentProps | SubMenuProps;
+
+interface Props {
+    menu: typeMenu[];
+    className?: string;
+    style?: React.CSSProperties;
+    withIcon?: boolean | 'auto';
+}
+
+export const Menu = memo(function MemoFunction({ menu, className, style, withIcon = 'auto' }: Props) {
+    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: any, e: any) => {
+        if (!item.onClick) return;
+        if (item.dialog) {
+            Dialog({ ...item.dialog }).then((result) => {
+                if (result && item.onClick) {
+                    item.onClick(e);
+                }
+            });
+        } else {
+            item.onClick(e);
+        }
+    };
+
+    return (
+        <ul className={`smenu ${styles.ul} ${className || ''}`} style={style}>
+            {Object.values(menu).map((item: typeMenu, key: number) => {
+                const { fullComponent, icon, title, rightComponent, seperator, href, style, itemProps, type, items, menuProps, subMenuPopoverProps, ...other } = item as typeMenu & {
+                    subMenuPopoverProps?: PopoverConfigBaseProps;
+                };
+                const hasSubmenu = type === 'submenu' && Array.isArray(items) && items.length > 0;
+
+                if (fullComponent) return React.cloneElement(fullComponent, { key: key });
+                if (seperator) return <li key={key} className={styles.seperator} style={style} {...itemProps} {...other} />;
+                const Component = (
+                    <>
+                        {withIconComponent && <div className={styles.menuicon}>{icon}</div>}
+                        <div className={styles.menutitle}>{title}</div>
+                        {withRightComponent && <div className={styles.rightmenu}>{rightComponent}</div>}
+                    </>
+                );
+
+                if (hasSubmenu) {
+                    return (
+                        <Popover
+                            key={key}
+                            component={
+                                <li style={style} {...itemProps} {...other}>
+                                    {Component}
+                                </li>
+                            }
+                            position="right-top"
+                            {...(subMenuPopoverProps || {})}
+                        >
+                            <Menu menu={items} {...(menuProps || {})} />
+                        </Popover>
+                    );
+                }
+
+                return (
+                    <li key={key} style={style} onClick={(e: any) => handleClick(item, e)} {...itemProps} {...other}>
+                        {href ? <Link href={href}>{Component}</Link> : Component}
+                    </li>
+                );
+            })}
+        </ul>
+    );
+});

package/modal/index.module.css

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

package/modal/index.tsx

@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) 2023
+ *  @author: izzetseydaoglu
+ *  @last-modified: 9.02.2024 06:07
+ */
+import React, { memo, useEffect, useRef, useState } from "react";
+
+import ReactDOM from "react-dom";
+import styles from "./index.module.css";
+
+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 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"
+}: Props) {
+    const [modalDiv, setModalDiv] = useState<HTMLElement | null>(null);
+    const ref = useRef<HTMLDivElement | null>(null);
+
+    useEffect(() => {
+        if (refModal) refModal.current = ref.current;
+    }, [ref.current]);
+
+    const onClose = () => {
+        if (close) close();
+    };
+    const checkHideBackDrop = (e: any) => {
+        if (open && ref.current && !ref.current.contains(e.target)) onClose();
+    };
+    const checkESC = (e: any) => {
+        if (e.keyCode === 27 || e.key === "Escape" || e.code === "Escape") onClose();
+    };
+
+    useEffect((): any => {
+        if (open) {
+            if (hideBackdrop) window.addEventListener("mousedown", checkHideBackDrop);
+            if (hideEsc) window.addEventListener("keydown", checkESC);
+        }
+
+        return () => {
+            if (hideBackdrop) window.removeEventListener("mousedown", checkHideBackDrop);
+            if (hideEsc) window.removeEventListener("keydown", checkESC);
+        };
+    });
+
+    useEffect(() => {
+        if (!modalDiv) {
+            const modalDivCheck = document.getElementById("smodal");
+            if (modalDivCheck) {
+                setModalDiv(modalDivCheck);
+            } else {
+                const div = document.createElement("div");
+                div.setAttribute("id", "smodal");
+                document.body.appendChild(div);
+                setModalDiv(div);
+            }
+        }
+        return () => {
+            onClose();
+        };
+    }, []);
+
+    if ((!keepMounted && !open) || typeof window === "undefined") return null;
+
+    const Component = (
+        <div className={`${styles.backdrop} ${open ? styles.backdrop_open : ""}`} style={{ alignItems: vertialAlign, justifyContent: horizontalAlign, ...backdropStyle }}>
+            <div ref={ref} className={`smodal ${styles.modal} ${fullScreen ? styles.fullscreen : ""}`} style={modalStyle}>
+                {!hideCloseButton && (
+                    <div className={`close ${styles.close_fixed}`}>
+                        <div className={styles.close} onClick={onClose}>
+                            ✕
+                        </div>
+                    </div>
+                )}
+                {children}
+            </div>
+        </div>
+    );
+
+    return modalDiv ? ReactDOM.createPortal(Component, modalDiv) : null;
+});

package/npm_recovery_codes.txt

@@ -0,0 +1,5 @@
+d3c67aff268ef0dd81c4623a9743d3c550d8b24a15c4060a3ed1034b74270cf2
+fa9179c2ac37eb93be8d17b49abd4cfbafa82805663c80b3221a54ed680e30e3
+d9cce02220fa4941c34e22522d10abb80a078ae50a3d69ce70aa5d6becc1f54e
+42cf513809d4a112837286a54c401738f30332c0bae53c8a2c53b51380ba0995
+d8a49591543c9b36137dfb840801a17757da1aed9dd4a2356f3efcda728a0021

package/package.json

@@ -1,21 +1,27 @@
 {
     "name": "@sydsoft/base",
     "private": false,
-    "version": "1.47.0",
+    "version": "1.49.0",
     "description": "",
-    "main": "./dist/cjs/index.js",
-    "module": "./dist/esm/index.js",
-    "types": "./dist/esm/index.d.ts",
-    "files": [
-        "./dist/",
+    "type": "module",
+    "main": "./_dist/index.js",
+    "module": "./_dist/index.js",
+    "types": "./_dist/index.d.ts",
+    "fiyanles": [
+        "./_dist/",
         "README.md"
     ],
+    "exports": {
+        ".": {
+            "types": "./_dist/index.d.ts",
+            "import": "./_dist/index.js"
+        }
+    },
     "scripts": {
-        "test": "rm -rf ../*.tgz && rm -rf ../.next && npm run build && npm pack --pack-destination ../ && cd ../ && npm uninstall @sydsoft/base && npm install *.tgz && npm run dev",
-        "buildCommonJS": "rm -rf ./dist && tsc && tsc --module commonjs --outDir ./dist/csj",
-        "copyFiles": "copyfiles -u 2 \"../@base/**/*.css\" dist/esm",
-        "build": "rm -rf ./dist && tsc && npm run copyFiles",
-        "publishNPM": "npm run build && npm version patch && npm version minor && npm publish --dry-run && npm publish --access public && rm -rf ./dist"
+        "clean": "rm -rf ./_dist",
+        "copyFiles": "copyfiles \"**/*.css\" _dist",
+        "build": "rm -rf ./_dist && tsc && npm run copyFiles",
+        "publishNPM": "npm run build && npm version patch && npm version minor && npm publish --dry-run && npm publish --access public && npm run clean"
     },
     "publishConfig": {
         "access": "public"
@@ -36,6 +42,7 @@
     "devDependencies": {
         "@types/react": "^18",
         "@types/react-dom": "^18",
+        "copyfiles": "^2.4.1",
         "react": "^18",
         "react-dom": "^18",
         "typescript": "^5"

package/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;
+}