@webiny/app-aco 5.43.2 → 6.0.0-alpha.0

package/components/AdvancedSearch/GraphQLInputMapper.test.js.map

@@ -1 +1 @@
-{"version":3,"names":["_GraphQLInputMapper","require","_domain","describe","it","filterDTO","id","name","operation","Operation","AND","groups","filters","field","condition","value","OR","output","GraphQLInputMapper","toGraphQL","expect","toEqual","_defineProperty2","default","JSON","stringify","entryId","modelId","entryId_not"],"sources":["GraphQLInputMapper.test.ts"],"sourcesContent":["import { GraphQLInputMapper } from \"./GraphQLInputMapper\";\nimport { Operation, FilterDTO } from \"./domain\";\n\ndescribe(\"GraphQLInputMapper\", () => {\n    it(\"should return a GraphQL formatted output based on the received FilterDTO\", () => {\n        const filterDTO: FilterDTO = {\n            id: \"any-id\",\n            name: \"Untitled\",\n            operation: Operation.AND,\n            groups: [\n                {\n                    operation: Operation.AND,\n                    filters: [\n                        {\n                            field: \"field-1\",\n                            condition: \" \",\n                            value: \"value-1\"\n                        },\n                        {\n                            field: \"field-2\",\n                            condition: \"_not\",\n                            value: \"value-2\"\n                        }\n                    ]\n                },\n                {\n                    operation: Operation.OR,\n                    filters: [\n                        {\n                            field: \"field-3\",\n                            condition: \"_startsWith\",\n                            value: \"value-3\"\n                        },\n                        {\n                            field: \"field-4\",\n                            condition: \"_not_contains\",\n                            value: \"value-4\"\n                        },\n                        {\n                            field: \"boolean-field-true\",\n                            condition: \" \",\n                            value: \"true\"\n                        },\n                        {\n                            field: \"boolean-field-false\",\n                            condition: \" \",\n                            value: \"false\"\n                        }\n                    ]\n                }\n            ]\n        };\n\n        const output = GraphQLInputMapper.toGraphQL(filterDTO);\n\n        expect(output).toEqual({\n            [Operation.AND]: [\n                {\n                    [Operation.AND]: [\n                        {\n                            \"field-1\": \"value-1\"\n                        },\n                        {\n                            \"field-2_not\": \"value-2\"\n                        }\n                    ]\n                },\n                {\n                    [Operation.OR]: [\n                        {\n                            \"field-3_startsWith\": \"value-3\"\n                        },\n                        {\n                            \"field-4_not_contains\": \"value-4\"\n                        },\n                        {\n                            \"boolean-field-true\": true\n                        },\n                        {\n                            \"boolean-field-false\": false\n                        }\n                    ]\n                }\n            ]\n        });\n    });\n\n    it(\"should return a GraphQL formatted output and support nested objects\", () => {\n        const filterDTO: FilterDTO = {\n            id: \"any-id\",\n            name: \"Untitled\",\n            operation: Operation.AND,\n            groups: [\n                {\n                    operation: Operation.AND,\n                    filters: [\n                        {\n                            field: \"field-1\",\n                            condition: \" \",\n                            value: \"value-1\"\n                        },\n                        {\n                            field: \"field-2\",\n                            condition: \"_not\",\n                            value: \"value-2\"\n                        },\n                        {\n                            field: \"field-3.entryId\",\n                            condition: \" \",\n                            value: JSON.stringify({ entryId: \"value-3\", modelId: \"any-modelId\" })\n                        },\n                        {\n                            field: \"field-4.entryId\",\n                            condition: \"_not\",\n                            value: JSON.stringify({ entryId: \"value-4\", modelId: \"any-modelId\" })\n                        },\n                        {\n                            field: \"field-5.sub-field.entryId\",\n                            condition: \" \",\n                            value: JSON.stringify({\n                                \"sub-field\": { entryId: \"value-5\", modelId: \"any-modelId\" }\n                            })\n                        },\n                        {\n                            field: \"field-6.sub-field.entryId\",\n                            condition: \"_not\",\n                            value: JSON.stringify({\n                                \"sub-field\": { entryId: \"value-6\", modelId: \"any-modelId\" }\n                            })\n                        }\n                    ]\n                }\n            ]\n        };\n\n        const output = GraphQLInputMapper.toGraphQL(filterDTO);\n\n        expect(output).toEqual({\n            [Operation.AND]: [\n                {\n                    [Operation.AND]: [\n                        {\n                            \"field-1\": \"value-1\"\n                        },\n                        {\n                            \"field-2_not\": \"value-2\"\n                        },\n                        {\n                            \"field-3\": {\n                                entryId: \"value-3\"\n                            }\n                        },\n                        {\n                            \"field-4\": {\n                                entryId_not: \"value-4\"\n                            }\n                        },\n                        {\n                            \"field-5\": {\n                                \"sub-field\": {\n                                    entryId: \"value-5\"\n                                }\n                            }\n                        },\n                        {\n                            \"field-6\": {\n                                \"sub-field\": {\n                                    entryId_not: \"value-6\"\n                                }\n                            }\n                        }\n                    ]\n                }\n            ]\n        });\n    });\n});\n"],"mappings":";;;;AAAA,IAAAA,mBAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAEAE,QAAQ,CAAC,oBAAoB,EAAE,YAAM;EACjCC,EAAE,CAAC,0EAA0E,EAAE,YAAM;IACjF,IAAMC,SAAoB,GAAG;MACzBC,EAAE,EAAE,QAAQ;MACZC,IAAI,EAAE,UAAU;MAChBC,SAAS,EAAEC,iBAAS,CAACC,GAAG;MACxBC,MAAM,EAAE,CACJ;QACIH,SAAS,EAAEC,iBAAS,CAACC,GAAG;QACxBE,OAAO,EAAE,CACL;UACIC,KAAK,EAAE,SAAS;UAChBC,SAAS,EAAE,GAAG;UACdC,KAAK,EAAE;QACX,CAAC,EACD;UACIF,KAAK,EAAE,SAAS;UAChBC,SAAS,EAAE,MAAM;UACjBC,KAAK,EAAE;QACX,CAAC;MAET,CAAC,EACD;QACIP,SAAS,EAAEC,iBAAS,CAACO,EAAE;QACvBJ,OAAO,EAAE,CACL;UACIC,KAAK,EAAE,SAAS;UAChBC,SAAS,EAAE,aAAa;UACxBC,KAAK,EAAE;QACX,CAAC,EACD;UACIF,KAAK,EAAE,SAAS;UAChBC,SAAS,EAAE,eAAe;UAC1BC,KAAK,EAAE;QACX,CAAC,EACD;UACIF,KAAK,EAAE,oBAAoB;UAC3BC,SAAS,EAAE,GAAG;UACdC,KAAK,EAAE;QACX,CAAC,EACD;UACIF,KAAK,EAAE,qBAAqB;UAC5BC,SAAS,EAAE,GAAG;UACdC,KAAK,EAAE;QACX,CAAC;MAET,CAAC;IAET,CAAC;IAED,IAAME,MAAM,GAAGC,sCAAkB,CAACC,SAAS,CAACd,SAAS,CAAC;IAEtDe,MAAM,CAACH,MAAM,CAAC,CAACI,OAAO,KAAAC,gBAAA,CAAAC,OAAA,MACjBd,iBAAS,CAACC,GAAG,EAAG,KAAAY,gBAAA,CAAAC,OAAA,MAERd,iBAAS,CAACC,GAAG,EAAG,CACb;MACI,SAAS,EAAE;IACf,CAAC,EACD;MACI,aAAa,EAAE;IACnB,CAAC,CACJ,OAAAY,gBAAA,CAAAC,OAAA,MAGAd,iBAAS,CAACO,EAAE,EAAG,CACZ;MACI,oBAAoB,EAAE;IAC1B,CAAC,EACD;MACI,sBAAsB,EAAE;IAC5B,CAAC,EACD;MACI,oBAAoB,EAAE;IAC1B,CAAC,EACD;MACI,qBAAqB,EAAE;IAC3B,CAAC,CACJ,EAER,CACJ,CAAC;EACN,CAAC,CAAC;EAEFZ,EAAE,CAAC,qEAAqE,EAAE,YAAM;IAC5E,IAAMC,SAAoB,GAAG;MACzBC,EAAE,EAAE,QAAQ;MACZC,IAAI,EAAE,UAAU;MAChBC,SAAS,EAAEC,iBAAS,CAACC,GAAG;MACxBC,MAAM,EAAE,CACJ;QACIH,SAAS,EAAEC,iBAAS,CAACC,GAAG;QACxBE,OAAO,EAAE,CACL;UACIC,KAAK,EAAE,SAAS;UAChBC,SAAS,EAAE,GAAG;UACdC,KAAK,EAAE;QACX,CAAC,EACD;UACIF,KAAK,EAAE,SAAS;UAChBC,SAAS,EAAE,MAAM;UACjBC,KAAK,EAAE;QACX,CAAC,EACD;UACIF,KAAK,EAAE,iBAAiB;UACxBC,SAAS,EAAE,GAAG;UACdC,KAAK,EAAES,IAAI,CAACC,SAAS,CAAC;YAAEC,OAAO,EAAE,SAAS;YAAEC,OAAO,EAAE;UAAc,CAAC;QACxE,CAAC,EACD;UACId,KAAK,EAAE,iBAAiB;UACxBC,SAAS,EAAE,MAAM;UACjBC,KAAK,EAAES,IAAI,CAACC,SAAS,CAAC;YAAEC,OAAO,EAAE,SAAS;YAAEC,OAAO,EAAE;UAAc,CAAC;QACxE,CAAC,EACD;UACId,KAAK,EAAE,2BAA2B;UAClCC,SAAS,EAAE,GAAG;UACdC,KAAK,EAAES,IAAI,CAACC,SAAS,CAAC;YAClB,WAAW,EAAE;cAAEC,OAAO,EAAE,SAAS;cAAEC,OAAO,EAAE;YAAc;UAC9D,CAAC;QACL,CAAC,EACD;UACId,KAAK,EAAE,2BAA2B;UAClCC,SAAS,EAAE,MAAM;UACjBC,KAAK,EAAES,IAAI,CAACC,SAAS,CAAC;YAClB,WAAW,EAAE;cAAEC,OAAO,EAAE,SAAS;cAAEC,OAAO,EAAE;YAAc;UAC9D,CAAC;QACL,CAAC;MAET,CAAC;IAET,CAAC;IAED,IAAMV,MAAM,GAAGC,sCAAkB,CAACC,SAAS,CAACd,SAAS,CAAC;IAEtDe,MAAM,CAACH,MAAM,CAAC,CAACI,OAAO,KAAAC,gBAAA,CAAAC,OAAA,MACjBd,iBAAS,CAACC,GAAG,EAAG,KAAAY,gBAAA,CAAAC,OAAA,MAERd,iBAAS,CAACC,GAAG,EAAG,CACb;MACI,SAAS,EAAE;IACf,CAAC,EACD;MACI,aAAa,EAAE;IACnB,CAAC,EACD;MACI,SAAS,EAAE;QACPgB,OAAO,EAAE;MACb;IACJ,CAAC,EACD;MACI,SAAS,EAAE;QACPE,WAAW,EAAE;MACjB;IACJ,CAAC,EACD;MACI,SAAS,EAAE;QACP,WAAW,EAAE;UACTF,OAAO,EAAE;QACb;MACJ;IACJ,CAAC,EACD;MACI,SAAS,EAAE;QACP,WAAW,EAAE;UACTE,WAAW,EAAE;QACjB;MACJ;IACJ,CAAC,CACJ,EAER,CACJ,CAAC;EACN,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["GraphQLInputMapper","Operation","describe","it","filterDTO","id","name","operation","AND","groups","filters","field","condition","value","OR","output","toGraphQL","expect","toEqual","JSON","stringify","entryId","modelId","entryId_not"],"sources":["GraphQLInputMapper.test.ts"],"sourcesContent":["import { GraphQLInputMapper } from \"./GraphQLInputMapper\";\nimport { Operation, FilterDTO } from \"./domain\";\n\ndescribe(\"GraphQLInputMapper\", () => {\n    it(\"should return a GraphQL formatted output based on the received FilterDTO\", () => {\n        const filterDTO: FilterDTO = {\n            id: \"any-id\",\n            name: \"Untitled\",\n            operation: Operation.AND,\n            groups: [\n                {\n                    operation: Operation.AND,\n                    filters: [\n                        {\n                            field: \"field-1\",\n                            condition: \" \",\n                            value: \"value-1\"\n                        },\n                        {\n                            field: \"field-2\",\n                            condition: \"_not\",\n                            value: \"value-2\"\n                        }\n                    ]\n                },\n                {\n                    operation: Operation.OR,\n                    filters: [\n                        {\n                            field: \"field-3\",\n                            condition: \"_startsWith\",\n                            value: \"value-3\"\n                        },\n                        {\n                            field: \"field-4\",\n                            condition: \"_not_contains\",\n                            value: \"value-4\"\n                        },\n                        {\n                            field: \"boolean-field-true\",\n                            condition: \" \",\n                            value: \"true\"\n                        },\n                        {\n                            field: \"boolean-field-false\",\n                            condition: \" \",\n                            value: \"false\"\n                        }\n                    ]\n                }\n            ]\n        };\n\n        const output = GraphQLInputMapper.toGraphQL(filterDTO);\n\n        expect(output).toEqual({\n            [Operation.AND]: [\n                {\n                    [Operation.AND]: [\n                        {\n                            \"field-1\": \"value-1\"\n                        },\n                        {\n                            \"field-2_not\": \"value-2\"\n                        }\n                    ]\n                },\n                {\n                    [Operation.OR]: [\n                        {\n                            \"field-3_startsWith\": \"value-3\"\n                        },\n                        {\n                            \"field-4_not_contains\": \"value-4\"\n                        },\n                        {\n                            \"boolean-field-true\": true\n                        },\n                        {\n                            \"boolean-field-false\": false\n                        }\n                    ]\n                }\n            ]\n        });\n    });\n\n    it(\"should return a GraphQL formatted output and support nested objects\", () => {\n        const filterDTO: FilterDTO = {\n            id: \"any-id\",\n            name: \"Untitled\",\n            operation: Operation.AND,\n            groups: [\n                {\n                    operation: Operation.AND,\n                    filters: [\n                        {\n                            field: \"field-1\",\n                            condition: \" \",\n                            value: \"value-1\"\n                        },\n                        {\n                            field: \"field-2\",\n                            condition: \"_not\",\n                            value: \"value-2\"\n                        },\n                        {\n                            field: \"field-3.entryId\",\n                            condition: \" \",\n                            value: JSON.stringify({ entryId: \"value-3\", modelId: \"any-modelId\" })\n                        },\n                        {\n                            field: \"field-4.entryId\",\n                            condition: \"_not\",\n                            value: JSON.stringify({ entryId: \"value-4\", modelId: \"any-modelId\" })\n                        },\n                        {\n                            field: \"field-5.sub-field.entryId\",\n                            condition: \" \",\n                            value: JSON.stringify({\n                                \"sub-field\": { entryId: \"value-5\", modelId: \"any-modelId\" }\n                            })\n                        },\n                        {\n                            field: \"field-6.sub-field.entryId\",\n                            condition: \"_not\",\n                            value: JSON.stringify({\n                                \"sub-field\": { entryId: \"value-6\", modelId: \"any-modelId\" }\n                            })\n                        }\n                    ]\n                }\n            ]\n        };\n\n        const output = GraphQLInputMapper.toGraphQL(filterDTO);\n\n        expect(output).toEqual({\n            [Operation.AND]: [\n                {\n                    [Operation.AND]: [\n                        {\n                            \"field-1\": \"value-1\"\n                        },\n                        {\n                            \"field-2_not\": \"value-2\"\n                        },\n                        {\n                            \"field-3\": {\n                                entryId: \"value-3\"\n                            }\n                        },\n                        {\n                            \"field-4\": {\n                                entryId_not: \"value-4\"\n                            }\n                        },\n                        {\n                            \"field-5\": {\n                                \"sub-field\": {\n                                    entryId: \"value-5\"\n                                }\n                            }\n                        },\n                        {\n                            \"field-6\": {\n                                \"sub-field\": {\n                                    entryId_not: \"value-6\"\n                                }\n                            }\n                        }\n                    ]\n                }\n            ]\n        });\n    });\n});\n"],"mappings":"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","ignoreList":[]}

