✅ Deploy Preview for react-querybuilder ready!

Name	Link
🔨 Latest commit	0ad97d4
🔍 Latest deploy log	https://app.netlify.com/projects/react-querybuilder/deploys/68a8abcbf229c800087d8828
😎 Deploy Preview	https://deploy-preview-935--react-querybuilder.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 50 (🔴 down 8 from production) Accessibility: 89 (no change from production) Best Practices: 100 (no change from production) SEO: 95 (no change from production) PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

Claude finished @jakeboone02's task —— View job

PR Review: Add "drop not allowed" styles

Reviewing the implementation for code quality, best practices, potential bugs, performance considerations, and security concerns.

Todo List:

• Analyze core component changes (Rule.tsx, RuleGroup.tsx)
• Review DnD package modifications
• Examine styling implementation
• Check TypeScript type definitions
• Review utility function changes
• Provide overall feedback and recommendations

Code Review Findings

✅ Strengths

1. Consistent Implementation Pattern

• Clean integration across all DnD components using the same monitor.isOver() && !monitor.canDrop() pattern
• Proper TypeScript typing with dropNotAllowed: boolean in DropCollection interface
• Consistent naming throughout the codebase

2. Good CSS Architecture

• New CSS variable $rqb-dnd-drop-not-allowed-cursor: not-allowed follows existing pattern
• Clean separation with dedicated .dndDropNotAllowed class
• Uses CSS custom properties pattern: var(--#{$rqb-var-prefix}dnd-drop-not-allowed-cursor)

3. Proper Integration

• dropNotAllowed properly merged in useMergedContext.ts:102
• Added to mergeClassnames.ts:43 utility function
• Included in both standardClassnames and defaultControlClassnames in defaults.ts

4. Type Safety

• New optional props in RuleProps and RuleGroupProps interfaces
• Maintains backward compatibility with optional dropNotAllowed?: boolean

🔍 Minor Considerations

1. Performance (packages/react-querybuilder/src/components/Rule.tsx:750, 759-760)

dropNotAllowed && classNamesProp.dndDropNotAllowed,
// ...
[standardClassnames.dndDropNotAllowed]: dropNotAllowed,

The conditional class application is efficiently implemented using short-circuit evaluation and object spread.

2. Memory Usage
The useMemo dependencies in Rule.tsx:764-787 properly include dropNotAllowed to prevent unnecessary re-renders.

🎯 No Issues Found

• Security: No security concerns identified
• Bugs: Implementation appears solid with proper null checks and type safety
• Breaking Changes: All changes are additive and backward compatible
• Testing: 100% test coverage maintained

Overall Assessment

This is a well-implemented feature that follows the project's established patterns and conventions perfectly. The changes are minimal, focused, and maintain the high code quality standards of the project. The implementation correctly handles the "drop not allowed" visual feedback in a consistent way across all drag-and-drop components.

Recommendation: ✅ Approve - Ready to merge.

npm i https://pkg.pr.new/react-querybuilder/react-querybuilder/@react-querybuilder/antd@935

npm i https://pkg.pr.new/react-querybuilder/react-querybuilder/@react-querybuilder/bootstrap@935

npm i https://pkg.pr.new/react-querybuilder/react-querybuilder/@react-querybuilder/bulma@935

npm i https://pkg.pr.new/react-querybuilder/react-querybuilder/@react-querybuilder/chakra@935

npm i https://pkg.pr.new/react-querybuilder/react-querybuilder/@react-querybuilder/datetime@935

npm i https://pkg.pr.new/react-querybuilder/react-querybuilder/@react-querybuilder/dnd@935

npm i https://pkg.pr.new/react-querybuilder/react-querybuilder/@react-querybuilder/drizzle@935

npm i https://pkg.pr.new/react-querybuilder/react-querybuilder/@react-querybuilder/fluent@935

npm i https://pkg.pr.new/react-querybuilder/react-querybuilder/@react-querybuilder/mantine@935

npm i https://pkg.pr.new/react-querybuilder/react-querybuilder/@react-querybuilder/material@935

npm i https://pkg.pr.new/react-querybuilder/react-querybuilder/@react-querybuilder/native@935

npm i https://pkg.pr.new/react-querybuilder/react-querybuilder@935

npm i https://pkg.pr.new/react-querybuilder/react-querybuilder/@react-querybuilder/tremor@935

commit: 0ad97d4

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 0ad97d4:

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (8e15b8f) to head (0ad97d4).

@@            Coverage Diff            @@
##              main      #935   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          200       200           
  Lines         6936      6943    +7     
  Branches      3499      3524   +25     
=========================================
+ Hits          6936      6943    +7     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.