Freeze v4.5.2 documentation

Author: jakeboone02

docs/api/querybuilder.mdx

@@ -770,7 +770,9 @@ Pass `true` to display a drag handle to the left of each group header and rule.
 
 :::caution
 
-`react-querybuilder` uses [`react-dnd`](https://react-dnd.github.io/react-dnd/) to enable drag-and-drop features. If your application already uses `react-dnd`, you should import and render `<QueryBuilderWithoutDndProvider />` instead of `<QueryBuilder />`. They are functionally the same, but the former will rely on your pre-existing `DndProvider` wrapper while the latter implements its own and will clash with a separate `DndProvider` higher up in the component tree (the error will typically look like this: "Cannot have two HTML5 backends at the same time.").
+Drag-and-drop features are only enabled when `<QueryBuilder />` is imported from the companion package [`@react-querybuilder/dnd`](https://www.npmjs.com/package/@react-querybuilder/dnd). [`react-dnd`](https://www.npmjs.com/package/react-dnd) and [`react-dnd-html5-backend`](https://www.npmjs.com/package/react-dnd-html5-backend) will also need to be installed.
+
+If your application already uses [`react-dnd`](https://react-dnd.github.io/react-dnd/), you should import and render `<QueryBuilderWithoutDndProvider />` instead of `<QueryBuilder />`. They are functionally the same, but the former will rely on your pre-existing `<DndProvider />` wrapper while the latter implements its own and will clash with a separate `<DndProvider />` higher up in the component tree (the error will typically look like this: "Cannot have two HTML5 backends at the same time.").
 
 :::
 

docusaurus.config.js

@@ -94,6 +94,10 @@ const config = {
             position: "right",
           },
           // {to: '/blog', label: 'Blog', position: 'right'},
+          {
+            type: "docsVersionDropdown",
+            position: "right",
+          },
           {
             href: "https://github.com/react-querybuilder/react-querybuilder",
             "aria-label": "GitHub repository",

versioned_docs/version-4.5.2/api/_ts_admonition.md

@@ -0,0 +1,5 @@
+:::info
+
+Please refer to the [TypeScript](../typescript) page for information about the types and interfaces referenced below.
+
+:::

versioned_docs/version-4.5.2/api/classnames.mdx

@@ -0,0 +1,155 @@
+---
+title: CSS classes
+hide_table_of_contents: true
+description: Visual guide to CSS classes for each component element
+---
+
+The `<QueryBuilder />` component assigns [standard classes](./misc#defaults) to each element. In the (fully operational) query builder below, the `title` and `label` for each element have been set to the element's standard class.
+
+The following standard classnames are not visible below:
+
+- `.queryBuilder` (black outline; the outer-most `<div>`)
+- `.ruleGroup` (maroon outline)
+- `.ruleGroup-header` (purple outline)
+- `.ruleGroup-body` (blue outline)
+- `.rule.queryBuilder-disabled` (gray outline for locked/disabled rules)
+- `.rule.queryBuilder-valid` (green outline for valid rules)
+- `.rule.queryBuilder-invalid` (red outline for invalid rules)
+- `.dndDragging` (applied to "preview" element while dragging)
+- `.dndOver` (applied to "hovered over" element while dragging)
+
+import { QueryBuilderEmbed } from '@site/src/components/QueryBuilderEmbed';
+import { standardClassnames as sc } from 'react-querybuilder';
+
+<QueryBuilderEmbed
+  showNotToggle
+  showCloneButtons
+  showLockButtons
+  enableDragAndDrop
+  fields={[
+    {
+      name: 'f1',
+      label: `.${sc.fields}`,
+      defaultValue: 'This rule is valid',
+      validator: () => true,
+    },
+    {
+      name: 'f2',
+      label: `.${sc.fields}`,
+      defaultValue: 'This rule is invalid',
+      validator: () => false,
+    },
+    {
+      name: 'f3',
+      label: `.${sc.valueSource}`,
+      valueSources: ['value', 'field'],
+    },
+    {
+      name: 'fb1',
+      label: `Value list`,
+      operators: [{ name: 'between', label: 'between' }],
+      valueSources: ['field', 'value'],
+      comparator: f => f.name === 'fb2',
+    },
+    {
+      name: 'fb2',
+      label: `.${sc.valueListItem}`,
+    },
+  ]}
+  combinators={[{ name: 'and', label: `.${sc.combinators}` }]}
+  getOperators={() => [{ name: '=', label: `.${sc.operators}` }]}
+  controlClassnames={{
+    queryBuilder: 'rqb-structure',
+  }}
+  translations={{
+    fields: {
+      title: `.${sc.fields}`,
+    },
+    operators: {
+      title: `.${sc.operators}`,
+    },
+    value: {
+      title: `.${sc.value}`,
+    },
+    removeRule: {
+      label: `.${sc.removeRule}`,
+      title: `.${sc.removeRule}`,
+    },
+    removeGroup: {
+      label: `.${sc.removeGroup}`,
+      title: `.${sc.removeGroup}`,
+    },
+    addRule: {
+      label: `.${sc.addRule}`,
+      title: `.${sc.addRule}`,
+    },
+    addGroup: {
+      label: `.${sc.addGroup}`,
+      title: `.${sc.addGroup}`,
+    },
+    combinators: {
+      title: `.${sc.combinators}`,
+    },
+    notToggle: {
+      label: `.${sc.notToggle}`,
+      title: `.${sc.notToggle}`,
+    },
+    cloneRule: {
+      label: `.${sc.cloneRule}`,
+      title: `.${sc.cloneRule}`,
+    },
+    cloneRuleGroup: {
+      label: `.${sc.cloneGroup}`,
+      title: `.${sc.cloneGroup}`,
+    },
+    dragHandle: {
+      label: `.${sc.dragHandle}`,
+      title: `.${sc.dragHandle}`,
+    },
+    lockRule: {
+      label: `.${sc.lockRule}`,
+      title: `.${sc.lockRule}`,
+    },
+    lockGroup: {
+      label: `.${sc.lockGroup}`,
+      title: `.${sc.lockGroup}`,
+    },
+    lockRuleDisabled: {
+      label: `.${sc.lockRuleDisabled}`,
+      title: `.${sc.lockRuleDisabled}`,
+    },
+    lockGroupDisabled: {
+      label: `.${sc.lockGroupDisabled}`,
+      title: `.${sc.lockGroupDisabled}`,
+    },
+    valueSourceSelector: {
+      title: `.${sc.valueSource}`,
+    },
+  }}
+  defaultQuery={{
+    combinator: 'and',
+    rules: [
+      { field: 'f1', operator: '=', value: `.${sc.value}` },
+      {
+        combinator: 'and',
+        rules: [
+          { field: 'f1', operator: '=', value: 'This rule is valid' },
+          { field: 'f2', operator: '=', value: 'This rule is invalid' },
+          {
+            disabled: true,
+            combinator: 'and',
+            rules: [
+              {
+                field: 'f1',
+                operator: '=',
+                value: `This rule's group is disabled, therefore this rule is also disabled`,
+              },
+            ],
+          },
+        ],
+      },
+      { field: 'f3', operator: '=', value: 'f1' },
+      { field: 'fb1', operator: 'between', value: 'fb2,fb2', valueSource: 'field' },
+    ],
+  }}
+/>