@react-querybuilder/chakra
Advanced tools
Changelog
[v5.0.0] - 2022-10-22
defaultQuery
is defined, an id
property will be added to each rule and group in the query hierarchy. This will be reflected in the onQueryChange
callback parameter. In previous versions defaultQuery
was not modified by the component itself, but id
is now added because it is a required attribute internally.prepareRuleGroup
utility function will no longer coerce the not
property of groups to be a boolean
type (or even defined at all).$eq
and $and
operators are only used when necessary.react-dnd
dependency completely optional when the enableDragAndDrop
prop was not set to true
, drag-and-drop functionality was extracted from react-querybuilder
into a new package called @react-querybuilder/dnd
.peerDependencies
of react-dnd
and react-dnd-html5-backend
(each of which can be any version >= 14, as long as they match), but no hard dependencies
. The only external dependencies in the main package now are immer
and clsx
.<QueryBuilder />
within a <QueryBuilderDnD />
element. The enableDragAndDrop
prop is implicitly true
when using QueryBuilderDnD
, so you no longer need to set it explicitly unless it should be false
(which can be set on QueryBuilderDnD
or QueryBuilder
).
export function App() {
return (
- <QueryBuilder enableDragAndDrop />
+ <QueryBuilderDnD>
+ <QueryBuilder />
+ </QueryBuilderDnD>
);
}
react-dnd
and renders DndProvider
higher in the component tree, replace QueryBuilderDnD
with QueryBuilderDndWithoutProvider
.@react-querybuilder/material
package now properly inherits the theme configuration from ancestor ThemeProvider
s. Note: the @mui/material
components are now loaded asynchronously by default, so the query builder will initially be rendered with the default components. See the documentation or the README to find out how to render the MUI components immediately.parseCEL
now handles strings correctly (including multi-line strings).AntDValueSelector
properly handles empty string values in multiselect mode.controlElements
and controlClassnames
properties into any descendant QueryBuilder
components (composition FTW!). This is now the recommended usage for all compatibility packages.onAddRule
and onAddGroup
callback props now receive an optional "context" parameter as the fourth argument. This parameter can be provided by a custom addRuleAction
/addGroupAction
component to its handleOnClick
prop. This allows users to alter or replace the default rule based on arbitrary data. For example, the addRuleAction
component could render two "add rule" buttons which add different rules depending on which one was clicked, as long as they provided a different context
parameter.Alt
on Windows/Linux, Option
/⌥
on Mac) pressed when the drop occurs.formatQuery
has a new ruleProcessor
configuration option applicable to non-SQL query language formats. When provided, the entire rule output will be determined by the function. For the relevant formats, valueProcessor
already behaved this way; the default "value" processors have been renamed to defaultRuleProcessor[Format]
to clarify the behavior. The default processors' original "value" names are deprecated but still available (with no immediate plans to remove them).parseSQL
will now ignore a leading WHERE
keyword, e.g. parseSQL("WHERE firstName = 'Steve'")
will not fail to produce a query rule like in v4.controlElements
prop has a new option: inlineCombinator
. By default, this is a small wrapper around the combinatorSelector
component that is used when either showCombinatorsBetweenRules
or independentCombinators
is true
. The inlineCombinator
option was only added to support @react-querybuilder/dnd
, so there is almost certainly no reason to use it directly.Changelog
[v4.5.3] - 2022-09-28
fields
prop was being mutated if it contained duplicates, whether they were duplicate field name
s or option group label
s. The fields
prop is now treated as immutable.RuleGroup
was using unstable keys to render elements in the rules
array. Keys are now stable based on id
properties, which are auto-generated if not provided in the query
/defaultQuery
prop.