@membranehq/react 0.1.0

package/dist/cjs/components/DataBuilder/Formula/lastName.cjs

@@ -0,0 +1,50 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index$1 = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
+var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
+var Form = require('../Form.cjs');
+var index = require('../index.cjs');
+
+const LastNameFormula = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(index$1.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index$1.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
+      " Extract last name"
+    ] });
+  }
+);
+LastNameFormula.displayName = "LastNameFormula";
+function LastNameFormulaDropdown(props) {
+  const { onChange, variablesSchema, optionFactories, formula } = props;
+  function handleVariableChange(value) {
+    onChange?.({
+      $lastName: value
+    });
+  }
+  const valueSchema = {
+    title: "Extract last name from",
+    type: "string"
+  };
+  const field = index.makeDataField({
+    schema: valueSchema,
+    value: formula.value,
+    variablesSchema,
+    optionFactories
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(Form.DataBuilderForm, { field, onChange: handleVariableChange });
+}
+
+exports.LastNameFormulaDropdown = LastNameFormulaDropdown;
+exports.default = LastNameFormula;

package/dist/cjs/components/DataBuilder/Formula/lookup.cjs

@@ -0,0 +1,39 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
+var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
+var index$1 = require('../../Truncate/index.cjs');
+
+const LookupFormula = React.forwardRef((props, ref) => {
+  const { formula } = props;
+  const isConfigError = Object.entries(formula.value?.query ?? {}).length === 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    index.EditorTagBadge,
+    {
+      ref,
+      variant: "value",
+      disabled: props.disabled,
+      onClick: props.onClick,
+      onDelete: props.onDelete,
+      children: [
+        isConfigError && /* @__PURE__ */ jsxRuntime.jsx(index.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.AlertTriangle }),
+        /* @__PURE__ */ jsxRuntime.jsx(index$1.Truncate, { children: "Select Dynamically" })
+      ]
+    }
+  );
+});
+LookupFormula.displayName = "LookupFormula";
+
+exports.default = LookupFormula;

package/dist/cjs/components/DataBuilder/Formula/map.cjs

@@ -0,0 +1,72 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index$1 = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
+var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
+var index = require('../index.cjs');
+var fieldContext = require('../field-context.cjs');
+var Form = require('../Form.cjs');
+var ValueMapping = require('../Nested/ValueMapping.cjs');
+
+const MapFormula = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(index$1.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index$1.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
+    " Map values"
+  ] });
+});
+MapFormula.displayName = "MapFormula";
+function MapFormulaDropdown({
+  formula,
+  onChange,
+  variablesSchema
+}) {
+  const { field } = fieldContext.default();
+  const mappingField = {
+    ...field,
+    value: { $map: formula.args ?? {} }
+  };
+  function handleValueChange(value) {
+    onChange?.({
+      $map: {
+        ...formula.args ?? {},
+        value
+      }
+    });
+  }
+  function handleMappingChange(value) {
+    onChange?.({
+      $map: {
+        ...formula.args ?? {},
+        mapping: value
+      }
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Form.DataBuilderForm,
+      {
+        field: index.makeDataField({
+          schema: { type: "string", title: "Source Value" },
+          value: formula.args?.value,
+          variablesSchema
+        }),
+        onChange: handleValueChange
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(ValueMapping.ValueMapping, { field: mappingField, onChange: handleMappingChange })
+  ] });
+}
+
+exports.MapFormulaDropdown = MapFormulaDropdown;
+exports.default = MapFormula;

package/dist/cjs/components/DataBuilder/Formula/mergeObjects.cjs

@@ -0,0 +1,52 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var sdk = require('@membranehq/sdk');
+var index$1 = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
+var index = require('../../DataInput/index.cjs');
+var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
+var fieldContext = require('../field-context.cjs');
+
+const MergeObjectsFormula = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(index$1.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index$1.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
+      " Merge objects"
+    ] });
+  }
+);
+MergeObjectsFormula.displayName = "MergeObjectsFormula";
+function MergeObjectsDropdown({ onChange, formula }) {
+  const { field } = fieldContext.default();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.DataInput,
+    {
+      schema: sdk.schemaWithTitle(
+        {
+          type: "array",
+          items: field.schema
+        },
+        "Objects to Merge"
+      ),
+      value: formula.args,
+      variablesSchema: field.variablesSchema,
+      onChange: (value) => {
+        onChange?.({ $mergeObjects: value });
+      }
+    }
+  );
+}
+
+exports.MergeObjectsDropdown = MergeObjectsDropdown;
+exports.default = MergeObjectsFormula;

