ml-ui-lib 1.0.47 → 1.0.48

package/dist/components/SlidingPanel/SlidingPanel.css

@@ -119,10 +119,10 @@
 .spb-header {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: end;
     padding: 12px 16px;
-    border-bottom: 1px solid #f1f1f1;
-    min-height: 48px;
+    /* border-bottom: 1px solid #f1f1f1; */
+    min-height: 0px;
 }
 
 .spb-title {
@@ -136,19 +136,30 @@
     padding: 16px;
     overflow-y: auto;
     flex: 1 1 auto;
+
+    /* ✅ hide scrollbar (Firefox) */
+    scrollbar-width: none;
+
+    /* ✅ prevent layout shift on some browsers */
+    -ms-overflow-style: none;
+}
+
+/* ✅ Chrome, Safari, Edge */
+.spb-body::-webkit-scrollbar {
+    display: none;
 }
 
 /* Desktop close button */
 .spb-close-btn {
     background: none;
     border: none;
-    font-size: 20px;
+    font-size: 25px;
     line-height: 1;
     cursor: pointer;
-    padding: 5px 10px;
+    padding: 30px 0px 25px 10px;
     border-radius: 6px;
     color: #111827;
-    margin-right: 7px;
+    margin-right: 0px;
 }
 
 .spb-close-btn:hover {
@@ -188,9 +199,9 @@
         cursor: grabbing;
     }
 
