@canmingir/link 1.2.42 → 1.2.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canmingir/link",
-  "version": "1.2.42",
+  "version": "1.2.44",
   "type": "module",
   "exports": {
     ".": "./index.js",

package/src/lib/Flow/nodes/DraggableNode.jsx

@@ -1,8 +1,8 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+
 import { Box } from "@mui/material";
 import { useSelection } from "../selection/SelectionContext";
 
-import React, { useCallback, useEffect, useRef, useState } from "react";
-
 const DraggableNode = ({
   children,
   registerRef,
@@ -13,7 +13,7 @@ const DraggableNode = ({
   onConnect,
 }) => {
   const [offset, setOffset] = useState(() =>
-    initialPosition ? { ...initialPosition } : { x: 0, y: 0 }
+    initialPosition ? { ...initialPosition } : { x: 0, y: 0 },
   );
 
   useEffect(() => {
@@ -27,6 +27,7 @@ const DraggableNode = ({
   const localRef = useRef(null);
   const lastDeltaRef = useRef({ x: 0, y: 0 });
   const onDragRef = useRef(onDrag);
+  const didDragRef = useRef(false);
 
   const {
     isSelected,
@@ -58,14 +59,32 @@ const DraggableNode = ({
       localRef.current = el;
       registerRef?.(el);
     },
-    [registerRef]
+    [registerRef],
   );
 
+  useEffect(() => {
+    const el = localRef.current;
+    if (!el) return;
+
+    const onClickCapture = (e) => {
+      if (didDragRef.current) {
+        e.stopPropagation();
+        e.preventDefault();
+        didDragRef.current = false;
+      }
+    };
+
+    el.addEventListener("click", onClickCapture, true);
+    return () => el.removeEventListener("click", onClickCapture, true);
+  }, []);
+
   const handleMouseDown = useCallback(
     (e) => {
       if (e.button !== 0) return;
       e.stopPropagation();
 
+      didDragRef.current = false;
+
       if (onConnect && e.altKey) {
         e.preventDefault();
         onConnect(nodeId, [...selectedIds]);
@@ -91,6 +110,10 @@ const DraggableNode = ({
         const dx = ev.clientX - startX;
         const dy = ev.clientY - startY;
 
+        if (!didDragRef.current && (Math.abs(dx) > 3 || Math.abs(dy) > 3)) {
+          didDragRef.current = true;
+        }
+
         const deltaDx = dx - lastDeltaRef.current.x;
         const deltaDy = dy - lastDeltaRef.current.y;
         lastDeltaRef.current = { x: dx, y: dy };
@@ -125,7 +148,7 @@ const DraggableNode = ({
       clearSelection,
       moveSelectedNodes,
       onConnect,
-    ]
+    ],
   );
 
   return (

package/src/lib/GlassCard/GlassCard.jsx

@@ -1,24 +1,20 @@
-import { Box, Card, Divider, Typography } from "@mui/material";
-import { alpha, useTheme } from "@mui/material/styles";
+import {
+  Card,
+  CardActions,
+  CardContent,
+  CardHeader,
+  Divider,
+} from "@mui/material";
 
 import React from "react";
+import { useTheme } from "@mui/material/styles";
 
-const GlassCard = ({
-  width = "100%",
-  height = "85vh",
-  header,
-  content,
-  actions,
-  contentSx = {},
-}) => {
+const GlassCard = ({ children, sx = {}, ...props }) => {
   const theme = useTheme();
 
   return (
     <Card
       sx={{
-        width: width || "100%",
-        height: height || "85vh",
-        flexShrink: 0,
         display: "flex",
         flexDirection: "column",
         background: `linear-gradient(135deg, ${theme.palette.primary.main}08 0%, ${theme.palette.secondary.main}05 100%)`,
@@ -26,70 +22,63 @@ const GlassCard = ({
         border: `1px solid ${theme.palette.divider}`,
         borderRadius: 2,
         overflow: "hidden",
+        ...sx,
       }}
+      {...props}
     >
-      {header && (
-        <>
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              px: 2,
-              py: 1.5,
-              minHeight: 52,
-              flexShrink: 0,
-            }}
-          >
-            <Box sx={{ minWidth: 0, flex: 1 }}>
-              <Typography
-                variant="subtitle2"
-                noWrap
-                sx={{
-                  fontWeight: 600,
-                  color: "text.primary",
-                  lineHeight: 1.3,
-                }}
-              >
-                {header.title}
-              </Typography>
-              {header.subtitle && (
-                <Typography
-                  variant="caption"
-                  noWrap
-                  sx={{
-                    color: "text.secondary",
-                    lineHeight: 1.3,
-                    display: "block",
-                  }}
-                >
-                  {header.subtitle}
-                </Typography>
-              )}
-            </Box>
-            {actions && <Box sx={{ ml: 1, flexShrink: 0 }}>{actions}</Box>}
-          </Box>
-          <Divider />
-        </>
-      )}
-
-      <Box
-        sx={{
-          flex: 1,
-          overflow: "auto",
-          position: "relative",
-          ...contentSx,
-        }}
-      >
-        {!header && actions && (
-          <Box sx={{ position: "absolute", top: 8, right: 8, zIndex: 1 }}>
-            {actions}
-          </Box>
-        )}
-        {content}
-      </Box>
+      {children}
     </Card>
   );
 };
 
+const GlassCardHeader = ({ divider = true, sx = {}, ...props }) => (
+  <>
+    <CardHeader
+      sx={{
+        px: 1.5,
+        py: 0.75,
+        "& .MuiCardHeader-title": {
+          fontSize: "0.8125rem",
+          fontWeight: 600,
+          lineHeight: 1.3,
+        },
+        "& .MuiCardHeader-subheader": {
+          fontSize: "0.75rem",
+          lineHeight: 1.3,
+        },
+        ...sx,
+      }}
+      {...props}
+    />
+    {divider && <Divider />}
+  </>
+);
+
+const GlassCardContent = ({ sx = {}, ...props }) => (
+  <CardContent
+    sx={{
+      flex: 1,
+      overflow: "auto",
+      position: "relative",
+      p: 0,
+      "&:last-child": { pb: 0 },
+      ...sx,
+    }}
+    {...props}
+  />
+);
+
+const GlassCardActions = ({ sx = {}, ...props }) => (
+  <CardActions
+    sx={{
+      px: 1.5,
+      py: 0.75,
+      flexShrink: 0,
+      ...sx,
+    }}
+    {...props}
+  />
+);
+
+export { GlassCardHeader, GlassCardContent, GlassCardActions };
 export default GlassCard;

package/src/lib/GlassCard/index.js

@@ -1 +1 @@
-export { default } from "./GlassCard";
+export { default, GlassCardHeader, GlassCardContent, GlassCardActions } from "./GlassCard";

package/src/lib/index.js

@@ -49,4 +49,9 @@ export { default as Schema } from "./Schema";
 export { default as SchemaEditor } from "./SchemaEditor";
 export { default as ToggleableMenu } from "./ToggleableMenu";
 export { default as APIBody } from "./NewApiBody/NewAPIBody";
-export { default as GlassCard } from "./GlassCard/GlassCard";
+export {
+  default as GlassCard,
+  GlassCardHeader,
+  GlassCardContent,
+  GlassCardActions,
+} from "./GlassCard/GlassCard";