@integration-app/react 2.21.0 → 2.22.1

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 
@@ -13,52 +13,23 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var sdk = require('@integration-app/sdk');
-var clsx = require('clsx');
-var styles_module = require('./styles.module.css.cjs');
-var ComboBoxTag = require('../../ComboBoxElements/ComboBoxTag.cjs');
-var Tag = require('../../Tag/Tag.cjs');
-require('../../Tag/TagPlaceholder.cjs');
-var SegmentSeparator = require('../../Tag/SegmentSeparator.cjs');
+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,
-    // We do not use the `optionFactories` prop, but we need to remove it from restProps
-    optionFactories: _of,
-    ...restProps
-  } = props;
-  const iconUri = sdk.getIconUriForLocator(variablesSchema, formula.locator);
+  const { formula, variablesSchema } = props;
   const nameComponents = sdk.getNameComponentsForLocator(variablesSchema, formula.locator);
   if (nameComponents === void 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(ComboBoxTag.ComboBoxTag, { invalid: true, tooltip: "Source variable doesn't exist", children: formula.locator });
-  }
-  const nameComponentTags = nameComponents.map((t, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default.name, children: t }, i));
-  if (iconUri) {
-    nameComponentTags.unshift(/* @__PURE__ */ jsxRuntime.jsx(Tag.Tag.Image, { src: iconUri }));
+    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(ComboBoxTag.ComboBoxTag, { ref, disabled: props.disabled, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(VarFormulaName, { nameComponents: nameComponentTags, fullName }) });
+  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";
-function VarFormulaName({ nameComponents, fullName }) {
-  if (nameComponents.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Error: undefined" });
-  }
-  if (nameComponents.length <= 2) {
-    const reducesComponents = nameComponents.length === 1 ? [nameComponents] : nameComponents.reduce((prev, curr) => [prev, /* @__PURE__ */ jsxRuntime.jsx(SegmentSeparator.SegmentSeparator, {}), curr]);
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default.valueRef, title: fullName, children: reducesComponents.map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: segment }, i)) });
-  }
-  const { 0: first, [nameComponents.length - 1]: last, ...rest } = nameComponents;
-  const middle = Object.values(rest);
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx.clsx(styles_module.default.valueRef, styles_module.default.valueRefTruncate), title: fullName, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default.visibleSegment, children: first }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default.truncatedSegment, children: middle.map((segment, idx) => [/* @__PURE__ */ jsxRuntime.jsx(SegmentSeparator.SegmentSeparator, {}, idx), segment]).flat().map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: segment }, i)) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default.visibleSegment, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SegmentSeparator.SegmentSeparator, {}),
-      last
-    ] })
-  ] });
-}
 
 exports.default = VarFormula;

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 
@@ -12,10 +12,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
-var index$1 = require('../../DataBuilderUI/index.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$2 = require('../FieldValue/index.cjs');
+var index$1 = require('../FieldValue/index.cjs');
 var Nested = require('../Nested.cjs');
 var index = require('./FieldControlPanel/index.cjs');
 
@@ -66,9 +71,9 @@ function DataComposerFieldArrayItem({ field, onChange, onDelete = void 0 }) {
     onChange?.(value);
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(fieldContext.DataBuilderFieldProvider, { field, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(index$1.NestedLevel, { level: field.level, children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Row, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index$1.Cell.Icon, { type: svgIconType.SvgIconType.Array }),
-      /* @__PURE__ */ jsxRuntime.jsx(index$1.Cell.Combobox, { grow: true, children: /* @__PURE__ */ jsxRuntime.jsx(index$2.default, { field, onChange: handleChange }) }),
+    /* @__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 })

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 
@@ -12,7 +12,13 @@ var jsxRuntime = require('react/jsx-runtime');
 var sdk = require('@integration-app/sdk');
 var svgIconType = require('../../../SvgIcon/svg-icon-type.cjs');
 var ComboBox = require('../../../ComboBox/ComboBox.cjs');
-var index = require('../../../DataBuilderUI/index.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');
 
@@ -34,8 +40,8 @@ function AddingFieldSelector({
       iconType: svgIconType.SvgIconType.Add
     });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(index.Row, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Combobox, { width: "14rem", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(Row.Row, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { type: "combobox", children: /* @__PURE__ */ jsxRuntime.jsx(
       ComboBox.ComboBox,
       {
         value: void 0,
@@ -49,7 +55,7 @@ function AddingFieldSelector({
         autoOpen: true
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Combobox, { grow: true, disabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(TagPlaceholder.TagPlaceholder, { children: "Select value" }) })
+    /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { type: "combobox", span: "grow", disabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(TagPlaceholder.TagPlaceholder, { children: "Select value" }) })
   ] });
 }
 

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 
@@ -14,13 +14,18 @@ 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');
-require('../../../DataBuilderUI/index.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');
-var index = require('../../../DataBuilderUI/FieldControlPanel/index.cjs');
 
 function ControlPanel({
   field,
@@ -89,7 +94,7 @@ function GroupUseFromVariables({ labelOr }) {
   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.Text, { children: "or" }),
+    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 }) }) })
   ] });
 }

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 
@@ -11,10 +11,15 @@
 var jsxRuntime = require('react/jsx-runtime');
 var svgIconType = require('../../../SvgIcon/svg-icon-type.cjs');
 var useEventStopPropagation = require('../../../../helpers/hooks/useEventStopPropagation.cjs');
