@react-querybuilder/chakra - npm Package Versions

[v4.2.3] - 2022-04-05

Added

• Common Expression Language (CEL) export format for formatQuery.

[v4.2.2] - 2022-03-12

Fixed

• This release fixes the "IC" aka "independent combinator" type exports (RuleGroupTypeIC, etc.).

[v4.2.1] - 2022-03-03

Added

• This release adds an operator parameter to the comparator function property of the Field interface.

[v4.2.0] - 2022-02-02

Changed

• When calling formatQuery with the "mongodb" format and a custom valueProcessor, the valueProcessor function will now need to return the full expression object and not just the operator/value portion. For example, defaultMongoDBValueProcessor('firstName', '=', 'Steve') previously returned {"$eq":"Steve"}, but now returns {"firstName":{"$eq":"Steve"}}.

Fixed

• [#276] When using react-querybuilder v4 within an application that already implemented react-dnd, an error would appear: "Cannot have two HTML5 backends at the same time." This can now be resolved by using the <QueryBuilderWithoutDndProvider /> component instead of <QueryBuilder />. They are functionally the same, but the former allows (in fact, relies on) a react-dnd backend (e.g. react-dnd-html5-backend) to be implemented higher up in the component tree.
• Previously, the parseSQL method would accept boolean comparison clauses with an identifier (field name) on the left or right of the operator, but not on both sides (at least one side had to be a primitive string, numeric, or boolean). If the identifier was on the right, parseSQL would flip the clause so that the field name was on the left and the value on the right, but it wouldn't flip the operator (< should become >, etc.). The operator will now be flipped when appropriate.

Added

• Compare fields to other fields. The default <ValueEditor /> component can now display a filterable list of fields from the fields prop given the right configuration. formatQuery and parseSQL have also been updated to support this feature.
• Query tools: Several methods are now available to assist with manipulation of query objects outside the context of a <QueryBuilder /> element:
  • add - appends a new rule or group (and a preceding independent combinator if appropriate) to the end of a rule group's rules array
  • remove - removes a rule or group (and the preceding independent combinator if one exists)
  • update - updates a property of a rule or group, or updates an independent combinator
  • move - moves (or clones, with new id and path) a rule or group to a new location in the query tree
• Lock buttons: Use the showLockButtons prop to enable locking/unlocking (i.e. disabling/enabling) individual rules and groups (demo).
• New valueEditorType and inputType options: In addition to the previously available options ("text", "select", "checkbox", "radio"), the following new options are now officially implemented in the default <ValueEditor /> and all compatibility packages:
  • valueEditorType
    • "textarea"
    • "multiselect"
  • inputType
    • "date"
    • "datetime-local"
    • "time"
• A UMD build is now available (demo).
• The fields prop can now accept an object of type Record<string, Field>. (Field[] and OptionGroup<Field>[] are still supported.)
• Each compatibility package now exports an object ready-made for the controlElements prop (as well as controlClassnames in the case of Bootstrap). No need to assign each component individually anymore.

[v4.1.3] - 2022-01-18

Fixed

• The path to the CommonJS build was wrong in package.json for the main package. This has been fixed.
• The RuleGroupArray type (used for the rules property of RuleGroupType) has been simplified to (RuleType | RuleGroupType)[]. This should make it easier to extend and/or narrow RuleGroupType.

[v4.1.2] - 2022-01-12

Fixed

• parseSQL was returning conventional rule groups (combinators at the group level) in some situations even when the independentCombinators option was set to true. The option will now guarantee a return type of RuleGroupTypeIC.

Added

• Added convertQuery method to toggle a query between the conventional structure with combinators at the group level (RuleGroupType) and the "independent combinator" structure (RuleGroupTypeIC, used with the independentCombinators prop). For unidirectional conversions, convertToIC and convertFromIC are also available.
• The specific return type of the parseSQL method (RuleGroupType or RuleGroupTypeIC) is now inferred from the parameters.

[v4.1.1] - 2022-01-10

Fixed

• Improved recursive types RuleGroupType and RuleGroupTypeIC to pass down the R (rule) and C (combinator) generics to the rules array.

[v4.1.0] - 2022-01-09

Fixed

• Minimum TypeScript version has been lowered to 4.1.2, down from 4.5 in react-querybuilder v4.0.0.

Added

• All ValueSelector-based components, including field selectors, operator selectors, combinator selectors, and value editors where the type is "select" now support option groups. Pass { label: string; options: NameLabelPair[] }[] instead of NameLabelPair[].
• TypeScript types for rules and groups now use generics which can be used to narrow certain member types more easily.

[v4.0.0] - 2021-12-28

Changed

• Minimum TypeScript version is now 4.5.0.
• The default styles (query-builder.css and query-builder.scss) now use flexbox. This should allow greater flexibility and more consistent styling, but you'll need to use a different stylesheet for IE due to poor flexbox support. The new IE-compatible demo page uses styles more suitable for IE.
• onAddRule and onAddGroup callbacks now pass a number[] (parentPath) as the second argument instead of a string (parentId).
• The exported method findRule has been replaced by findPath, which is useful in conjunction with the previously mentioned onAddRule and onAddGroup callbacks.
• A new drag handle element will always be rendered at the front of every rule and rule group header element, regardless of whether you enable the drag-and-drop feature (see Features section below). If drag-and-drop is disabled (the default setting), you should hide the drag handle by either 1) using the default stylesheet which hides it automatically when drag-and-drop is disabled, or 2) hiding it with a style rule like .queryBuilder-dragHandle { display: none; }.
• Cloning a rule or group will insert the clone immediately after the original item instead of as the last item of the parent group.

