• [x] MaterialTextWidget

• [x] MaterialDateWidget

• [x] MaterialDateTimeWidget

• [x] MaterialTimeWidget

• [x] MaterialSelectWidget

• [x] MaterialNumberWidget

• [x] MaterialSliderWidget

• [x] MaterialRangeWidget

• [x] MaterialBooleanWidget

• [x] MaterialMultiSelectWidget

• [x] MaterialFieldSelect

• [x] MaterialButton

• [x] MaterialButtonGroup

• [x] MaterialConjs

• [x] MaterialValueSources

• [x] MaterialConfirm

• [x] MaterialProvider

• [x] Number Between: "Warning: value prop on input should not be null. Consider using an empty string to clear the component or undefined for uncontrolled components."
• [x] Fix vertical position of "from"/"to" labels in Number Between
• [x] Warning of nullish 2nd value source for Number Between: "Material-UI: You have provided an out-of-range value null for the select component. The available values are value, field, func."
• [x] Try with showLabels: true
• [x] ? MaterialFieldSelect - use renderValue as in MaterialSelect, instead of first item "Select field.." in field list
• [x] TS def
• [x] Update docs, readme (don't forget to mention al needed MUI packages), bump version

I have a project and I wanted to integrate this query builder into it, but it messes up all my styles. Can anyone help me to find a way to "isolate" query builder own styles from the rest of the styles from the application?

Probably there is no way to enforce order of the query items. Is there?

When I save an object containing query on server and then open it for editing, the order is not the same

Looks like it's reordered by field name. Same with rule+group, think it sorts by groups first rule's field. Same ordering applies to sql query string. Would be great to have an opportunity to enforce order, is there a plan to do it? Or maybe it already exists? Maybe I can help?

Describe the bug I created a query from the control that i save in database as json format via JSON.stringify. When i open again my form in edit mode, the fields and associated operators has been restored to the control but not the value. I only use classic value (string or number), no any customizations

To Reproduce

• Save query as json to state using JSON.Stringify
• reload query from json using QbUtils.checkTree(QbUtils.loadTree(JSON.parse(job.query)), config));

Expected behavior The query parsed should be correctly restored in query control and associated value should be filled in value field.

Additional context In ReactJS Component, Usage of state for the query and loaded via promise from database

• configuration fields is generated before loading query component. Fields are requested to API
• Using Material UI configuration

sample data: JSON Query used: {"id":"b9a8988a-0123-4456-b89a-b177019fefc4","type":"group","children1":{"babb8a9b-cdef-4012-b456-717701a02d86":{"type":"rule","properties":{"field":"INTERVENANTS","operator":"equal","value":["aaaaaaaaé"],"valueSrc":["value"],"valueType":["text"]}}}}

extract from config for fields: conjunctions: {AND: {…}} fields: INTERVENANTS: QueryField disabled: false fieldSettings: {} label: "Intervenants" mainWidget: "text" type: "text" valueSources: ["value"] widgets: {text: {…}, field: {…}} proto: Object

Thanks for your help, Valentin

mongodbFormat creates query like this: {"alarmStartTS":{"$gt": "2020-03-18 10:40+01:00"}}

It would be like this: {"alarmStartTS":{"$gt": new ISODate("2020-03-18 10:40+01:00")}}

Steps to reproduce the bug 1.Select any field from the Select 2.Select the operator 3. Click on the value input field or if Select List field and select operator then click the dropdown selection and without selecting any value click the operator again

After the third step app cashes.

Describe the bug I use your component with a async autocompletion. When a user write something in the input I make a API call to retrieve data and provide it to the select input. After two refreshes the input selection doesn't refresh

Describe the bug I upgraded to 2.0.1 because of #187, and looked at TS example. When importing AntdConfig / Widgets i get a module not found error

Module not found: Can't resolve 'react-awesome-query-builder/components/widgets/antd' in '....\Web\wwwroot\src\queryBuilder\config'

If i change the imports to prefix /modules/ (before /components/) i get an unexpected token error

SyntaxError: ...\Web\wwwroot\node_modules\react-awesome-query-builder\modules\components\widgets\antd\index.js: Unexpected token (30:48)

  28 | 
  29 | import { ConfigProvider } from 'antd';
> 30 | export const Provider = ({config, children}) => <ConfigProvider locale={config.settings.locale.antd}>{children}</ConfigProvider>;
     |                                                 ^

To Reproduce

• Update to ^2.0.1
• Add