package/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/QueryBuilder.js

@@ -1,84 +1,65 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.QueryBuilder = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _delete_outline = require("@material-design-icons/svg/outlined/delete_outline.svg");
-var _Accordion = require("@webiny/ui/Accordion");
-var _form = require("@webiny/form");
-var _components = require("./components");
-var _Querybuilder = require("./Querybuilder.styled");
-var QueryBuilder = exports.QueryBuilder = function QueryBuilder(props) {
-  var formRef = /*#__PURE__*/_react.default.createRef();
-  (0, _react.useEffect)(function () {
+import React, { Fragment, useEffect } from "react";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete_outline.svg";
+import { Accordion } from "@webiny/admin-ui";
+import { Form } from "@webiny/form";
+import { AddFilter, AddGroup, Details, Filter, FilterOperationLabel, GroupOperationLabel, OperationSelector } from "./components";
+export const QueryBuilder = props => {
+  const formRef = /*#__PURE__*/React.createRef();
+  useEffect(() => {
     if (formRef.current) {
       props.onForm(formRef.current);
     }
   }, []);
-  return /*#__PURE__*/_react.default.createElement(_form.Form, {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-py-lg"
+  }, /*#__PURE__*/React.createElement(Form, {
     ref: formRef,
     data: props.vm.data,
     onChange: props.onChange,
     onSubmit: props.onSubmit,
     invalidFields: props.vm.invalidFields
-  }, function () {
-    return /*#__PURE__*/_react.default.createElement(_Querybuilder.Content, null, /*#__PURE__*/_react.default.createElement(_Querybuilder.Content.Panel, null, /*#__PURE__*/_react.default.createElement(_components.Details, {
-      name: props.vm.name,
-      description: props.vm.description
-    }), /*#__PURE__*/_react.default.createElement(_Accordion.Accordion, {
-      elevation: 1
-    }, props.vm.data.groups.map(function (group, groupIndex, groups) {
-      return /*#__PURE__*/_react.default.createElement(_Querybuilder.AccordionItemInner, {
-        key: "group-".concat(groupIndex)
-      }, /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem, {
-        title: group.title,
-        open: group.open,
-        actions: /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Actions, null, /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Element, {
-          element: /*#__PURE__*/_react.default.createElement(_Querybuilder.FilterOperationContainer, null, /*#__PURE__*/_react.default.createElement(_components.OperationSelector, {
-            label: "Match all conditions",
-            name: "groups.".concat(groupIndex, ".operation")
-          }))
-        }), /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Action, {
-          icon: /*#__PURE__*/_react.default.createElement(_delete_outline.ReactComponent, null),
-          onClick: function onClick() {
-            return props.onDeleteGroup(groupIndex);
-          },
-          disabled: !group.canDelete
-        }))
-      }, group.filters.map(function (filter, filterIndex, filters) {
-        return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
-          key: filterIndex
-        }, /*#__PURE__*/_react.default.createElement(_components.Filter, {
-          name: "groups.".concat(groupIndex, ".filters.").concat(filterIndex),
-          filter: filter,
-          fields: props.fields,
-          onFieldSelectChange: function onFieldSelectChange(data) {
-            return props.onSetFilterFieldData(groupIndex, filterIndex, data);
-          },
-          onDelete: function onDelete() {
-            props.onDeleteFilterFromGroup(groupIndex, filterIndex);
-          }
-        }), /*#__PURE__*/_react.default.createElement(_components.FilterOperationLabel, {
-          show: filters.length !== filterIndex + 1,
-          operation: group.operation
-        }));
-      }), /*#__PURE__*/_react.default.createElement(_components.AddFilter, {
-        onClick: function onClick() {
-          return props.onAddNewFilterToGroup(groupIndex);
-        }
-      })), /*#__PURE__*/_react.default.createElement(_components.GroupOperationLabel, {
-        show: groups.length !== groupIndex + 1,
-        operation: props.vm.data.operation
-      }));
-    })), /*#__PURE__*/_react.default.createElement(_components.AddGroup, {
-      onClick: function onClick() {
-        return props.onAddGroup();
-      }
-    })));
-  });
+  }, () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Details, {
+    name: props.vm.name,
+    description: props.vm.description
+  }), /*#__PURE__*/React.createElement(Accordion, {
+    background: "light",
+    variant: "container"
+  }, props.vm.data.groups.map((group, groupIndex, groups) => /*#__PURE__*/React.createElement(Accordion.Item, {
+    className: "wby-relative",
+    title: group.title,
+    defaultOpen: group.open,
+    key: `group-${groupIndex}`,
+    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "wby-mt-xxs wby-mr-xs-plus"
+    }, /*#__PURE__*/React.createElement(OperationSelector, {
+      label: "Match all conditions",
+      name: `groups.${groupIndex}.operation`
+    })), /*#__PURE__*/React.createElement(Accordion.Item.Action, {
+      icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
+      onClick: () => props.onDeleteGroup(groupIndex),
+      disabled: !group.canDelete
+    }))
+  }, group.filters.map((filter, filterIndex, filters) => /*#__PURE__*/React.createElement(Fragment, {
+    key: filterIndex
+  }, /*#__PURE__*/React.createElement(Filter, {
+    name: `groups.${groupIndex}.filters.${filterIndex}`,
+    filter: filter,
+    fields: props.fields,
+    onFieldSelectChange: data => props.onSetFilterFieldData(groupIndex, filterIndex, data),
+    onDelete: () => {
+      props.onDeleteFilterFromGroup(groupIndex, filterIndex);
+    }
+  }), /*#__PURE__*/React.createElement(FilterOperationLabel, {
+    show: filters.length !== filterIndex + 1,
+    operation: group.operation
+  }))), /*#__PURE__*/React.createElement(AddFilter, {
+    onClick: () => props.onAddNewFilterToGroup(groupIndex)
+  }), /*#__PURE__*/React.createElement(GroupOperationLabel, {
+    show: groups.length !== groupIndex + 1,
+    operation: props.vm.data.operation
+  })))), /*#__PURE__*/React.createElement(AddGroup, {
+    onClick: () => props.onAddGroup()
+  }))));
 };
 
 //# sourceMappingURL=QueryBuilder.js.map

