What?

Convert renderResizeHandle on <DashboardGrid> (and the internal <ResizeHandle> / <GridItem> shapes) from a function render prop to a React.ComponentType< ResizeHandleRenderProps >. The internal invocation now passes the merged ref via a JSX prop (<RenderResizeHandle ref={ ... } />) instead of as an argument to a function call.

This unblocks lint on trunk. PR #77811 introduced the render-prop function, and the recent eslint-plugin-react-hooks v7 upgrade (#69962) activated react-hooks/refs, which flags passing a ref to a function during render.

Why?

CI is currently red on trunk because packages/grid/src/resize-handle.tsx:55 violates the new react-hooks/refs rule:

Passing a ref to a function may read its value during render (react-hooks/refs)

Adding the file to tools/eslint/suppressions.json would match the convention used by the v7 upgrade for pre-existing violations, but the underlying issue is that passing a callback ref as a function argument during render is exactly the pattern the rule is designed to discourage. Refs propagated via JSX ref={ ... } go through React's commit phase, which is the supported path; refs read inside a function call during render can tear.

The render-prop function shape also forced consumers to wrap their handle in an inline arrow (( props ) => <X { ...props } />). A ComponentType prop accepts the component directly.

How?

• packages/grid/src/types.ts: change the type of renderResizeHandle from ( props: ResizeHandleRenderProps ) => React.ReactNode to React.ComponentType< ResizeHandleRenderProps > in ResizeHandleProps, GridItemProps, and BaseDashboardGridProps. Update the surrounding JSDoc.
• packages/grid/src/resize-handle.tsx: replace the function call with a JSX render. A local PascalCase alias (RenderResizeHandle) is needed because JSX requires the component identifier to start with an uppercase letter.
• packages/grid/src/stories/index.story.tsx: pass the CustomResizeHandle component directly instead of wrapping it in an arrow function.
• packages/grid/README.md: update the props table, the "Custom resize handle" example, and the props-received table to reflect the component-based API.

tools/eslint/suppressions.json is intentionally untouched; the fix removes the violation at the source.

Testing

1. npm install
2. npx eslint --suppressions-location tools/eslint/suppressions.json packages/grid/src/. Expect exit code 0; the previous react-hooks/refs failure on resize-handle.tsx:55 is gone and no new suppression was added.
3. npx tsc --noEmit -p packages/grid/tsconfig.json. Expect exit code 0.
4. Storybook: npm run storybook:dev, navigate to Grid / Custom Resize Handle. The custom corner-stroke SVG handle should render at the bottom-right of each tile, drag-resizing should commit a new layout via onChangeLayout, and isResizing should flip the handle's opacity during the gesture.
5. Confirm git diff trunk -- tools/eslint/suppressions.json is empty.

Follow-ups

• None. The change is self-contained and unblocks trunk CI.