@bigbinary/neeto-rules-frontend 2.5.15-beta-5 → 2.5.15-beta-7

package/dist/NeetoRulesForm.js

@@ -5,7 +5,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { shallow } from 'zustand/shallow';
 import { useRef, useEffect, createElement, forwardRef, useState, useMemo, memo, Fragment as Fragment$1 } from 'react';
 import { useFormikContext, useField, FieldArray, ErrorMessage, Formik, Form as Form$1 } from 'formik';
-import { findBy, isNotEmpty, isPresent, hyphenate, renameKeys, nullSafe, noop, toLabelAndValue, removeBy, isNotPresent } from '@bigbinary/neeto-cist';
+import { findBy, noop, isNotEmpty, isPresent, hyphenate, renameKeys, nullSafe, toLabelAndValue, removeBy, isNotPresent } from '@bigbinary/neeto-cist';
 import Plus from '@bigbinary/neeto-icons/Plus';
 import Delete from '@bigbinary/neeto-icons/Delete';
 import Refresh from '@bigbinary/neeto-icons/Refresh';
@@ -510,15 +510,20 @@ var DEFAULT_LONG_TEXT_ROWS = 8;
 var Target$j = function Target(_ref) {
   var _errors$actions, _touched$actions, _selectedField$separa;
   var index = _ref.index,
+    name = _ref.name,
     _ref$selectedField = _ref.selectedField,
     selectedField = _ref$selectedField === void 0 ? {} : _ref$selectedField,
     defaultLabel = _ref.defaultLabel,
     defaultSeparator = _ref.defaultSeparator,
-    _onClick = _ref.onClick;
+    _ref$onClick = _ref.onClick,
+    _onClick = _ref$onClick === void 0 ? noop : _ref$onClick;
   var _useFormikContext = useFormikContext(),
     errors = _useFormikContext.errors,
     touched = _useFormikContext.touched;
-  var isValid = errors.actions && isNotNil((_errors$actions = errors.actions) === null || _errors$actions === void 0 || (_errors$actions = _errors$actions.value) === null || _errors$actions === void 0 ? void 0 : _errors$actions[index]) && isNotNil((_touched$actions = touched.actions) === null || _touched$actions === void 0 || (_touched$actions = _touched$actions.value) === null || _touched$actions === void 0 ? void 0 : _touched$actions[index]);
+  var _useActiveField = useActiveField(name),
+    isFieldActive = _useActiveField.isFieldActive,
+    setFieldActive = _useActiveField.setFieldActive;
+  var isFieldInvalid = errors.actions && isNotNil((_errors$actions = errors.actions) === null || _errors$actions === void 0 || (_errors$actions = _errors$actions.value) === null || _errors$actions === void 0 ? void 0 : _errors$actions[index]) && isNotNil((_touched$actions = touched.actions) === null || _touched$actions === void 0 || (_touched$actions = _touched$actions.value) === null || _touched$actions === void 0 ? void 0 : _touched$actions[index]);
   var separator = (selectedField === null || selectedField === void 0 || (_selectedField$separa = selectedField.separator) === null || _selectedField$separa === void 0 ? void 0 : _selectedField$separa.toLowerCase()) || defaultSeparator;
   var label = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.placeholder) || defaultLabel;
   return /*#__PURE__*/jsxs(Fragment, {
@@ -533,27 +538,35 @@ var Target$j = function Target(_ref) {
       label: label.toLowerCase(),
       style: "link",
       className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-        "neeto-ui-text-error-500": isValid
+        "neeto-ui-text-accent-800": isFieldActive,
+        "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
       }),
       onClick: function onClick() {
-        return _onClick === null || _onClick === void 0 ? void 0 : _onClick();
+        _onClick();
+        setFieldActive();
       }
     })]
   });
 };
 var LongTextField = function LongTextField(_ref2) {
   var name = _ref2.name,
-    _ref2$value = _ref2.value,
-    value = _ref2$value === void 0 ? "" : _ref2$value,
     _ref2$selectedField = _ref2.selectedField,
-    selectedField = _ref2$selectedField === void 0 ? {} : _ref2$selectedField;
+    selectedField = _ref2$selectedField === void 0 ? {} : _ref2$selectedField,
+    _ref2$shouldAutoFocus = _ref2.shouldAutoFocus,
+    shouldAutoFocus = _ref2$shouldAutoFocus === void 0 ? false : _ref2$shouldAutoFocus;
+  var _useActiveField2 = useActiveField(name, {
+      shouldAutoFocus: shouldAutoFocus
+    }),
+    ref = _useActiveField2.ref,
+    setFieldActive = _useActiveField2.setFieldActive;
   var rows = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.rows) || DEFAULT_LONG_TEXT_ROWS;
   return /*#__PURE__*/jsx(Textarea, {
     name: name,
+    ref: ref,
     rows: rows,
-    value: value,
     required: true,
-    className: "w-full"
+    className: "w-full",
+    onFocus: setFieldActive
   });
 };
 LongTextField.Target = Target$j;