package/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/QueryBuilder.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_delete_outline","_Accordion","_form","_components","_Querybuilder","QueryBuilder","exports","props","formRef","React","createRef","useEffect","current","onForm","default","createElement","Form","ref","data","vm","onChange","onSubmit","invalidFields","Content","Panel","Details","name","description","Accordion","elevation","groups","map","group","groupIndex","AccordionItemInner","key","concat","AccordionItem","title","open","actions","Actions","Element","element","FilterOperationContainer","OperationSelector","label","Action","icon","ReactComponent","onClick","onDeleteGroup","disabled","canDelete","filters","filter","filterIndex","Fragment","Filter","fields","onFieldSelectChange","onSetFilterFieldData","onDelete","onDeleteFilterFromGroup","FilterOperationLabel","show","length","operation","AddFilter","onAddNewFilterToGroup","GroupOperationLabel","AddGroup","onAddGroup"],"sources":["QueryBuilder.tsx"],"sourcesContent":["import React, { Fragment, useEffect } from \"react\";\nimport { ReactComponent as DeleteIcon } from \"@material-design-icons/svg/outlined/delete_outline.svg\";\n\nimport { Accordion, AccordionItem } from \"@webiny/ui/Accordion\";\nimport { Form, FormAPI, FormOnSubmit } from \"@webiny/form\";\n\nimport { QueryBuilderFormData, QueryBuilderViewModel } from \"../QueryBuilderDrawerPresenter\";\n\nimport {\n    AddFilter,\n    AddGroup,\n    Details,\n    Filter,\n    FilterOperationLabel,\n    GroupOperationLabel,\n    OperationSelector\n} from \"./components\";\n\nimport { AccordionItemInner, Content, FilterOperationContainer } from \"./Querybuilder.styled\";\nimport { FieldDTOWithElement } from \"~/components/AdvancedSearch/domain\";\n\nexport interface QueryBuilderProps {\n    onForm: (form: FormAPI) => void;\n    onSubmit: FormOnSubmit<QueryBuilderFormData>;\n    onChange: (data: QueryBuilderFormData) => void;\n    onDeleteGroup: (groupIndex: number) => void;\n    onSetFilterFieldData: (groupIndex: number, filterIndex: number, data: string) => void;\n    onDeleteFilterFromGroup: (groupIndex: number, filterIndex: number) => void;\n    onAddNewFilterToGroup: (groupIndex: number) => void;\n    onAddGroup: () => void;\n    fields: FieldDTOWithElement[];\n    vm: QueryBuilderViewModel;\n}\n\nexport const QueryBuilder = (props: QueryBuilderProps) => {\n    const formRef = React.createRef<FormAPI>();\n\n    useEffect(() => {\n        if (formRef.current) {\n            props.onForm(formRef.current);\n        }\n    }, []);\n\n    return (\n        <Form\n            ref={formRef}\n            data={props.vm.data}\n            onChange={props.onChange}\n            onSubmit={props.onSubmit}\n            invalidFields={props.vm.invalidFields}\n        >\n            {() => (\n                <Content>\n                    <Content.Panel>\n                        <Details name={props.vm.name} description={props.vm.description} />\n                        <Accordion elevation={1}>\n                            {props.vm.data.groups.map((group, groupIndex, groups) => (\n                                <AccordionItemInner key={`group-${groupIndex}`}>\n                                    <AccordionItem\n                                        title={group.title}\n                                        open={group.open}\n                                        actions={\n                                            <AccordionItem.Actions>\n                                                <AccordionItem.Element\n                                                    element={\n                                                        <FilterOperationContainer>\n                                                            <OperationSelector\n                                                                label={\"Match all conditions\"}\n                                                                name={`groups.${groupIndex}.operation`}\n                                                            />\n                                                        </FilterOperationContainer>\n                                                    }\n                                                />\n                                                <AccordionItem.Action\n                                                    icon={<DeleteIcon />}\n                                                    onClick={() => props.onDeleteGroup(groupIndex)}\n                                                    disabled={!group.canDelete}\n                                                />\n                                            </AccordionItem.Actions>\n                                        }\n                                    >\n                                        {group.filters.map((filter, filterIndex, filters) => (\n                                            <Fragment key={filterIndex}>\n                                                <Filter\n                                                    name={`groups.${groupIndex}.filters.${filterIndex}`}\n                                                    filter={filter}\n                                                    fields={props.fields}\n                                                    onFieldSelectChange={data =>\n                                                        props.onSetFilterFieldData(\n                                                            groupIndex,\n                                                            filterIndex,\n                                                            data\n                                                        )\n                                                    }\n                                                    onDelete={() => {\n                                                        props.onDeleteFilterFromGroup(\n                                                            groupIndex,\n                                                            filterIndex\n                                                        );\n                                                    }}\n                                                />\n                                                <FilterOperationLabel\n                                                    show={filters.length !== filterIndex + 1}\n                                                    operation={group.operation}\n                                                />\n                                            </Fragment>\n                                        ))}\n                                        <AddFilter\n                                            onClick={() => props.onAddNewFilterToGroup(groupIndex)}\n                                        />\n                                    </AccordionItem>\n                                    <GroupOperationLabel\n                                        show={groups.length !== groupIndex + 1}\n                                        operation={props.vm.data.operation}\n                                    />\n                                </AccordionItemInner>\n                            ))}\n                        </Accordion>\n                        <AddGroup onClick={() => props.onAddGroup()} />\n                    </Content.Panel>\n                </Content>\n            )}\n        </Form>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Fragment","useEffect","ReactComponent","DeleteIcon","Accordion","Form","AddFilter","AddGroup","Details","Filter","FilterOperationLabel","GroupOperationLabel","OperationSelector","QueryBuilder","props","formRef","createRef","current","onForm","createElement","className","ref","data","vm","onChange","onSubmit","invalidFields","name","description","background","variant","groups","map","group","groupIndex","Item","title","defaultOpen","open","key","actions","label","Action","icon","onClick","onDeleteGroup","disabled","canDelete","filters","filter","filterIndex","fields","onFieldSelectChange","onSetFilterFieldData","onDelete","onDeleteFilterFromGroup","show","length","operation","onAddNewFilterToGroup","onAddGroup"],"sources":["QueryBuilder.tsx"],"sourcesContent":["import React, { Fragment, useEffect } from \"react\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\n\nimport { Accordion } from \"@webiny/admin-ui\";\nimport { Form, FormAPI, FormOnSubmit } from \"@webiny/form\";\n\nimport { QueryBuilderFormData, QueryBuilderViewModel } from \"../QueryBuilderDrawerPresenter\";\n\nimport {\n    AddFilter,\n    AddGroup,\n    Details,\n    Filter,\n    FilterOperationLabel,\n    GroupOperationLabel,\n    OperationSelector\n} from \"./components\";\n\nimport { FieldDTOWithElement } from \"~/components/AdvancedSearch/domain\";\n\nexport interface QueryBuilderProps {\n    onForm: (form: FormAPI) => void;\n    onSubmit: FormOnSubmit<QueryBuilderFormData>;\n    onChange: (data: QueryBuilderFormData) => void;\n    onDeleteGroup: (groupIndex: number) => void;\n    onSetFilterFieldData: (groupIndex: number, filterIndex: number, data: string) => void;\n    onDeleteFilterFromGroup: (groupIndex: number, filterIndex: number) => void;\n    onAddNewFilterToGroup: (groupIndex: number) => void;\n    onAddGroup: () => void;\n    fields: FieldDTOWithElement[];\n    vm: QueryBuilderViewModel;\n}\n\nexport const QueryBuilder = (props: QueryBuilderProps) => {\n    const formRef = React.createRef<FormAPI>();\n\n    useEffect(() => {\n        if (formRef.current) {\n            props.onForm(formRef.current);\n        }\n    }, []);\n\n    return (\n        <div className={\"wby-py-lg\"}>\n            <Form\n                ref={formRef}\n                data={props.vm.data}\n                onChange={props.onChange}\n                onSubmit={props.onSubmit}\n                invalidFields={props.vm.invalidFields}\n            >\n                {() => (\n                    <>\n                        <Details name={props.vm.name} description={props.vm.description} />\n                        <Accordion background={\"light\"} variant={\"container\"}>\n                            {props.vm.data.groups.map((group, groupIndex, groups) => (\n                                <Accordion.Item\n                                    className={\"wby-relative\"}\n                                    title={group.title}\n                                    defaultOpen={group.open}\n                                    key={`group-${groupIndex}`}\n                                    actions={\n                                        <>\n                                            <div className={\"wby-mt-xxs wby-mr-xs-plus\"}>\n                                                <OperationSelector\n                                                    label={\"Match all conditions\"}\n                                                    name={`groups.${groupIndex}.operation`}\n                                                />\n                                            </div>\n                                            <Accordion.Item.Action\n                                                icon={<DeleteIcon />}\n                                                onClick={() => props.onDeleteGroup(groupIndex)}\n                                                disabled={!group.canDelete}\n                                            />\n                                        </>\n                                    }\n                                >\n                                    {group.filters.map((filter, filterIndex, filters) => (\n                                        <Fragment key={filterIndex}>\n                                            <Filter\n                                                name={`groups.${groupIndex}.filters.${filterIndex}`}\n                                                filter={filter}\n                                                fields={props.fields}\n                                                onFieldSelectChange={data =>\n                                                    props.onSetFilterFieldData(\n                                                        groupIndex,\n                                                        filterIndex,\n                                                        data\n                                                    )\n                                                }\n                                                onDelete={() => {\n                                                    props.onDeleteFilterFromGroup(\n                                                        groupIndex,\n                                                        filterIndex\n                                                    );\n                                                }}\n                                            />\n                                            <FilterOperationLabel\n                                                show={filters.length !== filterIndex + 1}\n                                                operation={group.operation}\n                                            />\n                                        </Fragment>\n                                    ))}\n                                    <AddFilter\n                                        onClick={() => props.onAddNewFilterToGroup(groupIndex)}\n                                    />\n                                    <GroupOperationLabel\n                                        show={groups.length !== groupIndex + 1}\n                                        operation={props.vm.data.operation}\n                                    />\n                                </Accordion.Item>\n                            ))}\n                        </Accordion>\n                        <AddGroup onClick={() => props.onAddGroup()} />\n                    </>\n                )}\n            </Form>\n        </div>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/Details.js

@@ -1,43 +1,30 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Details = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Elevation = require("@webiny/ui/Elevation");
-var _Grid = require("@webiny/ui/Grid");
-var _OperationSelector = require("./OperationSelector");
-var _Querybuilder = require("../Querybuilder.styled");
-var Details = exports.Details = function Details(props) {
-  return /*#__PURE__*/_react.default.createElement(_Querybuilder.DetailsContainer, null, /*#__PURE__*/_react.default.createElement(_Elevation.Elevation, {
-    z: 0
-  }, /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-    span: 1,
-    align: "middle"
-  }, /*#__PURE__*/_react.default.createElement(_Querybuilder.CellInner, {
-    align: "center"
-  }, /*#__PURE__*/_react.default.createElement(_Querybuilder.FilterDetailsIcon, null))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-    span: 8,
-    align: "middle"
-  }, /*#__PURE__*/_react.default.createElement(_Querybuilder.CellInner, {
-    align: "left"
-  }, /*#__PURE__*/_react.default.createElement(_Querybuilder.FilterDetailsDetails, {
-    use: "headline5",
-    tag: "h3"
-  }, props.name), props.description && /*#__PURE__*/_react.default.createElement(_Querybuilder.FilterDetailsDetails, {
-    use: "body1",
-    tag: "p"
-  }, props.description))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+import React from "react";
+import { Grid, Heading, Text } from "@webiny/admin-ui";
+import { OperationSelector } from "./OperationSelector";
+export const Details = props => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-mb-lg"
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 9
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-items-start wby-gap-md"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-text-left wby-text-neutral-primary"
+  }, /*#__PURE__*/React.createElement(Heading, {
+    level: 5
+  }, props.name), props.description && /*#__PURE__*/React.createElement(Text, {
+    as: "div",
+    size: "sm",
+    className: "wby-mt-xs wby-text-neutral-strong"
+  }, props.description)))), /*#__PURE__*/React.createElement(Grid.Column, {
     span: 3,
     align: "middle"
-  }, /*#__PURE__*/_react.default.createElement(_Querybuilder.CellInner, {
-    align: "right"
-  }, /*#__PURE__*/_react.default.createElement(_OperationSelector.OperationSelector, {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-text-right"
+  }, /*#__PURE__*/React.createElement(OperationSelector, {
     name: "operation",
     label: "Match all filter groups"
-  }))))));
+  })))));
 };
 
 //# sourceMappingURL=Details.js.map