package/dist/cjs/components/DataBuilder/Formula/noUi.cjs

@@ -0,0 +1,19 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+
+function NoUiFormula() {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { children: "This value cannot be displayed" });
+}
+
+exports.default = NoUiFormula;

package/dist/cjs/components/DataBuilder/Formula/tpl.cjs

@@ -0,0 +1,22 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
+
+const TplFormula = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(index.EditorTagBadge, { variant: "static-value", ref, onDelete: props.onDelete, children: "Unsupported formula type" });
+});
+TplFormula.displayName = "TplFormula";
+
+exports.default = TplFormula;

package/dist/cjs/components/DataBuilder/Formula/var.cjs

@@ -0,0 +1,35 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var sdk = require('@membranehq/sdk');
+var index$1 = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
+var NestedBadgeValue = require('../../ComboBox/Badges/EditorTagBadge/NestedBadgeValue.cjs');
+var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
+var index = require('../../Tooltip/index.cjs');
+
+const VarFormula = React.forwardRef((props, ref) => {
+  const { formula, variablesSchema } = props;
+  const nameComponents = sdk.getNameComponentsForLocator(variablesSchema, formula.locator);
+  if (nameComponents === void 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { tooltip: "Source variable doesn't exist", usePortal: true, children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.EditorTagBadge, { variant: "error", onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index$1.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Unlink }),
+      formula.locator
+    ] }) });
+  }
+  const fullName = sdk.getFullNameForLocator(variablesSchema, formula.locator) || "Unknown Var";
+  return /* @__PURE__ */ jsxRuntime.jsx(index$1.EditorTagBadge, { ref, disabled: props.disabled, onClick: props.onClick, onDelete: props.onDelete, children: /* @__PURE__ */ jsxRuntime.jsx(NestedBadgeValue.NestedBadgeValue, { nameChunks: nameComponents, fullName }) });
+});
+VarFormula.displayName = "VarFormula";
+
+exports.default = VarFormula;

package/dist/cjs/components/DataBuilder/Nested/ArrayItems.cjs