-    .spb-close-btn {
+    /* .spb-close-btn {
         display: none;
-    }
+    } */
 
     /* ✅ Mobile top-left close */
     .spb-mobile-close-btn {

package/dist/components/SlidingPanel/SlidingPanel.d.ts

@@ -6,7 +6,6 @@ export interface SlidingPanelProps {
     children: React.ReactNode;
     height?: string;
     width?: string;
-    title?: string;
     closeOnOverlayClick?: boolean;
     position?: "bottom" | "top" | "left" | "right";
 }

package/dist/components/SlidingPanel/SlidingPanel.js

@@ -2,13 +2,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import "./SlidingPanel.css";
-export const SlidingPanel = ({ isOpen, onClose, children, height = "80%", width = "100%", title, closeOnOverlayClick = true, position = "bottom", }) => {
+export const SlidingPanel = ({ isOpen, onClose, children, height = "80%", width = "100%", closeOnOverlayClick = true, position = "bottom", }) => {
     const [visible, setVisible] = useState(false);
     const [animateOpen, setAnimateOpen] = useState(false);
     const panelRef = useRef(null);
     const headerRef = useRef(null);
     const handleRef = useRef(null);
-    // Open/close animation
+    let startPos = 0;
+    let currentPos = 0;
+    let isDragging = false;
+    const isVertical = position === "bottom" || position === "top";
+    // OPEN / CLOSE animation
     useEffect(() => {
         if (isOpen) {
             setVisible(true);
@@ -17,7 +21,6 @@ export const SlidingPanel = ({ isOpen, onClose, children, height = "80%", width
             return () => clearTimeout(id);
         }
         else {
-            // Slide out according to position
             if (panelRef.current) {
                 switch (position) {
                     case "bottom":
@@ -35,29 +38,38 @@ export const SlidingPanel = ({ isOpen, onClose, children, height = "80%", width
                 }
             }
             setAnimateOpen(false);
-            // Keep in DOM until slide completes
             const id = setTimeout(() => setVisible(false), 320);
             document.body.style.overflow = "";
             return () => clearTimeout(id);
         }
     }, [isOpen, position]);
-    // closing
+    // DRAG LOGIC
     useEffect(() => {
         const panel = panelRef.current;
         const handle = handleRef.current;
         const header = headerRef.current;
         if (!panel)
             return;
-        const dragAreaElements = [handle, header].filter(Boolean);
-        let startPos = 0;
-        let currentPos = 0;
-        let isDragging = false;
-        // Determine vertical or horizontal drag based on position
-        const isVertical = position === "bottom" || position === "top";
-        const isHorizontal = position === "left" || position === "right";
-        const getDiff = (current) => {
-            return isVertical ? current - startPos : current - startPos;
+        // ✅ CHANGE 1: whole panel is draggable
+        const dragAreaElements = [panel].filter(Boolean);
+        // ✅ NEW: scroll + boundary detection
+        const body = panel.querySelector(".spb-body");
+        let isScrollActive = false;
+        const isAtBoundary = () => {
+            if (!body)
+                return true;
+            const atTop = body.scrollTop <= 0;
+            const atBottom = body.scrollTop + body.clientHeight >= body.scrollHeight - 1;
+            return atTop || atBottom;
         };
+        body?.addEventListener("scroll", () => {
+            isScrollActive = true;
+            clearTimeout(body._scrollTimer);
+            body._scrollTimer = setTimeout(() => {
+                isScrollActive = false;
+            }, 80);
+        });
+        const getDiff = (current) => isVertical ? current - startPos : current - startPos;
         const getTransform = (diff) => {
             switch (position) {
                 case "bottom":
@@ -73,6 +85,9 @@ export const SlidingPanel = ({ isOpen, onClose, children, height = "80%", width
             }
         };
         const startDrag = (pos) => {
+            // ✅ CHANGE 2: block drag if scrolling or not at boundary
+            if (isScrollActive || !isAtBoundary())
+                return;
             startPos = pos;
             isDragging = true;
             panel.style.transition = "none";
@@ -80,6 +95,8 @@ export const SlidingPanel = ({ isOpen, onClose, children, height = "80%", width
         const moveDrag = (pos) => {
             if (!isDragging)
                 return;
+            if (isScrollActive)
+                return;
             currentPos = pos;
             const diff = getDiff(currentPos);
             panel.style.transform = getTransform(diff);
@@ -90,57 +107,51 @@ export const SlidingPanel = ({ isOpen, onClose, children, height = "80%", width
             isDragging = false;
             const diff = getDiff(currentPos);
             panel.style.transition = "transform 0.3s ease";
-            const threshold = 100; // px to trigger close
+            const threshold = 100;
             let shouldClose = false;
             switch (position) {
                 case "bottom":
                     shouldClose = diff > threshold;
-                    panel.style.transform = shouldClose
-                        ? `translate(-50%, 100%)`
-                        : `translate(-50%, 0)`;
                     break;
                 case "top":
                     shouldClose = diff < -threshold;
-                    panel.style.transform = shouldClose
-                        ? `translate(-50%, -100%)`
-                        : `translate(-50%, 0)`;
                     break;
                 case "left":
                     shouldClose = diff < -threshold;
-                    panel.style.transform = shouldClose
-                        ? `translate(-100%, -50%)`
-                        : `translate(0, -50%)`;
                     break;
                 case "right":
                     shouldClose = diff > threshold;
-                    panel.style.transform = shouldClose
-                        ? `translate(100%, -50%)`
-                        : `translate(0, -50%)`;
                     break;
             }
             if (shouldClose) {
                 switch (position) {
-                    case "right":
-                        panel.style.transform = `translate(100%, -50%)`;
-                        break;
-                    case "left":
-                        panel.style.transform = `translate(-100%, -50%)`;
+                    case "bottom":
+                        panel.style.transform = "translate(-50%, 100%)";
                         break;
                     case "top":
-                        panel.style.transform = `translate(-50%, -100%)`;
+                        panel.style.transform = "translate(-50%, -100%)";
                         break;
-                    case "bottom":
-                        panel.style.transform = `translate(-50%, 100%)`;
+                    case "left":
+                        panel.style.transform = "translate(-100%, -50%)";
+                        break;
+                    case "right":
+                        panel.style.transform = "translate(100%, -50%)";
                         break;
                 }
-                setTimeout(() => onClose(), 250); // keep in DOM while sliding
+                setTimeout(onClose, 250);
+            }
+            else {
+                panel.style.transform =
+                    position === "bottom" || position === "top"
+                        ? "translate(-50%, 0)"
+                        : "translate(0, -50%)";
             }
         };
-        // Touch events
+        // touch
         const onTouchStart = (e) => startDrag(isVertical ? e.touches[0].clientY : e.touches[0].clientX);
         const onTouchMove = (e) => moveDrag(isVertical ? e.touches[0].clientY : e.touches[0].clientX);
         const onTouchEnd = () => endDrag();
-        // Mouse events
+        // mouse
         const onMouseDown = (e) => startDrag(isVertical ? e.clientY : e.clientX);
         const onMouseMove = (e) => moveDrag(isVertical ? e.clientY : e.clientX);
         const onMouseUp = () => endDrag();
@@ -165,6 +176,6 @@ export const SlidingPanel = ({ isOpen, onClose, children, height = "80%", width
     }, [onClose, position]);
     if (!visible && !isOpen)
         return null;
-    return (_jsxs("div", { className: `spb-root ${animateOpen ? "spb-open" : "spb-close"}`, "aria-hidden": !isOpen, children: [_jsx("div", { className: "spb-backdrop", onClick: () => closeOnOverlayClick && onClose() }), _jsxs("div", { ref: panelRef, className: `spb-panel spb-panel--position-${position}`, style: { height, width }, role: "dialog", "aria-modal": "true", onClick: (e) => e.stopPropagation(), children: [_jsx("div", { ref: handleRef, className: "spb-handle" }), _jsxs("div", { ref: headerRef, className: "spb-header", children: [title ? _jsx("h3", { className: "spb-title", children: title }) : _jsx("div", {}), _jsx("button", { className: "spb-close-btn", onClick: onClose, children: "\u00D7" })] }), _jsx("div", { className: "spb-body", children: children })] })] }));
+    return (_jsxs("div", { className: `spb-root ${animateOpen ? "spb-open" : "spb-close"}`, children: [_jsx("div", { className: "spb-backdrop", onClick: () => closeOnOverlayClick && onClose() }), _jsxs("div", { ref: panelRef, className: `spb-panel spb-panel--position-${position}`, style: { height, width }, role: "dialog", "aria-modal": "true", onClick: (e) => e.stopPropagation(), children: [_jsx("div", { ref: headerRef, className: "spb-header", children: _jsx("button", { className: "spb-close-btn", onClick: onClose, children: "\u00D7" }) }), _jsx("div", { className: "spb-body", children: children })] })] }));
 };
 export default SlidingPanel;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ml-ui-lib",
-  "version": "1.0.47",
+  "version": "1.0.48",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",