New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-querybuilder

Package Overview
Dependencies
Maintainers
2
Versions
197
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-querybuilder - npm Package Compare versions

Comparing version 7.7.0 to 7.7.1-rc.0

dist/types-esm/components/QueryBuilder.useQueryBuilderSchema.d.mts
dist/types-esm/components/QueryBuilder.useQueryBuilderSetup.d.mts
dist/types-esm/context/index.d.mts
dist/types-esm/context/QueryBuilderContext.d.mts
dist/types-esm/defaultControlElements.d.mts
dist/types/components/QueryBuilder.useQueryBuilderSchema.d.ts
dist/types/components/QueryBuilder.useQueryBuilderSetup.d.ts
dist/types/context/index.d.ts
dist/types/context/QueryBuilderContext.d.ts
dist/types/defaultControlElements.d.ts

6

dist/parseCEL.js

@@ -71,3 +71,3 @@ "use strict";

// src/utils/toFullOption.ts
// src/utils/optGroupUtils.ts
var import_immer = require("immer");

@@ -93,4 +93,2 @@ var isOptionWithName = (opt) => isPojo(opt) && "name" in opt && typeof opt.name === "string";

}
// src/utils/uniq.ts
var uniqByIdentifier = (originalArray) => {

@@ -107,4 +105,2 @@ const names = /* @__PURE__ */ new Set();

};
// src/utils/optGroupUtils.ts
var isOptionGroupArray = (arr) => Array.isArray(arr) && arr.length > 0 && isPojo(arr[0]) && "options" in arr[0] && Array.isArray(arr[0].options);

@@ -111,0 +107,0 @@ var isFlexibleOptionGroupArray = (arr) => {

6

dist/parseJsonLogic.js

@@ -97,3 +97,3 @@ "use strict";

// src/utils/toFullOption.ts
// src/utils/optGroupUtils.ts
var import_immer = require("immer");

@@ -119,4 +119,2 @@ var isOptionWithName = (opt) => isPojo(opt) && "name" in opt && typeof opt.name === "string";

}
// src/utils/uniq.ts
var uniqByIdentifier = (originalArray) => {

@@ -133,4 +131,2 @@ const names = /* @__PURE__ */ new Set();

};
// src/utils/optGroupUtils.ts
var isOptionGroupArray = (arr) => Array.isArray(arr) && arr.length > 0 && isPojo(arr[0]) && "options" in arr[0] && Array.isArray(arr[0].options);

@@ -137,0 +133,0 @@ var isFlexibleOptionGroupArray = (arr) => {

6

dist/parseMongoDB.js

@@ -97,3 +97,3 @@ "use strict";

// src/utils/toFullOption.ts
// src/utils/optGroupUtils.ts
var import_immer = require("immer");

@@ -119,4 +119,2 @@ var isOptionWithName = (opt) => isPojo(opt) && "name" in opt && typeof opt.name === "string";

}
// src/utils/uniq.ts
var uniqByIdentifier = (originalArray) => {

@@ -133,4 +131,2 @@ const names = /* @__PURE__ */ new Set();

};
// src/utils/optGroupUtils.ts
var isOptionGroupArray = (arr) => Array.isArray(arr) && arr.length > 0 && isPojo(arr[0]) && "options" in arr[0] && Array.isArray(arr[0].options);

