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

package/dist/esm/components/ComboBoxElements/TipTapEditor/helpers/common.mjs

@@ -0,0 +1,138 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { isCustomFieldValue } from '../../../ComboBox/options-factories/custom-field.mjs';
+
+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 (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 }
+  );
+}
+
+export { TAG_MARK_END, TAG_MARK_START, getSchemaNodesSummary, getTagChunkValue, getTagString, getTemplateFromTplValue, getTemplateWithExistingTags, getTextNode, getValuesExistInTemplate, getValuesFromTplValue, isTagChunk, regExpTag, splitStringToChunks, transformTplToValue, transformValueToTpl };

package/dist/esm/components/ComboBoxElements/TipTapEditor/helpers/transformEditorSchemaToValue.mjs

@@ -0,0 +1,43 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { TAG_EXTENSION_NAME } from '../TagComponent.mjs';
+import { transformTplToValue, getTagString } from './common.mjs';
+
+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 transformTplToValue(template, values);
+}
+function transformParagraphNodeToTplString(node) {
+  return (node?.content ?? []).map((child) => transformNodeToTplString(child)).join("");
+}
+function transformNodeToTplString(node) {
+  if (node?.type === TAG_EXTENSION_NAME) {
+    return 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 === TAG_EXTENSION_NAME) {
+    return [node?.attrs?.id, node?.attrs?.value];
+  }
+  return void 0;
+}
+
+export { transformEditorSchemaToValue, transformNodeToEntries, transformNodeToTplString, transformParagraphNodeToEntries, transformParagraphNodeToTplString };

package/dist/esm/components/ComboBoxElements/TipTapEditor/helpers/transformValueToEditorSchema.mjs

@@ -0,0 +1,46 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { getComponentTagNode } from '../TagComponent.mjs';
+import { transformValueToTpl, getTemplateFromTplValue, getValuesFromTplValue, splitStringToChunks, isTagChunk, getTagChunkValue, getTextNode } from './common.mjs';
+
+function transformValueToEditorSchema(value) {
+  const safeValue = transformValueToTpl(value);
+  const template = getTemplateFromTplValue(safeValue);
+  const values = 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 = splitStringToChunks(string);
+  return chunks.map((chunk) => transformStringToNode(chunk, values)).filter((x) => !!x);
+}
+function transformStringToNode(string, values = {}) {
+  if (!string) {
+    return null;
+  }
+  if (isTagChunk(string)) {
+    const id = getTagChunkValue(string);
+    const value = values[id];
+    return value ? getComponentTagNode(id, value) : getTextNode(string);
+  }
+  return getTextNode(string);
+}
+
+export { getDocumentContent, getParagraphContent, transformValueToEditorSchema };

package/dist/esm/components/ComboBoxElements/inputs.module.css.mjs

@@ -0,0 +1,14 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import styleInject from '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);
+
+export { classes as default };

package/dist/esm/components/DataBuilder/Condition/index.mjs