-require('../../../DataBuilderUI/index.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');
-var index = require('../../../DataBuilderUI/FieldControlPanel/index.cjs');
 
 function ControlPanelForNonObjectRootField({
   addFieldLabel = "Add Field",

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 
@@ -11,10 +11,14 @@
 var jsxRuntime = require('react/jsx-runtime');
 var ControlPanel = require('./ControlPanel.cjs');
 var ControlPanelForNonObjectRootField = require('./ControlPanelForNonObjectRootField.cjs');
-var index = require('../../../DataBuilderUI/index.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');
-var index$1 = require('../../../DataBuilderUI/FieldControlPanel/index.cjs');
 
 function DataBuilderFieldControlPanel({
   field,
@@ -48,7 +52,7 @@ function DataBuilderFieldControlPanel({
 function FieldControlPanelWrapper({ field, children }) {
   const fieldIsVisible = dataField.isFieldVisible(field);
   const level = fieldIsVisible ? field.level + 1 : field.level;
-  return /* @__PURE__ */ jsxRuntime.jsx(index.NestedLevel, { level, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.FieldControlPanel, { compact: fieldIsVisible, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(NestedLevel.NestedLevel, { level, children: /* @__PURE__ */ jsxRuntime.jsx(index.FieldControlPanel, { children }) });
 }
 function useAddFieldLabel(labelFromProps) {
   const { field, localSchema } = fieldContext.default();

package/dist/cjs/components/DataBuilder/Nested/FieldListWrapper/FieldListWrapper.module.css.cjs

@@ -1,7 +1,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 
@@ -14,11 +14,16 @@ var reactUsePromise = require('../../../_modules/react-use-promise.cjs');
 var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
 var integrationAppClientContext = require('../../../contexts/integration-app-client-context.cjs');
 var integrationAppConnectionContext = require('../../../contexts/integration-app-connection-context.cjs');
-var index = require('../../DataBuilderUI/index.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');
+var Title = require('../../DataBuilderUI/Title.cjs');
 var dataField = require('../data-field.cjs');
 var FieldDelete = require('../FieldDelete.cjs');
-var index$1 = require('../FieldValue/index.cjs');
-var index$2 = require('./FieldControlPanel/index.cjs');
+var index = require('../FieldValue/index.cjs');
+var index$1 = require('./FieldControlPanel/index.cjs');
 
 const MAX_EXPANDED_VALUES = 20;
 function ValueMapping({ field, onChange }) {
@@ -84,10 +89,10 @@ function AutoExpandedMapping({ valueRecords, field, fieldRecords, onChange }) {
       optionFactories: [],
       variablesSchema: []
     });
-    return /* @__PURE__ */ jsxRuntime.jsx(index.NestedLevel, { level: field.level + 1, children: /* @__PURE__ */ jsxRuntime.jsxs(index.Row, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Name, { grow: true, width: "49%", children: /* @__PURE__ */ jsxRuntime.jsx(index.Title, { childrenWrap: true, children: valueRecord.name ?? valueRecord.id }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Icon, { type: svgIconType.SvgIconType.ValueMapping }),
-      /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Combobox, { grow: true, width: "49%", children: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { field: subField, onChange: (value) => handleMappingChange(valueRecord, value) }) })
+    return /* @__PURE__ */ jsxRuntime.jsx(NestedLevel.NestedLevel, { level: field.level + 1, children: /* @__PURE__ */ jsxRuntime.jsxs(Row.Row, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { type: "name", span: "grow", children: /* @__PURE__ */ jsxRuntime.jsx(Title.Title, { childrenWrap: true, children: valueRecord.name ?? valueRecord.id }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { type: "icon", icon: svgIconType.SvgIconType.ValueMapping }),
+      /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { type: "combobox", span: "grow", children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { field: subField, onChange: (value) => handleMappingChange(valueRecord, value) }) })
     ] }) }, idx);
   }) });
 }
@@ -121,7 +126,7 @@ function CustomMapping({ field, valueSchema, onChange }) {
       },
       idx
     )),
-    /* @__PURE__ */ jsxRuntime.jsx(index$2.DataBuilderFieldControlPanel, { field, addFieldLabel: "Add Mapping", onAdd: handleAddMapping })
+    /* @__PURE__ */ jsxRuntime.jsx(index$1.DataBuilderFieldControlPanel, { field, addFieldLabel: "Add Mapping", onAdd: handleAddMapping })
   ] });
 }
 function MappingListItem({
@@ -158,10 +163,10 @@ function MappingListItem({
       to: value
     });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(index.NestedLevel, { level: field.level + 1, children: /* @__PURE__ */ jsxRuntime.jsxs(index.Row, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Combobox, { grow: true, width: "49%", children: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { field: fromField, onChange: (value) => handleFromChange(value) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Icon, { type: svgIconType.SvgIconType.ValueMapping }),
-    /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Combobox, { grow: true, width: "49%", children: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { field: toField, onChange: (value) => handleToChange(value) }) }),
+  return /* @__PURE__ */ jsxRuntime.jsx(NestedLevel.NestedLevel, { level: field.level + 1, children: /* @__PURE__ */ jsxRuntime.jsxs(Row.Row, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { type: "combobox", span: "grow", children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { field: fromField, onChange: (value) => handleFromChange(value) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { type: "icon", icon: svgIconType.SvgIconType.ValueMapping }),
+    /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { type: "combobox", span: "grow", children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { field: toField, onChange: (value) => handleToChange(value) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(FieldDelete.FieldDelete, { onClick: onDelete })
   ] }) });
 }

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/data-builder-context.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/data-field.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/field-context.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/hooks.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 

package/dist/cjs/components/DataBuilderUI/ActionBar.cjs

@@ -0,0 +1,93 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.22.1
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var svgIconType = require('../SvgIcon/svg-icon-type.cjs');
+var useEventStopPropagation = require('../../helpers/hooks/useEventStopPropagation.cjs');
+require('../../styled-system/css/css.cjs');
+require('../../styled-system/helpers.cjs');
+var sva = require('../../styled-system/css/sva.cjs');
+var index$1 = require('../SvgIcon/index.cjs');
+var index = require('../Tooltip/index.cjs');
+
+const dataBuilderActionBarRecipe = sva.sva({
+  className: "data-builder-action-bar",
+  slots: ["root", "button"],
+  base: {
+    root: {
+      display: "flex",
+      flexDir: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "1",
+      w: "5",
+      ml: "-0.5",
+      mr: "-2.5"
+    },
+    button: {
+      display: "flex",
+      flexShrink: "0",
+      flexGrow: "0",
+      justifyContent: "center",
+      alignItems: "center",
+      w: "5",
+      h: "5",
+      border: "1px",
+      borderStyle: "solid",
+      borderColor: "gray.6",
+      bg: "slate.2",
+      color: "slate.10",
+      _hover: {
+        bg: "slate.4"
+      },
+      "& > svg": {
+        w: "3",
+        h: "3",
+        strokeWidth: "2"
+      }
+    }
+  }
+});
+const ActionBarRoot = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const styles = dataBuilderActionBarRecipe();
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(styles.root, className), ...props, ref, children });
+  }
+);
+ActionBarRoot.displayName = "ActionBarRoot";
+const ActionBarDeleteButton = React.forwardRef(
+  ({ className, onClick, ...props }, ref) => {
+    const styles = dataBuilderActionBarRecipe();
+    const handleOnClick = useEventStopPropagation.default(
+      (e) => onClick?.(e)
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { tooltip: "Delete", className: styles.root, usePortal: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: clsx.clsx(styles["button"], className),
+        onClick: handleOnClick,
+        "aria-label": "Delete",
+        ...props,
+        ref,
+        children: /* @__PURE__ */ jsxRuntime.jsx(index$1.SvgIcon, { type: svgIconType.SvgIconType.Close })
+      }
+    ) });
+  }
+);
+ActionBarDeleteButton.displayName = "ActionBarDeleteButton";
+const ActionBar = Object.assign(ActionBarRoot, {
+  DeleteButton: ActionBarDeleteButton
+});
+
+exports.ActionBar = ActionBar;
+exports.dataBuilderActionBarRecipe = dataBuilderActionBarRecipe;