package/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/Details.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_Elevation","_Grid","_OperationSelector","_Querybuilder","Details","exports","props","default","createElement","DetailsContainer","Elevation","z","Grid","Cell","span","align","CellInner","FilterDetailsIcon","FilterDetailsDetails","use","tag","name","description","OperationSelector","label"],"sources":["Details.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\n\nimport { OperationSelector } from \"./OperationSelector\";\n\nimport {\n    CellInner,\n    DetailsContainer,\n    FilterDetailsDetails,\n    FilterDetailsIcon\n} from \"../Querybuilder.styled\";\n\nexport interface DetailsProps {\n    name: string;\n    description?: string;\n}\n\nexport const Details = (props: DetailsProps) => {\n    return (\n        <DetailsContainer>\n            <Elevation z={0}>\n                <Grid>\n                    <Cell span={1} align={\"middle\"}>\n                        <CellInner align={\"center\"}>\n                            <FilterDetailsIcon />\n                        </CellInner>\n                    </Cell>\n                    <Cell span={8} align={\"middle\"}>\n                        <CellInner align={\"left\"}>\n                            <FilterDetailsDetails use={\"headline5\"} tag={\"h3\"}>\n                                {props.name}\n                            </FilterDetailsDetails>\n                            {props.description && (\n                                <FilterDetailsDetails use={\"body1\"} tag={\"p\"}>\n                                    {props.description}\n                                </FilterDetailsDetails>\n                            )}\n                        </CellInner>\n                    </Cell>\n                    <Cell span={3} align={\"middle\"}>\n                        <CellInner align={\"right\"}>\n                            <OperationSelector\n                                name={\"operation\"}\n                                label={\"Match all filter groups\"}\n                            />\n                        </CellInner>\n                    </Cell>\n                </Grid>\n            </Elevation>\n        </DetailsContainer>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAEA,IAAAG,kBAAA,GAAAH,OAAA;AAEA,IAAAI,aAAA,GAAAJ,OAAA;AAYO,IAAMK,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,SAAVA,OAAOA,CAAIE,KAAmB,EAAK;EAC5C,oBACIT,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACL,aAAA,CAAAM,gBAAgB,qBACbZ,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACR,UAAA,CAAAU,SAAS;IAACC,CAAC,EAAE;EAAE,gBACZd,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACP,KAAA,CAAAW,IAAI,qBACDf,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACP,KAAA,CAAAY,IAAI;IAACC,IAAI,EAAE,CAAE;IAACC,KAAK,EAAE;EAAS,gBAC3BlB,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACL,aAAA,CAAAa,SAAS;IAACD,KAAK,EAAE;EAAS,gBACvBlB,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACL,aAAA,CAAAc,iBAAiB,MAAE,CACb,CACT,CAAC,eACPpB,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACP,KAAA,CAAAY,IAAI;IAACC,IAAI,EAAE,CAAE;IAACC,KAAK,EAAE;EAAS,gBAC3BlB,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACL,aAAA,CAAAa,SAAS;IAACD,KAAK,EAAE;EAAO,gBACrBlB,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACL,aAAA,CAAAe,oBAAoB;IAACC,GAAG,EAAE,WAAY;IAACC,GAAG,EAAE;EAAK,GAC7Cd,KAAK,CAACe,IACW,CAAC,EACtBf,KAAK,CAACgB,WAAW,iBACdzB,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACL,aAAA,CAAAe,oBAAoB;IAACC,GAAG,EAAE,OAAQ;IAACC,GAAG,EAAE;EAAI,GACxCd,KAAK,CAACgB,WACW,CAEnB,CACT,CAAC,eACPzB,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACP,KAAA,CAAAY,IAAI;IAACC,IAAI,EAAE,CAAE;IAACC,KAAK,EAAE;EAAS,gBAC3BlB,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACL,aAAA,CAAAa,SAAS;IAACD,KAAK,EAAE;EAAQ,gBACtBlB,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACN,kBAAA,CAAAqB,iBAAiB;IACdF,IAAI,EAAE,WAAY;IAClBG,KAAK,EAAE;EAA0B,CACpC,CACM,CACT,CACJ,CACC,CACG,CAAC;AAE3B,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Grid","Heading","Text","OperationSelector","Details","props","createElement","className","Column","span","level","name","description","as","size","align","label"],"sources":["Details.tsx"],"sourcesContent":["import React from \"react\";\nimport { Grid, Heading, Text } from \"@webiny/admin-ui\";\nimport { OperationSelector } from \"./OperationSelector\";\n\nexport interface DetailsProps {\n    name: string;\n    description?: string;\n}\n\nexport const Details = (props: DetailsProps) => {\n    return (\n        <div className=\"wby-mb-lg\">\n            <Grid>\n                <Grid.Column span={9}>\n                    <div className={\"wby-flex wby-items-start wby-gap-md\"}>\n                        <div className={\"wby-text-left wby-text-neutral-primary\"}>\n                            <Heading level={5}>{props.name}</Heading>\n                            {props.description && (\n                                <Text\n                                    as={\"div\"}\n                                    size={\"sm\"}\n                                    className={\"wby-mt-xs wby-text-neutral-strong\"}\n                                >\n                                    {props.description}\n                                </Text>\n                            )}\n                        </div>\n                    </div>\n                </Grid.Column>\n                <Grid.Column span={3} align={\"middle\"}>\n                    <div className={\"wby-text-right\"}>\n                        <OperationSelector name={\"operation\"} label={\"Match all filter groups\"} />\n                    </div>\n                </Grid.Column>\n            </Grid>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,OAAO,EAAEC,IAAI,QAAQ,kBAAkB;AACtD,SAASC,iBAAiB;AAO1B,OAAO,MAAMC,OAAO,GAAIC,KAAmB,IAAK;EAC5C,oBACIN,KAAA,CAAAO,aAAA;IAAKC,SAAS,EAAC;EAAW,gBACtBR,KAAA,CAAAO,aAAA,CAACN,IAAI,qBACDD,KAAA,CAAAO,aAAA,CAACN,IAAI,CAACQ,MAAM;IAACC,IAAI,EAAE;EAAE,gBACjBV,KAAA,CAAAO,aAAA;IAAKC,SAAS,EAAE;EAAsC,gBAClDR,KAAA,CAAAO,aAAA;IAAKC,SAAS,EAAE;EAAyC,gBACrDR,KAAA,CAAAO,aAAA,CAACL,OAAO;IAACS,KAAK,EAAE;EAAE,GAAEL,KAAK,CAACM,IAAc,CAAC,EACxCN,KAAK,CAACO,WAAW,iBACdb,KAAA,CAAAO,aAAA,CAACJ,IAAI;IACDW,EAAE,EAAE,KAAM;IACVC,IAAI,EAAE,IAAK;IACXP,SAAS,EAAE;EAAoC,GAE9CF,KAAK,CAACO,WACL,CAET,CACJ,CACI,CAAC,eACdb,KAAA,CAAAO,aAAA,CAACN,IAAI,CAACQ,MAAM;IAACC,IAAI,EAAE,CAAE;IAACM,KAAK,EAAE;EAAS,gBAClChB,KAAA,CAAAO,aAAA;IAAKC,SAAS,EAAE;EAAiB,gBAC7BR,KAAA,CAAAO,aAAA,CAACH,iBAAiB;IAACQ,IAAI,EAAE,WAAY;IAACK,KAAK,EAAE;EAA0B,CAAE,CACxE,CACI,CACX,CACL,CAAC;AAEd,CAAC","ignoreList":[]}