import AntdConfig from 'react-awesome-query-builder/config/antd';
import * as AntdWidgets from 'react-awesome-query-builder/components/widgets/antd';

• Run yarn start

Expected behavior Being able to resolve the modules. Screenshots

Additional context Add any other context about the problem here.

Is there any way to add new type other than existing? Like for between query builder I would like add slider control (other that two input controls), for that I tried to add new Type but its not working for my. Or is there any other way to add Slider widget in existing code?

Hello,

I am trying to add a new operator for JsonLogic. Here my code :

const multiselect_contains = {
    label: "Contains",
    labelForFormat: "CONTAINS",
    formatOp: (field, op, values, valueSrc, valueType, opDef, operatorOptions, isForDisplay) => {
      if (valueSrc == "value")
        return `${field} CONTAINS (${values.join(", ")})`;
      else
        return `${field} CONTAINS ${values}`;
    },
    reversedOp: "multiselect_not_contains",
    jsonLogic2: "some-in",
    jsonLogic: (field, op, vals) => ({
      "some": [ field, {"in": [{"var": ""}, vals]} ]
    })
  };
  const multiselect_not_contains = {
    isNotOp: true,
    label: "Not contains",
    labelForFormat: "NOT CONTAINS",
    formatOp: (field, op, values, valueSrc, valueType, opDef, operatorOptions, isForDisplay) => {
      if (valueSrc == "value")
        return `${field} NOT CONTAINS (${values.join(", ")})`;
      else
        return `${field} NOT CONTAINS ${values}`;
    },
    reversedOp: "multiselect_contains"
  };


  const types = {
    ...InitialConfig.types,
    multiselect: merge(InitialConfig.types.multiselect, {
      operators: [
        "multiselect_contains",
        "multiselect_not_contains",
        "multiselect_equals",
        "multiselect_not_equals",
        "is_null",
        "is_not_null"
      ],
      widgets:
      {
        multiselect:{
          operators:[
            "multiselect_contains",
            "multiselect_not_contains",
            "multiselect_equals",
            "multiselect_not_equals",
            "is_null",
            "is_not_null"
          ]
        }
      }
    })
  };

  const operators = {
    ...InitialConfig.operators,
    multiselect_contains,
    multiselect_not_contains
  };

  const config = {
    ...InitialConfig,
    fields,
    operators,
    types
  };

In the edition time, it works nicely. I can choose the operators and the values. But in the load time, it doesn't work. The field is correctly selected but not the operator and the values.

Thanks for your help.

Describe the bug When I am using the react awesome query builder within a Office UI Fabric Panel as below, and then click on the draggable icon next to the rules I get an error "out of tree bounds!" and then window gets freezed, the hover features to add rule and group is gone, and nothing can be done

To Reproduce Steps to reproduce the behavior.

RulesGrid.tsx

import { Modal, Panel, PanelType } from "office-ui-fabric-react";

<Panel isBlocking={false} isOpen={this.state.isOpenRulePanel} type={ PanelType.custom } customWidth={"65%"} closeButtonAriaLabel="Close"

