chore(node-resizer): cleanup

packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx

@@ -1,15 +1,16 @@
 import { useRef, useEffect, memo } from 'react';
 import cc from 'classcat';
-import { XYResizer, ResizerControlVariant, type XYResizerInstance, type XYResizerChange } from '@xyflow/system';
+import { XYResizer, ResizeControlVariant, type XYResizerInstance, type XYResizerChange } from '@xyflow/system';
+
 import { useStoreApi } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
 import type { NodeChange, NodeDimensionChange, NodePositionChange } from '../../types';
-import { type ResizeControlProps, type ResizeControlLineProps } from './types';
+import type { ResizeControlProps, ResizeControlLineProps } from './types';
 
 function ResizeControl({
   nodeId,
   position,
-  variant = ResizerControlVariant.Handle,
+  variant = ResizeControlVariant.Handle,
   className,
   style = {},
   children,
@@ -28,7 +29,7 @@ function ResizeControl({
   const id = typeof nodeId === 'string' ? nodeId : contextNodeId;
   const store = useStoreApi();
   const resizeControlRef = useRef<HTMLDivElement>(null);
-  const defaultPosition = variant === ResizerControlVariant.Line ? 'right' : 'bottom-right';
+  const defaultPosition = variant === ResizeControlVariant.Line ? 'right' : 'bottom-right';
   const controlPosition = position ?? defaultPosition;
 
   const resizer = useRef<XYResizerInstance | null>(null);
@@ -128,7 +129,7 @@ function ResizeControl({
   ]);
 
   const positionClassNames = controlPosition.split('-');
-  const colorStyleProp = variant === ResizerControlVariant.Line ? 'borderColor' : 'backgroundColor';
+  const colorStyleProp = variant === ResizeControlVariant.Line ? 'borderColor' : 'backgroundColor';
   const controlStyle = color ? { ...style, [colorStyleProp]: color } : style;
 
   return (
@@ -143,7 +144,7 @@ function ResizeControl({
 }
 
 export function ResizeControlLine(props: ResizeControlLineProps) {
-  return <ResizeControl {...props} variant={ResizerControlVariant.Line} />;
+  return <ResizeControl {...props} variant={ResizeControlVariant.Line} />;
 }
 
-export default memo(ResizeControl);
+export const NodeResizeControl = memo(ResizeControl);

packages/react/src/additional-components/NodeResizer/NodeResizer.tsx

@@ -1,8 +1,9 @@
-import ResizeControl from './ResizeControl';
-import { NodeResizerProps } from './types';
-import { ResizerControlVariant, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS } from '@xyflow/system';
+import { ResizeControlVariant, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS } from '@xyflow/system';
 
-export default function NodeResizer({
+import { NodeResizeControl } from './NodeResizeControl';
+import type { NodeResizerProps } from './types';
+
+export function NodeResizer({
   nodeId,
   isVisible = true,
   handleClassName,
@@ -27,13 +28,13 @@ export default function NodeResizer({
   return (
     <>
       {XY_RESIZER_LINE_POSITIONS.map((position) => (
-        <ResizeControl
+        <NodeResizeControl
           key={position}
           className={lineClassName}
           style={lineStyle}
           nodeId={nodeId}
           position={position}
-          variant={ResizerControlVariant.Line}
+          variant={ResizeControlVariant.Line}
           color={color}
           minWidth={minWidth}
           minHeight={minHeight}
@@ -47,7 +48,7 @@ export default function NodeResizer({
         />
       ))}
       {XY_RESIZER_HANDLE_POSITIONS.map((position) => (
-        <ResizeControl
+        <NodeResizeControl
           key={position}
           className={handleClassName}
           style={handleStyle}

packages/react/src/additional-components/NodeResizer/index.tsx

@@ -1,4 +1,4 @@
-export { default as NodeResizer } from './NodeResizer';
-export { default as NodeResizeControl } from './ResizeControl';
+export { NodeResizer } from './NodeResizer';
+export { NodeResizeControl } from './NodeResizeControl';
 
 export * from './types';

packages/react/src/additional-components/NodeResizer/types.ts

@@ -1,7 +1,7 @@
 import type { CSSProperties, ReactNode } from 'react';
 import type {
-  XYResizeControlPosition,
-  XYResizeControlLinePosition,
+  ControlPosition,
+  ControlLinePosition,
   ResizeControlVariant,
   ShouldResize,
   OnResizeStart,
@@ -42,7 +42,7 @@ export type ResizeControlProps = Pick<
   | 'onResize'
   | 'onResizeEnd'
 > & {
-  position?: XYResizeControlPosition;
+  position?: ControlPosition;
   variant?: ResizeControlVariant;
   className?: string;
   style?: CSSProperties;
@@ -50,5 +50,5 @@ export type ResizeControlProps = Pick<
 };
 
 export type ResizeControlLineProps = ResizeControlProps & {
-  position?: XYResizeControlLinePosition;
+  position?: ControlLinePosition;
 };