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

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

@@ -0,0 +1,116 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var sdk = require('@integration-app/sdk');
+var index = require('../../Formula/index.cjs');
+var index$1 = require('../../SvgIcon/index.cjs');
+var dataField = require('../data-field.cjs');
+var Field = require('../Field.cjs');
+var fieldContext = require('../field-context.cjs');
+
+const IterateFormula = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(index.Formula, { ref, onClick: props.onClick, children: /* @__PURE__ */ jsxRuntime.jsxs(index.Variable, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.VariableSvgIcon, { type: index$1.SvgIconType.Function }),
+      " Iterate over"
+    ] }) });
+  }
+);
+IterateFormula.displayName = "IterateFormula";
+function IteratedFormulaDropdown({
+  onChange,
+  formula
+}) {
+  const { field } = fieldContext.default();
+  const fieldWithFormulaValues = dataField.makeSubField(field, {
+    value: {
+      $iterate: {
+        source: formula.args?.source,
+        item: formula.args?.item
+      }
+    }
+  });
+  function handleSourceChange(newValue) {
+    onChange?.({
+      $iterate: {
+        ...formula.args ?? {},
+        source: newValue
+      }
+    });
+  }
+  function handleItemChange(newItem) {
+    onChange?.({
+      $iterate: {
+        ...formula.args ?? {},
+        item: newItem
+      }
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      IteratedFormulaNestedSource,
+      {
+        field: fieldWithFormulaValues,
+        onChange: handleSourceChange
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      IteratedFormulaNestedItem,
+      {
+        field: fieldWithFormulaValues,
+        onChange: handleItemChange
+      }
+    )
+  ] });
+}
+function IteratedFormulaNestedSource({ field, onChange }) {
+  const sourceSchema = getIteratedFormulaSourceSchema(field);
+  const itemField = dataField.makeSubField(field, {
+    isInSchema: true,
+    valueLocator: `${field.valueLocator}.$iterate.source`,
+    value: field.value?.$iterate?.source,
+    schema: sdk.schemaWithTitle(sourceSchema, "Source"),
+    level: 1
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(Field.default, { field: itemField, onChange });
+}
+function IteratedFormulaNestedItem({ field, onChange }) {
+  const item = field.value?.$iterate?.item;
+  const sourceSchema = getIteratedFormulaSourceSchema(field);
+  const itemsSchema = field.schema?.items ?? {};
+  const itemField = dataField.makeSubField(field, {
+    isInSchema: true,
+    valueLocator: `${field.valueLocator}.$iterate.item`,
+    value: item,
+    schema: sdk.schemaWithTitle(itemsSchema, "Item"),
+    level: 1,
+    variablesSchema: {
+      type: "object",
+      properties: {
+        item: sourceSchema?.items,
+        index: { type: "number" },
+        parent: field.variablesSchema
+      }
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(Field.default, { field: itemField, onChange });
+}
+function getIteratedFormulaSourceSchema(field) {
+  return sdk.buildDataSchema(field.value?.$iterate?.source, field.variablesSchema) ?? {
+    type: "array"
+  };
+}
+
+exports.IteratedFormulaDropdown = IteratedFormulaDropdown;
+exports.default = IterateFormula;

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

@@ -0,0 +1,49 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../../Formula/index.cjs');
+var index$1 = require('../../SvgIcon/index.cjs');
+var Form = require('../Form.cjs');
+var index$2 = require('../index.cjs');
+
+const JsonataFormulaTag = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(index.Formula, { ref, onClick: props.onClick, children: /* @__PURE__ */ jsxRuntime.jsxs(index.Variable, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.VariableSvgIcon, { type: index$1.SvgIconType.Function }),
+      " Jsonata"
+    ] }) });
+  }
+);
+JsonataFormulaTag.displayName = "JsonataFormulaTag";
+function JsonataFormulaDropdown(props) {
+  const { onChange, variablesSchema, optionFactories, formula } = props;
+  function handleVariableChange(value) {
+    onChange?.({
+      $jsonata: value
+    });
+  }
+  const field = index$2.makeDataField({
+    schema: {
+      title: "Jsonata",
+      type: "string"
+    },
+    value: formula.expression,
+    variablesSchema,
+    optionFactories
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(Form.DataBuilderForm, { field, onChange: handleVariableChange });
+}
+
+exports.JsonataFormulaDropdown = JsonataFormulaDropdown;
+exports.default = JsonataFormulaTag;

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

@@ -0,0 +1,50 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../../Formula/index.cjs');
+var index$1 = require('../../SvgIcon/index.cjs');
+var React = require('react');
+var Form = require('../Form.cjs');
+var index$2 = require('../index.cjs');
+
+const LastNameFormula = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(index.Formula, { ref, onClick: props.onClick, children: /* @__PURE__ */ jsxRuntime.jsxs(index.Variable, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.VariableSvgIcon, { type: index$1.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$2.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,30 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var ComboBoxTag = require('../../ComboBoxElements/ComboBoxTag.cjs');
+var index = require('../../Tag/index.cjs');
+var index$2 = require('../../Truncate/index.cjs');
+var index$1 = require('../../SvgIcon/index.cjs');
+
+const LookupFormula = React.forwardRef((props, ref) => {
+  const { formula } = props;
+  const isConfigError = Object.entries(formula.value?.query ?? {}).length === 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(ComboBoxTag.ComboBoxTag, { ref, variant: "lookup", children: [
+    isConfigError && /* @__PURE__ */ jsxRuntime.jsx(index.Tag.SvgIcon, { type: index$1.SvgIconType.AlertTriangle }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$2.Truncate, { children: "Select Dynamically Using Variables" })
+  ] });
+});
+LookupFormula.displayName = "LookupFormula";
+
+exports.default = LookupFormula;

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

@@ -0,0 +1,74 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../../Formula/index.cjs');
+var index$1 = require('../../SvgIcon/index.cjs');
+var fieldContext = require('../field-context.cjs');
+var ValueMapping = require('../Nested/ValueMapping.cjs');
+var Form = require('../Form.cjs');
+var index$2 = require('../index.cjs');
+
+const MapFormula = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(index.Formula, { ref, onClick: props.onClick, children: /* @__PURE__ */ jsxRuntime.jsxs(index.Variable, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.VariableSvgIcon, { type: index$1.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$2.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,89 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var sdk = require('@integration-app/sdk');
+var index = require('../../Formula/index.cjs');
+var index$1 = require('../../SvgIcon/index.cjs');
+var index$2 = require('../../DataBuilderUI/index.cjs');
+var Field = require('../Field.cjs');
+var fieldContext = require('../field-context.cjs');
+var index$3 = require('../Nested/FieldControlPanel/index.cjs');
+var dataField = require('../data-field.cjs');
+
+const MergeObjectsFormula = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(index.Formula, { ref, onClick: props.onClick, children: /* @__PURE__ */ jsxRuntime.jsxs(index.Variable, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.VariableSvgIcon, { type: index$1.SvgIconType.Function }),
+      " Merge objects"
+    ] }) });
+  }
+);
+MergeObjectsFormula.displayName = "MergeObjectsFormula";
+function MergeObjectsDropdown({
+  onChange,
+  formula
+}) {
+  const { field } = fieldContext.default();
+  const renderedField = {
+    ...field,
+    value: {
+      $mergeObjects: formula.args
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(MergeObjectsNested, { field: renderedField, onChange });
+}
+function MergeObjectsNested({ field, onChange }) {
+  const values = field.value?.$mergeObjects ?? [];
+  function handleChangeValue(index, value) {
+    const newValues = [...values];
+    newValues[index] = value;
+    onChange?.({ $mergeObjects: newValues });
+  }
+  function handleDeleteValue(index) {
+    const newValues = [...values];
+    newValues.splice(index, 1);
+    onChange?.({ $mergeObjects: newValues });
+  }
+  function handleAddValue() {
+    const newValues = [...values];
+    newValues.push(null);
+    onChange?.({ $mergeObjects: newValues });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(index$2.DrilldownBlockContentWrapper, { children: [
+    values.map((value, index) => {
+      const subField = dataField.makeSubField(field, {
+        schema: sdk.schemaWithTitle(field?.schema, "") ?? {
+          type: "object",
+          additionalProperties: true
+        },
+        valueLocator: `${field.valueLocator}.$mergeObjects.${index}`,
+        value,
+        isDeletable: true
+      });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Field.default,
+        {
+          field: subField,
+          onDelete: () => handleDeleteValue(index),
+          onChange: (value2) => handleChangeValue(index, value2)
+        },
+        index
+      );
+    }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.DataBuilderFieldControlPanel, { field, onAdd: handleAddValue })
+  ] });
+}
+
+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/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'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/options-factory.cjs

@@ -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';
+
+'use strict';
+
+var base = require('../../ComboBox/options-factories/base.cjs');
+var valueSpec = require('../../ComboBox/value-spec.cjs');
+require('../../SvgIcon/index.cjs');
+var index = require('./index.cjs');
+
+class FormulaListOptionsFactory {
+  async getOptions({ input, spec }) {
+    const formulaTypes = getFormulaTypesForSpec(spec);
+    const options = [];
+    for (const type of formulaTypes) {
+      const formulaSpec = index.getFormulas()[type];
+      options.push({
+        label: formulaSpec.name,
+        value: {
+          [`$${type}`]: null
+        }
+      });
+    }
+    const filteredOptions = base.filterOptionsByLabel(options, input);
+    return filteredOptions;
+  }
+}
+function getFormulaTypesForSpec(spec) {
+  const result = [];
+  for (const [formulaType, formulaSpec] of Object.entries(index.getFormulas())) {
+    if (!formulaSpec.appliesToSpec) {
+      continue;
+    }
+    if (!spec?.type || spec.type === valueSpec.ValueType.ANY || formulaSpec.appliesToSpec(spec)) {
+      result.push(formulaType);
+    }
+  }
+  return result;
+}
+
+exports.FormulaListOptionsFactory = FormulaListOptionsFactory;

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

@@ -0,0 +1,36 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var ComboBoxTag = require('../../ComboBoxElements/ComboBoxTag.cjs');
+var index = require('../../Truncate/index.cjs');
+var styles_module = require('./styles.module.css.cjs');
+
+const RecordFormula = React.forwardRef(
+  (props, ref) => {
+    const { formula } = props;
+    const name = formula.record.name ?? formula.record?.id;
+    return /* @__PURE__ */ jsxRuntime.jsx(ComboBoxTag.ComboBoxTag, { ref, disabled: props.disabled, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: clsx(styles_module.default.valueRef, styles_module.default.valueRefFlex),
+        title: name,
+        children: /* @__PURE__ */ jsxRuntime.jsx(index.Truncate, { children: name })
+      }
+    ) });
+  }
+);
+RecordFormula.displayName = "RecordFormula";
+
+exports.default = RecordFormula;

package/dist/cjs/components/DataBuilder/Formula/styles.module.css.cjs

@@ -0,0 +1,18 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleInject = require('style-inject');
+
+var css_248z = ".styles-module_valueRef__ZFG-S {\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap\n}\n.styles-module_valueRef__ZFG-S img,\n.styles-module_valueRef__ZFG-S svg {\n  display: inline-block;\n  vertical-align: middle;\n  margin-top: -0.1rem;\n  max-height: 1rem\n}\n.styles-module_valueRef__ZFG-S img {\n  margin-right: -0.125rem\n}\n.styles-module_valueRefFlex__G5lJH {\n  display: inline-flex;\n  justify-content: center\n}\n.styles-module_name__VBTS9 {\n  white-space: nowrap\n}\n.styles-module_valueRefTruncate__Nh-Hg {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center\n}\n.styles-module_truncatedSegment__w48mz {\n  display: inline-block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap\n}\n.styles-module_visibleSegment__--BWS {\n  flex-shrink: 0;\n  flex-grow: 0\n}\n.styles-module_tagIcon__uOapU {\n  margin-right: 0.25rem;\n  display: inline-block;\n  height: 1rem;\n  width: 1rem\n}\n.styles-module_caseContainer__rb67a {\n  margin-top: 0.5rem\n}\n.styles-module_caseContainer__rb67a .styles-module_field__lJDbN {\n  position: relative\n}\n.styles-module_caseContainer__rb67a .styles-module_field__lJDbN .styles-module_deleteButton__qo19I {\n  position: absolute;\n  top: 50%;\n  right: 0px;\n  margin-top: -0.625rem\n}\n";
+var classes = {"valueRef":"styles-module_valueRef__ZFG-S","valueRefFlex":"styles-module_valueRefFlex__G5lJH","name":"styles-module_name__VBTS9","valueRefTruncate":"styles-module_valueRefTruncate__Nh-Hg","truncatedSegment":"styles-module_truncatedSegment__w48mz","visibleSegment":"styles-module_visibleSegment__--BWS","tagIcon":"styles-module_tagIcon__uOapU","caseContainer":"styles-module_caseContainer__rb67a","field":"styles-module_field__lJDbN","deleteButton":"styles-module_deleteButton__qo19I"};
+styleInject(css_248z);
+
+exports.default = classes;

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

@@ -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';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var EditorStandAlone = require('../../ComboBoxElements/TipTapEditor/EditorStandAlone.cjs');
+
+const TplFormula = React.forwardRef(
+  (props, ref) => {
+    const {
+      formula,
+      schema: _,
+      variablesSchema: __,
+      optionFactories: ___,
+      ...editorProps
+    } = props;
+    const value = {
+      $tpl: {
+        template: formula.args.template,
+        values: formula.args.values
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(EditorStandAlone.StandAloneEditor, { ref, value, ...editorProps });
+  }
+);
+TplFormula.displayName = "TplFormula";
+
+exports.default = TplFormula;

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

@@ -0,0 +1,92 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var sdk = require('@integration-app/sdk');
+var ComboBoxTag = require('../../ComboBoxElements/ComboBoxTag.cjs');
+var index = require('../../Tag/index.cjs');
+var SegmentSeparator = require('../../Tag/SegmentSeparator.cjs');
+var styles_module = require('./styles.module.css.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 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(index.Tag.Image, { src: iconUri }));
+    }
+    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
+      }
+    ) });
+  }
+);
+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(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;