package/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/Filter.js

@@ -1,46 +1,34 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Filter = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _form = require("@webiny/form");
-var _AutoComplete = require("@webiny/ui/AutoComplete");
-var _Grid = require("@webiny/ui/Grid");
-var _Select = require("@webiny/ui/Select");
-var _InputField = require("./InputField");
-var _controls = require("./controls");
-var _Querybuilder = require("../Querybuilder.styled");
-var Filter = exports.Filter = function Filter(_ref) {
-  var name = _ref.name,
-    onDelete = _ref.onDelete,
-    onFieldSelectChange = _ref.onFieldSelectChange,
-    fields = _ref.fields,
-    filter = _ref.filter;
-  return /*#__PURE__*/_react.default.createElement(_Querybuilder.FilterContainer, null, /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+import React from "react";
+import { Bind } from "@webiny/form";
+import { AutoComplete, Grid, Select } from "@webiny/admin-ui";
+import { InputField } from "./InputField";
+import { RemoveFilter } from "./controls";
+export const Filter = ({
+  name,
+  onDelete,
+  onFieldSelectChange,
+  fields,
+  filter
+}) => {
+  return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Column, {
     span: 4
-  }, /*#__PURE__*/_react.default.createElement(_Querybuilder.CellInner, {
-    align: "left"
-  }, /*#__PURE__*/_react.default.createElement(_form.Bind, {
-    name: "".concat(name, ".field")
-  }, function (_ref2) {
-    var value = _ref2.value,
-      validation = _ref2.validation;
-    var options = fields.map(function (field) {
-      return {
-        id: field.value,
-        name: field.label
-      };
-    });
-    return /*#__PURE__*/_react.default.createElement(_AutoComplete.AutoComplete, {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-text-left"
+  }, /*#__PURE__*/React.createElement(Bind, {
+    name: `${name}.field`
+  }, ({
+    value,
+    validation
+  }) => {
+    const options = fields.map(field => ({
+      value: field.value,
+      label: field.label
+    }));
+    return /*#__PURE__*/React.createElement(AutoComplete, {
       label: "Field",
       options: options,
-      value: options.find(function (option) {
-        return option.id === value;
-      }),
-      onChange: function onChange(selected) {
+      value: value,
+      onValueChange: selected => {
         /**
          * Update the selected value only if it's different from the current value.
          * When the value is populated from data, onChange might trigger re-rendering of the form and clear related fields.
@@ -49,46 +37,41 @@ var Filter = exports.Filter = function Filter(_ref) {
           onFieldSelectChange(selected);
         }
       },
-      validation: validation
+      validation: validation,
+      size: "lg"
     });
-  }))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+  }))), /*#__PURE__*/React.createElement(Grid.Column, {
     span: 3
-  }, /*#__PURE__*/_react.default.createElement(_Querybuilder.CellInner, {
-    align: "left"
-  }, filter.field && /*#__PURE__*/_react.default.createElement(_form.Bind, {
-    name: "".concat(name, ".condition")
-  }, function (_ref3) {
-    var value = _ref3.value,
-      onChange = _ref3.onChange,
-      validation = _ref3.validation;
-    return /*#__PURE__*/_react.default.createElement(_Select.Select, {
-      label: "Condition",
-      options: fields.find(function (field) {
-        return field.value === filter.field;
-      })?.conditions || [],
-      value: value,
-      onChange: onChange,
-      validation: validation
-    });
-  }))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-    span: 4,
-    align: "middle"
-  }, /*#__PURE__*/_react.default.createElement(_Querybuilder.CellInner, {
-    align: "left"
-  }, filter.condition && /*#__PURE__*/_react.default.createElement(_InputField.InputField, {
-    name: "".concat(name, ".value"),
-    field: fields.find(function (field) {
-      return field.value === filter.field;
-    })
-  }))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-    span: 1,
-    align: "middle"
-  }, /*#__PURE__*/_react.default.createElement(_Querybuilder.CellInner, {
-    align: "center"
-  }, /*#__PURE__*/_react.default.createElement(_controls.RemoveFilter, {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-text-left"
+  }, filter.field && /*#__PURE__*/React.createElement(Bind, {
+    name: `${name}.condition`
+  }, ({
+    value,
+    onChange,
+    validation
+  }) => /*#__PURE__*/React.createElement(Select, {
+    label: "Condition",
+    options: fields.find(field => field.value === filter.field)?.conditions || [],
+    value: value,
+    onChange: onChange,
+    validation: validation,
+    size: "lg"
+  })))), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 4
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-text-left"
+  }, filter.condition && /*#__PURE__*/React.createElement(InputField, {
+    name: `${name}.value`,
+    field: fields.find(field => field.value === filter.field)
+  }))), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 1
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-justify-center wby-items-end wby-h-full"
+  }, /*#__PURE__*/React.createElement(RemoveFilter, {
     onClick: onDelete,
     disabled: !filter.canDelete
-  })))));
+  }))));
 };
 
 //# sourceMappingURL=Filter.js.map

