@integration-app/react 2.0.3-beta.1 → 2.0.3-beta.2

package/dist/cjs/components/ComboBoxElements/TipTapEditor/TagComponent.cjs

@@ -0,0 +1,129 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@tiptap/core');
+var react = require('@tiptap/react');
+var React = require('react');
+var index = require('../../ComboBox/index.cjs');
+var comboboxContext = require('../../ComboBox/context/combobox-context.cjs');
+var inputs_module = require('../inputs.module.css.cjs');
+var dataBuilderContext = require('../../DataBuilder/data-builder-context.cjs');
+var clsx = require('clsx');
+
+const TAG_EXTENSION_NAME = "tagComponent";
+const TAG_EXTENSION_TAG = "tag-component";
+const TagComponent = (props) => {
+  const { value, autoOpen } = props.node.attrs;
+  const { isReadOnly } = dataBuilderContext.default();
+  const handleChange = (value2) => {
+    if (value2 === void 0) {
+      props.deleteNode();
+    } else {
+      props.updateAttributes({
+        value: value2
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.NodeViewWrapper,
+    {
+      as: "span",
+      className: clsx(inputs_module.default.tagWrapper, {
+        [inputs_module.default.tagWrapper__readonly]: isReadOnly
+      }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Tag,
+        {
+          value,
+          autoOpen,
+          onChange: handleChange,
+          disabled: isReadOnly
+        }
+      )
+    }
+  );
+};
+function Tag({
+  value,
+  autoOpen,
+  onChange,
+  disabled
+}) {
+  const { variablesSchema } = comboboxContext.useComboBox();
+  const handleValueChange = React.useCallback(
+    (value2) => {
+      onChange(value2);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.ComboBox,
+    {
+      className: inputs_module.default.innerTag,
+      value,
+      schema: { type: "string" },
+      variablesOnly: true,
+      disabled,
+      variablesSchema,
+      onChange: handleValueChange,
+      autoOpen
+    }
+  );
+}
+var TagComponent$1 = core.Node.create({
+  name: TAG_EXTENSION_NAME,
+  group: "inline",
+  inline: true,
+  atom: true,
+  addAttributes() {
+    return {
+      id: {
+        default: null
+      },
+      value: {
+        default: null
+      },
+      autoOpen: {
+        default: false
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: TAG_EXTENSION_TAG
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [TAG_EXTENSION_TAG, core.mergeAttributes(HTMLAttributes)];
+  },
+  addNodeView() {
+    return react.ReactNodeViewRenderer(TagComponent, { contentDOMElementTag: "span" });
+  }
+});
+function getComponentTagNode(id, value, { autoOpen } = {}) {
+  return {
+    type: TAG_EXTENSION_NAME,
+    attrs: {
+      id,
+      value,
+      autoOpen
+    }
+  };
+}
+
+exports.TAG_EXTENSION_NAME = TAG_EXTENSION_NAME;
+exports.TAG_EXTENSION_TAG = TAG_EXTENSION_TAG;
+exports.default = TagComponent$1;
+exports.getComponentTagNode = getComponentTagNode;

package/dist/cjs/components/ComboBoxElements/TipTapEditor/extension-keyboardShortcuts.cjs

@@ -0,0 +1,35 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var core = require('@tiptap/core');
+
+const KeyboardShortcutHandler = ({
+  onEnter
+}) => {
+  return core.Extension.create({
+    name: "keyboardHandler",
+    addKeyboardShortcuts() {
+      return {
+        "Shift-Enter": ({ editor }) => editor.commands.first(({ commands }) => [
+          () => commands.newlineInCode(),
+          () => commands.createParagraphNear(),
+          () => commands.liftEmptyBlock(),
+          () => commands.splitBlock()
+        ]),
+        Enter: (props) => {
+          onEnter?.(props);
+          return props.editor.commands.blur();
+        }
+      };
+    }
+  });
+};
+
+exports.KeyboardShortcutHandler = KeyboardShortcutHandler;

package/dist/cjs/components/ComboBoxElements/TipTapEditor/helpers/clicks.cjs

@@ -0,0 +1,39 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var TagComponent = require('../TagComponent.cjs');
+
+function isClickOnEditorCustomTagComponent(element, rootElement) {
+  if (!element) {
+    return false;
+  }
+  if (element === rootElement) {
+    return false;
+  }
+  return isElementEditorCustomTagComponent(element) || isClickOnEditorCustomTagComponent(element?.parentElement, rootElement);
+}
+function isClickOnEditorComponent(element, rootElement) {
+  if (!element) {
+    return false;
+  }
+  if (element === rootElement) {
+    return false;
+  }
+  return isElementEditorComponent(element) || isClickOnEditorComponent(element?.parentElement, rootElement);
+}
+function isElementEditorCustomTagComponent(element) {
+  return element.classList.contains(`node-${TagComponent.TAG_EXTENSION_NAME}`);
+}
+function isElementEditorComponent(element) {
+  return element.classList.contains("tiptap");
+}
+
+exports.isClickOnEditorComponent = isClickOnEditorComponent;
+exports.isClickOnEditorCustomTagComponent = isClickOnEditorCustomTagComponent;

package/dist/cjs/components/ComboBoxElements/TipTapEditor/helpers/common.cjs

@@ -0,0 +1,154 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var customField = require('../../../ComboBox/options-factories/custom-field.cjs');
+
+const TAG_MARK_END = "}";
+const TAG_MARK_START = "{";
+const regExpStr = `(${TAG_MARK_START}(?:[^${TAG_MARK_START}${TAG_MARK_END}\\s]*)${TAG_MARK_END})`;
+const regExpTag = new RegExp(regExpStr, "gm");
+function getTextNode(string) {
+  return {
+    type: "text",
+    text: string
+  };
+}
+function getTemplateFromTplValue(value) {
+  if (typeof value === "string") {
+    return value;
+  }
+  if (value?.$tpl) {
+    return value.$tpl.template;
+  }
+  return "";
+}
+function getValuesFromTplValue(value) {
+  if (value?.$tpl) {
+    return value.$tpl.values;
+  }
+  return {};
+}
+function transformValueToTpl(value) {
+  if (value === void 0 || value === null) {
+    return "";
+  }
+  if (customField.isCustomFieldValue(value)) {
+    return "";
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "number") {
+    return String(value);
+  }
+  if (value?.$tpl) {
+    return value;
+  }
+  return {
+    $tpl: {
+      template: "{10000000}",
+      values: {
+        1e7: value
+      }
+    }
+  };
+}
+function transformTplToValue(template, values) {
+  if (template === "" || template === void 0 || template === null) {
+    return void 0;
+  }
+  const valuesExistInTemplate = getValuesExistInTemplate(template, values);
+  const cleanedTemplate = getTemplateWithExistingTags(
+    template,
+    valuesExistInTemplate
+  );
+  if (!strContainsTagChunk(cleanedTemplate)) {
+    return cleanedTemplate ? cleanedTemplate : void 0;
+  }
+  if (Object.keys(valuesExistInTemplate).length === 1 && isTagChunk(cleanedTemplate)) {
+    return Object.values(valuesExistInTemplate)[0];
+  }
+  return {
+    $tpl: {
+      template: cleanedTemplate,
+      values: valuesExistInTemplate
+    }
+  };
+}
+function splitStringToChunks(line) {
+  return line.split(regExpTag).filter((l) => l !== "");
+}
+function isTagChunk(chunk) {
+  return strContainsTagChunk(chunk) && chunk.startsWith(TAG_MARK_START) && chunk.endsWith(TAG_MARK_END);
+}
+function isValueEmpty(value) {
+  return value === void 0 || value === null;
+}
+function strContainsTagChunk(str) {
+  return str ? !!str.match(regExpTag) : false;
+}
+function getTagChunkValue(chunk) {
+  return chunk.substring(1, chunk.length - 1);
+}
+function getValuesExistInTemplate(template, values) {
+  return Object.keys(values).reduce((acc, valueId) => {
+    return !isValueEmpty(values[valueId]) && template.includes(getTagString(valueId)) ? { ...acc, [valueId]: values[valueId] } : acc;
+  }, {});
+}
+function getTemplateWithExistingTags(template, values) {
+  return splitStringToChunks(template ?? "").map((string) => {
+    if (isTagChunk(string) && isValueEmpty(values[getTagChunkValue(string)])) {
+      return "";
+    }
+    return string;
+  }).join("");
+}
+function getTagString(id) {
+  return `${TAG_MARK_START}${id}${TAG_MARK_END}`;
+}
+function getSchemaNodesSummary(schema) {
+  const content = schema?.content ?? [];
+  return content.reduce(
+    (acc, node) => {
+      const items = node.content ?? [];
+      const innerTotal = items.reduce(
+        (innerAcc, item) => {
+          if (item?.type === "text") {
+            innerAcc.text = innerAcc.text + 1;
+          } else {
+            innerAcc.nonText = innerAcc.nonText + 1;
+          }
+          return innerAcc;
+        },
+        { text: 0, nonText: 0 }
+      );
+      acc.text = acc.text + innerTotal.text;
+      acc.nonText = acc.nonText + innerTotal.nonText;
+      return acc;
+    },
+    { text: 0, nonText: 0 }
+  );
+}
+
+exports.TAG_MARK_END = TAG_MARK_END;
+exports.TAG_MARK_START = TAG_MARK_START;
+exports.getSchemaNodesSummary = getSchemaNodesSummary;
+exports.getTagChunkValue = getTagChunkValue;
+exports.getTagString = getTagString;
+exports.getTemplateFromTplValue = getTemplateFromTplValue;
+exports.getTemplateWithExistingTags = getTemplateWithExistingTags;
+exports.getTextNode = getTextNode;
+exports.getValuesExistInTemplate = getValuesExistInTemplate;
+exports.getValuesFromTplValue = getValuesFromTplValue;
+exports.isTagChunk = isTagChunk;
+exports.regExpTag = regExpTag;
+exports.splitStringToChunks = splitStringToChunks;
+exports.transformTplToValue = transformTplToValue;
+exports.transformValueToTpl = transformValueToTpl;

package/dist/cjs/components/ComboBoxElements/TipTapEditor/helpers/transformEditorSchemaToValue.cjs

@@ -0,0 +1,49 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var TagComponent = require('../TagComponent.cjs');
+var common = require('./common.cjs');
+
+function transformEditorSchemaToValue(schema) {
+  const template = (schema?.content ?? []).map((node) => transformParagraphNodeToTplString(node)).join("\n");
+  const values = transformSchemaToValues(schema);
+  if (Object.keys(values).length === 0) {
+    return template || void 0;
+  }
+  return common.transformTplToValue(template, values);
+}
+function transformParagraphNodeToTplString(node) {
+  return (node?.content ?? []).map((child) => transformNodeToTplString(child)).join("");
+}
+function transformNodeToTplString(node) {
+  if (node?.type === TagComponent.TAG_EXTENSION_NAME) {
+    return common.getTagString(node?.attrs?.id);
+  }
+  return node?.text ?? "";
+}
+function transformSchemaToValues(schema) {
+  const entries = (schema?.content ?? []).map((node) => transformParagraphNodeToEntries(node)).flat().filter((x) => x !== void 0);
+  return Object.fromEntries(entries);
+}
+function transformParagraphNodeToEntries(node) {
+  return (node?.content ?? []).map((child) => transformNodeToEntries(child));
+}
+function transformNodeToEntries(node) {
+  if (node?.type === TagComponent.TAG_EXTENSION_NAME) {
+    return [node?.attrs?.id, node?.attrs?.value];
+  }
+  return void 0;
+}
+
+exports.transformEditorSchemaToValue = transformEditorSchemaToValue;
+exports.transformNodeToEntries = transformNodeToEntries;
+exports.transformNodeToTplString = transformNodeToTplString;
+exports.transformParagraphNodeToEntries = transformParagraphNodeToEntries;
+exports.transformParagraphNodeToTplString = transformParagraphNodeToTplString;

package/dist/cjs/components/ComboBoxElements/TipTapEditor/helpers/transformValueToEditorSchema.cjs

@@ -0,0 +1,50 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var TagComponent = require('../TagComponent.cjs');
+var common = require('./common.cjs');
+
+function transformValueToEditorSchema(value) {
+  const safeValue = common.transformValueToTpl(value);
+  const template = common.getTemplateFromTplValue(safeValue);
+  const values = common.getValuesFromTplValue(safeValue);
+  return {
+    type: "doc",
+    content: getDocumentContent(template, values)
+  };
+}
+function getDocumentContent(string, values = {}) {
+  return string.split("\n").map((line) => ({
+    type: "paragraph",
+    content: getParagraphContent(line, values)
+  }));
+}
+function getParagraphContent(string, values = {}) {
+  if (string === "") {
+    return [];
+  }
+  const chunks = common.splitStringToChunks(string);
+  return chunks.map((chunk) => transformStringToNode(chunk, values)).filter((x) => !!x);
+}
+function transformStringToNode(string, values = {}) {
+  if (!string) {
+    return null;
+  }
+  if (common.isTagChunk(string)) {
+    const id = common.getTagChunkValue(string);
+    const value = values[id];
+    return value ? TagComponent.getComponentTagNode(id, value) : common.getTextNode(string);
+  }
+  return common.getTextNode(string);
+}
+
+exports.getDocumentContent = getDocumentContent;
+exports.getParagraphContent = getParagraphContent;
+exports.transformValueToEditorSchema = transformValueToEditorSchema;

package/dist/cjs/components/ComboBoxElements/inputs.module.css.cjs

@@ -0,0 +1,18 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleInject = require('style-inject');
+
+var css_248z = ".inputs-module_container__wDMh6 {\n  width: 100%;\n}\n@media (min-width: 640px) {\n  .inputs-module_container__wDMh6 {\n    max-width: 640px;\n  }\n}\n@media (min-width: 768px) {\n  .inputs-module_container__wDMh6 {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n  .inputs-module_container__wDMh6 {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n  .inputs-module_container__wDMh6 {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n  .inputs-module_container__wDMh6 {\n    max-width: 1536px;\n  }\n}\n.inputs-module_fieldWrapper__fye1c {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.inputs-module_fieldWrapper__disabled__-VUne {\n  --tw-gradient-via-position: 95%;\n  background-image: linear-gradient(to right, var(--tw-gradient-stops));\n  --tw-gradient-from: #F8F8F8 var(--tw-gradient-from-position);\n  --tw-gradient-to: rgb(248 248 248 / 0) var(--tw-gradient-to-position);\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n  --tw-gradient-to: rgb(248 248 248 / 0)  var(--tw-gradient-to-position);\n  --tw-gradient-stops: var(--tw-gradient-from), #F8F8F8 var(--tw-gradient-via-position), var(--tw-gradient-to);\n  --tw-gradient-to: #fff var(--tw-gradient-to-position);\n}\n.inputs-module_fieldWrapper__clickable__FeG2H {\n  cursor: pointer;\n}\n.inputs-module_fieldWrapper__clickable__FeG2H:has(> * > .tiptap) {\n  cursor: text;\n}\n.inputs-module_fieldWrapper__required__o0Mxj {\n  /* there should be a style but I have no idea */\n}\n.inputs-module_tagWrapper__NIIH- {\n  display: contents;\n  cursor: pointer;\n\n  line-height: 1em;\n}\n.inputs-module_tagWrapper__readonly__1megS {\n  cursor: default;\n}\n.inputs-module_innerTag__HJFp9 {\n  display: inline-flex;\n  align-items: center;\n}\n";
+var classes = {"container":"inputs-module_container__wDMh6","fieldWrapper":"inputs-module_fieldWrapper__fye1c","fieldWrapper__disabled":"inputs-module_fieldWrapper__disabled__-VUne","fieldWrapper__clickable":"inputs-module_fieldWrapper__clickable__FeG2H","fieldWrapper__required":"inputs-module_fieldWrapper__required__o0Mxj","tagWrapper":"inputs-module_tagWrapper__NIIH-","tagWrapper__readonly":"inputs-module_tagWrapper__readonly__1megS","innerTag":"inputs-module_innerTag__HJFp9"};
+styleInject(css_248z);
+
+exports.default = classes;

package/dist/cjs/components/DataBuilder/Condition/index.cjs

@@ -0,0 +1,203 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var sdk = require('@integration-app/sdk');
+var index$1 = require('../../DataBuilderUI/index.cjs');
+var index$3 = require('../FieldValue/index.cjs');
+var index = require('../Nested/FieldControlPanel/index.cjs');
+var index$2 = require('../../ComboBox/index.cjs');
+var useEventStopPropagation = require('../../../hooks/useEventStopPropagation.cjs');
+var dataField = require('../data-field.cjs');
+var fieldContext = require('../field-context.cjs');
+
+function DataBuilderCondition({
+  field,
+  onChange,
+  onDelete,
+  isNested
+}) {
+  const formula = sdk.getFormula(field.value);
+  switch (formula?.type) {
+    case sdk.DataBuilderFormulaType.AND:
+      return /* @__PURE__ */ jsxRuntime.jsx(And, { field, onChange });
+    case sdk.DataBuilderFormulaType.EVAL:
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        EvalCondition,
+        {
+          field,
+          onChange,
+          onDelete,
+          isNested
+        }
+      );
+  }
+}
+function And({
+  field,
+  onChange
+}) {
+  const formula = sdk.getFormula(field.value);
+  let conditions = formula?.args;
+  if (!conditions || !Array.isArray(conditions) || conditions.length === 0) {
+    conditions = [null];
+  }
+  function getConditionField(idx) {
+    const value = conditions[idx];
+    return dataField.makeSubField(field, {
+      value,
+      valueLocator: `${field.valueLocator}.$and[${idx}]`,
+      // Temporary: remove this when we implement the new conditions UI
+      level: field.level
+    });
+  }
+  function handleConditionChange(idx, value) {
+    const newConditions = [...conditions];
+    newConditions[idx] = value;
+    onChange({
+      $and: newConditions
+    });
+  }
+  function handleAddCondition() {
+    onChange({
+      $and: [...conditions, null]
+    });
+  }
+  function handleDeleteCondition(idx) {
+    const newConditions = [...conditions];
+    newConditions.splice(idx, 1);
+    onChange({
+      $and: newConditions
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    conditions.map((_condition, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+      DataBuilderCondition,
+      {
+        field: getConditionField(idx),
+        onChange: (value) => handleConditionChange(idx, value),
+        onDelete: () => handleDeleteCondition(idx),
+        isNested: true
+      },
+      idx
+    )),
+    /* @__PURE__ */ jsxRuntime.jsx(index.DataBuilderFieldControlPanel, { field, onAdd: handleAddCondition })
+  ] });
+}
+function EvalCondition({
+  field,
+  onChange,
+  onDelete,
+  isNested
+}) {
+  const formula = sdk.getFormula(field.value);
+  let value;
+  let operator;
+  let operatorOptions = [];
+  let operand;
+  if (formula instanceof sdk.Formula.Eval) {
+    value = formula.value;
+    operator = formula.getOperator(field.variablesSchema);
+    operand = formula.operand;
+    operatorOptions = formula.getAvailableOperators(field.variablesSchema).map((op) => ({
+      label: op.name,
+      value: op.key
+    }));
+  }
+  const valueField = dataField.makeSubField(field, {
+    value,
+    valueLocator: `${field.valueLocator}.$eval`
+  });
+  const operandField = dataField.makeSubField(field, {
+    value: operand,
+    /* FIXME: strictNullCheck temporary fix */
+    // @ts-expect-error TS(2454): Variable 'operator' is used before being assigned.
+    valueLocator: `${field.valueLocator}.${operator?.key}`,
+    /* FIXME: strictNullCheck temporary fix */
+    // @ts-expect-error TS(2454): Variable 'operator' is used before being assigned.
+    schema: operator?.operandSchema
+  });
+  function handleValueChange(value2) {
+    onChange({
+      ...formula?.toObject() ?? {},
+      $eval: value2
+    });
+  }
+  function handleOperatorChange(operatorKey) {
+    const newValue = {
+      $eval: value
+    };
+    if (operatorKey) {
+      newValue[operatorKey] = operand ?? null;
+    }
+    onChange(newValue);
+  }
+  function handleOperandChange(operand2) {
+    onChange({
+      $eval: value,
+      [operator.key]: operand2
+    });
+  }
+  function handleTransformToAnd() {
+    onChange({
+      $and: [field.value, null]
+    });
+  }
+  const hasOperand = operator && operator.hasOperand;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index$1.NestedLevel, { level: field.level, children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Row, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index$1.Cell.Combobox, { children: /* @__PURE__ */ jsxRuntime.jsx(fieldContext.DataBuilderFieldProvider, { field: valueField, children: /* @__PURE__ */ jsxRuntime.jsx(
+        index$2.ComboBox,
+        {
+          placeholder: "Value",
+          value: valueField.value,
+          onChange: handleValueChange,
+          variablesSchema: valueField.variablesSchema,
+          optionFactories: valueField.optionFactories,
+          schema: void 0
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(index$1.Cell.Combobox, { disabled: !value, children: value && /* @__PURE__ */ jsxRuntime.jsx(
+        index$2.ComboBox,
+        {
+          value: operator?.key,
+          options: operatorOptions,
+          onChange: handleOperatorChange
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(index$1.Cell.Combobox, { grow: true, disabled: !hasOperand, children: hasOperand && /* @__PURE__ */ jsxRuntime.jsx(fieldContext.DataBuilderFieldProvider, { field: operandField, children: /* @__PURE__ */ jsxRuntime.jsx(
+        index$3.default,
+        {
+          field: operandField,
+          onChange: handleOperandChange,
+          allowScalarArray: true
+        }
+      ) }) }),
+      onDelete && /* @__PURE__ */ jsxRuntime.jsx(index$1.ActionBar, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        index$1.ActionBar.DeleteButton,
+        {
+          onClick: useEventStopPropagation.default(onDelete)
+        }
+      ) })
+    ] }) }),
+    !isNested && /* @__PURE__ */ jsxRuntime.jsx(
+      index.DataBuilderFieldControlPanel,
+      {
+        field,
+        onAdd: handleTransformToAnd
+      }
+    )
+  ] });
+}
+
+exports.default = DataBuilderCondition;