@@ -0,0 +1,83 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
+require('../../DataBuilderUI/FieldControlPanel/index.cjs');
+require('../../DataBuilderUI/ActionBar.cjs');
+var Cell = require('../../DataBuilderUI/Cell.cjs');
+var NestedLevel = require('../../DataBuilderUI/NestedLevel.cjs');
+var Row = require('../../DataBuilderUI/Row.cjs');
+require('../../DataBuilderUI/Title.cjs');
+var fieldContext = require('../field-context.cjs');
+var FieldDelete = require('../FieldDelete.cjs');
+var index$1 = require('../FieldValue/index.cjs');
+var Nested = require('../Nested.cjs');
+var index = require('./FieldControlPanel/index.cjs');
+
+function DataBuilderFormNestedArrayItems({
+  field,
+  onChange
+}) {
+  const allowToAdd = !field.schema?.maxItems || (field?.subFields ?? [])?.length < field.schema.maxItems;
+  function handleAddItem() {
+    onChange([...field.value ?? [], null]);
+  }
+  if (Array.isArray(field.value)) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ArrayItems, { field, onChange }),
+      allowToAdd && /* @__PURE__ */ jsxRuntime.jsx(index.DataBuilderFieldControlPanel, { field, onAdd: handleAddItem })
+    ] });
+  } else if (field.value) {
+    return null;
+  } else {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: allowToAdd && /* @__PURE__ */ jsxRuntime.jsx(index.DataBuilderFieldControlPanel, { field, onAdd: handleAddItem }) });
+  }
+}
+function ArrayItems({ field, onChange }) {
+  function handleItemChange(index, value) {
+    const newValue = [...field.value || []];
+    newValue[index] = value;
+    onChange(newValue);
+  }
+  function handleDeleteItem(index) {
+    const newValue = [...field.value || []];
+    newValue.splice(index, 1);
+    onChange(newValue.length > 0 ? newValue : void 0);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: field.subFields.map((itemField, index) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DataComposerFieldArrayItem,
+      {
+        field: itemField,
+        onChange: (value) => handleItemChange(index, value),
+        onDelete: () => handleDeleteItem(index)
+      },
+      index
+    );
+  }) });
+}
+function DataComposerFieldArrayItem({ field, onChange, onDelete = void 0 }) {
+  function handleChange(value) {
+    onChange?.(value);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(fieldContext.DataBuilderFieldProvider, { field, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(NestedLevel.NestedLevel, { level: field.level, children: /* @__PURE__ */ jsxRuntime.jsxs(Row.Row, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { type: "icon", icon: svgIconType.SvgIconType.Array }),
+      /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { type: "combobox", span: "grow", children: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { field, onChange: handleChange }) }),
+      onDelete && /* @__PURE__ */ jsxRuntime.jsx(FieldDelete.FieldDelete, { onClick: onDelete })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Nested.default, { field, onChange: handleChange })
+  ] });
+}
+
+exports.default = DataBuilderFormNestedArrayItems;

package/dist/cjs/components/DataBuilder/Nested/FieldControlPanel/AddingFieldSelector.cjs

