diff --git a/.changeset/grumpy-toes-sniff.md b/.changeset/grumpy-toes-sniff.md new file mode 100644 index 00000000..70cb871d --- /dev/null +++ b/.changeset/grumpy-toes-sniff.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +fix: improve TSDoc comments for `MiniMapProps` and `PanelProps` diff --git a/packages/react/src/additional-components/MiniMap/types.ts b/packages/react/src/additional-components/MiniMap/types.ts index 8416f835..02513b10 100644 --- a/packages/react/src/additional-components/MiniMap/types.ts +++ b/packages/react/src/additional-components/MiniMap/types.ts @@ -10,47 +10,93 @@ export type GetMiniMapNodeAttribute = (node: NodeT * @expand */ export type MiniMapProps = Omit, 'onClick'> & { - /** Color of nodes on minimap */ + /** + * Color of nodes on minimap. + * @default "#e2e2e2" + */ nodeColor?: string | GetMiniMapNodeAttribute; - /** Stroke color of nodes on minimap */ + /** + * Stroke color of nodes on minimap. + * @default "transparent" + */ nodeStrokeColor?: string | GetMiniMapNodeAttribute; - /** ClassName applied to nodes on minimap */ + /** + * Class name applied to nodes on minimap. + * @default "" + */ nodeClassName?: string | GetMiniMapNodeAttribute; - /** Border radius of nodes on minimap */ + /** + * Border radius of nodes on minimap. + * @default 5 + */ nodeBorderRadius?: number; - /** Stroke width of nodes on minimap */ + /** + * Stroke width of nodes on minimap. + * @default 2 + */ nodeStrokeWidth?: number; - /** Component used to render nodes on minimap */ + /** + * A custom component to render the nodes in the minimap. This component must render an SVG + * element! + */ nodeComponent?: ComponentType; - /** Background color of minimap */ + /** Background color of minimap. */ bgColor?: string; - /** Color of mask representing viewport */ + /** + * The color of the mask that covers the portion of the minimap not currently visible in the + * viewport. + * @default "rgba(240, 240, 240, 0.6)" + */ maskColor?: string; - /** Stroke color of mask representing viewport */ + /** + * Stroke color of mask representing viewport. + * @default transparent + */ maskStrokeColor?: string; - /** Stroke width of mask representing viewport */ + /** + * Stroke width of mask representing viewport. + * @default 1 + */ maskStrokeWidth?: number; /** - * Position of minimap on pane + * Position of minimap on pane. + * @default PanelPosition.BottomRight * @example PanelPosition.TopLeft, PanelPosition.TopRight, * PanelPosition.BottomLeft, PanelPosition.BottomRight */ position?: PanelPosition; - /** Callback caled when minimap is clicked*/ + /** Callback called when minimap is clicked. */ onClick?: (event: MouseEvent, position: XYPosition) => void; - /** Callback called when node on minimap is clicked */ + /** Callback called when node on minimap is clicked. */ onNodeClick?: (event: MouseEvent, node: NodeType) => void; - /** If true, viewport is pannable via mini map component */ + /** + * Determines whether you can pan the viewport by dragging inside the minimap. + * @default false + */ pannable?: boolean; - /** If true, viewport is zoomable via mini map component */ + /** + * Determines whether you can zoom the viewport by scrolling inside the minimap. + * @default false + */ zoomable?: boolean; - /** The aria-label attribute */ + /** + * There is no text inside the minimap for a screen reader to use as an accessible name, so it's + * important we provide one to make the minimap accessible. The default is sufficient, but you may + * want to replace it with something more relevant to your app or product. + * @default "React Flow mini map" + */ ariaLabel?: string | null; - /** Invert direction when panning the minimap viewport */ + /** Invert direction when panning the minimap viewport. */ inversePan?: boolean; - /** Step size for zooming in/out on minimap */ + /** + * Step size for zooming in/out on minimap. + * @default 10 + */ zoomStep?: number; - /** Offset the viewport on the minmap, acts like a padding */ + /** + * Offset the viewport on the minimap, acts like a padding. + * @default 5 + */ offsetScale?: number; }; diff --git a/packages/react/src/components/Panel/index.tsx b/packages/react/src/components/Panel/index.tsx index 8d854b91..16fe7841 100644 --- a/packages/react/src/components/Panel/index.tsx +++ b/packages/react/src/components/Panel/index.tsx @@ -1,4 +1,4 @@ -import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'; +import { HTMLAttributes, forwardRef } from 'react'; import cc from 'classcat'; import type { PanelPosition } from '@xyflow/system'; @@ -10,10 +10,10 @@ import type { ReactFlowState } from '../../types'; */ export type PanelProps = HTMLAttributes & { /** - * The position of the panel + * The position of the panel. + * @default "top-left" */ position?: PanelPosition; - children: ReactNode; }; const selector = (s: ReactFlowState) => (s.userSelectionActive ? 'none' : 'all');