style={{ width: '100%', height: '100%' , position: 'relative', // top: '5', // left:'5', // right:'0', // bottom:'0', cursor: 'pointer', // zIndex:2, backgroundColor:'#fff', border:3 }}

MyDemoQueryBuilder code: import * as React from "react"; import { Query, Builder, Utils, //types: ImmutableTree, Config, BuilderProps, JsonTree, JsonLogicTree } from "react-awesome-query-builder"; import {throttle} from 'lodash'; // import loadedConfig from "./config_simple"; // <- you can try './config' for more complex examples import loadedConfig from "./config_uline"; // <- you can try './config' for more complex examples //Pratibha for uline // import loadedInitValue from "./init_value"; import loadedInitValue from "./init_value_uline"; import loadedInitLogic from "./init_logic"; const stringify = JSON.stringify;

const {queryBuilderFormat, jsonLogicFormat, queryString, mongodbFormat, sqlFormat, getTree, checkTree, loadTree, uuid, loadFromJsonLogic} = Utils;

const preStyle = { backgroundColor: "darkgrey", margin: "10px", padding: "10px" }; const preErrorStyle = { backgroundColor: "lightpink", margin: "10px", padding: "10px" };

const emptyInitValue: JsonTree = {"id": uuid(), "type": "group"}; // get init value in JsonTree format: const myinitValue: JsonTree = loadedInitValue && Object.keys(loadedInitValue).length > 0 ? loadedInitValue as JsonTree : emptyInitValue;//Pratibha for uline // const myinitValue: JsonTree = emptyInitValue; //Pratibha for uline const myinitTree: ImmutableTree = checkTree(loadTree(myinitValue), loadedConfig);

interface MyDemoQueryBuilderState { tree: ImmutableTree; config: Config; }

export default class MyDemoQueryBuilder extends React.Component<{}, MyDemoQueryBuilderState> { /** * */ private immutableTree: ImmutableTree; private config: Config;

constructor(props) { super(props); this.state = { tree: myinitTree, config: loadedConfig }; }

resetValue = () => { this.setState({ tree: myinitTree, }); };

clearValue = () => { this.setState({ tree: loadTree(emptyInitValue), }); };

onChange = (immutableTree: ImmutableTree, config: Config) => { this.immutableTree = immutableTree; this.config = config; this.updateResult();

// `jsonTree` or `logic` can be saved to backend
// (and then loaded with `loadTree` or `loadFromJsonLogic` as seen above)
const jsonTree = getTree(immutableTree);
const {logic, data, errors} = jsonLogicFormat(immutableTree, config);

}

updateResult = throttle(() => { this.setState({tree: this.immutableTree, config: this.config}); }, 100)

renderResult = ({tree: immutableTree, config} : {tree: ImmutableTree, config: Config}) => { // debugger; const {logic, data, errors} = jsonLogicFormat(immutableTree, config); return (

  <hr/>
  <div>
  humanStringFormat: 
    <pre style={preStyle}>
      {stringify(queryString(immutableTree, config, true), undefined, 2)}
    </pre>
  </div>
  <hr/>
  <div>
  sqlFormat: 
    <pre style={preStyle}>
      {stringify(sqlFormat(immutableTree, config), undefined, 2)}
    </pre>
  </div>
  <hr/>
 
</div>

); }

renderBuilder = (props: BuilderProps) => ( <div className="query-builder-container" style={{padding: "10px"}}>

<Builder {...props} />

)

public render(){ return( <div style={{ width: '100%', height: '100%' }}> <div id="myquerybuilder" style={{ height: '100%', width: '100%', overflow:'auto' }}

    >
          <Query 
  {...loadedConfig} 
  value={this.state.tree}
  onChange={this.onChange}
  renderBuilder={this.renderBuilder}
/>

        <button onClick={this.resetValue}>Reset</button>
    <button onClick={this.clearValue}>Clear</button>
    <div>
  {this.renderResult(this.state)}
</div>
    </div>
    </div>
);

} }

bug 

Describe the bug White spaces are visible on the rule - field dropdown when we have nested fields or subfields

To Reproduce Sample config for Fields:: const fields: Fields = { user: { label: "User", tooltip: "Group of fields", type: "!struct", subfields: { firstName: { label2: "Username", //only for menu's toggler type: "text", excludeOperators: ["proximity"], mainWidgetProps: { valueLabel: "Name", valuePlaceholder: "Enter name" }, fieldSettings: { validateValue: (val: string, fieldSettings) => { return val.length < 10; } } }, login: { type: "text", excludeOperators: ["proximity"], fieldSettings: { validateValue: (val: string, fieldSettings) => { return ( val.length < 10 && (val === "" || val.match(/^[A-Za-z0-9_-]+$/) !== null) ); } }, mainWidgetProps: { valueLabel: "Login", valuePlaceholder: "Enter login" } }, child: { type: "!struct", subfields: { address: { type: "text" }, street: { type: "text" } } } } }, }

Library version used :: "react-awesome-query-builder": "^5.3.1", "antd": "^4.24.3", "@ant-design/icons": "^4.8.0", "react": "17.0.2",

Expected behavior The selected value of the dropdown must be trimmed and no extra white spaces must be dispalyed

Screenshots

Additional context Add any other context about the problem here.

Bumps @types/react-dom from 17.0.18 to 18.0.10.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps puppeteer from 13.7.0 to 19.4.1.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps sinon from 13.0.2 to 15.0.1.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps mocha from 9.2.2 to 10.2.0.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Describe the bug Using the MUI theme seems to break the styles. The buttons aren't the correct colors and dragging and dropping components causes re-render issues. Works fine when using AntD. How do you solve this? Anyway to customize these styles?

To Reproduce Use any example project and switch to the MUI config

Expected behavior No broken styling and no re-rendering and type issues on drag and interaction

Screenshots

Additional context How can I edit the mui config to try fix these issues?