@membranehq/react 0.1.0

package/dist/esm/components/DataBuilder/Nested/FieldControlPanel/ControlPanelForNonObjectRootField.mjs

@@ -0,0 +1,33 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { SvgIconType } from '../../../SvgIcon/svg-icon-type.mjs';
+import useEventStopPropagation from '../../../../helpers/hooks/useEventStopPropagation.mjs';
+import { FieldControlPanel } from '../../../DataBuilderUI/FieldControlPanel/index.mjs';
+import '../../../DataBuilderUI/ActionBar.mjs';
+import '../../../DataBuilderUI/Cell.mjs';
+import 'clsx';
+import '../../../DataBuilderUI/styles.module.css.mjs';
+import '../../../DataBuilderUI/Row.mjs';
+import '../../../DataBuilderUI/Title.mjs';
+import { SvgIcon } from '../../../SvgIcon/index.mjs';
+import { DEFAULT_FIELD_KEY } from '../../data-field.mjs';
+
+function ControlPanelForNonObjectRootField({
+  addFieldLabel = "Add Field",
+  onAdd
+}) {
+  const handleOnClick = useEventStopPropagation(() => onAdd(DEFAULT_FIELD_KEY));
+  return /* @__PURE__ */ jsx(FieldControlPanel.ButtonGroup, { children: /* @__PURE__ */ jsxs(FieldControlPanel.Button, { onClick: handleOnClick, children: [
+    /* @__PURE__ */ jsx(SvgIcon, { type: SvgIconType.Add }),
+    addFieldLabel
+  ] }) });
+}
+
+export { ControlPanelForNonObjectRootField };

package/dist/esm/components/DataBuilder/Nested/FieldControlPanel/index.mjs

@@ -0,0 +1,69 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { ControlPanel } from './ControlPanel.mjs';
+import { ControlPanelForNonObjectRootField } from './ControlPanelForNonObjectRootField.mjs';
+import { FieldControlPanel } from '../../../DataBuilderUI/FieldControlPanel/index.mjs';
+import '../../../DataBuilderUI/ActionBar.mjs';
+import '../../../DataBuilderUI/Cell.mjs';
+import { NestedLevel } from '../../../DataBuilderUI/NestedLevel.mjs';
+import '../../../DataBuilderUI/Row.mjs';
+import '../../../DataBuilderUI/Title.mjs';
+import { isObjectAllowedAdditionalProperties, isFieldVisible, fieldLabel } from '../../data-field.mjs';
+import useDataBuilderField from '../../field-context.mjs';
+
+function DataBuilderFieldControlPanel({
+  field,
+  onAdd,
+  addFieldLabel,
+  additionalFields = []
+}) {
+  const showAddFieldButton = isObjectAllowedAdditionalProperties(field) || additionalFields.length !== 0;
+  const fieldIsVisible = isFieldVisible(field);
+  let level = field.level;
+  const computedAddFieldLabel = useAddFieldLabel(addFieldLabel);
+  if (level < 0 || !showAddFieldButton) {
+    return null;
+  }
+  if (!fieldIsVisible) {
+    level--;
+  }
+  if (field?.schema?.type !== "object" && level <= 0) {
+    return /* @__PURE__ */ jsx(FieldControlPanelWrapper, { field, children: /* @__PURE__ */ jsx(ControlPanelForNonObjectRootField, { addFieldLabel: computedAddFieldLabel, onAdd }) });
+  }
+  return /* @__PURE__ */ jsx(FieldControlPanelWrapper, { field, children: /* @__PURE__ */ jsx(
+    ControlPanel,
+    {
+      field,
+      addFieldLabel: computedAddFieldLabel,
+      onAdd,
+      additionalFields
+    }
+  ) });
+}
+function FieldControlPanelWrapper({ field, children }) {
+  const fieldIsVisible = isFieldVisible(field);
+  const level = fieldIsVisible ? field.level + 1 : field.level;
+  return /* @__PURE__ */ jsx(NestedLevel, { level, children: /* @__PURE__ */ jsx(FieldControlPanel, { children }) });
+}
+function useAddFieldLabel(labelFromProps) {
+  const { field, localSchema } = useDataBuilderField();
+  if (labelFromProps) {
+    return labelFromProps;
+  }
+  const resultArray = ["Add"];
+  const label = fieldLabel(field);
+  if (label) {
+    resultArray.push(label);
+  }
+  resultArray.push(localSchema?.type === "object" ? "Field" : "Item");
+  return resultArray.join(" ");
+}
+
+export { ControlPanel, ControlPanelForNonObjectRootField, DataBuilderFieldControlPanel };