@@ -0,0 +1,62 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var sdk = require('@membranehq/sdk');
+var svgIconType = require('../../../SvgIcon/svg-icon-type.cjs');
+var ComboBox = require('../../../ComboBox/ComboBox.cjs');
+require('../../../DataBuilderUI/FieldControlPanel/index.cjs');
+require('../../../DataBuilderUI/ActionBar.cjs');
+var Cell = require('../../../DataBuilderUI/Cell.cjs');
+require('clsx');
+require('../../../DataBuilderUI/styles.module.css.cjs');
+var Row = require('../../../DataBuilderUI/Row.cjs');
+require('../../../DataBuilderUI/Title.cjs');
+var TagPlaceholder = require('../../../Tag/TagPlaceholder.cjs');
+var dataField = require('../../data-field.cjs');
+
+function AddingFieldSelector({
+  parentField,
+  fieldsToAdd,
+  onChange,
+  onClose
+}) {
+  const allowAdditionalProperties = dataField.isObjectAllowedAdditionalProperties(parentField);
+  const options = fieldsToAdd.map((f) => ({
+    value: f.key,
+    label: sdk.getFullNameForLocator(parentField.schema, f.key) || dataField.fieldLabel(f)
+  }));
+  if (allowAdditionalProperties) {
+    options.unshift({
+      value: "",
+      label: "Add custom field",
+      iconType: svgIconType.SvgIconType.Add
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Row.Row, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { type: "combobox", children: /* @__PURE__ */ jsxRuntime.jsx(
+      ComboBox.ComboBox,
+      {
+        value: void 0,
+        options,
+        schema: {
+          type: "string",
+          allowCustom: allowAdditionalProperties
+        },
+        onChange,
+        onClose,
+        autoOpen: true
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { type: "combobox", span: "grow", disabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(TagPlaceholder.TagPlaceholder, { children: "Select value" }) })
+  ] });
+}
+
+exports.AddingFieldSelector = AddingFieldSelector;

package/dist/cjs/components/DataBuilder/Nested/FieldControlPanel/ControlPanel.cjs

@@ -0,0 +1,112 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var dataBuilderContext = require('../../data-builder-context.cjs');
+var svgIconType = require('../../../SvgIcon/svg-icon-type.cjs');
+var useEventStopPropagation = require('../../../../helpers/hooks/useEventStopPropagation.cjs');
+var AddingFieldSelector = require('./AddingFieldSelector.cjs');
+var index = require('../../../DataBuilderUI/FieldControlPanel/index.cjs');
+require('../../../DataBuilderUI/ActionBar.cjs');
+require('../../../DataBuilderUI/Cell.cjs');
+require('clsx');
+require('../../../DataBuilderUI/styles.module.css.cjs');
+require('../../../DataBuilderUI/Row.cjs');
+require('../../../DataBuilderUI/Title.cjs');
+var index$1 = require('../../../SvgIcon/index.cjs');
+var index$2 = require('../../../Truncate/index.cjs');
+var dataField = require('../../data-field.cjs');
+var fieldContext = require('../../field-context.cjs');
+var hooks = require('../../hooks.cjs');
+
+function ControlPanel({
+  field,
+  additionalFields = [],
+  addFieldLabel = "Add Field",
+  onAdd
+}) {
+  const fieldIsVisible = dataField.isFieldVisible(field);
+  const [showFieldSelector, setShowFieldSelector] = React.useState(false);
+  const { isReadOnly } = dataBuilderContext.default();
+  const fieldCanUseVarFromVariables = hooks.useDataBuilderFieldCanUseVarFromVariables();
+  const showAddFieldButtonGroup = (dataField.isObjectAllowedAdditionalProperties(field) || additionalFields.length > 0) && !isReadOnly;
+  const showUseFromVariablesButtonGroup = fieldIsVisible && fieldCanUseVarFromVariables;
+  if (showFieldSelector) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      AddingFieldSelector.AddingFieldSelector,
+      {
+        parentField: field,
+        fieldsToAdd: additionalFields,
+        onChange: onAdd,
+        onClose: () => setShowFieldSelector(false)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    showAddFieldButtonGroup && /* @__PURE__ */ jsxRuntime.jsx(
+      GroupAddField,
+      {
+        additionalFields,
+        addFieldLabel,
+        onAdd,
+        onShowFieldSelector: () => setShowFieldSelector(true)
+      }
+    ),
+    showUseFromVariablesButtonGroup && /* @__PURE__ */ jsxRuntime.jsx(GroupUseFromVariables, { labelOr: showAddFieldButtonGroup })
+  ] });
+}
+function GroupAddField({
+  additionalFields = [],
+  addFieldLabel = "Add Field",
+  onAdd,
+  onShowFieldSelector
+}) {
+  const handleAddNewFieldClick = useEventStopPropagation.default(() => {
+    if (additionalFields.length > 0) {
+      onShowFieldSelector();
+    } else {
+      onAdd(dataField.DEFAULT_FIELD_KEY);
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.FieldControlPanel.ButtonGroup, { children: /* @__PURE__ */ jsxRuntime.jsxs(index.FieldControlPanel.Button, { onClick: handleAddNewFieldClick, "aria-label": addFieldLabel, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index$1.SvgIcon, { type: svgIconType.SvgIconType.Add }),
+    addFieldLabel
+  ] }) });
+}
+function GroupUseFromVariables({ labelOr }) {
+  const { setAutoOpen, localSchema } = fieldContext.default();
+  const localSchemaType = localSchema?.type;
+  function handleUseVarsFromVariables() {
+    setAutoOpen(true);
+  }
+  if (!["array", "object"].includes(localSchemaType)) {
+    return null;
+  }
+  const title = getButtonUseFromVariablesTitle(localSchemaType);
+  const Wrapper = labelOr ? index.FieldControlPanel : React.Fragment;
+  const wrapperProps = labelOr ? { noWrap: true } : {};
+  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { ...wrapperProps, children: [
+    labelOr && /* @__PURE__ */ jsxRuntime.jsx(index.FieldControlPanel.Delimiter, { children: "or" }),
+    /* @__PURE__ */ jsxRuntime.jsx(index.FieldControlPanel.ButtonGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(index.FieldControlPanel.Button, { onClick: handleUseVarsFromVariables, children: /* @__PURE__ */ jsxRuntime.jsx(index$2.Truncate, { children: title }) }) })
+  ] });
+}
+function getButtonUseFromVariablesTitle(schemaType) {
+  switch (schemaType) {
+    case "array":
+      return "Use list from variables";
+    case "object":
+      return "Use object from variables";
+    default:
+      return "Use from variables";
+  }
+}
+
+exports.ControlPanel = ControlPanel;