@@ -0,0 +1,199 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { getFormula, DataBuilderFormulaType, Formula } from '@integration-app/sdk';
+import { NestedLevel, Row, Cell, ActionBar } from '../../DataBuilderUI/index.mjs';
+import DataBuilderFormFieldValue from '../FieldValue/index.mjs';
+import { DataBuilderFieldControlPanel } from '../Nested/FieldControlPanel/index.mjs';
+import { ComboBox } from '../../ComboBox/index.mjs';
+import useEventStopPropagation from '../../../hooks/useEventStopPropagation.mjs';
+import { makeSubField } from '../data-field.mjs';
+import { DataBuilderFieldProvider } from '../field-context.mjs';
+
+function DataBuilderCondition({
+  field,
+  onChange,
+  onDelete,
+  isNested
+}) {
+  const formula = getFormula(field.value);
+  switch (formula?.type) {
+    case DataBuilderFormulaType.AND:
+      return /* @__PURE__ */ jsx(And, { field, onChange });
+    case DataBuilderFormulaType.EVAL:
+    default:
+      return /* @__PURE__ */ jsx(
+        EvalCondition,
+        {
+          field,
+          onChange,
+          onDelete,
+          isNested
+        }
+      );
+  }
+}
+function And({
+  field,
+  onChange
+}) {
+  const formula = 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 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__ */ jsxs(Fragment, { children: [
+    conditions.map((_condition, idx) => /* @__PURE__ */ jsx(
+      DataBuilderCondition,
+      {
+        field: getConditionField(idx),
+        onChange: (value) => handleConditionChange(idx, value),
+        onDelete: () => handleDeleteCondition(idx),
+        isNested: true
+      },
+      idx
+    )),
+    /* @__PURE__ */ jsx(DataBuilderFieldControlPanel, { field, onAdd: handleAddCondition })
+  ] });
+}
+function EvalCondition({
+  field,
+  onChange,
+  onDelete,
+  isNested
+}) {
+  const formula = getFormula(field.value);
+  let value;
+  let operator;
+  let operatorOptions = [];
+  let operand;
+  if (formula instanceof 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 = makeSubField(field, {
+    value,
+    valueLocator: `${field.valueLocator}.$eval`
+  });
+  const operandField = 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(NestedLevel, { level: field.level, children: /* @__PURE__ */ jsxs(Row, { children: [
+      /* @__PURE__ */ jsx(Cell.Combobox, { children: /* @__PURE__ */ jsx(DataBuilderFieldProvider, { field: valueField, children: /* @__PURE__ */ jsx(
+        ComboBox,
+        {
+          placeholder: "Value",
+          value: valueField.value,
+          onChange: handleValueChange,
+          variablesSchema: valueField.variablesSchema,
+          optionFactories: valueField.optionFactories,
+          schema: void 0
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(Cell.Combobox, { disabled: !value, children: value && /* @__PURE__ */ jsx(
+        ComboBox,
+        {
+          value: operator?.key,
+          options: operatorOptions,
+          onChange: handleOperatorChange
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Cell.Combobox, { grow: true, disabled: !hasOperand, children: hasOperand && /* @__PURE__ */ jsx(DataBuilderFieldProvider, { field: operandField, children: /* @__PURE__ */ jsx(
+        DataBuilderFormFieldValue,
+        {
+          field: operandField,
+          onChange: handleOperandChange,
+          allowScalarArray: true
+        }
+      ) }) }),
+      onDelete && /* @__PURE__ */ jsx(ActionBar, { children: /* @__PURE__ */ jsx(
+        ActionBar.DeleteButton,
+        {
+          onClick: useEventStopPropagation(onDelete)
+        }
+      ) })
+    ] }) }),
+    !isNested && /* @__PURE__ */ jsx(
+      DataBuilderFieldControlPanel,
+      {
+        field,
+        onAdd: handleTransformToAnd
+      }
+    )
+  ] });
+}
+
+export { DataBuilderCondition as default };

package/dist/esm/components/DataBuilder/Field.mjs

@@ -0,0 +1,143 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { isFormula } from '@integration-app/sdk';
+import { useEffect } from 'react';
+import { isDefinedValue } from '../ComboBox/Value/Schema.mjs';
+import { NestedLevel, Row, Cell } from '../DataBuilderUI/index.mjs';
+import useDataBuilder from './data-builder-context.mjs';
+import { isFieldVisible } from './data-field.mjs';
+import useDataBuilderField, { DataBuilderFieldProvider } from './field-context.mjs';
+import { FieldDelete } from './FieldDelete.mjs';
+import FieldName from './FieldName.mjs';
+import { FieldTypeSelector, convertableSchemaToSchema } from './FieldTypeSelector/index.mjs';
+import DataBuilderFormFieldValue from './FieldValue/index.mjs';
+import DataBuilderFormNested from './Nested.mjs';
+
+function DataBuilderFormField({
+  field,
+  onChange,
+  onKeyChange,
+  onDelete,
+  onEnter
+}) {
+  const { hideReadOnlyFields } = useDataBuilder();
+  if (field.schema?.readOnly && hideReadOnlyFields) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(DataBuilderFieldProvider, { field, children: /* @__PURE__ */ jsx(
+    DataBuilderFieldContent,
+    {
+      onChange,
+      onKeyChange,
+      onDelete,
+      onEnter
+    }
+  ) });
+}
+function DataBuilderFieldContent({
+  onChange,
+  onKeyChange,
+  onDelete,
+  onEnter
+}) {
+  const { isReadOnly } = useDataBuilder();
+  const {
+    field,
+    localSchema,
+    setLocalSchema,
+    resetLocalSchema,
+    localSchemaChangedManually,
+    setLocalSchemaChangedManually,
+    autoOpen,
+    setAutoOpen
+  } = useDataBuilderField();
+  useEffect(() => {
+    if (!localSchemaChangedManually) {
+      resetLocalSchema();
+    }
+  }, [JSON.stringify(field?.schema)]);
+  async function handleChange(value) {
+    onChange?.(value);
+  }
+  function handleKeyChange(newKey) {
+    onKeyChange?.(newKey);
+  }
+  function handleEnterKey(value) {
+    if (value && onEnter) {
+      onEnter?.();
+    }
+  }
+  function handleEscKey(value) {
+    if (!value && onDelete) {
+      onDelete?.();
+    }
+  }
+  function handleLocalSchemaTypeChange(schemaType) {
+    const showValueDropdown = !(schemaType === "object" || schemaType === "array");
+    const resetValue = !convertableSchemaToSchema(localSchema?.type, schemaType);
+    setLocalSchemaChangedManually(true);
+    setLocalSchema({ ...localSchema, type: schemaType });
+    if (resetValue) {
+      onChange?.("");
+    }
+    setAutoOpen(showValueDropdown);
+  }
+  let showValue = true;
+  const fieldIsObjectOrArray = ["object", "array"].includes(
+    localSchema?.type
+  );
+  const fieldHasCustomValue = !isFormula(field?.value);
+  if (fieldIsObjectOrArray && fieldHasCustomValue && !autoOpen) {
+    showValue = false;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(NestedLevel, { level: field.level, children: isFieldVisible(field) && /* @__PURE__ */ jsxs(Row, { short: !showValue, children: [
+      (isDefinedValue(field.key) || field.schema?.title) && /* @__PURE__ */ jsx(Cell.Name, { children: /* @__PURE__ */ jsx(
+        FieldName,
+        {
+          field,
+          onKeyChange: handleKeyChange,
+          onEnter: handleEnterKey,
+          onEsc: handleEscKey,
+          typeSelectorSlot: /* @__PURE__ */ jsx(
+            FieldTypeSelector,
+            {
+              onChange: handleChange,
+              onSchemaChange: handleLocalSchemaTypeChange
+            }
+          )
+        }
+      ) }),
+      showValue && /* @__PURE__ */ jsx(Cell.Combobox, { grow: true, children: /* @__PURE__ */ jsx(FieldDataInput, { onChange: handleChange }) }),
+      field.isDeletable && !isReadOnly && /* @__PURE__ */ jsx(FieldDelete, { onClick: onDelete })
+    ] }) }),
+    /* @__PURE__ */ jsx(DataBuilderFormNested, { field, onChange: handleChange })
+  ] });
+}
+function FieldDataInput({
+  onChange
+}) {
+  const { field, localSchema, setLocalSchemaChangedManually } = useDataBuilderField();
+  function handleChange(value) {
+    setLocalSchemaChangedManually(false);
+    onChange(value);
+  }
+  const fieldWithDefinedSchema = !field.schema?.type ? {
+    ...field,
+    schema: {
+      ...field.schema,
+      ...localSchema,
+      anyOf: void 0
+    }
+  } : field;
+  return /* @__PURE__ */ jsx(DataBuilderFormFieldValue, { field: fieldWithDefinedSchema, onChange: handleChange });
+}
+
+export { DataBuilderFormField as default };

package/dist/esm/components/DataBuilder/FieldDelete.mjs

@@ -0,0 +1,21 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { SvgIcon, SvgIconType } from '../SvgIcon/index.mjs';
+import useEventStopPropagation from '../../hooks/useEventStopPropagation.mjs';
+import { ActionBar } from '../DataBuilderUI/index.mjs';
+
+function FieldDelete({ onClick }) {
+  if (!onClick) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ActionBar, { children: /* @__PURE__ */ jsx(ActionBar.DeleteButton, { onClick: useEventStopPropagation(onClick), children: /* @__PURE__ */ jsx(SvgIcon, { type: SvgIconType.Close }) }) });
+}
+
+export { FieldDelete };

package/dist/esm/components/DataBuilder/FieldDescription.mjs

@@ -0,0 +1,37 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { Text } from '../../ui-kit/styled/text.mjs';
+import { Tooltip } from '../Tooltip/index.mjs';
+
+function FieldDescription({ text }) {
+  if (!text) return null;
+  return /* @__PURE__ */ jsx(Tooltip, { tooltip: text, offset: [0, 4], placement: "bottom-start", children: /* @__PURE__ */ jsx(
+    Text,
+    {
+      as: "span",
+      display: "inline-block",
+      px: "1",
+      ml: "2",
+      cursor: "help",
+      bg: "neutral.2",
+      rounded: "xs",
+      color: "neutral.11",
+      textAlign: "center",
+      lineHeight: "1.2",
+      minW: "5",
+      _hover: {
+        bg: "neutral.3"
+      },
+      children: "?"
+    }
+  ) });
+}
+
+export { FieldDescription };

package/dist/esm/components/DataBuilder/FieldList.mjs

@@ -0,0 +1,44 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { makeDataField } from './index.mjs';
+import { DataBuilderForm } from './Form.mjs';
+
+function FieldList({
+  schema,
+  value,
+  variablesSchema,
+  isAdminMode,
+  frozenFieldsLocators = [],
+  onChange,
+  collapsed,
+  hideReadOnlyFields
+}) {
+  if (schema?.type !== "object") {
+    return /* @__PURE__ */ jsx("span", { children: "Something went wrong. Trying to display a field list for schema that is not an object." });
+  }
+  const field = makeDataField({
+    schema,
+    value,
+    variablesSchema
+  });
+  return /* @__PURE__ */ jsx(
+    DataBuilderForm,
+    {
+      field,
+      onChange,
+      isAdminMode,
+      frozenFieldsLocators,
+      collapsed,
+      hideReadOnlyFields
+    }
+  );
+}
+
+export { FieldList };