package/dist/esm/components/DataBuilder/Nested/FieldListWrapper/FieldListWrapper.module.css.mjs

@@ -0,0 +1,14 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import styleInject from 'style-inject';
+
+var css_248z = ".FieldListWrapper-module_container__gog9U {\n\n  padding-bottom: 0.25rem;\n\n  padding-top: 0.75rem;\n\n  cursor: pointer\n}\n.FieldListWrapper-module_container__collapsed__9x5Po {\n\n  margin-top: -2.5rem;\n\n  padding-top: 2.5rem;\n\n  position: relative;\n\n  z-index: 10;\n\n  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\n\n  --tw-gradient-from: transparent var(--tw-gradient-from-position);\n\n  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);\n\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n\n  --tw-gradient-to: #fff var(--tw-gradient-to-position);\n\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) 40%\n}\n.FieldListWrapper-module_button__fkFJa {\n\n  padding-left: 0px;\n\n  padding-right: 0px;\n\n  padding-top: 0.125rem;\n\n  padding-bottom: 0.125rem;\n\n  border-bottom-width: 1px;\n\n  border-color: transparent;\n\n  display: flex;\n\n  flex-direction: row;\n\n  align-items: center;\n\n  gap: 0.25rem;\n\n  --tw-text-opacity: 1;\n\n  color: rgb(13 121 194 / var(--tw-text-opacity, 1))\n}\n.FieldListWrapper-module_button__fkFJa svg {\n\n  height: 1rem;\n\n  width: 1rem\n}\n.FieldListWrapper-module_button__fkFJa:hover,\n.FieldListWrapper-module_container__gog9U:hover button {\n\n  border-style: dashed;\n\n  --tw-border-opacity: 1;\n\n  border-color: rgb(13 121 194 / var(--tw-border-opacity, 1))\n}\n";
+var classes = {"container":"FieldListWrapper-module_container__gog9U","container__collapsed":"FieldListWrapper-module_container__collapsed__9x5Po","button":"FieldListWrapper-module_button__fkFJa"};
+styleInject(css_248z);
+
+export { classes as default };

package/dist/esm/components/DataBuilder/Nested/FieldListWrapper/index.mjs

@@ -0,0 +1,31 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { SvgIconType } from '../../../SvgIcon/svg-icon-type.mjs';
+import classes from './FieldListWrapper.module.css.mjs';
+import { SvgIcon } from '../../../SvgIcon/index.mjs';
+
+function FieldListWrapper({
+  children,
+  onClick,
+  fieldsToShow,
+  collapsed
+}) {
+  const buttonTitle = collapsed ? `Show ${fieldsToShow} more fields` : "Collapse fields";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsx("div", { className: clsx(classes.container, collapsed && classes.container__collapsed), onClick, children: /* @__PURE__ */ jsxs("button", { className: classes.button, children: [
+      buttonTitle,
+      /* @__PURE__ */ jsx(SvgIcon, { type: collapsed ? SvgIconType.ChevronDown : SvgIconType.ChevronUp })
+    ] }) })
+  ] });
+}
+
+export { FieldListWrapper };

package/dist/esm/components/DataBuilder/Nested/LevelKeysConflictProvider.mjs

@@ -0,0 +1,15 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import React from 'react';
+
+const LevelKeysConflictContext = React.createContext(/* @__PURE__ */ new Set());
+const LevelKeysConflictProvider = LevelKeysConflictContext.Provider;
+const useLevelKeysConflicts = () => React.useContext(LevelKeysConflictContext);
+
+export { LevelKeysConflictProvider, useLevelKeysConflicts };

package/dist/esm/components/DataBuilder/Nested/NoSchema.mjs

