@membranehq/react 0.1.0

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

@@ -0,0 +1,13 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { createCommand } from 'lexical';
+
+const INSERT_EDITOR_TAG_COMMAND = createCommand();
+
+export { INSERT_EDITOR_TAG_COMMAND };

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

@@ -0,0 +1,45 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getRoot } from 'lexical';
+import { INSERT_EDITOR_TAG_COMMAND } from './plugins/commands.mjs';
+
+const $getEditorNodesSummary = () => {
+  const children = $getRoot().getChildren();
+  const rootParagraph = children[0];
+  return {
+    textNodes: rootParagraph.getAllTextNodes().length,
+    otherNodes: rootParagraph.getChildrenSize() - rootParagraph.getAllTextNodes().length
+  };
+};
+const useEditor = () => {
+  const [editor] = useLexicalComposerContext();
+  function pasteTag({
+    value,
+    autoOpen,
+    allowEditorSearchClear = false
+  }) {
+    if (allowEditorSearchClear) {
+      editor.update(() => {
+        const { otherNodes } = $getEditorNodesSummary();
+        if (otherNodes === 0) {
+          $getRoot().clear();
+        }
+      });
+    }
+    editor.dispatchCommand(INSERT_EDITOR_TAG_COMMAND, {
+      id: (/* @__PURE__ */ new Date()).getTime().toString(),
+      value,
+      autoOpen
+    });
+  }
+  return { editor, pasteTag };
+};
+
+export { useEditor };

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

