npm - @integration-app/react - Versions diffs - 2.15.0 → 2.16.1 - Mend

@integration-app/react 2.15.0 → 2.16.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (642) hide show

package/dist/esm/components/ComboBoxElements/Editor/helpers/tag-template-composition.mjs CHANGED Viewed

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

package/dist/esm/components/ComboBoxElements/Editor/helpers/transformEditorSchemaToValue.mjs CHANGED Viewed

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

package/dist/esm/components/ComboBoxElements/Editor/helpers/transformValueToEditorSchema.mjs CHANGED Viewed

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

package/dist/esm/components/ComboBoxElements/Editor/nodes/EditorTagNode.mjs CHANGED Viewed

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

package/dist/esm/components/ComboBoxElements/Editor/plugins/ConfigPlugin.mjs CHANGED Viewed

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

package/dist/esm/components/ComboBoxElements/Editor/plugins/EditorTagPlugin.mjs CHANGED Viewed

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

package/dist/esm/components/ComboBoxElements/Editor/plugins/KeyboardPlugin.mjs CHANGED Viewed

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

package/dist/esm/components/ComboBoxElements/Editor/plugins/StateSyncPlugin.mjs CHANGED Viewed

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

package/dist/esm/components/ComboBoxElements/Editor/plugins/commands.mjs CHANGED Viewed

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

package/dist/esm/components/ComboBoxElements/Editor/useEditor.mjs CHANGED Viewed

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

package/dist/esm/components/ComboBoxElements/FieldWrapper.mjs CHANGED Viewed

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

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

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

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

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

package/dist/esm/components/DataBuilder/{Field.mjs → DataBuilderFormField.mjs} RENAMED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.15.0
+ * v2.16.1
  */
 'use client';
@@ -15,7 +15,7 @@ import useDataBuilder from './data-builder-context.mjs';
 import { isFieldVisible } from './data-field.mjs';
 import useDataBuilderField, { DataBuilderFieldProvider } from './field-context.mjs';
 import { FieldDelete } from './FieldDelete.mjs';
-import FieldName from './FieldName.mjs';
+import { FieldName } from './FieldName/index.mjs';
 import { FieldTypeSelector } from './FieldTypeSelector/index.mjs';
 import { convertableSchemaToSchema } from './FieldTypeSelector/convertableSchemaToSchema.mjs';
 import DataBuilderFormFieldValue from './FieldValue/index.mjs';
@@ -66,7 +66,7 @@ function DataBuilderFieldContent({
       resetLocalSchema();
     }
   }, [JSON.stringify(field?.schema)]);
-  async function handleChange(value) {
+  function handleChange(value) {
     onChange?.(value);
   }
   function handleKeyChange(newKey) {
@@ -143,4 +143,4 @@ function FieldDataInput({
   return /* @__PURE__ */ jsx(DataBuilderFormFieldValue, { field: fieldWithDefinedSchema, onChange: handleChange });
 }
-export { DataBuilderFormField as default };
+export { DataBuilderFormField };

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

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

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

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

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

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

package/dist/esm/components/DataBuilder/FieldName/FieldNameInput.mjs ADDED Viewed

@@ -0,0 +1,133 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.16.1
+ */
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { clsx } from 'clsx';
+import '../../../styled-system/css/css.mjs';
+import '../../../styled-system/helpers.mjs';
+import { sva } from '../../../styled-system/css/sva.mjs';
+const fieldNameInputRecipe = sva({
+  className: "field-name-input",
+  slots: ["wrapper", "input", "span"],
+  base: {
+    wrapper: {
+      display: "inline-block",
+      cursor: "default",
+      position: "relative",
+      _hover: {
+        "& .span": {
+          visibility: "hidden"
+        },
+        "& .input": {
+          visibility: "visible"
+        }
+      }
+    },
+    span: {
+      display: "block",
+      visibility: "visible",
+      _empty: {
+        _after: {
+          color: "gray.9",
+          content: "var(--placeholder-text)"
+        }
+      }
+    },
+    input: {
+      position: "absolute",
+      inset: "0",
+      w: "full",
+      transitionProperty: "colors",
+      p: "0",
+      m: "0",
+      borderTopColor: "transparent",
+      opacity: "0",
+      _hover: {
+        opacity: "1"
+      },
+      _focus: {
+        opacity: "1",
+        outline: "none",
+        "& + .span": {
+          visibility: "hidden"
+        }
+      }
+    }
+  }
+});
+const fieldNameInputClassNames = fieldNameInputRecipe();
+function FieldNameInput({
+  value,
+  className,
+  placeholder = "Enter some text",
+  onChange = () => {
+  },
+  onEnter = () => {
+  },
+  onEsc = () => {
+  },
+  onFocus = () => {
+  },
+  onBlur = () => {
+  },
+  editable = true,
+  autoFocus = false,
+  ...props
+}) {
+  const handleChange = (event) => {
+    onChange(event.target.value);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.currentTarget.blur();
+      onEnter?.(value);
+      return;
+    }
+    if (event.key === "Escape") {
+      event.currentTarget.blur();
+      onEsc?.(value);
+      return;
+    }
+  };
+  const handleFocus = (event) => {
+    onFocus(event.target.value);
+  };
+  const handleBlur = (event) => {
+    onChange(event.target.value);
+    onBlur(event.target.value);
+  };
+  const style = useMemo(
+    () => ({
+      "--placeholder-text": `"${placeholder}"`
+    }),
+    [placeholder]
+  );
+  const classNames = clsx(fieldNameInputClassNames.wrapper, className);
+  return /* @__PURE__ */ jsxs("span", { className: classNames, ...props, title: value, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: fieldNameInputClassNames.input,
+        onChange: handleChange,
+        value,
+        placeholder,
+        "aria-label": placeholder,
+        readOnly: !editable,
+        autoFocus,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        onKeyDown: handleKeyDown
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: fieldNameInputClassNames.span, style, children: value?.replace(/\s/g, "\xA0") })
+  ] });
+}
+export { FieldNameInput };