@@ -0,0 +1,27 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { isFormula } from '@membranehq/sdk';
+import DataBuilderFormNestedArrayItems from './ArrayItems.mjs';
+import DataBuilderFormNestedObjectFields from './ObjectFields.mjs';
+
+function DataBuilderFormNestedNoSchema({
+  field,
+  onChange
+}) {
+  if (Array.isArray(field.value)) {
+    return /* @__PURE__ */ jsx(DataBuilderFormNestedArrayItems, { field, onChange });
+  } else if (typeof field.value === "object" && field.value !== null && !isFormula(field.value)) {
+    return /* @__PURE__ */ jsx(DataBuilderFormNestedObjectFields, { field, onChange });
+  } else {
+    return null;
+  }
+}
+
+export { DataBuilderFormNestedNoSchema as default };

package/dist/esm/components/DataBuilder/Nested/ObjectFields.mjs

@@ -0,0 +1,202 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { DEFAULT_FIELD_KEY, isRootField } from '../data-field.mjs';
+import { DataBuilderFormField } from '../DataBuilderFormField.mjs';
+import { DataBuilderFieldControlPanel } from './FieldControlPanel/index.mjs';
+import { FieldListWrapper } from './FieldListWrapper/index.mjs';
+import useDataBuilder from '../data-builder-context.mjs';
+import { LevelKeysConflictProvider } from './LevelKeysConflictProvider.mjs';
+
+const MIN_FIELDS_VISIBLE_BY_DEFAULT = 7;
+function DataBuilderFormNestedObjectFields({
+  field,
+  onChange
+}) {
+  const { showNullValueFields, hideReadOnlyFields } = useDataBuilder();
+  const [conflictedKeys, setConflictedKeys] = useState(/* @__PURE__ */ new Set());
+  const [fieldToShowKeys, setFieldToShowKeys] = useState(getInitialFieldsToShow(field));
+  useEffect(() => {
+    if (field?.subFields) {
+      setFieldToShowKeys(getInitialFieldsToShow(field));
+    }
+  }, [field?.subFields?.length]);
+  function handleNewValue(newValue) {
+    if (Object.keys(newValue ?? {}).length > 0) {
+      onChange(newValue);
+    } else {
+      onChange(void 0);
+    }
+  }
+  function handleKeyConflict(oldKey = "", newKey = "") {
+    if (newKey in field.value && oldKey !== newKey) {
+      const conflictedSet2 = new Set(conflictedKeys);
+      conflictedSet2.add(oldKey);
+      setConflictedKeys(conflictedSet2);
+      return true;
+    }
+    const conflictedSet = new Set(conflictedKeys);
+    conflictedSet.delete(oldKey);
+    setConflictedKeys(conflictedSet);
+    return false;
+  }
+  function positionSafeKeyChange(oldKey = "", newKey = "") {
+    const newProperties = {};
+    for (const [key, value] of Object.entries(field.value)) {
+      if (key === oldKey) {
+        newProperties[newKey] = value;
+      } else {
+        newProperties[key] = value;
+      }
+    }
+    handleNewValue(newProperties);
+  }
+  function handlePropertyKeyChange(oldKey, newKey) {
+    if (handleKeyConflict(oldKey, newKey)) return;
+    positionSafeKeyChange(oldKey, newKey);
+    if (!newKey) return;
+    setFieldToShowKeys(fieldToShowKeys.map((key) => key === oldKey ? newKey : key));
+  }
+  function handlePropertyValueChange(key, value) {
+    const newProperties = { ...field.value };
+    newProperties[key] = value;
+    handleNewValue(newProperties);
+  }
+  function handleAddProperty(fieldKey = DEFAULT_FIELD_KEY) {
+    handleNewValue({
+      ...field.value || {},
+      [fieldKey]: null
+    });
+    setFieldToShowKeys([...fieldToShowKeys, fieldKey]);
+  }
+  function handleDeleteProperty(propertyField) {
+    const newValue = { ...field.value || {} };
+    delete newValue[propertyField.key];
+    handleNewValue(newValue);
+    setFieldToShowKeys(fieldToShowKeys.filter((x) => x !== propertyField.key));
+  }
+  function isFieldHidden(field2) {
+    return hideReadOnlyFields && field2?.schema?.readOnly;
+  }
+  function isFieldDisplayedByDefault(field2) {
+    const isFieldRequired = field2?.isRequired;
+    const isFieldFilled = !!field2?.value || showNullValueFields && field2?.value === null;
+    const isFieldToShow = field2?.key !== void 0 ? fieldToShowKeys.includes(field2.key) : false;
+    return isFieldRequired || isFieldFilled || isFieldToShow;
+  }
+  function sortFieldByFieldToShowKey(fieldA, fieldB) {
+    const fieldAIndex = fieldToShowKeys.indexOf(fieldA.key);
+    const fieldBIndex = fieldToShowKeys.indexOf(fieldB.key);
+    if (fieldAIndex !== -1 && fieldBIndex !== -1) {
+      if (fieldAIndex === -1 || fieldAIndex < fieldBIndex) return -1;
+      if (fieldBIndex === -1 || fieldAIndex > fieldBIndex) return 1;
+    }
+    return 0;
+  }
+  const baseFields = (field?.subFields ?? []).filter((f) => !isFieldHidden(f)).filter(isFieldDisplayedByDefault).sort(sortFieldByFieldToShowKey);
+  const additionalFields = (field?.subFields ?? []).filter((f) => !isFieldHidden(f)).filter((x) => !isFieldDisplayedByDefault(x));
+  return /* @__PURE__ */ jsx(LevelKeysConflictProvider, { value: conflictedKeys, children: /* @__PURE__ */ jsx(
+    FieldListCollapsible,
+    {
+      field,
+      baseFields,
+      additionalFields,
+      onChange: handlePropertyValueChange,
+      onKeyChange: handlePropertyKeyChange,
+      onDelete: handleDeleteProperty,
+      onAdd: handleAddProperty
+    }
+  ) });
+}
+function getInitialFieldsToShow(field) {
+  const subFields = field?.subFields ?? [];
+  const getKeysFromSubFields = (subFields2) => {
+    return subFields2.map((x) => x.key).filter((x) => x !== void 0);
+  };
+  const requiredFieldKeys = getKeysFromSubFields(subFields.filter((x) => x.isRequired));
+  const fieldsWithValueKeys = getKeysFromSubFields(subFields.filter((x) => x.value !== void 0));
+  const minimalVisibleSetOfFields = getKeysFromSubFields(
+    subFields.filter((_, index) => index < MIN_FIELDS_VISIBLE_BY_DEFAULT)
+  );
+  const allUniqueFields = [.../* @__PURE__ */ new Set([...requiredFieldKeys, ...fieldsWithValueKeys, ...minimalVisibleSetOfFields])];
+  const amountFieldsToShow = allUniqueFields.length;
+  if (isRootField(field) && amountFieldsToShow === 0) {
+    return getKeysFromSubFields(subFields);
+  }
+  return allUniqueFields;
+}
+function FieldListCollapsible({
+  field,
+  baseFields,
+  additionalFields,
+  onChange,
+  onKeyChange,
+  onDelete,
+  onAdd
+}) {
+  const { collapsedDataBuilder, initialVisibleFieldCount } = useDataBuilder();
+  const isRoot = field.level === 1;
+  const showCollapseWrapper = isRoot && collapsedDataBuilder && baseFields.length > initialVisibleFieldCount;
+  const [collapsed, setCollapsed] = useState(isRoot);
+  function toggleCollapsed() {
+    setCollapsed(!collapsed);
+  }
+  if (!isRoot || !showCollapseWrapper) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        BaseFieldsList,
+        {
+          baseFields,
+          onChange,
+          onKeyChange,
+          onAdd,
+          onDelete
+        }
+      ),
+      /* @__PURE__ */ jsx(DataBuilderFieldControlPanel, { field, onAdd, additionalFields })
+    ] });
+  }
+  const renderedFields = collapsed ? baseFields.slice(0, initialVisibleFieldCount) : baseFields;
+  const fieldsToShow = baseFields.length - initialVisibleFieldCount;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(FieldListWrapper, { collapsed, onClick: toggleCollapsed, fieldsToShow, children: [
+    /* @__PURE__ */ jsx(
+      BaseFieldsList,
+      {
+        baseFields: renderedFields,
+        onChange,
+        onKeyChange,
+        onAdd,
+        onDelete
+      }
+    ),
+    !collapsed && /* @__PURE__ */ jsx(DataBuilderFieldControlPanel, { field, onAdd, additionalFields })
+  ] }) });
+}
+function BaseFieldsList({
+  baseFields,
+  onChange,
+  onKeyChange,
+  onDelete,
+  onAdd
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: baseFields.map((field, idx) => /* @__PURE__ */ jsx(
+    DataBuilderFormField,
+    {
+      field,
+      onChange: (value) => onChange(field.key, value),
+      onKeyChange: (newKey) => onKeyChange(field.key, newKey),
+      onDelete: () => onDelete(field),
+      onEnter: onAdd
+    },
+    idx
+  )) });
+}
+
+export { DataBuilderFormNestedObjectFields as default };

