feat: Set single root group as default

Author: Vojtěch Václav Porteš

README.md

@@ -261,7 +261,7 @@ When `draggable` is `false`, no drag handles or drop zones are rendered.
 
 #### `singleRootGroup`
 
-When `singleRootGroup` is `true`, the builder is locked to exactly one root group.
+`singleRootGroup` is enabled by default. When it is `true`, the builder is locked to exactly one root group.
 
 - root-level rules cannot be added
 - additional root-level groups cannot be added
@@ -273,6 +273,8 @@ Nested rules and groups inside the root group still work normally.
 
 If the incoming `data` contains root-level rules or multiple root items, React Query Builder wraps them into a single root group automatically.
 
+Set `singleRootGroup={false}` if you want to allow root-level rules, multiple root groups, and root-level drag-and-drop slots.
+
 #### `groupTypes`
 
 Controls what kinds of groups users can add:

example/src/main.tsx

@@ -146,7 +146,7 @@ const App: React.FC = () => {
     React.useState<DenormalizedQuery>(initialQueryTree);
   const [readOnly, setReadOnly] = React.useState(false);
   const [draggable, setDraggable] = React.useState(false);
-  const [singleRootGroup, setSingleRootGroup] = React.useState(false);
+  const [singleRootGroup, setSingleRootGroup] = React.useState(true);
   const [theme, setTheme] = React.useState<IThemeProviderProps>({
     colors,
   });

src/builder.test.tsx

@@ -75,7 +75,12 @@ describe('#components/Builder', () => {
   it('Adds a group at the root level', () => {
     const onChange = jest.fn();
     const wrapper = mount(
-      <Builder fields={fields} data={[]} onChange={onChange} />
+      <Builder
+        fields={fields}
+        data={[]}
+        singleRootGroup={false}
+        onChange={onChange}
+      />
     );
 
     wrapper.find('[data-test="AddRootGroup"]').first().simulate('click');
@@ -90,7 +95,12 @@ describe('#components/Builder', () => {
   it('Adds a rule at the root level', () => {
     const onChange = jest.fn();
     const wrapper = mount(
-      <Builder fields={fields} data={[]} onChange={onChange} />
+      <Builder
+        fields={fields}
+        data={[]}
+        singleRootGroup={false}
+        onChange={onChange}
+      />
     );
 
     wrapper.find('[data-test="AddRootRule"]').first().simulate('click');
@@ -115,6 +125,7 @@ describe('#components/Builder', () => {
             children: [],
           },
         ]}
+        singleRootGroup={false}
         onChange={onChange}
       />
     );
@@ -134,6 +145,7 @@ describe('#components/Builder', () => {
         fields={fields}
         data={[]}
         groupTypes="without-modifiers"
+        singleRootGroup={false}
         onChange={onChange}
       />
     );
@@ -164,6 +176,7 @@ describe('#components/Builder', () => {
         fields={fields}
         data={[]}
         groupTypes="both"
+        singleRootGroup={false}
         onChange={jest.fn()}
       />
     );

src/builder.tsx

@@ -185,7 +185,7 @@ export const Builder: FC<IBuilderProps> = ({
   strings = defaultStrings,
   readOnly = false,
   draggable = false,
-  singleRootGroup = false,
+  singleRootGroup = true,
   groupTypes = 'with-modifiers',
   onChange,
 }) => {