package/dist/esm/components/DataBuilder/{FieldName.mjs → FieldName/index.mjs} RENAMED Viewed

@@ -2,16 +2,18 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.15.0
+ * v2.16.1
  */
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { InlineEditable } from '../InlineEditable.mjs';
-import { fieldLabel } from './data-field.mjs';
-import { Title } from '../DataBuilderUI/index.mjs';
-import useDataBuilder from './data-builder-context.mjs';
-import { FieldDescription } from './FieldDescription.mjs';
+import { useState, useEffect } from 'react';
+import { FieldNameInput } from './FieldNameInput.mjs';
+import { Title } from '../../DataBuilderUI/index.mjs';
+import useDataBuilder from '../data-builder-context.mjs';
+import { fieldLabel } from '../data-field.mjs';
+import { FieldDescription } from '../FieldDescription.mjs';
+import { useLevelKeysConflicts } from '../Nested/LevelKeysConflictProvider.mjs';
 function FieldName({
   field,
@@ -22,6 +24,11 @@ function FieldName({
   typeSelectorSlot
 }) {
   const { errorFieldsLocators } = useDataBuilder();
+  const conflictedPropertiesKey = useLevelKeysConflicts();
+  const { value, onChange } = useControlledInputValue(
+    field.key || "",
+    onKeyChange
+  );
   if (field.isInSchema || field.key === void 0) {
     const isErrorField = field?.valueLocator && (errorFieldsLocators || []).includes(field.valueLocator);
     return /* @__PURE__ */ jsx(
@@ -41,14 +48,18 @@ function FieldName({
       {
         typeSelectorSlot,
         rightSlot: rightSlot || /* @__PURE__ */ jsx(FieldDescription, { text: field.schema?.description }),
+        hasNameConflict: conflictedPropertiesKey.has(field.key),
         children: /* @__PURE__ */ jsx(
-          InlineEditable,
+          FieldNameInput,
           {
-            onChange: onKeyChange,
+            onChange,
             onEnter,
             onEsc,
             autoFocus: !field.key,
-            value: field.key,
+            value,
+            onBlur: () => {
+              onChange(field.key || "");
+            },
             placeholder: "Enter field name"
           }
         )
@@ -56,5 +67,18 @@ function FieldName({
     );
   }
 }
+const useControlledInputValue = (value, onChange) => {
+  const [inputValue, setInputValue] = useState(value);
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+  return {
+    value: inputValue,
+    onChange: (value2) => {
+      setInputValue(value2);
+      onChange(value2);
+    }
+  };
+};
-export { FieldName as default };
+export { FieldName };

package/dist/esm/components/DataBuilder/FieldTypeSelector/convertableSchemaToSchema.mjs CHANGED Viewed

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

package/dist/esm/components/DataBuilder/FieldTypeSelector/index.mjs CHANGED Viewed

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

package/dist/esm/components/DataBuilder/FieldValue/Array.mjs CHANGED Viewed

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

package/dist/esm/components/DataBuilder/FieldValue/Default.mjs CHANGED Viewed

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

package/dist/esm/components/DataBuilder/FieldValue/ScalarArray.mjs CHANGED Viewed

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

package/dist/esm/components/DataBuilder/FieldValue/ScalarArray.module.css.mjs CHANGED Viewed

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

package/dist/esm/components/DataBuilder/FieldValue/index.mjs CHANGED Viewed

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

package/dist/esm/components/DataBuilder/Filter.mjs CHANGED Viewed

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

package/dist/esm/components/DataBuilder/Form.mjs CHANGED Viewed

@@ -2,14 +2,14 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.15.0
+ * v2.16.1
  */
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import deepEqual from 'fast-deep-equal';
 import { DataBuilderProvider } from './data-builder-context.mjs';
-import DataBuilderFormField from './Field.mjs';
+import { DataBuilderFormField } from './DataBuilderFormField.mjs';
 import classes from './styles.module.css.mjs';
 function DataBuilderForm({

package/dist/esm/components/DataBuilder/Formula/case.mjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.15.0
+ * v2.16.1
  */
 'use client';
@@ -21,7 +21,7 @@ import { ActionBar } from '../../DataBuilderUI/index.mjs';
 import { Truncate } from '../../Truncate/index.mjs';
 import DataBuilderCondition from '../Condition/index.mjs';
 import { makeSubField } from '../data-field.mjs';
-import DataBuilderFormField from '../Field.mjs';
+import { DataBuilderFormField } from '../DataBuilderFormField.mjs';
 import useDataBuilderField from '../field-context.mjs';
 const addCaseRecipe = sva({
@@ -144,7 +144,13 @@ function CaseFormulaDropdown({
         children: "+ Add Case"
       }
     ),
-    /* @__PURE__ */ jsx(DataBuilderFormField, { field: defaultCaseField, onChange: handleDefaultValueChange })
+    /* @__PURE__ */ jsx(
+      DataBuilderFormField,
+      {
+        field: defaultCaseField,
+        onChange: handleDefaultValueChange
+      }
+    )
   ] });
 }
 function CaseItem({

package/dist/esm/components/DataBuilder/Formula/concat.mjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.15.0
+ * v2.16.1
  */
 'use client';
@@ -11,7 +11,7 @@ import { forwardRef } from 'react';
 import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
 import { Formula, Variable, VariableSvgIcon } from '../../Formula/index.mjs';
 import { makeDataField } from '../index.mjs';
-import DataBuilderFormField from '../Field.mjs';
+import { DataBuilderFormField } from '../DataBuilderFormField.mjs';
 const ConcatFormula = forwardRef(
   (props, ref) => {

package/dist/esm/components/DataBuilder/Formula/copy.mjs CHANGED Viewed

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

package/dist/esm/components/DataBuilder/Formula/domainFromEmail.mjs CHANGED Viewed

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

package/dist/esm/components/DataBuilder/Formula/extractDate.mjs CHANGED Viewed

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

package/dist/esm/components/DataBuilder/Formula/extractTime.mjs CHANGED Viewed

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

package/dist/esm/components/DataBuilder/Formula/findAppRecordId.mjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.15.0
+ * v2.16.1
  */
 'use client';
@@ -18,7 +18,7 @@ import useDataBuilder from '../data-builder-context.mjs';
 import useDataBuilderField from '../field-context.mjs';
 import { DataLinkTablesOptionsFactory } from '../../DataLinks/data-link-tables-option-factory.mjs';
 import { makeSubField } from '../data-field.mjs';
-import DataBuilderFormField from '../Field.mjs';
+import { DataBuilderFormField } from '../DataBuilderFormField.mjs';
 const FindAppRecordIdFormula = forwardRef(
   (_props, ref) => {
@@ -104,7 +104,13 @@ function FindAppRecordIdFormulaDropdown({
         onChange: handleDataLinkTableKeyChange
       }
     ),
-    /* @__PURE__ */ jsx(DataBuilderFormField, { field: makeRecordIdField(), onChange: handleRecordIdChange })
+    /* @__PURE__ */ jsx(
+      DataBuilderFormField,
+      {
+        field: makeRecordIdField(),
+        onChange: handleRecordIdChange
+      }
+    )
   ] });
 }

package/dist/esm/components/DataBuilder/Formula/findExternalRecordId.mjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.15.0
+ * v2.16.1
  */
 'use client';
@@ -18,7 +18,7 @@ import useDataBuilder from '../data-builder-context.mjs';
 import { makeSubField } from '../data-field.mjs';
 import useDataBuilderField from '../field-context.mjs';
 import { DataLinkTablesOptionsFactory } from '../../DataLinks/data-link-tables-option-factory.mjs';
-import DataBuilderFormField from '../Field.mjs';
+import { DataBuilderFormField } from '../DataBuilderFormField.mjs';
 const FindExternalRecordIdFormula = forwardRef(
   (_props, ref) => {
@@ -104,7 +104,13 @@ function FindExternalRecordIdFormulaDropdown({
         onChange: handleDataLinkTableKeyChange
       }
     ),
-    /* @__PURE__ */ jsx(DataBuilderFormField, { field: makeRecordIdField(), onChange: handleRecordIdChange })
+    /* @__PURE__ */ jsx(
+      DataBuilderFormField,
+      {
+        field: makeRecordIdField(),
+        onChange: handleRecordIdChange
+      }
+    )
   ] });
 }