package/dist/esm/components/DataBuilder/Nested/ValueMapping.mjs

@@ -0,0 +1,196 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { getFormula, DataBuilderFormulaType, buildDataSchema, getReferenceCollectionPathForSchema, makeDataLocationOperationPath } from '@membranehq/sdk';
+import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
+import { useIntegrationAppClient } from '../../../contexts/integration-app-client-context.mjs';
+import { useIntegrationAppConnection } from '../../../contexts/integration-app-connection-context.mjs';
+import { usePromise } from '../../../hooks/usePromise.mjs';
+import '../../DataBuilderUI/FieldControlPanel/index.mjs';
+import '../../DataBuilderUI/ActionBar.mjs';
+import { Cell } from '../../DataBuilderUI/Cell.mjs';
+import { NestedLevel } from '../../DataBuilderUI/NestedLevel.mjs';
+import { Row } from '../../DataBuilderUI/Row.mjs';
+import { Title } from '../../DataBuilderUI/Title.mjs';
+import { makeSubField } from '../data-field.mjs';
+import { FieldDelete } from '../FieldDelete.mjs';
+import DataBuilderFormFieldValue from '../FieldValue/index.mjs';
+import { DataBuilderFieldControlPanel } from './FieldControlPanel/index.mjs';
+
+const MAX_EXPANDED_VALUES = 20;
+function ValueMapping({ field, onChange }) {
+  const { client } = useIntegrationAppClient();
+  const { connectionId } = useIntegrationAppConnection();
+  const formula = getFormula(field.value);
+  if (formula?.type !== DataBuilderFormulaType.MAP) {
+    return null;
+  }
+  const valueSchema = buildDataSchema(formula?.args?.value, field.variablesSchema);
+  const [fieldRecords, fieldRecordsError] = usePromise(
+    () => loadSchemaRecords(field.schema, client, connectionId),
+    [JSON.stringify(field.schema)]
+  );
+  const [valueRecords, valueRecordsError] = usePromise(
+    () => loadSchemaRecords(valueSchema, client, connectionId),
+    [JSON.stringify(valueSchema)]
+  );
+  if (fieldRecordsError || valueRecordsError) {
+    return /* @__PURE__ */ jsx("p", { children: (fieldRecordsError || valueRecordsError || "Unknown error").toString() });
+  }
+  if (!fieldRecords || !valueRecords) {
+    return /* @__PURE__ */ jsx("p", { children: "Loading..." });
+  }
+  let autoExpandedValues = valueRecords;
+  if (autoExpandedValues.length === 0 || autoExpandedValues.length > MAX_EXPANDED_VALUES) {
+    autoExpandedValues = null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: autoExpandedValues ? /* @__PURE__ */ jsx(
+    AutoExpandedMapping,
+    {
+      valueRecords: autoExpandedValues,
+      fieldRecords,
+      field,
+      onChange
+    }
+  ) : /* @__PURE__ */ jsx(CustomMapping, { field, valueSchema, onChange }) });
+}
+function AutoExpandedMapping({ valueRecords, field, fieldRecords, onChange }) {
+  const mapping = field.value?.$map?.mapping ?? [];
+  function handleMappingChange(fromRecord, toValue) {
+    const newMapping = JSON.parse(JSON.stringify(mapping));
+    let idx = newMapping.findIndex((m) => m.from === fromRecord.id);
+    if (idx === -1) {
+      idx = newMapping.length;
+    }
+    newMapping[idx] = {
+      from: fromRecord.id,
+      to: toValue
+    };
+    onChange(newMapping);
+  }
+  const fieldOptionsSchema = {
+    type: field.schema?.type
+  };
+  if (fieldRecords?.length) {
+    fieldOptionsSchema.referenceRecords = fieldRecords;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: valueRecords.map((valueRecord, idx) => {
+    const subField = makeSubField(field, {
+      schema: fieldOptionsSchema,
+      value: mapping.find((m) => m.from === valueRecord.id)?.to,
+      optionFactories: [],
+      variablesSchema: []
+    });
+    return /* @__PURE__ */ jsx(NestedLevel, { level: field.level + 1, children: /* @__PURE__ */ jsxs(Row, { children: [
+      /* @__PURE__ */ jsx(Cell, { type: "name", span: "grow", children: /* @__PURE__ */ jsx(Title, { childrenWrap: true, children: valueRecord.name ?? valueRecord.id }) }),
+      /* @__PURE__ */ jsx(Cell, { type: "icon", icon: SvgIconType.ValueMapping }),
+      /* @__PURE__ */ jsx(Cell, { type: "combobox", span: "grow", children: /* @__PURE__ */ jsx(DataBuilderFormFieldValue, { field: subField, onChange: (value) => handleMappingChange(valueRecord, value) }) })
+    ] }) }, idx);
+  }) });
+}
+function CustomMapping({ field, valueSchema, onChange }) {
+  const mapping = field.value?.$map?.mapping ?? [];
+  function handleMappingItemChange(idx, value) {
+    const newMapping = JSON.parse(JSON.stringify(mapping));
+    newMapping[idx] = value;
+    onChange(newMapping);
+  }
+  function handleAddMapping() {
+    const newMapping = JSON.parse(JSON.stringify(mapping));
+    newMapping.push({});
+    onChange(newMapping);
+  }
+  function handleRemoveMapping(idx) {
+    const newMapping = JSON.parse(JSON.stringify(mapping));
+    newMapping.splice(idx, 1);
+    onChange(newMapping);
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    mapping.map((mappingItem, idx) => /* @__PURE__ */ jsx(
+      MappingListItem,
+      {
+        field,
+        item: mappingItem,
+        idx,
+        valueSchema,
+        onChange: (value) => handleMappingItemChange(idx, value),
+        onDelete: () => handleRemoveMapping(idx)
+      },
+      idx
+    )),
+    /* @__PURE__ */ jsx(DataBuilderFieldControlPanel, { field, addFieldLabel: "Add Mapping", onAdd: handleAddMapping })
+  ] });
+}
+function MappingListItem({
+  field,
+  item,
+  idx,
+  valueSchema,
+  onChange,
+  onDelete
+}) {
+  const fromField = makeSubField(field, {
+    valueLocator: `${field.valueLocator}.$map.mapping[${idx}].from`,
+    schema: valueSchema,
+    value: item?.from,
+    optionFactories: [],
+    variablesSchema: null
+  });
+  const toField = makeSubField(field, {
+    valueLocator: `${field.valueLocator}.$map.mapping[${idx}].to`,
+    schema: field.schema,
+    value: item?.to,
+    optionFactories: [],
+    variablesSchema: null
+  });
+  function handleFromChange(value) {
+    onChange({
+      ...item ?? {},
+      from: value
+    });
+  }
+  function handleToChange(value) {
+    onChange({
+      ...item ?? {},
+      to: value
+    });
+  }
+  return /* @__PURE__ */ jsx(NestedLevel, { level: field.level + 1, children: /* @__PURE__ */ jsxs(Row, { children: [
+    /* @__PURE__ */ jsx(Cell, { type: "combobox", span: "grow", children: /* @__PURE__ */ jsx(DataBuilderFormFieldValue, { field: fromField, onChange: (value) => handleFromChange(value) }) }),
+    /* @__PURE__ */ jsx(Cell, { type: "icon", icon: SvgIconType.ValueMapping }),
+    /* @__PURE__ */ jsx(Cell, { type: "combobox", span: "grow", children: /* @__PURE__ */ jsx(DataBuilderFormFieldValue, { field: toField, onChange: (value) => handleToChange(value) }) }),
+    /* @__PURE__ */ jsx(FieldDelete, { onClick: onDelete })
+  ] }) });
+}
+async function loadSchemaRecords(schema, client, connectionId) {
+  if (!schema) {
+    return [];
+  }
+  if (schema.enum) {
+    return schema.enum.map((value) => ({
+      id: value
+    }));
+  } else if (schema.referenceRecords) {
+    return schema.referenceRecords;
+  } else if (getReferenceCollectionPathForSchema(schema) && client && connectionId) {
+    const listResponse = await client.connection(connectionId).request(
+      makeDataLocationOperationPath(
+        /* FIXME: strictNullCheck temporary fix */
+        // @ts-expect-error TS(2345): Argument of type 'string | undefined' is not... Remove this comment to see the full error message
+        getReferenceCollectionPathForSchema(schema),
+        "list"
+      )
+    );
+    return listResponse.records;
+  } else {
+    return [];
+  }
+}
+
+export { ValueMapping };

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