@@ -2833,7 +2846,6 @@ var ActionSubItem = function ActionSubItem(_ref) {
     });
   }
   if ((selectedField === null || selectedField === void 0 ? void 0 : selectedField.type) === ACTION_TYPES.longText || (selectedField === null || selectedField === void 0 ? void 0 : selectedField.type) === ACTION_TYPES.textarea) {
-    var _action$metadata6, _action$metadata7;
     return isTarget ? /*#__PURE__*/jsx(LongTextField.Target, {
       hasError: hasError,
       index: index,
@@ -2841,7 +2853,6 @@ var ActionSubItem = function ActionSubItem(_ref) {
       defaultLabel: t("neetoRules.labels.body"),
       defaultSeparator: t("neetoRules.common.as"),
       name: "".concat(name, ".value"),
-      value: (_action$metadata6 = action.metadata) === null || _action$metadata6 === void 0 ? void 0 : _action$metadata6.value,
       onClick: function onClick() {
         return openPanel("large");
       }
@@ -2851,8 +2862,7 @@ var ActionSubItem = function ActionSubItem(_ref) {
       shouldAutoFocus: true,
       defaultLabel: t("neetoRules.labels.body"),
       defaultSeparator: t("neetoRules.common.as"),
-      name: "".concat(name, ".value"),
-      value: (_action$metadata7 = action.metadata) === null || _action$metadata7 === void 0 ? void 0 : _action$metadata7.value
+      name: "".concat(name, ".value")
     });
   }
   if (selectedField !== null && selectedField !== void 0 && selectedField.component) {
@@ -3754,18 +3764,15 @@ var ValueField = function ValueField(_ref) {
     });
   }
   if (fieldType === CONDITION_VALUE_TYPES.textarea) {
-    var _condition$metadata, _condition$metadata2;
     return isTarget ? /*#__PURE__*/jsx(LongTextField.Target, {
       index: index,
       onClick: onClick,
       defaultLabel: t("neetoRules.labels.text"),
-      name: "".concat(name, ".value"),
-      value: (_condition$metadata = condition.metadata) === null || _condition$metadata === void 0 ? void 0 : _condition$metadata.value
+      name: "".concat(name, ".value")
     }) : /*#__PURE__*/jsx(LongTextField, {
       index: index,
       defaultLabel: t("neetoRules.labels.text"),
-      name: "".concat(name, ".value"),
-      value: (_condition$metadata2 = condition.metadata) === null || _condition$metadata2 === void 0 ? void 0 : _condition$metadata2.value
+      name: "".concat(name, ".value")
     });
   }
   if (fieldType === CONDITION_VALUE_TYPES.radio) {
@@ -6021,6 +6028,7 @@ var Form = function Form(_ref) {
     resetPanelState = _useUtilityStore.resetPanelState;
   var submitForm = function submitForm(values, formikBag) {
     var payload = buildPayload(data, values);
+    resetPanelState();
     handleSubmit(payload, formikBag);
   };
   var initialValues = useMemo(function () {