@@ -0,0 +1,186 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { getFormula, DataBuilderFormulaType, Formula } from '@membranehq/sdk';
+import { css } from '../../../styled-system/css/css.mjs';
+import '../../../styled-system/helpers.mjs';
+import { ComboBox } from '../../ComboBox/ComboBox.mjs';
+import '../../DataBuilderUI/FieldControlPanel/index.mjs';
+import '../../DataBuilderUI/ActionBar.mjs';
+import { Cell } from '../../DataBuilderUI/Cell.mjs';
+import { NestedLevel } from '../../DataBuilderUI/NestedLevel.mjs';
+import { Row } from '../../DataBuilderUI/Row.mjs';
+import '../../DataBuilderUI/Title.mjs';
+import { makeSubField } from '../data-field.mjs';
+import { DataBuilderFieldProvider } from '../field-context.mjs';
+import { FieldDelete } from '../FieldDelete.mjs';
+import DataBuilderFormFieldValue from '../FieldValue/index.mjs';
+import { DataBuilderFieldControlPanel } from '../Nested/FieldControlPanel/index.mjs';
+
+function DataBuilderCondition({
+  field,
+  onChange,
+  onDelete,
+  isNested
+}) {
+  const formula = getFormula(field.value);
+  switch (formula?.type) {
+    case DataBuilderFormulaType.AND:
+      return /* @__PURE__ */ jsx(And, { field, onChange });
+    case DataBuilderFormulaType.EVAL:
+    default:
+      return /* @__PURE__ */ jsx(EvalCondition, { field, onChange, onDelete, isNested });
+  }
+}
+function And({ field, onChange }) {
+  const formula = getFormula(field.value);
+  let conditions = formula?.args;
+  if (!conditions || !Array.isArray(conditions) || conditions.length === 0) {
+    conditions = [null];
+  }
+  function getConditionField(idx) {
+    const value = conditions[idx];
+    return makeSubField(field, {
+      value,
+      valueLocator: `${field.valueLocator}.$and[${idx}]`,
+      // Temporary: remove this when we implement the new conditions UI
+      level: field.level
+    });
+  }
+  function handleConditionChange(idx, value) {
+    const newConditions = [...conditions];
+    newConditions[idx] = value;
+    onChange({
+      $and: newConditions
+    });
+  }
+  function handleAddCondition() {
+    onChange({
+      $and: [...conditions, null]
+    });
+  }
+  function handleDeleteCondition(idx) {
+    const newConditions = [...conditions];
+    newConditions.splice(idx, 1);
+    onChange({
+      $and: newConditions
+    });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    conditions.map((_condition, idx) => /* @__PURE__ */ jsx(
+      DataBuilderCondition,
+      {
+        field: getConditionField(idx),
+        onChange: (value) => handleConditionChange(idx, value),
+        onDelete: () => handleDeleteCondition(idx),
+        isNested: true
+      },
+      idx
+    )),
+    /* @__PURE__ */ jsx(DataBuilderFieldControlPanel, { field, onAdd: handleAddCondition })
+  ] });
+}
+function EvalCondition({
+  field,
+  onChange,
+  onDelete,
+  isNested
+}) {
+  const formula = getFormula(field.value);
+  let value;
+  let operator;
+  let operatorOptions = [];
+  let operand;
+  if (formula instanceof Formula.Eval) {
+    value = formula.value;
+    operator = formula.getOperator(field.variablesSchema);
+    operand = formula.operand;
+    operatorOptions = formula.getAvailableOperators(field.variablesSchema).map((op) => ({
+      label: op.name,
+      value: op.key
+    }));
+  }
+  const valueField = makeSubField(field, {
+    value,
+    valueLocator: `${field.valueLocator}.$eval`
+  });
+  const operandField = makeSubField(field, {
+    value: operand,
+    /* FIXME: strictNullCheck temporary fix */
+    // @ts-expect-error TS(2454): Variable 'operator' is used before being assigned.
+    valueLocator: `${field.valueLocator}.${operator?.key}`,
+    /* FIXME: strictNullCheck temporary fix */
+    // @ts-expect-error TS(2454): Variable 'operator' is used before being assigned.
+    schema: operator?.operandSchema
+  });
+  function handleValueChange(value2) {
+    onChange({
+      ...formula?.toObject() ?? {},
+      $eval: value2
+    });
+  }
+  function handleOperatorChange(operatorKey) {
+    const newValue = {
+      $eval: value
+    };
+    if (operatorKey) {
+      newValue[operatorKey] = operand ?? null;
+    }
+    onChange(newValue);
+  }
+  function handleOperandChange(operand2) {
+    onChange({
+      $eval: value,
+      [operator.key]: operand2
+    });
+  }
+  function handleTransformToAnd() {
+    onChange({
+      $and: [field.value, null]
+    });
+  }
+  const hasOperand = operator && operator.hasOperand;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(NestedLevel, { level: field.level, children: /* @__PURE__ */ jsxs(Row, { children: [
+      /* @__PURE__ */ jsx(Cell, { type: "combobox", className: css({ maxW: "2/6", flexGrow: "3" }), children: /* @__PURE__ */ jsx(DataBuilderFieldProvider, { field: valueField, children: /* @__PURE__ */ jsx(
+        ComboBox,
+        {
+          placeholder: "Value",
+          value: valueField.value,
+          onChange: handleValueChange,
+          variablesSchema: valueField.variablesSchema,
+          optionFactories: valueField.optionFactories,
+          schema: void 0
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(
+        Cell,
+        {
+          type: "combobox",
+          disabled: !value,
+          "data-formula": "condition",
+          className: css({ minW: "10", flexGrow: "2", pt: "1px" }),
+          children: value && /* @__PURE__ */ jsx(
+            ComboBox,
+            {
+              value: operator?.key,
+              options: operatorOptions,
+              onChange: handleOperatorChange
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(Cell, { type: "combobox", disabled: !hasOperand, className: css({ maxW: "3/6", flexGrow: "4" }), children: hasOperand && /* @__PURE__ */ jsx(DataBuilderFieldProvider, { field: operandField, children: /* @__PURE__ */ jsx(DataBuilderFormFieldValue, { field: operandField, onChange: handleOperandChange, allowScalarArray: true }) }) }),
+      onDelete && /* @__PURE__ */ jsx(FieldDelete, { onClick: onDelete })
+    ] }) }),
+    !isNested && /* @__PURE__ */ jsx(DataBuilderFieldControlPanel, { field, onAdd: handleTransformToAnd })
+  ] });
+}
+
+export { DataBuilderCondition as default };

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

@@ -0,0 +1,122 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { isFormula } from '@membranehq/sdk';
+import { isDefinedValue } from '../ComboBox/Badges/isDefinedValue.mjs';
+import '../DataBuilderUI/FieldControlPanel/index.mjs';
+import '../DataBuilderUI/ActionBar.mjs';
+import { Cell } from '../DataBuilderUI/Cell.mjs';
+import { NestedLevel } from '../DataBuilderUI/NestedLevel.mjs';
+import { Row } from '../DataBuilderUI/Row.mjs';
+import '../DataBuilderUI/Title.mjs';
+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/index.mjs';
+import { FieldTypeSelector } from './FieldTypeSelector/index.mjs';
+import { convertableSchemaToSchema } from './FieldTypeSelector/convertableSchemaToSchema.mjs';
+import DataBuilderFormFieldValue from './FieldValue/index.mjs';
+import { usIsFieldFrozen } from './hooks.mjs';
+import DataBuilderFormNested from './Nested.mjs';
+
+function DataBuilderFormField({ field, onChange, onKeyChange, onDelete, onEnter }) {
+  const { hideReadOnlyFields } = useDataBuilder();
+  if (field.schema?.readOnly && hideReadOnlyFields) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(DataBuilderFieldProvider, { field, children: /* @__PURE__ */ jsx(DataBuilderFieldContent, { onChange, onKeyChange, onDelete, onEnter }) });
+}
+function DataBuilderFieldContent({ onChange, onKeyChange, onDelete, onEnter }) {
+  const { isReadOnly } = useDataBuilder();
+  const isFieldFrozen = usIsFieldFrozen();
+  const {
+    field,
+    localSchema,
+    setLocalSchema,
+    resetLocalSchema,
+    localSchemaChangedManually,
+    setLocalSchemaChangedManually,
+    autoOpen,
+    setAutoOpen
+  } = useDataBuilderField();
+  useEffect(() => {
+    if (!localSchemaChangedManually) {
+      resetLocalSchema();
+    }
+  }, [JSON.stringify(field?.schema)]);
+  function handleChange(value) {
+    onChange?.(value);
+  }
+  function handleKeyChange(newKey) {
+    onKeyChange?.(newKey);
+  }
+  function handleEnterKey(value) {
+    if (value && onEnter) {
+      onEnter?.();
+    }
+  }
+  function handleEscKey(value) {
+    if (!value && onDelete) {
+      onDelete?.();
+    }
+  }
+  function handleLocalSchemaTypeChange(schemaType) {
+    const showValueDropdown = !(schemaType === "object" || schemaType === "array");
+    const resetValue = !convertableSchemaToSchema(localSchema?.type, schemaType);
+    setLocalSchemaChangedManually(true);
+    setLocalSchema({ ...localSchema, type: schemaType });
+    if (resetValue) {
+      onChange?.("");
+    }
+    setAutoOpen(showValueDropdown);
+  }
+  let showValue = true;
+  const fieldIsObjectOrArray = ["object", "array"].includes(localSchema?.type);
+  const fieldHasCustomValue = !isFormula(field?.value);
+  if (fieldIsObjectOrArray && fieldHasCustomValue && !autoOpen) {
+    showValue = false;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(NestedLevel, { level: field.level, children: isFieldVisible(field) && /* @__PURE__ */ jsxs(Row, { span: !showValue ? "short" : "default", children: [
+      (isDefinedValue(field.key) || field.schema?.title) && /* @__PURE__ */ jsx(Cell, { type: "name", children: /* @__PURE__ */ jsx(
+        FieldName,
+        {
+          field,
+          onKeyChange: handleKeyChange,
+          onEnter: handleEnterKey,
+          onEsc: handleEscKey,
+          typeSelectorSlot: /* @__PURE__ */ jsx(FieldTypeSelector, { onChange: handleChange, onSchemaChange: handleLocalSchemaTypeChange })
+        }
+      ) }),
+      showValue && /* @__PURE__ */ jsx(Cell, { type: "combobox", span: "grow", children: /* @__PURE__ */ jsx(FieldDataInput, { onChange: handleChange }) }),
+      field.isDeletable && !isReadOnly && !isFieldFrozen && /* @__PURE__ */ jsx(FieldDelete, { onClick: onDelete })
+    ] }) }),
+    /* @__PURE__ */ jsx(DataBuilderFormNested, { field, onChange: handleChange })
+  ] });
+}
+function FieldDataInput({ onChange }) {
+  const { field, localSchema, setLocalSchemaChangedManually } = useDataBuilderField();
+  function handleChange(value) {
+    setLocalSchemaChangedManually(false);
+    onChange(value);
+  }
+  const fieldWithDefinedSchema = !field.schema?.type ? {
+    ...field,
+    schema: {
+      ...field.schema,
+      ...localSchema,
+      anyOf: void 0
+    }
+  } : field;
+  return /* @__PURE__ */ jsx(DataBuilderFormFieldValue, { field: fieldWithDefinedSchema, onChange: handleChange });
+}
+
+export { DataBuilderFormField };

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

@@ -0,0 +1,29 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { SvgIconType } from '../SvgIcon/svg-icon-type.mjs';
+import { Tooltip } from '../Tooltip/index.mjs';
+import useEventStopPropagation from '../../helpers/hooks/useEventStopPropagation.mjs';
+import '../DataBuilderUI/FieldControlPanel/index.mjs';
+import '../DataBuilderUI/ActionBar.mjs';
+import { CellButton } from '../DataBuilderUI/Cell.mjs';
+import 'clsx';
+import '../DataBuilderUI/styles.module.css.mjs';
+import '../DataBuilderUI/Row.mjs';
+import '../DataBuilderUI/Title.mjs';
+
+function FieldDelete({ onClick }) {
+  const handleClick = useEventStopPropagation(onClick);
+  if (!onClick) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Tooltip, { tooltip: "Delete", usePortal: true, children: /* @__PURE__ */ jsx(CellButton, { type: "icon", icon: SvgIconType.Close, onClick: handleClick, "aria-label": "Delete" }) });
+}
+
+export { FieldDelete };

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

@@ -0,0 +1,37 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { Text } from '../../ui-kit/styled/text.mjs';
+import { Tooltip } from '../Tooltip/index.mjs';
+
+function FieldDescription({ text }) {
+  if (!text) return null;
+  return /* @__PURE__ */ jsx(Tooltip, { tooltip: text, offset: [0, 4], placement: "bottom-start", usePortal: true, children: /* @__PURE__ */ jsx(
+    Text,
+    {
+      as: "span",
+      display: "inline-block",
+      px: "1",
+      ml: "2",
+      cursor: "help",
+      bg: "neutral.2",
+      rounded: "xs",
+      color: "neutral.11",
+      textAlign: "center",
+      lineHeight: "1.2",
+      minW: "5",
+      _hover: {
+        bg: "neutral.3"
+      },
+      children: "?"
+    }
+  ) });
+}
+
+export { FieldDescription };

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

@@ -0,0 +1,44 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { DataBuilderForm } from './Form.mjs';
+import { makeDataField } from './index.mjs';
+
+function FieldList({
+  schema,
+  value,
+  variablesSchema,
+  isAdminMode,
+  frozenFieldsLocators = [],
+  onChange,
+  collapsed,
+  hideReadOnlyFields
+}) {
+  if (schema?.type !== "object") {
+    return /* @__PURE__ */ jsx("span", { children: "Something went wrong. Trying to display a field list for schema that is not an object." });
+  }
+  const field = makeDataField({
+    schema,
+    value,
+    variablesSchema
+  });
+  return /* @__PURE__ */ jsx(
+    DataBuilderForm,
+    {
+      field,
+      onChange,
+      isAdminMode,
+      frozenFieldsLocators,
+      collapsed,
+      hideReadOnlyFields
+    }
+  );
+}
+
+export { FieldList };

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

@@ -0,0 +1,133 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'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/index.mjs

@@ -0,0 +1,87 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { FieldNameInput } from './FieldNameInput.mjs';
+import '../../DataBuilderUI/FieldControlPanel/index.mjs';
+import '../../DataBuilderUI/ActionBar.mjs';
+import '../../DataBuilderUI/Cell.mjs';
+import 'clsx';
+import '../../DataBuilderUI/styles.module.css.mjs';
+import '../../DataBuilderUI/Row.mjs';
+import { Title } from '../../DataBuilderUI/Title.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,
+  onKeyChange,
+  onEnter,
+  onEsc,
+  rightSlot,
+  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(
+      Title,
+      {
+        required: field.isRequired,
+        hasValue: !!field.value || field.value === false,
+        hasError: !!isErrorField,
+        typeSelectorSlot,
+        rightSlot: rightSlot || /* @__PURE__ */ jsx(FieldDescription, { text: field.schema?.description }),
+        children: fieldLabel(field)
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsx(
+      Title,
+      {
+        typeSelectorSlot,
+        rightSlot: rightSlot || /* @__PURE__ */ jsx(FieldDescription, { text: field.schema?.description }),
+        hasNameConflict: conflictedPropertiesKey.has(field.key),
+        children: /* @__PURE__ */ jsx(
+          FieldNameInput,
+          {
+            onChange,
+            onEnter,
+            onEsc,
+            autoFocus: !field.key,
+            value,
+            onBlur: () => {
+              onChange(field.key || "");
+            },
+            placeholder: "Enter field name"
+          }
+        )
+      }
+    );
+  }
+}
+const useControlledInputValue = (value, onChange) => {
+  const [inputValue, setInputValue] = useState(value);
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+  return {
+    value: inputValue,
+    onChange: (value2) => {
+      setInputValue(value2);
+      onChange(value2);
+    }
+  };
+};
+
+export { FieldName };