@@ -0,0 +1,28 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { isFormula } from '@membranehq/sdk';
+import useDataBuilderField from './field-context.mjs';
+import DataBuilderFormNestedArrayItems from './Nested/ArrayItems.mjs';
+import DataBuilderFormNestedNoSchema from './Nested/NoSchema.mjs';
+import DataBuilderFormNestedObjectFields from './Nested/ObjectFields.mjs';
+
+function DataBuilderFormNested({
+  field,
+  onChange
+}) {
+  const { localSchema } = useDataBuilderField();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !localSchema?.type && /* @__PURE__ */ jsx(DataBuilderFormNestedNoSchema, { field, onChange }),
+    localSchema?.type == "object" && !isFormula(field.value) && /* @__PURE__ */ jsx(DataBuilderFormNestedObjectFields, { field, onChange }),
+    localSchema?.type == "array" && /* @__PURE__ */ jsx(DataBuilderFormNestedArrayItems, { field, onChange })
+  ] });
+}
+
+export { DataBuilderFormNested as default };

package/dist/esm/components/DataBuilder/data-builder-context.mjs

@@ -0,0 +1,64 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext } from 'react';
+
+const FIELDS_TO_SHOW = 5;
+function useDataBuilder() {
+  return useContext(DataBuilderContext);
+}
+const DataBuilderContext = createContext({
+  drilldownStack: [],
+  isAdminMode: false,
+  isReadOnly: false,
+  showNullValueFields: false,
+  hideReadOnlyFields: false,
+  frozenFieldsLocators: [],
+  errorFieldsLocators: [],
+  editableVariablesSchemaLocators: [],
+  collapsedDataBuilder: false,
+  initialVisibleFieldCount: FIELDS_TO_SHOW
+});
+DataBuilderContext.displayName = "DataBuilderContext";
+const DataBuilderProvider = ({
+  topLevelField,
+  isAdminMode = false,
+  children,
+  errorFieldsLocators = [],
+  frozenFieldsLocators = [],
+  editableVariablesSchemaLocators = [],
+  onAddVariable,
+  readOnly = false,
+  showNullValueFields = false,
+  hideReadOnlyFields = false,
+  collapsedDataBuilder = false,
+  initialVisibleFieldCount = FIELDS_TO_SHOW
+}) => {
+  return /* @__PURE__ */ jsx(
+    DataBuilderContext.Provider,
+    {
+      value: {
+        topLevelField,
+        isAdminMode,
+        isReadOnly: readOnly,
+        errorFieldsLocators,
+        frozenFieldsLocators,
+        showNullValueFields,
+        hideReadOnlyFields: !!hideReadOnlyFields,
+        editableVariablesSchemaLocators,
+        onAddVariable,
+        initialVisibleFieldCount,
+        collapsedDataBuilder
+      },
+      children
+    }
+  );
+};
+
+export { DataBuilderProvider, useDataBuilder as default };