package/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/Filter.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_form","_AutoComplete","_Grid","_Select","_InputField","_controls","_Querybuilder","Filter","exports","_ref","name","onDelete","onFieldSelectChange","fields","filter","default","createElement","FilterContainer","Grid","Cell","span","CellInner","align","Bind","concat","_ref2","value","validation","options","map","field","id","label","AutoComplete","find","option","onChange","selected","_ref3","Select","conditions","condition","InputField","RemoveFilter","onClick","disabled","canDelete"],"sources":["Filter.tsx"],"sourcesContent":["import React from \"react\";\nimport { Bind } from \"@webiny/form\";\nimport { AutoComplete } from \"@webiny/ui/AutoComplete\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport { Select } from \"@webiny/ui/Select\";\n\nimport { InputField } from \"./InputField\";\nimport { RemoveFilter } from \"./controls\";\n\nimport { FieldDTOWithElement, FilterGroupFilterDTO } from \"../../../domain\";\n\nimport { CellInner, FilterContainer } from \"../Querybuilder.styled\";\n\ninterface FilterProps {\n    name: string;\n    filter: FilterGroupFilterDTO & { canDelete: boolean };\n    fields: FieldDTOWithElement[];\n    onDelete: () => void;\n    onFieldSelectChange: (data: string) => void;\n}\n\nexport const Filter = ({ name, onDelete, onFieldSelectChange, fields, filter }: FilterProps) => {\n    return (\n        <FilterContainer>\n            <Grid>\n                <Cell span={4}>\n                    <CellInner align={\"left\"}>\n                        <Bind name={`${name}.field`}>\n                            {({ value, validation }) => {\n                                const options = fields.map(field => ({\n                                    id: field.value,\n                                    name: field.label\n                                }));\n\n                                return (\n                                    <AutoComplete\n                                        label={\"Field\"}\n                                        options={options}\n                                        value={options.find(option => option.id === value)}\n                                        onChange={selected => {\n                                            /**\n                                             * Update the selected value only if it's different from the current value.\n                                             * When the value is populated from data, onChange might trigger re-rendering of the form and clear related fields.\n                                             */\n                                            if (selected !== value) {\n                                                onFieldSelectChange(selected);\n                                            }\n                                        }}\n                                        validation={validation}\n                                    />\n                                );\n                            }}\n                        </Bind>\n                    </CellInner>\n                </Cell>\n                <Cell span={3}>\n                    <CellInner align={\"left\"}>\n                        {filter.field && (\n                            <Bind name={`${name}.condition`}>\n                                {({ value, onChange, validation }) => (\n                                    <Select\n                                        label={\"Condition\"}\n                                        options={\n                                            fields.find(field => field.value === filter.field)\n                                                ?.conditions || []\n                                        }\n                                        value={value}\n                                        onChange={onChange}\n                                        validation={validation}\n                                    />\n                                )}\n                            </Bind>\n                        )}\n                    </CellInner>\n                </Cell>\n                <Cell span={4} align={\"middle\"}>\n                    <CellInner align={\"left\"}>\n                        {filter.condition && (\n                            <InputField\n                                name={`${name}.value`}\n                                field={fields.find(field => field.value === filter.field)}\n                            />\n                        )}\n                    </CellInner>\n                </Cell>\n                <Cell span={1} align={\"middle\"}>\n                    <CellInner align={\"center\"}>\n                        <RemoveFilter onClick={onDelete} disabled={!filter.canDelete} />\n                    </CellInner>\n                </Cell>\n            </Grid>\n        </FilterContainer>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Bind","AutoComplete","Grid","Select","InputField","RemoveFilter","Filter","name","onDelete","onFieldSelectChange","fields","filter","createElement","Column","span","className","value","validation","options","map","field","label","onValueChange","selected","size","onChange","find","conditions","condition","onClick","disabled","canDelete"],"sources":["Filter.tsx"],"sourcesContent":["import React from \"react\";\nimport { Bind } from \"@webiny/form\";\n\nimport { AutoComplete, Grid, Select } from \"@webiny/admin-ui\";\n\nimport { InputField } from \"./InputField\";\nimport { RemoveFilter } from \"./controls\";\n\nimport { FieldDTOWithElement, FilterGroupFilterDTO } from \"../../../domain\";\n\ninterface FilterProps {\n    name: string;\n    filter: FilterGroupFilterDTO & { canDelete: boolean };\n    fields: FieldDTOWithElement[];\n    onDelete: () => void;\n    onFieldSelectChange: (data: string) => void;\n}\n\nexport const Filter = ({ name, onDelete, onFieldSelectChange, fields, filter }: FilterProps) => {\n    return (\n        <Grid>\n            <Grid.Column span={4}>\n                <div className={\"wby-text-left\"}>\n                    <Bind name={`${name}.field`}>\n                        {({ value, validation }) => {\n                            const options = fields.map(field => ({\n                                value: field.value,\n                                label: field.label\n                            }));\n\n                            return (\n                                <AutoComplete\n                                    label={\"Field\"}\n                                    options={options}\n                                    value={value}\n                                    onValueChange={selected => {\n                                        /**\n                                         * Update the selected value only if it's different from the current value.\n                                         * When the value is populated from data, onChange might trigger re-rendering of the form and clear related fields.\n                                         */\n                                        if (selected !== value) {\n                                            onFieldSelectChange(selected);\n                                        }\n                                    }}\n                                    validation={validation}\n                                    size={\"lg\"}\n                                />\n                            );\n                        }}\n                    </Bind>\n                </div>\n            </Grid.Column>\n            <Grid.Column span={3}>\n                <div className={\"wby-text-left\"}>\n                    {filter.field && (\n                        <Bind name={`${name}.condition`}>\n                            {({ value, onChange, validation }) => (\n                                <Select\n                                    label={\"Condition\"}\n                                    options={\n                                        fields.find(field => field.value === filter.field)\n                                            ?.conditions || []\n                                    }\n                                    value={value}\n                                    onChange={onChange}\n                                    validation={validation}\n                                    size={\"lg\"}\n                                />\n                            )}\n                        </Bind>\n                    )}\n                </div>\n            </Grid.Column>\n            <Grid.Column span={4}>\n                <div className={\"wby-text-left\"}>\n                    {filter.condition && (\n                        <InputField\n                            name={`${name}.value`}\n                            field={fields.find(field => field.value === filter.field)}\n                        />\n                    )}\n                </div>\n            </Grid.Column>\n            <Grid.Column span={1}>\n                <div className={\"wby-flex wby-justify-center wby-items-end wby-h-full\"}>\n                    <RemoveFilter onClick={onDelete} disabled={!filter.canDelete} />\n                </div>\n            </Grid.Column>\n        </Grid>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/FilterOperationLabel.js

@@ -1,21 +1,16 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FilterOperationLabel = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Typography = require("@webiny/ui/Typography");
-var _Querybuilder = require("../Querybuilder.styled");
-var FilterOperationLabel = exports.FilterOperationLabel = function FilterOperationLabel(_ref) {
-  var operation = _ref.operation,
-    show = _ref.show;
+import React from "react";
+import { Text } from "@webiny/admin-ui";
+export const FilterOperationLabel = ({
+  operation,
+  show
+}) => {
   if (!show) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(_Querybuilder.FilterOperationLabelContainer, null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-    use: "caption"
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-pt-sm-plus wby-text-center"
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "sm"
   }, operation));
 };
 