<details> <summary>Click to show internal changes (shouldn't affect most users)</summary>

• Dropped lodash dependency. Added immer and react-dnd.
• Rule and RuleGroup props now include path: number[], and id may be undefined.
• getLevel has been removed from the schema prop (internally we just use path.length now).
• The following functions that are part of the schema prop have been refactored to use path or parentPath instead of id or parentId: onGroupAdd, onGroupRemove, onPropChange, onRuleAdd, onRuleRemove.

</details>

Fixed

• The default ValueEditor component was calling the useEffect hook conditionally, which is way against the Rules of Hooks. It is now called unconditionally.
• [#258] When the formatQuery export format is "mongodb", the resulting string can be parsed by JSON.parse (@mylawacad)

Added

• Shiny new documentation site! https://react-querybuilder.js.org
• We now provide official compatibility components for several popular style frameworks (as seen in the demo), with more to come! Check out the @react-querybuilder org on npm.
• All props on the <QueryBuilder /> component are now optional
• <QueryBuilder /> is now a properly controlled or uncontrolled component depending on which props are passed in. If you pass a query prop, the query will not change until a new query is passed in. You should use the parameter of the onQueryChange callback to update the query prop. Typically this involves using React's useState hook. To render an uncontrolled component, don't pass a query prop. You can set the initial query by using the new defaultQuery prop, and you can still listen for changes with onQueryChange.
• The query-builder.scss file now uses variables instead of hard-coded colors and spacing. Feel free to import it and override the default values with your own theme's colors/styles/etc.
• Drag-and-drop! Pass the enableDragAndDrop prop to display a drag handle on each rule and group header. Users will be able to reorder and relocate rules and groups.
• Independent combinators! Wait...what does that even mean? When the independentCombinators prop is true, <QueryBuilder /> will insert an independent "and/or" selector between each pair of sibling rules/groups. This new feature shouldn't introduce any breaking changes since it's opt-in, i.e. if independentCombinators is undefined or false, then the <QueryBuilder /> should behave basically the same as it did in v3.x.
• New disabled prop to prevent changes to the query. All sub-components and form elements get the disabled prop as well. Pass true to disable the entire query, or pass an array of paths to disable specific rules/groups.
• parseSQL method to import queries from SQL (documentation / demo -- click the "Load from SQL" button).
• formatQuery accepts a new format type: "parameterized_named" (documentation). This new format is similar to "parameterized", but instead of anonymous ?-style bind variables, each parameter is given a unique name based on the field name and the order in the query. A corresponding paramPrefix option is available in order to use a different character than the default ":" within the sql string.

[v4.0.0-beta.8] - 2021-12-24

Fixed

• [#255] Fix a couple of issues with the "mongodb" formatQuery export type (@mylawacad)

Added

• [#261] valueProcessor for "mongodb" export format
• [#252] Export RuleGroup component (@ZigZagT)
• [#250] Bulma compatibility package and demo
• [#248] disabled prop