refactor(styles): cleanup

src/components/Attribution/index.tsx

@@ -8,14 +8,10 @@ type AttributionProps = {
   position?: AttributionPosition;
 };
 
+const accounts = ['paid-pro', 'paid-sponsor', 'paid-enterprise', 'paid-custom'];
+
 function Attribution({ proOptions, position = 'bottom-right' }: AttributionProps) {
-  if (
+  if (proOptions?.account && accounts.includes(proOptions?.account) && proOptions?.hideAttribution) {
-    (proOptions?.account === 'paid-pro' ||
-      proOptions?.account === 'paid-sponsor' ||
-      proOptions?.account === 'paid-enterprise' ||
-      proOptions?.account === 'paid-custom') &&
-    proOptions?.hideAttribution
-  ) {
     return null;
   }
 

src/components/Handle/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useContext, useCallback, HTMLAttributes, forwardRef } from 'react';
+import React, { memo, useContext, HTMLAttributes, forwardRef } from 'react';
 import cc from 'classcat';
 import shallow from 'zustand/shallow';
 
@@ -56,99 +56,71 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
     const handleId = id || null;
     const isTarget = type === 'target';
 
-    const onConnectExtended = useCallback(
+    const onConnectExtended = (params: Connection) => {
-      (params: Connection) => {
+      const { defaultEdgeOptions } = store.getState();
-        const { defaultEdgeOptions } = store.getState();
 
-        const edgeParams = {
+      const edgeParams = {
-          ...defaultEdgeOptions,
+        ...defaultEdgeOptions,
-          ...params,
+        ...params,
-        };
+      };
-        if (hasDefaultEdges) {
+      if (hasDefaultEdges) {
-          const { edges } = store.getState();
+        const { edges } = store.getState();
-          store.setState({ edges: addEdge(edgeParams, edges) });
+        store.setState({ edges: addEdge(edgeParams, edges) });
-        }
+      }
 
-        onConnectAction?.(edgeParams);
+      onConnectAction?.(edgeParams);
-        onConnect?.(edgeParams);
+      onConnect?.(edgeParams);
-      },
+    };
-      [hasDefaultEdges, onConnectAction, onConnect]
-    );
 
-    const onMouseDownHandler = useCallback(
+    const onMouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {
-      (event: React.MouseEvent<HTMLDivElement>) => {
+      if (event.button === 0) {
-        if (event.button === 0) {
+        handleMouseDown(
-          handleMouseDown(
+          event,
-            event,
+          handleId,
-            handleId,
+          nodeId,
-            nodeId,
+          store.setState,
-            store.setState,
+          onConnectExtended,
-            onConnectExtended,
+          isTarget,
-            isTarget,
+          isValidConnection,
-            isValidConnection,
+          connectionMode,
-            connectionMode,
+          undefined,
-            undefined,
+          undefined,
-            undefined,
+          onConnectStart,
-            onConnectStart,
+          onConnectStop,
-            onConnectStop,
+          onConnectEnd
-            onConnectEnd
+        );
-          );
+      }
-        }
+      onMouseDown?.(event);
-        onMouseDown?.(event);
+    };
-      },
+
-      [
+    const onClick = (event: React.MouseEvent) => {
-        handleId,
+      if (!connectionStartHandle) {
-        nodeId,
+        onConnectStart?.(event, { nodeId, handleId, handleType: type });
-        onConnectExtended,
+        store.setState({ connectionStartHandle: { nodeId, type, handleId } });
-        isTarget,
+        return;
-        isValidConnection,
+      }
+
+      const doc = getHostForElement(event.target as HTMLElement);
+      const { connection, isValid } = checkElementBelowIsValid(
+        event as unknown as MouseEvent,
         connectionMode,
-        onConnectStart,
+        connectionStartHandle.type === 'target',
-        onConnectStop,
+        connectionStartHandle.nodeId,
-        onConnectEnd,
+        connectionStartHandle.handleId || null,
-      ]
+        isValidConnection,
-    );
+        doc
+      );
 
-    const onClick = useCallback(
+      onConnectStop?.(event as unknown as MouseEvent);
-      (event: React.MouseEvent) => {
-        if (!connectionStartHandle) {
-          onConnectStart?.(event, { nodeId, handleId, handleType: type });
-          store.setState({ connectionStartHandle: { nodeId, type, handleId } });
-        } else {
-          const doc = getHostForElement(event.target as HTMLElement);
-          const { connection, isValid } = checkElementBelowIsValid(
-            event as unknown as MouseEvent,
-            connectionMode,
-            connectionStartHandle.type === 'target',
-            connectionStartHandle.nodeId,
-            connectionStartHandle.handleId || null,
-            isValidConnection,
-            doc
-          );
 
-          onConnectStop?.(event as unknown as MouseEvent);
+      if (isValid) {
+        onConnectExtended(connection);
+      }
 
-          if (isValid) {
+      onConnectEnd?.(event as unknown as MouseEvent);
-            onConnectExtended(connection);
-          }
 
-          onConnectEnd?.(event as unknown as MouseEvent);
+      store.setState({ connectionStartHandle: null });
-
+    };
-          store.setState({ connectionStartHandle: null });
-        }
-      },
-      [
-        connectionStartHandle,
-        onConnectStart,
-        onConnectExtended,
-        onConnectStop,
-        onConnectEnd,
-        isTarget,
-        nodeId,
-        handleId,
-        type,
-      ]
-    );
 
     const handleClasses = cc([
       'react-flow__handle',

src/contexts/NodeIdContext.ts

@@ -1,8 +1,6 @@
 import { createContext } from 'react';
 
-type ContextProps = string | null;
+export const NodeIdContext = createContext<string | null>(null);
-
-export const NodeIdContext = createContext<Partial<ContextProps>>(null);
 export const Provider = NodeIdContext.Provider;
 export const Consumer = NodeIdContext.Consumer;
 

src/theme-default.css

@@ -54,8 +54,7 @@
   background: #fff;
   border-color: #1a192b;
 
-  &.selected,
+  &.selected {
-  &.selected:hover {
     box-shadow: 0 0 0 0.5px #1a192b;
   }
 
@@ -71,16 +70,15 @@
   &:hover {
     box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
   }
+
+  &.selected {
+    box-shadow: 0 0 0 0.5px #1a192b;
+  }
 }
 
 .react-flow__node-group {
   background: rgba(240, 240, 240, 0.25);
   border-color: #1a192b;
-
-  &.selected,
-  &.selected:hover {
-    box-shadow: 0 0 0 0.5px #1a192b;
-  }
 }
 
 .react-flow__nodesselection-rect,