@bigbinary/neeto-fields-frontend 2.0.0 → 2.2.0

package/dist/cjs/FieldsPane.js

@@ -0,0 +1,598 @@
+'use strict';
+
+var index = require('../index-27e54c2c.js');
+var React = require('react');
+var Pane = require('@bigbinary/neetoui/Pane');
+var ramda = require('ramda');
+var Typography = require('@bigbinary/neetoui/Typography');
+var Form = require('@bigbinary/neetoui/formik/Form');
+var reactI18next = require('react-i18next');
+var constants = require('../constants-c71008a3.js');
+var useFieldsApi = require('../useFieldsApi-14928ecf.js');
+var i18next = require('i18next');
+var neetoCist = require('@bigbinary/neeto-cist');
+var yup = require('yup');
+var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
+var uuid = require('uuid');
+var jsxRuntime = require('react/jsx-runtime');
+var formik = require('formik');
+var Label = require('@bigbinary/neetoui/Label');
+var Input = require('@bigbinary/neetoui/formik/Input');
+var Select = require('@bigbinary/neetoui/formik/Select');
+var Switch = require('@bigbinary/neetoui/formik/Switch');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+var Delete = require('@bigbinary/neeto-icons/Delete');
+var Button = require('@bigbinary/neetoui/Button');
+var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
+require('@tanstack/react-query');
+require('axios');
+require('@bigbinary/neeto-commons-frontend/utils');
+require('../query-0df5b2dd.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var Pane__default = /*#__PURE__*/_interopDefaultLegacy(Pane);
+var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
+var Form__default = /*#__PURE__*/_interopDefaultLegacy(Form);
+var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
+var ActionBlock__default = /*#__PURE__*/_interopDefaultLegacy(ActionBlock);
+var Label__default = /*#__PURE__*/_interopDefaultLegacy(Label);
+var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
+var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
+var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
+var Delete__default = /*#__PURE__*/_interopDefaultLegacy(Delete);
+var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
+
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { index._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var arrangeOptionsDisplayOrder = function arrangeOptionsDisplayOrder(options) {
+  return options.map(function (option, index) {
+    return _objectSpread$3(_objectSpread$3({}, option), {}, {
+      displayOrder: index
+    });
+  });
+};
+var buildPayload = function buildPayload(_ref) {
+  var formValues = _ref.formValues,
+    _ref$resourceType = _ref.resourceType,
+    resourceType = _ref$resourceType === void 0 ? "" : _ref$resourceType,
+    _ref$ownerId = _ref.ownerId,
+    ownerId = _ref$ownerId === void 0 ? "" : _ref$ownerId;
+  var kind = formValues.kind.value;
+  var name = formValues.name.trim();
+  return {
+    ownerId: ramda.isEmpty(ownerId) ? undefined : ownerId,
+    field: _objectSpread$3(_objectSpread$3({}, ramda.omit(["createdAt", "id", "ownerId", "ownerType", "updatedAt"], formValues)), {}, {
+      kind: kind,
+      name: name,
+      resourceType: ramda.isEmpty(resourceType) ? undefined : resourceType,
+      data: isDropdown(kind) ? arrangeOptionsDisplayOrder(formValues.data) : formValues.data
+    })
+  };
+};
+var isDropdown = function isDropdown(kind) {
+  return ["single_option", "multi_option"].includes(kind);
+};
+var isRegex = function isRegex(kind) {
+  return kind === "regex";
+};
+var isAdditionalDataNeeded = function isAdditionalDataNeeded(kind) {
+  return ADDITIONAL_DATA_NEEDED_FIELD_KINDS.includes(kind);
+};
+var getPermittedKinds = function getPermittedKinds(_ref2) {
+  var allowedKinds = _ref2.allowedKinds,
+    selectedKind = _ref2.selectedKind;
+  var filteredKinds = ramda.pick(allowedKinds, FIELD_KINDS);
+  return neetoCist.filterBy({
+    group: selectedKind === null || selectedKind === void 0 ? void 0 : selectedKind.group
+  }, ramda.values(filteredKinds));
+};
+var generateValidationSchema = function generateValidationSchema(additionalValidations) {
+  return yup__namespace.object().shape(_objectSpread$3(_objectSpread$3({}, BASIC_FIELD_FORM_VALIDATIONS), additionalValidations));
+};
+var renderFormFooter = function renderFormFooter(_ref3) {
+  var onClose = _ref3.onClose,
+    loading = _ref3.loading;
+  return /*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Footer, {
+    children: /*#__PURE__*/jsxRuntime.jsx(ActionBlock__default["default"], {
+      cancelButtonProps: {
+        onClick: onClose
+      },
+      isSubmitting: loading
+    })
+  });
+};
+var getDefaultOption = function getDefaultOption() {
+  return {
+    id: uuid.v4(),
+    label: "",
+    displayOrder: 0
+  };
+};
+
+var PERMITTED_REGEX_PATTERN = /^\/.*\/[igmsyu]*$/;
+var ADVANCED_REGEX_ASSERTION_PATTERN = /\(\?=[^)]*\)|\(\?![^)]*\)|\(\?<=[^)]*\)|\(\?<![^)]*\)/;
+var regexValidationSchema = yup__namespace.object().shape({
+  condition: yup__namespace.string().required(i18next.t("neetoFields.validations.regexConditionIsRequired")).matches(PERMITTED_REGEX_PATTERN, i18next.t("neetoFields.validations.invalidRegexPattern")).test({
+    name: "test-regex-is-advanced",
+    message: i18next.t("neetoFields.validations.advancedRegexAssertionsNotSupported") || "",
+    test: function test(value) {
+      return !ADVANCED_REGEX_ASSERTION_PATTERN.test(value);
+    }
+  }).test({
+    name: "test-regex-condition-pattern",
+    message: i18next.t("neetoFields.validations.invalidRegexPattern") || "",
+    test: function test(value) {
+      try {
+        var lastIndex = value.lastIndexOf("/");
+        var condition = value.substring(1, lastIndex);
+        // Evaluating the regex to check if it is valid
+        new RegExp(condition);
+        "".search(condition);
+        return true;
+      } catch (_unused) {
+        return false;
+      }
+    }
+  }),
+  helpMessage: yup__namespace.string().required(i18next.t("neetoFields.validations.regexHelpMessageIsRequired"))
+});
+var dropDownOptionsValidationSchema = yup__namespace.array().of(yup__namespace.object().shape({
+  label: yup__namespace.string().trim().required(i18next.t("neetoFields.validations.fieldOptionIsRequired")),
+  displayOrder: yup__namespace.number()
+})).min(1, i18next.t("neetoFields.validations.atLeastFieldOptionIsRequired"));
+var FIELD_KINDS = {
+  text: {
+    value: "text",
+    label: i18next.t("neetoFields.fields.kinds.text"),
+    group: 1
+  },
+  number: {
+    value: "number",
+    label: i18next.t("neetoFields.fields.kinds.number"),
+    group: 2
+  },
+  monetary: {
+    value: "monetary",
+    label: i18next.t("neetoFields.fields.kinds.monetary"),
+    group: 2
+  },
+  single_option: {
+    value: "single_option",
+    label: i18next.t("neetoFields.fields.kinds.singleOption"),
+    group: 12
+  },
+  multi_option: {
+    value: "multi_option",
+    label: i18next.t("neetoFields.fields.kinds.multiOption"),
+    group: 3
+  },
+  date: {
+    value: "date",
+    label: i18next.t("neetoFields.fields.kinds.date"),
+    group: 4
+  },
+  time: {
+    value: "time",
+    label: i18next.t("neetoFields.fields.kinds.time"),
+    group: 5
+  },
+  date_range: {
+    value: "date_range",
+    label: i18next.t("neetoFields.fields.kinds.dateRange"),
+    group: 6
+  },
+  time_range: {
+    value: "time_range",
+    label: i18next.t("neetoFields.fields.kinds.timeRange"),
+    group: 7
+  },
+  text_area: {
+    value: "text_area",
+    label: i18next.t("neetoFields.fields.kinds.textArea"),
+    group: 1
+  },
+  textarea: {
+    value: "textarea",
+    label: i18next.t("neetoFields.fields.kinds.textarea"),
+    group: 1
+  },
+  person: {
+    value: "person",
+    label: i18next.t("neetoFields.fields.kinds.person"),
+    group: 8
+  },
+  checkbox: {
+    value: "checkbox",
+    label: i18next.t("neetoFields.fields.kinds.checkbox"),
+    group: 9
+  },
+  regex: {
+    value: "regex",
+    label: i18next.t("neetoFields.fields.kinds.regex"),
+    group: 10
+  },
+  integer: {
+    value: "integer",
+    label: i18next.t("neetoFields.fields.kinds.integer"),
+    group: 2
+  },
+  decimal: {
+    value: "decimal",
+    label: i18next.t("neetoFields.fields.kinds.decimal"),
+    group: 2
+  },
+  datetime: {
+    value: "datetime",
+    label: i18next.t("neetoFields.fields.kinds.datetime"),
+    group: 11
+  }
+};
+var ADDITIONAL_DATA_NEEDED_FIELD_KINDS = ["single_option", "multi_option", "regex"];
+var INITIAL_FIELDS = {
+  name: "",
+  kind: neetoCist.toLabelAndValue("text"),
+  isRequired: false
+};
+var DEFAULT_REGEX_DATA = {
+  condition: "",
+  helpMessage: ""
+};
+var BASIC_FIELD_FORM_VALIDATIONS = {
+  name: yup__namespace.string().trim().required(i18next.t("neetoFields.validations.fieldNameIsRequired")),
+  isRequired: yup__namespace["boolean"](),
+  kind: yup__namespace.object().shape({
+    value: yup__namespace.string().required()
+  }).required(i18next.t("neetoFields.validations.kindIsRequired")),
+  data: yup__namespace.mixed().when("kind", {
+    is: function is(kind) {
+      return isRegex(kind === null || kind === void 0 ? void 0 : kind.value);
+    },
+    then: regexValidationSchema
+  }).when("kind", {
+    is: function is(kind) {
+      return isDropdown(kind === null || kind === void 0 ? void 0 : kind.value);
+    },
+    then: dropDownOptionsValidationSchema
+  })
+};
+
+var AdditionalInputs = function AdditionalInputs() {
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = formik.useFormikContext(),
+    _useFormikContext$val = _useFormikContext.values,
+    kind = _useFormikContext$val.kind,
+    options = _useFormikContext$val.data,
+    isSystem = _useFormikContext$val.isSystem;
+  var removeOption = function removeOption(arrayHelpers, index) {
+    return arrayHelpers.remove(index);
+  };
+  var addOption = function addOption(arrayHelpers) {
+    return arrayHelpers.push(getDefaultOption());
+  };
+  var handleKeyDown = function handleKeyDown(event, arrayHelpers) {
+    var _inputs;
+    if (event.key !== "Enter" || reactUtils.isMetaKeyPressed(event)) return;
+    var form = event.target.form;
+    var inputs = index._toConsumableArray(form.querySelectorAll("#neeto-fields-dropdown-options-wrapper input"));
+    var currentIndex = inputs.indexOf(event.target);
+    currentIndex >= inputs.length - 1 ? addOption(arrayHelpers) : (_inputs = inputs[currentIndex + 1]) === null || _inputs === void 0 ? void 0 : _inputs.focus();
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  if (isDropdown(kind.value)) {
+    return /*#__PURE__*/jsxRuntime.jsx(formik.FieldArray, {
+      name: "data",
+      children: function children(arrayHelpers) {
+        return /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex w-full flex-col gap-y-4",
+          id: "neeto-fields-dropdown-options-wrapper",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Label__default["default"], {
+            required: true,
+            children: t("neetoFields.titles.dropdownOptions")
+          }), neetoCist.isNotEmpty(options) && Array.isArray(options) && options.map(function (_, index) {
+            return /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "flex w-full space-x-3",
+              children: /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "w-full",
+                children: /*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
+                  autoFocus: true,
+                  "data-cy": "neeto-fields-dropdown-option-".concat(index),
+                  disabled: isSystem,
+                  name: "data.".concat(index, ".label"),
+                  placeholder: t("neetoFields.placeholders.enterAnOption"),
+                  suffix: options.length > 1 && /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+                    "data-cy": "neeto-fields-dropdown-option-delete-".concat(index),
+                    icon: Delete__default["default"],
+                    style: "text",
+                    onClick: function onClick() {
+                      return removeOption(arrayHelpers, index);
+                    }
+                  }),
+                  onKeyDown: function onKeyDown(event) {
+                    return handleKeyDown(event, arrayHelpers);
+                  }
+                })
+              })
+            }, index);
+          }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+            fullWidth: true,
+            className: "mb-6 border-dashed text-xs uppercase",
+            "data-cy": "neeto-fields-add-more-option-button",
+            label: t("neetoFields.labels.addAnotherOption"),
+            style: "secondary",
+            onClick: function onClick() {
+              return addOption(arrayHelpers);
+            }
+          })]
+        });
+      }
+    });
+  } else if (isRegex(kind.value)) {
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex w-full flex-col gap-y-4",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Label__default["default"], {
+        required: true,
+        children: t("neetoFields.titles.regexOptions")
+      }), /*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
+        disabled: isSystem,
+        label: t("neetoFields.labels.regexCondition"),
+        name: "data.condition",
+        placeholder: t("neetoFields.placeholders.regexExample")
+      }), /*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
+        disabled: isSystem,
+        label: t("neetoFields.labels.helpMessage"),
+        name: "data.helpMessage",
+        placeholder: t("neetoFields.placeholders.enterErrorMessage")
+      })]
+    });
+  }
+  return null;
+};
+
+var FieldForm = function FieldForm(_ref) {
+  var chosenKind = _ref.chosenKind,
+    _ref$kindSelectOption = _ref.kindSelectOptions,
+    kindSelectOptions = _ref$kindSelectOption === void 0 ? [] : _ref$kindSelectOption,
+    _ref$isSystem = _ref.isSystem,
+    isSystem = _ref$isSystem === void 0 ? false : _ref$isSystem,
+    _ref$hideRequiredSwit = _ref.hideRequiredSwitch,
+    hideRequiredSwitch = _ref$hideRequiredSwit === void 0 ? false : _ref$hideRequiredSwit,
+    children = _ref.children,
+    initialFocusField = _ref.initialFocusField;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = formik.useFormikContext(),
+    options = _useFormikContext.values.data,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var handleKindChange = function handleKindChange(kind) {
+    setFieldValue("kind", kind);
+    if (isDropdown(kind.value)) {
+      setFieldValue("data", options !== null && options !== void 0 ? options : [getDefaultOption()]);
+    } else if (isRegex(kind.value)) {
+      setFieldValue("data", options !== null && options !== void 0 ? options : DEFAULT_REGEX_DATA);
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Body, {
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "w-full space-y-4",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
+        required: true,
+        "data-cy": "name-text-field",
+        disabled: isSystem,
+        label: t("neetoFields.labels.fieldName"),
+        name: "name",
+        placeholder: t("neetoFields.placeholders.enterFieldName"),
+        ref: initialFocusField
+      }), /*#__PURE__*/jsxRuntime.jsx(Select__default["default"], {
+        isSearchable: true,
+        isDisabled: isSystem,
+        label: t("neetoFields.labels.fieldKind"),
+        name: "kind",
+        options: kindSelectOptions,
+        onChange: handleKindChange
+      }), isAdditionalDataNeeded(chosenKind) && /*#__PURE__*/jsxRuntime.jsx(AdditionalInputs, {}), !hideRequiredSwitch && /*#__PURE__*/jsxRuntime.jsxs(Label__default["default"], {
+        className: "flex items-center gap-2",
+        "data-cy": "is-required-switch-container",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Switch__default["default"], {
+          "data-cy": "is-required-switch",
+          name: "isRequired"
+        }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+          className: "leading-4",
+          component: "span",
+          "data-cy": "is-required-switch-label",
+          style: "body2",
+          children: t("neetoFields.labels.isRequired")
+        })]
+      }), children]
+    })
+  });
+};
+
+var _excluded$2 = ["resourceType", "allowedKinds", "ownerId", "additionalValidations", "initialValues", "onClose", "onMutationSuccess"];
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { index._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Add = function Add(_ref) {
+  var resourceType = _ref.resourceType,
+    _ref$allowedKinds = _ref.allowedKinds,
+    allowedKinds = _ref$allowedKinds === void 0 ? constants.ALL_KINDS : _ref$allowedKinds,
+    ownerId = _ref.ownerId,
+    additionalValidations = _ref.additionalValidations,
+    initialValues = _ref.initialValues,
+    onClose = _ref.onClose,
+    onMutationSuccess = _ref.onMutationSuccess,
+    props = index._objectWithoutProperties(_ref, _excluded$2);
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useCreateField = useFieldsApi.useCreateField({
+      onSuccess: onMutationSuccess
+    }),
+    createField = _useCreateField.mutate,
+    isSubmitting = _useCreateField.isPending;
+  var filteredKinds = ramda.values(ramda.pick(allowedKinds, FIELD_KINDS));
+  var handleSubmit = function handleSubmit(formValues) {
+    var payload = buildPayload({
+      formValues: formValues,
+      resourceType: resourceType,
+      ownerId: ownerId
+    });
+    createField(payload, {
+      onSuccess: onClose
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        "data-cy": "add-pane-header",
+        style: "h2",
+        children: t("neetoFields.titles.addField")
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Form__default["default"], {
+      formikProps: {
+        initialValues: _objectSpread$2(_objectSpread$2({}, initialValues), INITIAL_FIELDS),
+        validationSchema: generateValidationSchema(additionalValidations),
+        onSubmit: handleSubmit
+      },
+      children: function children(_ref2) {
+        var kind = _ref2.values.kind;
+        return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(FieldForm, _objectSpread$2({
+            chosenKind: kind.value,
+            kindSelectOptions: filteredKinds
+          }, props)), renderFormFooter({
+            onClose: onClose,
+            loading: isSubmitting
+          })]
+        });
+      }
+    })]
+  });
+};
+
+var _excluded$1 = ["fieldId", "allowedKinds", "ownerId", "additionalValidations", "initialValues", "onClose", "onMutationSuccess"];
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { index._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Edit = function Edit(_ref) {
+  var fieldId = _ref.fieldId,
+    _ref$allowedKinds = _ref.allowedKinds,
+    allowedKinds = _ref$allowedKinds === void 0 ? constants.ALL_KINDS : _ref$allowedKinds,
+    ownerId = _ref.ownerId,
+    _ref$additionalValida = _ref.additionalValidations,
+    additionalValidations = _ref$additionalValida === void 0 ? {} : _ref$additionalValida,
+    _ref$initialValues = _ref.initialValues,
+    initialValues = _ref$initialValues === void 0 ? {} : _ref$initialValues,
+    onClose = _ref.onClose,
+    onMutationSuccess = _ref.onMutationSuccess,
+    props = index._objectWithoutProperties(_ref, _excluded$1);
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useShowField = useFieldsApi.useShowField({
+      fieldId: fieldId,
+      ownerId: ownerId
+    }),
+    _useShowField$data = _useShowField.data,
+    _useShowField$data2 = _useShowField$data === void 0 ? {} : _useShowField$data,
+    _useShowField$data2$f = _useShowField$data2.field,
+    field = _useShowField$data2$f === void 0 ? {} : _useShowField$data2$f,
+    isLoading = _useShowField.isLoading;
+  var _useUpdateField = useFieldsApi.useUpdateField({
+      onSuccess: function onSuccess() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        onMutationSuccess === null || onMutationSuccess === void 0 || onMutationSuccess.apply(void 0, args);
+        onClose();
+      }
+    }),
+    updateField = _useUpdateField.mutate,
+    isSubmitting = _useUpdateField.isPending;
+  var handleSubmit = function handleSubmit(formValues) {
+    var payload = buildPayload({
+      formValues: formValues,
+      ownerId: ownerId
+    });
+    updateField({
+      fieldId: fieldId,
+      payload: payload
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        "data-cy": "edit-pane-header",
+        style: "h2",
+        children: t("neetoFields.titles.editField")
+      })
+    }), isLoading ? /*#__PURE__*/jsxRuntime.jsx(PageLoader__default["default"], {}) : /*#__PURE__*/jsxRuntime.jsx(Form__default["default"], {
+      formikProps: {
+        initialValues: _objectSpread$1(_objectSpread$1({}, initialValues), ramda.assoc("kind", FIELD_KINDS[field.kind], field)),
+        validationSchema: generateValidationSchema(additionalValidations),
+        enableReinitialize: true,
+        onSubmit: handleSubmit
+      },
+      children: function children(_ref2) {
+        var kind = _ref2.values.kind;
+        var permittedKinds = getPermittedKinds({
+          allowedKinds: allowedKinds,
+          selectedKind: kind
+        });
+        return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(FieldForm, _objectSpread$1({
+            chosenKind: kind === null || kind === void 0 ? void 0 : kind.value,
+            isSystem: field.isSystem,
+            kindSelectOptions: permittedKinds
+          }, props)), renderFormFooter({
+            onClose: onClose,
+            loading: isSubmitting
+          })]
+        });
+      }
+    })]
+  });
+};
+
+var _excluded = ["isOpen", "selectedField"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { index._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var FieldsPane = function FieldsPane(_ref) {
+  var isOpen = _ref.isOpen,
+    _ref$selectedField = _ref.selectedField,
+    selectedField = _ref$selectedField === void 0 ? {} : _ref$selectedField,
+    props = index._objectWithoutProperties(_ref, _excluded);
+  var initialFocusField = React.useRef(null);
+  return /*#__PURE__*/jsxRuntime.jsx(Pane__default["default"], {
+    isOpen: isOpen,
+    initialFocusRef: initialFocusField,
+    onClose: props.onClose,
+    children: ramda.isEmpty(selectedField) ? /*#__PURE__*/jsxRuntime.jsx(Add, _objectSpread({}, _objectSpread(_objectSpread({}, props), {}, {
+      initialFocusField: initialFocusField
+    }))) : /*#__PURE__*/jsxRuntime.jsx(Edit, _objectSpread({
+      fieldId: selectedField === null || selectedField === void 0 ? void 0 : selectedField.id
+    }, _objectSpread(_objectSpread({}, props), {}, {
+      initialFocusField: initialFocusField
+    })))
+  });
+};
+
+module.exports = FieldsPane;
+//# sourceMappingURL=FieldsPane.js.map