@@ -137,0 +133,0 @@ var isFlexibleOptionGroupArray = (arr) => {

4

dist/types/components/index.d.ts

@@ -6,3 +6,4 @@ export * from "./ActionElement";

export * from "./QueryBuilder";
export * from "./QueryBuilderContext";
export * from "./QueryBuilder.useQueryBuilderSchema";
export * from "./QueryBuilder.useQueryBuilderSetup";
export * from "./Rule";

@@ -13,2 +14,1 @@ export * from "./RuleGroup";

export * from "./ValueSelector";
export * from "./defaults";

12

dist/types/components/QueryBuilder.d.ts
import * as React from "react";
import type { FullCombinator, FullField, FullOperator, Path, QueryBuilderProps, RuleGroupTypeAny } from "../types";
import type { UseQueryBuilderSchema } from "./QueryBuilder.useQueryBuilderSchema";
/**

@@ -22,1 +23,12 @@ * The {@link Path} of the root group.

>(props: QueryBuilderProps<RG, F, O, C>) => React.JSX.Element;
/**
* Calls {@link useQueryBuilderSetup} to massage the props and prepare basic
* update/generate methods, then passes the result to {@link useQueryBuilderSchema}
* to prepare and return all values required to render {@link QueryBuilder}.
*/
export declare const useQueryBuilder: <
RG extends RuleGroupTypeAny,
F extends FullField,
O extends FullOperator,
C extends FullCombinator
>(props: QueryBuilderProps<RG, F, O, C>) => UseQueryBuilderSchema<RG, F, O, C>;

38

dist/types/components/Rule.d.ts

@@ -0,4 +1,4 @@

import type { MouseEvent } from "react";
import * as React from "react";
import type { UseRule } from "../hooks";
import type { RuleProps } from "../types";
import type { ActionElementEventHandler, FlexibleOptionList, FullField, FullOperator, InputType, Option, OptionList, RuleProps, RuleType, ValidationResult, ValueEditorType, ValueSourceOptions, ValueSources } from "../types";
/**

@@ -14,1 +14,35 @@ * Default component to display {@link RuleType} objects. This is

export declare const RuleComponents: React.MemoExoticComponent<(r: RuleProps & UseRule) => React.JSX.Element>;
export type UseRule = RuleProps & {
classNames: {
shiftActions: string;
dragHandle: string;
fields: string;
operators: string;
valueSource: string;
value: string;
cloneRule: string;
lockRule: string;
removeRule: string;
};
cloneRule: ActionElementEventHandler;
fieldData: FullField<string, string, string, Option<string>, Option<string>>;
generateOnChangeHandler: (prop: Exclude<keyof RuleType, "id" | "path">) => ActionElementEventHandler;
hideValueControls: boolean;
inputType: InputType | null;
operators: OptionList<FullOperator>;
outerClassName: string;
removeRule: ActionElementEventHandler;
shiftRuleUp: (event?: MouseEvent, _context?: any) => void;
shiftRuleDown: (event?: MouseEvent, _context?: any) => void;
toggleLockRule: ActionElementEventHandler;
validationResult: boolean | ValidationResult;
valueEditorSeparator: React.ReactNode;
valueEditorType: ValueEditorType;
values: FlexibleOptionList<Option<string>>;
valueSourceOptions: ValueSourceOptions;
valueSources: ValueSources;
};
/**
* Prepares all values and methods used by the {@link Rule} component.
*/
export declare const useRule: (props: RuleProps) => UseRule;

31

dist/types/components/RuleGroup.d.ts

@@ -0,4 +1,4 @@

import type { MouseEvent } from "react";
import * as React from "react";
import { useRuleGroup } from "../hooks";
import type { RuleGroupProps } from "../types";
import type { ActionElementEventHandler, Classnames, Path, RuleGroupProps, RuleGroupType, RuleGroupTypeAny, RuleGroupTypeIC, ValidationResult } from "../types";
/**

@@ -20,1 +20,28 @@ * Default component to display {@link RuleGroupType} and {@link RuleGroupTypeIC}

export declare const RuleGroupBodyComponents: React.MemoExoticComponent<(rg: RuleGroupProps & ReturnType<typeof useRuleGroup>) => React.JSX.Element[]>;
export type UseRuleGroup = Omit<RuleGroupProps, "ruleGroup"> & {
addGroup: ActionElementEventHandler;
addRule: ActionElementEventHandler;
accessibleDescription: string;
classNames: Pick<{ [k in keyof Classnames] : string }, "header" | "shiftActions" | "dragHandle" | "combinators" | "notToggle" | "addRule" | "addGroup" | "cloneGroup" | "lockGroup" | "removeGroup" | "body">;
cloneGroup: ActionElementEventHandler;
onCombinatorChange: ActionElementEventHandler;
onGroupAdd: (group: RuleGroupTypeAny, parentPath: Path, context?: any) => void;
onIndependentCombinatorChange: (value: any, index: number, context?: any) => void;
onNotToggleChange: (checked: boolean, context?: any) => void;
outerClassName: string;
pathsMemo: {
path: Path;
disabled: boolean;
}[];
removeGroup: ActionElementEventHandler;
ruleGroup: RuleGroupType | RuleGroupTypeIC;
shiftGroupDown: (event?: MouseEvent, context?: any) => void;
shiftGroupUp: (event?: MouseEvent, context?: any) => void;
toggleLockGroup: ActionElementEventHandler;
validationClassName: string;
validationResult: boolean | ValidationResult;
};
/**
* Prepares all values and methods used by the {@link RuleGroup} component.
*/
export declare const useRuleGroup: (props: RuleGroupProps) => UseRuleGroup;

41

dist/types/components/ValueEditor.d.ts
import * as React from "react";
import type { FullField, ValueEditorProps } from "../types";
import type { FullField, ParseNumberMethod, ValueEditorProps } from "../types";
/**

@@ -7,1 +7,40 @@ * Default `valueEditor` component used by {@link QueryBuilder}.

export declare const ValueEditor: <F extends FullField>(allProps: ValueEditorProps<F>) => React.JSX.Element | null;
/**
* This hook is primarily concerned with multi-value editors like date range
* pickers, editors for 'in' and 'between' operators, etc.
*
* @returns The value as an array (`valueAsArray`), a change handler for
* series of editors (`multiValueHandler`), a processed version of the
* `parseNumbers` prop (`parseNumberMethod`), and the classname(s) to be applied
* to each editor in editor series (`valueListItemClassName`).
*
* **NOTE:** The following logic only applies if `skipHook` is not `true`. To avoid
* automatically updating the `value`, pass `{ skipHook: true }`.
*
* If the `value` is an array of non-zero length, the `operator` is _not_ one of
* the known multi-value operators ("between", "notBetween", "in", "notIn"), and
* the `type` is not "multiselect", then the `value` will be set to the first
* element of the array (i.e., `value[0]`).
*
* The same thing will happen if `inputType` is "number" and `value` is a string
* containing a comma, since `<input type="number">` doesn't handle commas.
*
* @example
* // Consider the following rule:
* `{ field: "f1", operator: "in", value: ["twelve","fourteen"] }`
* // If `operator` changes to "=", the value will be reset to "twelve".
*
* @example
* // Consider the following rule:
* `{ field: "f1", operator: "between", value: "12,14" }`
* // If `operator` changes to "=", the value will be reset to "12".
*/
export declare const useValueEditor: <
F extends FullField = FullField,
O extends string = string
>(props: ValueEditorProps<F, O>) => {
valueAsArray: any[];
multiValueHandler: (val: any, idx: number) => void;
parseNumberMethod: ParseNumberMethod;
valueListItemClassName: string;
};

9

dist/types/components/ValueSelector.d.ts

@@ -7,1 +7,10 @@ import * as React from "react";

export declare const ValueSelector: <Opt extends FullOption = FullOption>(props: ValueSelectorProps<Opt>) => React.JSX.Element;
export type UseValueSelectorParams = Pick<ValueSelectorProps, "handleOnChange" | "listsAsArrays" | "multiple" | "value">;
/**
* Transforms a value into an array when appropriate and provides
* a memoized change handler.
*/
export declare const useValueSelector: (props: UseValueSelectorParams) => {
onChange: (v: string | string[]) => void;
val: string | any[] | undefined;
};

7

dist/types/hooks/index.d.ts

@@ -6,11 +6,4 @@ export * from "./useControlledOrUncontrolled";

export * from "./usePrevious";
export * from "./useQueryBuilder";
export * from "./useQueryBuilderSchema";
export * from "./useQueryBuilderSetup";
export * from "./useReactDndWarning";
export * from "./useRule";
export * from "./useRuleGroup";
export * from "./useSelectElementChangeHandler";
export * from "./useStopEventPropagation";
export * from "./useValueEditor";
export * from "./useValueSelector";

2

dist/types/index.d.ts

@@ -0,3 +1,5 @@

export * from "./context";
export * from "./components";
export { QueryBuilder as default } from "./components";
export * from "./defaultControlElements";
export * from "./defaults";

@@ -4,0 +6,0 @@ export * from "./hooks";

6

dist/types/types/propsUsingReact.d.ts
import type { ComponentType, ForwardRefExoticComponent, MouseEvent as ReactMouseEvent, ReactNode, Ref, RefAttributes } from "react";
import type { SetNonNullable } from "type-fest";
import type { useRuleGroup } from "../hooks/useRuleGroup";
import type { UseRuleGroup } from "../components";
import type { MoveOptions } from "../utils";

@@ -173,4 +173,4 @@ import type { AccessibleDescriptionGenerator, Classname, FullCombinator, FullField, FullOperator, InputType, ParseNumbersPropConfig, Path, ValueEditorType, ValueSource, ValueSources } from "./basic";

ruleGroup: ComponentType<RuleGroupProps<F, O>>;
ruleGroupBodyElements: ComponentType<RuleGroupProps & ReturnType<typeof useRuleGroup>>;
ruleGroupHeaderElements: ComponentType<RuleGroupProps & ReturnType<typeof useRuleGroup>>;
ruleGroupBodyElements: ComponentType<RuleGroupProps & UseRuleGroup>;
ruleGroupHeaderElements: ComponentType<RuleGroupProps & UseRuleGroup>;
shiftActions: ComponentType<ShiftActionsProps> | null;

@@ -177,0 +177,0 @@ valueEditor: ComponentType<ValueEditorProps<F, O>> | null;

2

dist/types/utils/arrayUtils.d.ts

@@ -25,3 +25,3 @@ /**

* // would return
* 'this\\,\\,that,,the other,,,\\,'
* 'this\\,\\,that, , the other, , , \\,'
*/

@@ -28,0 +28,0 @@ export declare const joinWith: (strArr: any[], joinChar?: string) => string;

14

dist/types/utils/formatQuery/formatQuery.d.ts

@@ -9,11 +9,11 @@ import type { ExportFormat, FormatQueryOptions, ParameterizedNamedSQL, ParameterizedSQL, RQBJsonLogic, RuleGroupTypeAny } from "../../types/index.noReact";

*/
declare function formatQuery(ruleGroup: RuleGroupTypeAny, options: "parameterized" | (Omit<FormatQueryOptions, "format"> & { format: "parameterized" })): ParameterizedSQL;
declare function formatQuery(ruleGroup: RuleGroupTypeAny, options: "parameterized" | (FormatQueryOptions & { format: "parameterized" })): ParameterizedSQL;
/**
* Generates a {@link ParameterizedNamedSQL} object from a query object.
*/
declare function formatQuery(ruleGroup: RuleGroupTypeAny, options: "parameterized_named" | (Omit<FormatQueryOptions, "format"> & { format: "parameterized_named" })): ParameterizedNamedSQL;
declare function formatQuery(ruleGroup: RuleGroupTypeAny, options: "parameterized_named" | (FormatQueryOptions & { format: "parameterized_named" })): ParameterizedNamedSQL;
/**
* Generates a {@link JsonLogic} object from a query object.
*/
declare function formatQuery(ruleGroup: RuleGroupTypeAny, options: "jsonlogic" | (Omit<FormatQueryOptions, "format"> & { format: "jsonlogic" })): RQBJsonLogic;
declare function formatQuery(ruleGroup: RuleGroupTypeAny, options: "jsonlogic" | (FormatQueryOptions & { format: "jsonlogic" })): RQBJsonLogic;
/**

@@ -26,3 +26,3 @@ * Generates an ElasticSearch query object from an RQB query object.

*/
declare function formatQuery(ruleGroup: RuleGroupTypeAny, options: "elasticsearch" | (Omit<FormatQueryOptions, "format"> & { format: "elasticsearch" })): Record<string, any>;
declare function formatQuery(ruleGroup: RuleGroupTypeAny, options: "elasticsearch" | (FormatQueryOptions & { format: "elasticsearch" })): Record<string, any>;
/**

@@ -33,7 +33,7 @@ * Generates a JSONata query string from an RQB query object.

*/
declare function formatQuery(ruleGroup: RuleGroupTypeAny, options: "jsonata" | (Omit<FormatQueryOptions, "format"> & { format: "jsonata" })): string;
declare function formatQuery(ruleGroup: RuleGroupTypeAny, options: "jsonata" | (FormatQueryOptions & { format: "jsonata" })): string;
/**
* Generates a formatted (indented two spaces) JSON string from a query object.
*/
declare function formatQuery(ruleGroup: RuleGroupTypeAny, options: Omit<FormatQueryOptions, "format">): string;
declare function formatQuery(ruleGroup: RuleGroupTypeAny, options: FormatQueryOptions): string;
/**

@@ -46,3 +46,3 @@ * Generates a query string in the requested format.

*/
declare function formatQuery(ruleGroup: RuleGroupTypeAny, options: Omit<FormatQueryOptions, "format"> & { format: Exclude<ExportFormat, "parameterized" | "parameterized_named" | "jsonlogic" | "elasticsearch" | "jsonata"> }): string;
declare function formatQuery(ruleGroup: RuleGroupTypeAny, options: FormatQueryOptions & { format: Exclude<ExportFormat, "parameterized" | "parameterized_named" | "jsonlogic" | "elasticsearch" | "jsonata"> }): string;
export { formatQuery };

2

dist/types/utils/formatQuery/index.d.ts

@@ -28,3 +28,3 @@ import type { RuleProcessor, ValueProcessorLegacy } from "../../types/index.noReact";

export * from "./formatQuery";
export { jsonLogicAdditionalOperators } from "./utils";
export * from "./utils";
export { defaultRuleProcessorCEL, defaultRuleProcessorMongoDB, defaultRuleProcessorSpEL, defaultValueProcessorByRule };

@@ -31,0 +31,0 @@ /**

56

dist/types/utils/formatQuery/utils.d.ts
import type { RuleGroupTypeAny, ValueProcessorByRule, ValueProcessorLegacy, ValueProcessorOptions } from "../../types/index.noReact";
export declare const mapSQLOperator: (op: string) => string;
/**
* Maps a {@link DefaultOperatorName} to a SQL operator.
*/
export declare const mapSQLOperator: (rqbOperator: string) => string;
/**
* Maps a {@link DefaultOperatorName} to a MongoDB operator.
*/
export declare const mongoOperators: {

@@ -13,2 +19,5 @@ "=": string;

};
/**
* Maps a {@link DefaultCombinatorName} to a CEL combinator.
*/
export declare const celCombinatorMap: {

@@ -31,8 +40,41 @@ and: "&&";

export declare const jsonLogicAdditionalOperators: Record<"startsWith" | "endsWith", (a: string, b: string) => boolean>;
/**
* Converts all `string`-type `value` properties of a query object into `number` where appropriate.
*
* Used by {@link formatQuery} for the `json*` formats when `parseNumbers` is `true`.
*/
export declare const numerifyValues: (rg: RuleGroupTypeAny) => RuleGroupTypeAny;
export declare const isValidValue: (v: any) => boolean;
export declare const shouldRenderAsNumber: (v: any, parseNumbers?: boolean) => boolean | undefined;
export declare const isValueProcessorLegacy: (vp: ValueProcessorLegacy | ValueProcessorByRule) => vp is ValueProcessorLegacy;
export declare const quoteFieldNamesWithArray: (quoteFieldNamesWith?: null | string | [string, string]) => [string, string];
export declare const quoteFieldName: (f: string, { quoteFieldNamesWith, fieldIdentifierSeparator }: ValueProcessorOptions) => string;
export declare const nullOrUndefinedOrEmpty: (v: any) => boolean;
/**
* Determines whether a value is _anything_ except an empty `string` or `NaN`.
*/
export declare const isValidValue: (value: any) => boolean;
/**
* Determines whether {@link formatQuery} should render the given value as a number.
* As long as `parseNumbers` is `true`, `number` and `bigint` values will return `true` and
* `string` values will return `true` if they test positive against {@link numericRegex}.
*/
export declare const shouldRenderAsNumber: (value: any, parseNumbers?: boolean | undefined) => boolean;
/**
* Used by {@link formatQuery} to determine whether the given value processor is a
* "legacy" value processor by counting the number of arguments. Legacy value
* processors take 3 arguments (not counting any arguments with default values), while
* rule-based value processors take no more than 2 arguments.
*/
export declare const isValueProcessorLegacy: (valueProcessor: ValueProcessorLegacy | ValueProcessorByRule) => valueProcessor is ValueProcessorLegacy;
/**
* Converts the `quoteFieldNamesWith` option into an array of two strings.
* If the option is a string, the array elements are both that string.
*
* @default
* ['', '']
*/
export declare const getQuoteFieldNamesWithArray: (quoteFieldNamesWith?: null | string | [string, string]) => [string, string];
/**
* Given a field name and relevant {@link ValueProcessorOptions}, returns the field name
* wrapped in the configured quote character(s).
*/
export declare const getQuotedFieldName: (fieldName: string, { quoteFieldNamesWith, fieldIdentifierSeparator }: ValueProcessorOptions) => string;
/**
* Simple helper to determine whether a value is null, undefined, or an empty string.
*/
export declare const nullOrUndefinedOrEmpty: (value: any) => value is null | undefined | "";

2

dist/types/utils/index.d.ts

@@ -23,5 +23,3 @@ export * from "./arrayUtils";

export * from "./regenerateIDs";
export * from "./toFullOption";
export * from "./toOptions";
export * from "./transformQuery";
export * from "./uniq";

49

dist/types/utils/optGroupUtils.d.ts

@@ -1,3 +0,40 @@

import type { BaseOption, FlexibleOptionGroup, FullOption, FullOptionList, GetOptionIdentifierType, Option, OptionGroup, OptionList } from "../types/index.noReact";
import type { RequireAtLeastOne } from "type-fest";
import type { BaseOption, BaseOptionMap, FlexibleOptionGroup, FlexibleOptionList, FullOption, FullOptionList, GetOptionIdentifierType, Option, OptionGroup, OptionList, ToFullOption, WithUnknownIndex } from "../types/index.noReact";
/**
* Converts an {@link Option} or {@link ValueOption} (i.e., {@link BaseOption})
* into a {@link FullOption}. Full options are left unchanged.
*/
export declare function toFullOption<Opt extends BaseOption>(opt: Opt, baseProperties?: Record<string, unknown>): ToFullOption<Opt>;
/**
* Converts an {@link OptionList} or {@link FlexibleOptionList} into a {@link FullOptionList}.
* Lists of full options are left unchanged.
*/
export declare function toFullOptionList<
Opt extends BaseOption,
OptList extends FlexibleOptionList<Opt>
>(optList: OptList, baseProperties?: Record<string, unknown>): FullOptionList<Opt>;
/**
* Converts a {@link FlexibleOptionList} into a {@link FullOptionList}.
* Lists of full options are left unchanged.
*/
export declare function toFullOptionMap<OptMap extends BaseOptionMap>(optMap: OptMap, baseProperties?: Record<string, unknown>): OptMap extends BaseOptionMap<infer V, infer K> ? Partial<Record<K, ToFullOption<V>>> : never;
/**
* @deprecated Renamed to {@link uniqByIdentifier}.
*/
export declare const uniqByName: <T extends {
name: string;
value?: string;
} | {
name?: string;
value: string;
}>(originalArray: T[]) => T[];
/**
* Generates a new array of objects with duplicates removed based
* on the identifying property (`value` or `name`)
*/
export declare const uniqByIdentifier: <T extends RequireAtLeastOne<{
name: string;
value: string;
}, "name" | "value">>(originalArray: T[]) => T[];
/**
* Determines if an {@link OptionList} is an {@link OptionGroup} array.

@@ -32,1 +69,11 @@ */

>(arr: OL) => T[];
/**
* Generates a new {@link OptionGroup} array with duplicates
* removed based on the identifying property (`value` or `name`).
*/
export declare const uniqOptGroups: <T extends BaseOption>(originalArray: FlexibleOptionGroup<T>[]) => OptionGroup<ToFullOption<T>>[];
/**
* Generates a new {@link Option} or {@link OptionGroup} array with duplicates
* removed based on the identifier property (`value` or `name`).
*/
export declare const uniqOptList: <T extends BaseOption>(originalArray: FlexibleOptionList<T>) => WithUnknownIndex<BaseOption & FullOption>[] | OptionGroup<ToFullOption<T>>[];

24

package.json
{
"name": "react-querybuilder",
"version": "7.7.0",
"version": "7.7.1-rc.0",
"description": "The React <QueryBuilder /> component for constructing queries",

@@ -93,7 +93,7 @@ "main": "./dist/cjs/index.js",

"devDependencies": {
"@babel/core": "^7.25.7",
"@babel/preset-env": "^7.25.7",
"@babel/core": "^7.25.8",
"@babel/preset-env": "^7.25.8",
"@babel/preset-react": "^7.25.7",
"@babel/preset-typescript": "^7.25.7",
"@electric-sql/pglite": "^0.2.11",
"@electric-sql/pglite": "^0.2.12",
"@testing-library/dom": "^10.4.0",

@@ -107,3 +107,3 @@ "@testing-library/react": "^16.0.1",

"@types/react": "^18.3.11",
"@types/react-dom": "^18.3.0",
"@types/react-dom": "^18.3.1",
"@vitejs/plugin-react-swc": "^3.7.1",

@@ -114,3 +114,3 @@ "babel-plugin-istanbul": "^7.0.0",

"jsonata": "^2.0.5",
"query-string": "^9.1.0",
"query-string": "^9.1.1",
"react": "^18.3.1",

@@ -120,10 +120,10 @@ "react-dom": "^18.3.1",

"rollup-plugin-visualizer": "^5.12.0",
"sass": "^1.79.4",
"sass": "^1.79.5",
"spel2js": "^0.2.8",
"type-fest": "^4.26.1",
"typescript": "^5.6.2",
"vite": "^5.4.8"
"typescript": "^5.6.3",
"vite": "^5.4.9"
},
"dependencies": {
"@reduxjs/toolkit": "^2.2.7",
"@reduxjs/toolkit": "^2.3.0",
"immer": "^10.1.1",

@@ -141,3 +141,3 @@ "numeric-quantity": "^2.0.1",

"build:main": "bun --bun tsup",
"build:css": "bun buildCSS.ts",
"build:css": "mkdir -p dist && cp ./src/*.scss dist && bunx sass --style=compressed ./dist/query-builder-layout.scss:./dist/query-builder-layout.css ./dist/query-builder.scss:./dist/query-builder.css",
"typecheck": "tsc --noEmit",

@@ -150,3 +150,3 @@ "typecheck:watch": "tsc --noEmit --watch",

},
"gitHead": "3df83ee0fc7031f80802d798a77716fb1c1c364a"
"gitHead": "926c333065a2ad41d49b0732354bfdb76ac10ea1"
}

31

README.md

@@ -19,13 +19,13 @@ # react-querybuilder

| Library | Compatibility package | Demo | Example |
| -------------------------------------------------- | -------------------------------------------------------------------------------------------- | -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| [Ant Design](https://ant.design/) | [@react-querybuilder/antd](https://www.npmjs.com/package/@react-querybuilder/antd) | [demo](https://react-querybuilder.js.org/demo/antd) | [example](https://codesandbox.io/p/sandbox/github/react-querybuilder/react-querybuilder/tree/main/examples/antd) |
| [Bootstrap](https://getbootstrap.com/) | [@react-querybuilder/bootstrap](https://www.npmjs.com/package/@react-querybuilder/bootstrap) | [demo](https://react-querybuilder.js.org/demo/bootstrap) | [example](https://codesandbox.io/p/sandbox/github/react-querybuilder/react-querybuilder/tree/main/examples/bootstrap) |
| [Bulma](https://bulma.io/) | [@react-querybuilder/bulma](https://www.npmjs.com/package/@react-querybuilder/bulma) | [demo](https://react-querybuilder.js.org/demo/bulma) | [example](https://codesandbox.io/p/sandbox/github/react-querybuilder/react-querybuilder/tree/main/examples/bulma) |
| [Chakra UI](https://chakra-ui.com/) | [@react-querybuilder/chakra](https://www.npmjs.com/package/@react-querybuilder/chakra) | [demo](https://react-querybuilder.js.org/demo/chakra) | [example](https://codesandbox.io/p/sandbox/github/react-querybuilder/react-querybuilder/tree/main/examples/chakra) |
| [Fluent UI](https://github.com/microsoft/fluentui) | [@react-querybuilder/fluent](https://www.npmjs.com/package/@react-querybuilder/fluent) | [demo](https://react-querybuilder.js.org/demo/fluent) | [example](https://codesandbox.io/p/sandbox/github/react-querybuilder/react-querybuilder/tree/main/examples/fluent) |
| [Mantine](https://mantine.dev/) | [@react-querybuilder/mantine](https://www.npmjs.com/package/@react-querybuilder/mantine) | [demo](https://react-querybuilder.js.org/demo/mantine) | [example](https://codesandbox.io/p/sandbox/github/react-querybuilder/react-querybuilder/tree/main/examples/mantine) |
| [MUI](https://mui.com/) | [@react-querybuilder/material](https://www.npmjs.com/package/@react-querybuilder/material) | [demo](https://react-querybuilder.js.org/demo/material) | [example](https://codesandbox.io/p/sandbox/github/react-querybuilder/react-querybuilder/tree/main/examples/material) |
| [React Native](https://reactnative.dev/) | [@react-querybuilder/native](https://www.npmjs.com/package/@react-querybuilder/native) | | [example](https://codesandbox.io/p/sandbox/github/react-querybuilder/react-querybuilder/tree/main/examples/native) |
| [Tremor](https://www.tremor.so/) | [@react-querybuilder/tremor](https://www.npmjs.com/package/@react-querybuilder/tremor) | [demo](https://react-querybuilder.js.org/demo/tremor) | [example](https://codesandbox.io/p/sandbox/github/react-querybuilder/react-querybuilder/tree/main/examples/tremor) |
| Library | Compatibility package | Demo | Example projects |
| -------------------------------------------------- | -------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| [Ant Design](https://ant.design/) | [@react-querybuilder/antd](https://www.npmjs.com/package/@react-querybuilder/antd) | [demo](https://react-querybuilder.js.org/demo/antd) | [CodeSandbox](https://react-querybuilder.js.org/sandbox?t=antd) · [StackBlitz](https://react-querybuilder.js.org/sandbox?t=antd) |
| [Bootstrap](https://getbootstrap.com/) | [@react-querybuilder/bootstrap](https://www.npmjs.com/package/@react-querybuilder/bootstrap) | [demo](https://react-querybuilder.js.org/demo/bootstrap) | [CodeSandbox](https://react-querybuilder.js.org/sandbox?t=bootstrap) · [StackBlitz](https://react-querybuilder.js.org/sandbox?t=bootstrap) |
| [Bulma](https://bulma.io/) | [@react-querybuilder/bulma](https://www.npmjs.com/package/@react-querybuilder/bulma) | [demo](https://react-querybuilder.js.org/demo/bulma) | [CodeSandbox](https://react-querybuilder.js.org/sandbox?t=bulma) · [StackBlitz](https://react-querybuilder.js.org/sandbox?t=bulma) |
| [Chakra UI](https://chakra-ui.com/) | [@react-querybuilder/chakra](https://www.npmjs.com/package/@react-querybuilder/chakra) | [demo](https://react-querybuilder.js.org/demo/chakra) | [CodeSandbox](https://react-querybuilder.js.org/sandbox?t=chakra) · [StackBlitz](https://react-querybuilder.js.org/sandbox?t=chakra) |
| [Fluent UI](https://github.com/microsoft/fluentui) | [@react-querybuilder/fluent](https://www.npmjs.com/package/@react-querybuilder/fluent) | [demo](https://react-querybuilder.js.org/demo/fluent) | [CodeSandbox](https://react-querybuilder.js.org/sandbox?t=fluent) · [StackBlitz](https://react-querybuilder.js.org/sandbox?t=fluent) |
| [Mantine](https://mantine.dev/) | [@react-querybuilder/mantine](https://www.npmjs.com/package/@react-querybuilder/mantine) | [demo](https://react-querybuilder.js.org/demo/mantine) | [CodeSandbox](https://react-querybuilder.js.org/sandbox?t=mantine) · [StackBlitz](https://react-querybuilder.js.org/sandbox?t=mantine) |
| [MUI](https://mui.com/) | [@react-querybuilder/material](https://www.npmjs.com/package/@react-querybuilder/material) | [demo](https://react-querybuilder.js.org/demo/material) | [CodeSandbox](https://react-querybuilder.js.org/sandbox?t=material) · [StackBlitz](https://react-querybuilder.js.org/sandbox?t=material) |
| [React Native](https://reactnative.dev/) | [@react-querybuilder/native](https://www.npmjs.com/package/@react-querybuilder/native) | | [CodeSandbox](https://react-querybuilder.js.org/sandbox?t=native) · [StackBlitz](https://react-querybuilder.js.org/sandbox?t=native) |
| [Tremor](https://www.tremor.so/) | [@react-querybuilder/tremor](https://www.npmjs.com/package/@react-querybuilder/tremor) | [demo](https://react-querybuilder.js.org/demo/tremor) | [CodeSandbox](https://react-querybuilder.js.org/sandbox?t=tremor) · [StackBlitz](https://react-querybuilder.js.org/sandbox?t=tremor) |

@@ -63,7 +63,8 @@ ## Basic usage

return <QueryBuilder fields={fields} query={query} onQueryChange={setQuery} />;
return <QueryBuilder fields={fields} defaultQuery={query} onQueryChange={setQuery} />;
};
```
To enable drag-and-drop, install the [`@react-querybuilder/dnd` package](https://www.npmjs.com/package/@react-querybuilder/dnd) and nest `<QueryBuilder />` under `<QueryBuilderDnD />`.
> [!TIP]
> To enable drag-and-drop, install the [`@react-querybuilder/dnd` package](https://www.npmjs.com/package/@react-querybuilder/dnd) and nest `QueryBuilder` under `QueryBuilderDnD`.

@@ -99,3 +100,5 @@ ## Export

**Tip:** `parseSQL` will accept a full `SELECT` statement or the `WHERE` clause by itself (everything but the expressions in the `WHERE` clause will be ignored). Trailing semicolon is optional.
> [!TIP]
>
> `parseSQL` will accept a full `SELECT` statement or the `WHERE` clause by itself (everything but the expressions in the `WHERE` clause will be ignored). Trailing semicolon is optional.

@@ -102,0 +105,0 @@ ```ts

dist/types-esm/components/defaults.d.mts
dist/types-esm/components/QueryBuilderContext.d.mts
dist/types-esm/hooks/useQueryBuilder.d.mts
dist/types-esm/hooks/useQueryBuilderSchema.d.mts
dist/types-esm/hooks/useQueryBuilderSetup.d.mts
dist/types-esm/hooks/useRule.d.mts
dist/types-esm/hooks/useRuleGroup.d.mts
dist/types-esm/hooks/useValueEditor.d.mts
dist/types-esm/hooks/useValueSelector.d.mts
dist/types-esm/utils/toFullOption.d.mts
dist/types-esm/utils/uniq.d.mts
dist/types/components/defaults.d.ts
dist/types/components/QueryBuilderContext.d.ts
dist/types/hooks/useQueryBuilder.d.ts
dist/types/hooks/useQueryBuilderSchema.d.ts
dist/types/hooks/useQueryBuilderSetup.d.ts
dist/types/hooks/useRule.d.ts
dist/types/hooks/useRuleGroup.d.ts
dist/types/hooks/useValueEditor.d.ts
dist/types/hooks/useValueSelector.d.ts
dist/types/utils/toFullOption.d.ts
dist/types/utils/uniq.d.ts
dist/cjs/react-querybuilder.cjs.development.js

Sorry, the diff of this file is too big to display

dist/cjs/react-querybuilder.cjs.development.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/react-querybuilder.cjs.production.js

Sorry, the diff of this file is too big to display

dist/cjs/react-querybuilder.cjs.production.js.map

Sorry, the diff of this file is not supported yet

dist/formatQuery.js

Sorry, the diff of this file is too big to display

dist/formatQuery.js.map

Sorry, the diff of this file is not supported yet

dist/parseCEL.js.map

Sorry, the diff of this file is not supported yet

dist/parseJSONata.js

Sorry, the diff of this file is too big to display

dist/parseJSONata.js.map

Sorry, the diff of this file is not supported yet

dist/parseJsonLogic.js.map

Sorry, the diff of this file is not supported yet

dist/parseMongoDB.js.map

Sorry, the diff of this file is not supported yet

dist/parseSpEL.js

Sorry, the diff of this file is too big to display

dist/parseSpEL.js.map

Sorry, the diff of this file is not supported yet

dist/parseSQL.js

Sorry, the diff of this file is too big to display

dist/parseSQL.js.map

Sorry, the diff of this file is not supported yet

dist/query-builder-layout.css

Sorry, the diff of this file is not supported yet

dist/query-builder-layout.css.map

Sorry, the diff of this file is not supported yet

dist/query-builder.css

Sorry, the diff of this file is not supported yet

dist/query-builder.css.map

Sorry, the diff of this file is not supported yet

dist/react-querybuilder.legacy-esm.js

Sorry, the diff of this file is too big to display

dist/react-querybuilder.legacy-esm.js.map

Sorry, the diff of this file is not supported yet

dist/react-querybuilder.mjs

Sorry, the diff of this file is not supported yet

dist/react-querybuilder.mjs.map

Sorry, the diff of this file is not supported yet

dist/react-querybuilder.production.mjs

Sorry, the diff of this file is not supported yet

dist/react-querybuilder.production.mjs.map

Sorry, the diff of this file is not supported yet

dist/types-esm/components/index.d.mts

Sorry, the diff of this file is not supported yet

dist/types-esm/components/QueryBuilder.d.mts

Sorry, the diff of this file is not supported yet

dist/types-esm/components/Rule.d.mts

Sorry, the diff of this file is not supported yet

dist/types-esm/components/RuleGroup.d.mts

Sorry, the diff of this file is not supported yet

dist/types-esm/components/ValueEditor.d.mts

Sorry, the diff of this file is not supported yet

dist/types-esm/components/ValueSelector.d.mts

Sorry, the diff of this file is not supported yet

dist/types-esm/hooks/index.d.mts

Sorry, the diff of this file is not supported yet

dist/types-esm/index.d.mts

Sorry, the diff of this file is not supported yet

dist/types-esm/types/propsUsingReact.d.mts

Sorry, the diff of this file is not supported yet

dist/types-esm/utils/arrayUtils.d.mts

Sorry, the diff of this file is not supported yet

dist/types-esm/utils/formatQuery/formatQuery.d.mts

Sorry, the diff of this file is not supported yet

dist/types-esm/utils/formatQuery/index.d.mts

Sorry, the diff of this file is not supported yet

dist/types-esm/utils/formatQuery/utils.d.mts

Sorry, the diff of this file is not supported yet

dist/types-esm/utils/index.d.mts

Sorry, the diff of this file is not supported yet

dist/types-esm/utils/optGroupUtils.d.mts

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc