react-querybuilder - npm Package Versions

[v8.8.1] - 2025-07-09

Fixed

• [#916] Corrected "sources" paths in CSS source maps.

[v8.8.0] - 2025-07-09

Added

• [#900] Support for matching elements of a nested array.
  • New optional RuleType property match?: { mode: MatchMode, threshold?: number }
    • type MatchMode = 'all' | 'some' | 'none' | 'atLeast' | 'atMost' | 'exactly'
    • In most contexts, a rule's operator will be ignored when match is present and valid.
  • New component MatchModeEditor, which renders when a field is determined to have one or more match modes. The mode selector is the configured valueSelector and—when a threshold is appropriate—the threshold editor is the configured valueEditor with inputType: "number".
  • New props getMatchModes and getSubQueryBuilderProps to manage these configurations at the top level.
  • New Field properties matchModes and subproperties to manage these configurations at the field level.
  • parseJsonLogic support for "all", "none", and "some" operations.
  • formatQuery (partial) support for the match rule property.
    • Supported formats include "sql", "parameterized", "drizzle", "natural_language", "mongodb_query", "jsonlogic", "jsonata", "spel", and "cel".
    • To avoid invalid syntax, the SQL-based formats only work with preset: "postgresql", and only with nested arrays of primitives like strings or numbers.
• [#903] New parser option bigIntOnOverflow. When true, a bigint will be generated for parsed tokens that represent valid integers outside the safe boundaries of the number type. (This currently only applies to parseSQL.)
• [#911] Support for inputType: "bigint" in all value editors, which will render an input with type="text" but will store the value as a bigint if a valid integer is entered.
• [#900] Extracted fields prop processing logic to new useFields hook.
• [#900] "Justified layout" styles from the demo (to push the "+ Rule", "+ Group", clone, lock, and remove buttons to the right edge) are now included in the default stylesheet. To apply the styles, add the queryBuilder-justified class to the query builder using the controlClassnames prop, or to any ancestor element.
• [#900] All components that render <label> elements now have htmlFor attributes linking their corresponding <input> elements using an id generated with useId().
• [#900] The getValueSources prop and the Field#valueSources property can now evaluate to a full option list instead of a simple array of value source strings. This enables translations of the value sources through the label property.
• [#914] Option list props (including fields, operators, combinators, getOperators, and getValues) can now include strings in addition to—or instead of—Option objects (e.g. ["=", "between"]). The string itself will be used as both the identifier and label, except in the case of operators and combinators where the default labels will be used if the string matches a value from the default set.

Fixed

• [#903] parseSQL maintains precision for large integers by generating a bigint instead of a number when necessary.
• [#900] Preact compatibility improved by using React.Fragment explicitly instead of the shorthand <>...</>.
• [#900] If the preset option for formatQuery is one from sqlDialectPresets, it will only apply if the format is undefined or one of the SQL-based formats.

[v8.7.1] - 2025-06-09

Added

• CSS/SCSS variable rqb-base-color. rqb-background-color is rqb-base-color with 20% opacity (effectively the same color as before, just calculated differently).
• maxLevels prop to limit the addition of new rule groups beyond the specified nesting level. Default is Infinity (allows unlimited levels), and values other than 1 or greater will be ignored.

[v8.7.0] - 2025-05-13

Added

• [#891] Support for several ORM query formats:
  • New "prisma" format for Prisma ORM.
  • New "sequelize" format for Sequelize.
  • New "drizzle" format for Drizzle ORM relational queries API.
    • Can also be used for the Drizzle query builder API, which eliminates the need for the @react-querybuilder/drizzle package.

[v8.6.2] - 2025-05-12

Fixed

• [#893] ESM import errors with certain build tools when using @react-querybuilder/material.

[v8.6.1] - 2025-05-06

Fixed

• [#890] Escape forward slash in JSONata export format.
• [#890] Correct information in Drizzle package README.

[v8.6.0] - 2025-05-05

Added

• [#885] New package @react-querybuilder/drizzle with Drizzle ORM integration.
• [#885] LDAP export format.
• [#885] New formatQuery option ruleGroupProcessor enabling development of custom output formats without completely reimplementing formatQuery.
  • The rule group processors for each of the existing formats have been extracted from formatQuery and can be used independently or as fallbacks from custom processors.
• [#883] Query tools add, update, remove, move, and group can now accept a string or Path where they previously accepted only Path-type arguments. A string would represent the id property of the subject rule/group, but otherwise the functionality of each tool is the same.
• [#883] New utility methods: findID returns the rule or group with the given id property within a query hierarchy (similar to findPath), and getPathOfID returns the path of the rule or group with the given id.
• [#885] Confirmed Mantine v8 support (no changes).

Fixed

• [#885] parseSQL was translating NOT LIKE '[...]' (no leading or trailing wildcards) to operator: "=" instead of operator: "!=".
• [#885] Importing from react-querybuilder/formatQuery no longer has a dependency on react.

[v8.5.0] - 2025-04-07

Added

• [#873] New prop autoSelectValue (documentation) behaves like autoSelectField/autoSelectOperator but for the value editor when it renders a select list.
  • The translations prop object has a new property values that accepts placeholderName, placeholderLabel, and placeholderGroupLabel properties (documentation). These translatable strings set the default values and labels when autoSelectValue is set to false.
  • A corresponding placeholderValueName option was added to formatQuery, which will now ignore rules where the value matches the placeholder value as long as placeholderValueName is defined (this behavior differs from placeholderFieldName and placeholderOperatorName, which do not need to be defined).
• [#876] Miscellaneous i18n enhancements for the "natural_language" export format:
  • translations option: Map of the words "and", "or", "true", and "false" to their translated equivalents. Also covers prefix and suffix options for rule groups.
  • wordOrder option: Based on the linguistic concept of constituent word order, this option accepts all permutations of "SVO" ("SOV", "VSO", etc.) and outputs the field, operator, and value in the corresponding order (S = field, V = operator, O = value).
  • operatorMap option: Map of operators to their natural language equivalents. If the result can differ based on the valueSource, the key should map to an array where the second element represents the string to be used when valueSource is "field". The first element will be used in all other cases.
  • Date/time formatting support: The @react-querybuilder/datetime package now supports the "natural_language" format for date-type rules. Formatting can be customized by passing locales, dateFormat, or dateTimeFormat as properties of the context parameter. These options are passed to a Intl.DateTimeFormat constructor.

Fixed

• [#877] Dynamic imports of react-dnd and related packages are now obfuscated to discourage bundlers like webpack from pre-processing those imports.