package/dist/cjs/components/DataBuilder/Nested/FieldControlPanel/ControlPanelForNonObjectRootField.cjs

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

package/dist/cjs/components/DataBuilder/Nested/FieldControlPanel/index.cjs

@@ -0,0 +1,73 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var ControlPanel = require('./ControlPanel.cjs');
+var ControlPanelForNonObjectRootField = require('./ControlPanelForNonObjectRootField.cjs');
+var index = require('../../../DataBuilderUI/FieldControlPanel/index.cjs');
+require('../../../DataBuilderUI/ActionBar.cjs');
+require('../../../DataBuilderUI/Cell.cjs');
+var NestedLevel = require('../../../DataBuilderUI/NestedLevel.cjs');
+require('../../../DataBuilderUI/Row.cjs');
+require('../../../DataBuilderUI/Title.cjs');
+var dataField = require('../../data-field.cjs');
+var fieldContext = require('../../field-context.cjs');
+
+function DataBuilderFieldControlPanel({
+  field,
+  onAdd,
+  addFieldLabel,
+  additionalFields = []
+}) {
+  const showAddFieldButton = dataField.isObjectAllowedAdditionalProperties(field) || additionalFields.length !== 0;
+  const fieldIsVisible = dataField.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__ */ jsxRuntime.jsx(FieldControlPanelWrapper, { field, children: /* @__PURE__ */ jsxRuntime.jsx(ControlPanelForNonObjectRootField.ControlPanelForNonObjectRootField, { addFieldLabel: computedAddFieldLabel, onAdd }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(FieldControlPanelWrapper, { field, children: /* @__PURE__ */ jsxRuntime.jsx(
+    ControlPanel.ControlPanel,
+    {
+      field,
+      addFieldLabel: computedAddFieldLabel,
+      onAdd,
+      additionalFields
+    }
+  ) });
+}
+function FieldControlPanelWrapper({ field, children }) {
+  const fieldIsVisible = dataField.isFieldVisible(field);
+  const level = fieldIsVisible ? field.level + 1 : field.level;
+  return /* @__PURE__ */ jsxRuntime.jsx(NestedLevel.NestedLevel, { level, children: /* @__PURE__ */ jsxRuntime.jsx(index.FieldControlPanel, { children }) });
+}
+function useAddFieldLabel(labelFromProps) {
+  const { field, localSchema } = fieldContext.default();
+  if (labelFromProps) {
+    return labelFromProps;
+  }
+  const resultArray = ["Add"];
+  const label = dataField.fieldLabel(field);
+  if (label) {
+    resultArray.push(label);
+  }
+  resultArray.push(localSchema?.type === "object" ? "Field" : "Item");
+  return resultArray.join(" ");
+}
+
+exports.ControlPanel = ControlPanel.ControlPanel;
+exports.ControlPanelForNonObjectRootField = ControlPanelForNonObjectRootField.ControlPanelForNonObjectRootField;
+exports.DataBuilderFieldControlPanel = DataBuilderFieldControlPanel;