package/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/FilterOperationLabel.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_Typography","_Querybuilder","FilterOperationLabel","exports","_ref","operation","show","default","createElement","FilterOperationLabelContainer","Typography","use"],"sources":["FilterOperationLabel.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Typography } from \"@webiny/ui/Typography\";\n\nimport { FilterOperationLabelContainer } from \"../Querybuilder.styled\";\n\ninterface FilterOperationLabelProps {\n    operation: string;\n    show: boolean;\n}\nexport const FilterOperationLabel = ({ operation, show }: FilterOperationLabelProps) => {\n    if (!show) {\n        return null;\n    }\n\n    return (\n        <FilterOperationLabelContainer>\n            <Typography use={\"caption\"}>{operation}</Typography>\n        </FilterOperationLabelContainer>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,WAAA,GAAAD,OAAA;AAEA,IAAAE,aAAA,GAAAF,OAAA;AAMO,IAAMG,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,SAAvBA,oBAAoBA,CAAAE,IAAA,EAAuD;EAAA,IAAjDC,SAAS,GAAAD,IAAA,CAATC,SAAS;IAAEC,IAAI,GAAAF,IAAA,CAAJE,IAAI;EAClD,IAAI,CAACA,IAAI,EAAE;IACP,OAAO,IAAI;EACf;EAEA,oBACIT,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACP,aAAA,CAAAQ,6BAA6B,qBAC1BZ,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACR,WAAA,CAAAU,UAAU;IAACC,GAAG,EAAE;EAAU,GAAEN,SAAsB,CACxB,CAAC;AAExC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Text","FilterOperationLabel","operation","show","createElement","className","size"],"sources":["FilterOperationLabel.tsx"],"sourcesContent":["import React from \"react\";\nimport { Text } from \"@webiny/admin-ui\";\n\ninterface FilterOperationLabelProps {\n    operation: string;\n    show: boolean;\n}\nexport const FilterOperationLabel = ({ operation, show }: FilterOperationLabelProps) => {\n    if (!show) {\n        return null;\n    }\n\n    return (\n        <div className={\"wby-pt-sm-plus wby-text-center\"}>\n            <Text size={\"sm\"}>{operation}</Text>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,kBAAkB;AAMvC,OAAO,MAAMC,oBAAoB,GAAGA,CAAC;EAAEC,SAAS;EAAEC;AAAgC,CAAC,KAAK;EACpF,IAAI,CAACA,IAAI,EAAE;IACP,OAAO,IAAI;EACf;EAEA,oBACIJ,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAE;EAAiC,gBAC7CN,KAAA,CAAAK,aAAA,CAACJ,IAAI;IAACM,IAAI,EAAE;EAAK,GAAEJ,SAAgB,CAClC,CAAC;AAEd,CAAC","ignoreList":[]}