@bigbinary/neeto-rules-frontend 2.5.42 → 2.5.43

package/dist/cjs/NeetoRulesForm.js

@@ -12,7 +12,7 @@ var Plus = require('@bigbinary/neeto-icons/Plus');
 var Delete = require('@bigbinary/neeto-icons/Delete');
 var Button = require('@bigbinary/neetoui/Button');
 var reactI18next = require('react-i18next');
-var useUtilityStore = require('../useUtilityStore-D6PfpKqa.js');
+var useUtilityStore = require('../useUtilityStore-_59l0Cmi.js');
 var classNames = require('classnames');
 var Typography = require('@bigbinary/neetoui/Typography');
 var ramda = require('ramda');
@@ -21,6 +21,7 @@ var yup = require('yup');
 var Search = require('@bigbinary/neeto-icons/Search');
 var Input$1 = require('@bigbinary/neetoui/Input');
 var Radio = require('@bigbinary/neetoui/formik/Radio');
+var useActiveField = require('../useActiveField-D2fv_EeJ.js');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var managers = require('@bigbinary/neetoui/managers');
 var jsxRuntime = require('react/jsx-runtime');
@@ -38,6 +39,7 @@ var Label = require('@bigbinary/neetoui/Label');
 var Select = require('@bigbinary/neetoui/Select');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var DatePicker = require('@bigbinary/neetoui/DatePicker');
+var utils$1 = require('../utils-B3roKiff.js');
 var MultiEmailInput = require('@bigbinary/neetoui/formik/MultiEmailInput');
 var FormikEditor = require('@bigbinary/neeto-editor/FormikEditor');
 var Refresh = require('@bigbinary/neeto-icons/Refresh');
@@ -57,7 +59,7 @@ var Radio$1 = require('@bigbinary/neetoui/Radio');
 var TimePicker = require('@bigbinary/neetoui/TimePicker');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
-var utils$1 = require('@bigbinary/neeto-editor/utils');
+var utils$2 = require('@bigbinary/neeto-editor/utils');
 var Eye = require('@bigbinary/neeto-icons/Eye');
 var Down = require('@bigbinary/neeto-icons/Down');
 var Dropdown = require('@bigbinary/neetoui/Dropdown');
@@ -68,7 +70,6 @@ var Spinner = require('@bigbinary/neetoui/Spinner');
 var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
 var useAutomationRulesApi = require('../useAutomationRulesApi-BTjEL2XD.js');
 var Switch$1 = require('@bigbinary/neetoui/Switch');
-var useCustomDataStore = require('../useCustomDataStore-BEG8I__n.js');
 var _typeof = require('@babel/runtime/helpers/typeof');
 require('zustand');
 require('@tanstack/react-query');
@@ -99,63 +100,6 @@ var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r
 var css = ".neeto-rules-main-content__container{height:100dvh!important}.neeto-rules-main-card .neeto-ui-btn.underline{text-align:start}.neeto-rules-side-panel{flex-grow:0;flex-shrink:0}.neeto-rules-side-panel--small{width:320px}.neeto-rules-side-panel--large{width:380px}@media (min-width:1024px){.neeto-rules-side-panel--small{width:380px}.neeto-rules-side-panel--large{width:480px}}.neeto-rules-json-editor__wrapper{height:35vh;padding-bottom:2rem;position:relative}.neeto-rules-json-editor__editor{height:100%}.neeto-rules-json-editor__dynamic-variables{inset-inline-end:1rem;position:absolute;top:1rem;z-index:10}[data-tippy-root]{z-index:99999!important}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9jb21wb25lbnRzL2xheW91dC5jc3MiLCJhcHAvamF2YXNjcmlwdC9zcmMvc3R5bGVzaGVldHMvY29tcG9uZW50cy9wYW5lLmNzcyIsImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9jb21wb25lbnRzL2pzb24tZWRpdG9yLmNzcyIsImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9jb21wb25lbnRzL2Ryb3Bkb3duLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxxQ0FDRSx1QkFDRixDQUVBLCtDQUNFLGdCQUNGLENDTkEsd0JBRUUsV0FBWSxDQURaLGFBRUYsQ0FFQSwrQkFDRSxXQUNGLENBRUEsK0JBQ0UsV0FDRixDQUVBLDBCQUNFLCtCQUNFLFdBQ0YsQ0FDQSwrQkFDRSxXQUNGLENBQ0YsQ0NwQkEsa0NBRUUsV0FBWSxDQUNaLG1CQUFvQixDQUZwQixpQkFHRixDQUVBLGlDQUNFLFdBQ0YsQ0FFQSw0Q0FHRSxxQkFBc0IsQ0FGdEIsaUJBQWtCLENBQ2xCLFFBQVMsQ0FFVCxVQUNGLENDZkEsa0JBQ0UsdUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyIubmVldG8tcnVsZXMtbWFpbi1jb250ZW50X19jb250YWluZXIge1xuICBoZWlnaHQ6IDEwMGR2aCAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tcnVsZXMtbWFpbi1jYXJkIC5uZWV0by11aS1idG4udW5kZXJsaW5lIHtcbiAgdGV4dC1hbGlnbjogc3RhcnQ7XG59XG4iLCIubmVldG8tcnVsZXMtc2lkZS1wYW5lbCB7XG4gIGZsZXgtc2hyaW5rOiAwO1xuICBmbGV4LWdyb3c6IDA7XG59XG5cbi5uZWV0by1ydWxlcy1zaWRlLXBhbmVsLS1zbWFsbCB7XG4gIHdpZHRoOiAzMjBweDtcbn1cblxuLm5lZXRvLXJ1bGVzLXNpZGUtcGFuZWwtLWxhcmdlIHtcbiAgd2lkdGg6IDM4MHB4O1xufVxuXG5AbWVkaWEgKG1pbi13aWR0aDogMTAyNHB4KSB7XG4gIC5uZWV0by1ydWxlcy1zaWRlLXBhbmVsLS1zbWFsbCB7XG4gICAgd2lkdGg6IDM4MHB4O1xuICB9XG4gIC5uZWV0by1ydWxlcy1zaWRlLXBhbmVsLS1sYXJnZSB7XG4gICAgd2lkdGg6IDQ4MHB4O1xuICB9XG59XG4iLCIubmVldG8tcnVsZXMtanNvbi1lZGl0b3JfX3dyYXBwZXIge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGhlaWdodDogMzV2aDtcbiAgcGFkZGluZy1ib3R0b206IDJyZW07XG59XG5cbi5uZWV0by1ydWxlcy1qc29uLWVkaXRvcl9fZWRpdG9yIHtcbiAgaGVpZ2h0OiAxMDAlO1xufVxuXG4ubmVldG8tcnVsZXMtanNvbi1lZGl0b3JfX2R5bmFtaWMtdmFyaWFibGVzIHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDFyZW07XG4gIGluc2V0LWlubGluZS1lbmQ6IDFyZW07XG4gIHotaW5kZXg6IDEwO1xufVxuIiwiW2RhdGEtdGlwcHktcm9vdF0ge1xuICB6LWluZGV4OiA5OTk5OSAhaW1wb3J0YW50O1xufVxuIl19 */";
 n(css,{});
 
-var useActiveField = function useActiveField(name) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref$shouldAutoFocus = _ref.shouldAutoFocus,
-    shouldAutoFocus = _ref$shouldAutoFocus === void 0 ? false : _ref$shouldAutoFocus;
-  var ref = react.useRef(null);
-  var shouldFocusRef = react.useRef(true);
-  var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
-      return {
-        setPanelState: store["setPanelState"]
-      };
-    }, shallow.shallow),
-    setPanelState = _useUtilityStore.setPanelState;
-  var _useUtilityStore2 = useUtilityStore.useUtilityStore(function (store) {
-      var _store$panelState;
-      return {
-        activeField: (_store$panelState = store["panelState"]) === null || _store$panelState === void 0 || (_store$panelState = _store$panelState["data"]) === null || _store$panelState === void 0 ? void 0 : _store$panelState["activeField"]
-      };
-    }, shallow.shallow),
-    activeField = _useUtilityStore2.activeField;
-  var isFieldActive = activeField === name;
-  react.useEffect(function () {
-    if (!shouldAutoFocus || activeField) return;
-    setFieldActive();
-  }, [name]);
-  react.useEffect(function () {
-    var shouldFocus = shouldFocusRef.current;
-    shouldFocusRef.current = true;
-    if (!isFieldActive || !shouldFocus) return;
-    requestAnimationFrame(function () {
-      var _ref$current, _ref$current$focus;
-      return ref === null || ref === void 0 || (_ref$current = ref.current) === null || _ref$current === void 0 || (_ref$current$focus = _ref$current.focus) === null || _ref$current$focus === void 0 ? void 0 : _ref$current$focus.call(_ref$current);
-    });
-  }, [isFieldActive]);
-  var setFieldActive = function setFieldActive() {
-    var needsRerender = !ref.current && isFieldActive;
-    shouldFocusRef.current = !ref.current;
-    if (needsRerender) {
-      setPanelState(ramda.assocPath(["data", "activeField"], null));
-      requestAnimationFrame(function () {
-        return setPanelState(ramda.assocPath(["data", "activeField"], name));
-      });
-    } else {
-      setPanelState(ramda.assocPath(["data", "activeField"], name));
-    }
-  };
-  var resetActiveField = function resetActiveField() {
-    return setPanelState(ramda.assocPath(["data", "activeField"], null));
-  };
-  return {
-    ref: ref,
-    isFieldActive: isFieldActive,
-    setFieldActive: setFieldActive,
-    resetActiveField: resetActiveField,
-    setPanelState: setPanelState
-  };
-};
-
 var Body = function Body(_ref) {
   var children = _ref.children,
     className = _ref.className;
@@ -443,7 +387,7 @@ var ActionPanel = function ActionPanel() {
     _useField2[0];
     var meta = _useField2[1],
     setTouched = _useField2[2].setTouched;
-  var _useActiveField = useActiveField(name, {
+  var _useActiveField = useActiveField.useActiveField(name, {
       shouldAutoFocus: true
     }),
     ref = _useActiveField.ref,
@@ -605,7 +549,7 @@ var Target$k = function Target(_ref) {
   var _useFormikContext = formik.useFormikContext(),
     errors = _useFormikContext.errors,
     touched = _useFormikContext.touched;
-  var _useActiveField = useActiveField(name),
+  var _useActiveField = useActiveField.useActiveField(name),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
   var isFieldInvalid = errors.actions && ramda.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]) && ramda.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]);
@@ -641,7 +585,7 @@ var LongTextField = function LongTextField(_ref2) {
     shouldAutoFocus = _ref2$shouldAutoFocus === void 0 ? false : _ref2$shouldAutoFocus,
     _ref2$required = _ref2.required,
     required = _ref2$required === void 0 ? false : _ref2$required;
-  var _useActiveField2 = useActiveField(name, {
+  var _useActiveField2 = useActiveField.useActiveField(name, {
       shouldAutoFocus: shouldAutoFocus
     }),
     ref = _useActiveField2.ref,
@@ -1118,7 +1062,7 @@ var Target$j = function Target(_ref) {
     _useField2 = _slicedToArray(_useField, 2);
     _useField2[0];
     var meta = _useField2[1];
-  var _useActiveField = useActiveField(name),
+  var _useActiveField = useActiveField.useActiveField(name),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
   var isFieldInvalid = hasError || meta.touched && meta.error;
@@ -1157,7 +1101,7 @@ var ApiFields = function ApiFields(_ref2) {
   var _useFormikContext = formik.useFormikContext(),
     setFieldValue = _useFormikContext.setFieldValue,
     formValues = _useFormikContext.values;
-  var _useActiveField2 = useActiveField(name, {
+  var _useActiveField2 = useActiveField.useActiveField(name, {
       shouldAutoFocus: shouldAutoFocus
     }),
     ref = _useActiveField2.ref,
@@ -1243,7 +1187,7 @@ var Target$i = function Target(_ref) {
     _useField2 = _slicedToArray(_useField, 2);
     _useField2[0];
     var meta = _useField2[1];
-  var _useActiveField = useActiveField(name),
+  var _useActiveField = useActiveField.useActiveField(name),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
   var isFieldInvalid = hasError || meta.touched && meta.error;
@@ -1276,7 +1220,7 @@ var CustomAction = function CustomAction(_ref2) {
     action = _ref2.action,
     _ref2$shouldAutoFocus = _ref2.shouldAutoFocus,
     shouldAutoFocus = _ref2$shouldAutoFocus === void 0 ? false : _ref2$shouldAutoFocus;
-  var _useActiveField2 = useActiveField(name, {
+  var _useActiveField2 = useActiveField.useActiveField(name, {
       shouldAutoFocus: shouldAutoFocus
     }),
     ref = _useActiveField2.ref,
@@ -1302,7 +1246,7 @@ var Target$h = function Target(_ref) {
     _useField2 = _slicedToArray(_useField, 2),
     field = _useField2[0],
     meta = _useField2[1];
-  var _useActiveField = useActiveField(name),
+  var _useActiveField = useActiveField.useActiveField(name),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
   var valueTerm = (_field$value = field.value) === null || _field$value === void 0 ? void 0 : _field$value.value;
@@ -1346,7 +1290,7 @@ var DateField$1 = function DateField(_ref2) {
     var _useField4$ = _useField4[2],
     setTouched = _useField4$.setTouched,
     setValue = _useField4$.setValue;
-  var _useActiveField2 = useActiveField(name, {
+  var _useActiveField2 = useActiveField.useActiveField(name, {
       shouldAutoFocus: shouldAutoFocus
     }),
     ref = _useActiveField2.ref,
@@ -1460,12 +1404,12 @@ var Target$g = function Target(_ref) {
     _useField2 = _slicedToArray(_useField, 2),
     field = _useField2[0],
     meta = _useField2[1];
-  var _useActiveField = useActiveField(name),
+  var _useActiveField = useActiveField.useActiveField(name),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
   var isFieldInvalid = hasError || meta.touched && meta.error;
   var defaultLabel = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.placeholder) || t("neetoRules.form.selectValue");
-  var separator = useUtilityStore.getSeparator({
+  var separator = utils$1.getSeparator({
     defaultSeparator: t("neetoRules.common.to"),
     selectedField: selectedField
   });
@@ -1520,7 +1464,7 @@ var SelectField$2 = function SelectField(_ref2) {
     var _useField4$ = _useField4[2],
     setValue = _useField4$.setValue,
     setTouched = _useField4$.setTouched;
-  var _useActiveField2 = useActiveField(name, {
+  var _useActiveField2 = useActiveField.useActiveField(name, {
       shouldAutoFocus: shouldAutoFocus
     }),
     ref = _useActiveField2.ref,
@@ -1585,11 +1529,11 @@ var Target$f = function Target(_ref) {
     _useField2 = _slicedToArray(_useField, 2);
     _useField2[0];
     var meta = _useField2[1];
-  var _useActiveField = useActiveField(name),
+  var _useActiveField = useActiveField.useActiveField(name),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
   var isFieldInvalid = hasError || meta.touched && meta.error;
-  var separator = useUtilityStore.getSeparator({
+  var separator = utils$1.getSeparator({
     defaultSeparator: t("neetoRules.common.as"),
     index: separatorIndex,
     selectedField: selectedField
@@ -1639,7 +1583,7 @@ var EmailFields = function EmailFields(_ref2) {
   var _useField3 = formik.useField(name),
     _useField4 = _slicedToArray(_useField3, 1),
     field = _useField4[0];
-  var _useActiveField2 = useActiveField(name, {
+  var _useActiveField2 = useActiveField.useActiveField(name, {
       shouldAutoFocus: showFieldSelection ? false : shouldAutoFocus
     }),
     initialFocusRef = _useActiveField2.ref,
@@ -1714,7 +1658,7 @@ var EmailFields = function EmailFields(_ref2) {
       onFocus: setFieldActive
     }), /*#__PURE__*/jsxRuntime.jsx(EditorAction, {
       required: true,
-      label: t("neetoRules.labels.body"),
+      label: (selectedField === null || selectedField === void 0 ? void 0 : selectedField.emailPlaceholder) || t("neetoRules.labels.body"),
       name: "".concat(name, ".body"),
       value: (_action$metadata = action.metadata) === null || _action$metadata === void 0 ? void 0 : _action$metadata.body,
       variables: selectedField === null || selectedField === void 0 ? void 0 : selectedField.variables,
@@ -1740,7 +1684,7 @@ var Target$e = function Target(_ref) {
     _useField2 = _slicedToArray(_useField, 2),
     field = _useField2[0],
     meta = _useField2[1];
-  var _useActiveField = useActiveField(name),
+  var _useActiveField = useActiveField.useActiveField(name),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
   var isFieldInvalid = hasError || meta.touched && meta.error;
@@ -1778,7 +1722,7 @@ var Input = function Input(_ref2) {
     required = _ref2$required === void 0 ? false : _ref2$required;
   var _useTranslation2 = reactI18next.useTranslation(),
     t = _useTranslation2.t;
-  var _useActiveField2 = useActiveField(name, {
+  var _useActiveField2 = useActiveField.useActiveField(name, {
       shouldAutoFocus: shouldAutoFocus
     }),
     ref = _useActiveField2.ref,
@@ -1913,7 +1857,7 @@ var Target$d = function Target(_ref) {
     _useField2 = _slicedToArray(_useField, 2);
     _useField2[0];
     var meta = _useField2[1];
-  var _useActiveField = useActiveField(name),
+  var _useActiveField = useActiveField.useActiveField(name),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
   var isFieldInvalid = hasError || meta.touched && meta.error;
@@ -1955,7 +1899,7 @@ var ListField = function ListField(_ref2) {
     _useState2 = _slicedToArray(_useState, 2),
     isInputCardOpen = _useState2[0],
     setIsInputCardOpen = _useState2[1];
-  var _useActiveField2 = useActiveField(name, {
+  var _useActiveField2 = useActiveField.useActiveField(name, {
       shouldAutoFocus: shouldAutoFocus
     }),
     ref = _useActiveField2.ref,
@@ -2036,7 +1980,7 @@ var Target$c = function Target(_ref) {
     _useField2 = _slicedToArray(_useField, 2),
     field = _useField2[0],
     meta = _useField2[1];
-  var _useActiveField = useActiveField(name),
+  var _useActiveField = useActiveField.useActiveField(name),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
   var allOptions = react.useMemo(function () {
@@ -2111,7 +2055,7 @@ var MultiSelect$1 = function MultiSelect(_ref2) {
     required = _ref2$required === void 0 ? false : _ref2$required;
   var _useTranslation2 = reactI18next.useTranslation(),
     t = _useTranslation2.t;
-  var _useActiveField2 = useActiveField(name, {
+  var _useActiveField2 = useActiveField.useActiveField(name, {
       shouldAutoFocus: shouldAutoFocus
     }),
     ref = _useActiveField2.ref,
@@ -2165,7 +2109,7 @@ var Target$b = function Target(_ref) {
     _useField2 = _slicedToArray(_useField, 2),
     field = _useField2[0],
     meta = _useField2[1];
-  var _useActiveField = useActiveField(name),
+  var _useActiveField = useActiveField.useActiveField(name),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
   var allOptions = react.useMemo(function () {
@@ -2240,7 +2184,7 @@ var MultiSelectCheckbox$1 = function MultiSelectCheckbox(_ref2) {
     required = _ref2$required === void 0 ? false : _ref2$required;
   var _useTranslation2 = reactI18next.useTranslation(),
     t = _useTranslation2.t;
-  var _useActiveField2 = useActiveField(name, {
+  var _useActiveField2 = useActiveField.useActiveField(name, {
       shouldAutoFocus: shouldAutoFocus
     }),
     ref = _useActiveField2.ref,
@@ -2298,7 +2242,7 @@ var Target$a = function Target(_ref) {
     _useField2 = _slicedToArray(_useField, 2);
     _useField2[0];
     var meta = _useField2[1];
-  var _useActiveField = useActiveField(name),
+  var _useActiveField = useActiveField.useActiveField(name),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
   var defaultLabel = (selectedField === null || selectedField === void 0 || (_selectedField$placeh = selectedField.placeholder) === null || _selectedField$placeh === void 0 ? void 0 : _selectedField$placeh.toLowerCase()) || t("neetoRules.form.note");
@@ -2336,7 +2280,7 @@ var NoteField = function NoteField(_ref2) {
     shouldAutoFocus = _ref2$shouldAutoFocus === void 0 ? false : _ref2$shouldAutoFocus;
   var _useTranslation2 = reactI18next.useTranslation(),
     t = _useTranslation2.t;
-  var _useActiveField2 = useActiveField(name, {
+  var _useActiveField2 = useActiveField.useActiveField(name, {
       shouldAutoFocus: shouldAutoFocus
     }),
     ref = _useActiveField2.ref,
@@ -2368,12 +2312,12 @@ var Target$9 = function Target(_ref) {
     _useField2 = _slicedToArray(_useField, 2),
     field = _useField2[0],
     meta = _useField2[1];
-  var _useActiveField = useActiveField(name),
+  var _useActiveField = useActiveField.useActiveField(name),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
   var isFieldInvalid = hasError || meta.touched && meta.error;
   var defaultLabel = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.placeholder) || t("neetoRules.form.selectValue");
-  var separator = useUtilityStore.getSeparator({
+  var separator = utils$1.getSeparator({
     defaultSeparator: t("neetoRules.common.to"),
     selectedField: selectedField
   });
@@ -2426,7 +2370,7 @@ var RadioField$2 = function RadioField(_ref2) {
     var _useField4$ = _useField4[2],
     setValue = _useField4$.setValue,
     setTouched = _useField4$.setTouched;
-  var _useActiveField2 = useActiveField(name, {
+  var _useActiveField2 = useActiveField.useActiveField(name, {
       shouldAutoFocus: shouldAutoFocus
     }),
     ref = _useActiveField2.ref,
@@ -2749,10 +2693,10 @@ var Target$8 = function Target(_ref) {
     _useField2 = _slicedToArray(_useField, 2);
     _useField2[0];
     var meta = _useField2[1];
-  var _useActiveField = useActiveField(name),
+  var _useActiveField = useActiveField.useActiveField(name),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
-  var separator = useUtilityStore.getSeparator({
+  var separator = utils$1.getSeparator({
     defaultSeparator: t("neetoRules.common.as"),
     index: separatorIndex,
     selectedField: selectedField
@@ -2802,7 +2746,7 @@ var SmsFields = function SmsFields(_ref2) {
     _useField4 = _slicedToArray(_useField3, 1),
     _useField4$0$value = _useField4[0].value,
     phoneNumbers = _useField4$0$value === void 0 ? [] : _useField4$0$value;
-  var _useActiveField2 = useActiveField(name, {
+  var _useActiveField2 = useActiveField.useActiveField(name, {
       shouldAutoFocus: showFieldSelection ? false : shouldAutoFocus
     }),
     initialFocusRef = _useActiveField2.ref,
@@ -3290,6 +3234,7 @@ var ActionSubItemPanel = function ActionSubItemPanel() {
   });
   var selectedFieldLabel = selectedField === null || selectedField === void 0 ? void 0 : selectedField.label.toLowerCase();
   var header = index ? "".concat(andText, " ").concat(selectedFieldLabel, "...") : "".concat(thenText, " ").concat(selectedFieldLabel, "...");
+  var ActionChildren = action.children;
   var handleContinue = function handleContinue() {
     Object.keys(flatten(meta.error || {})).forEach(function (path) {
       setFieldTouched("".concat(name, ".metadata.").concat(path), true, false);
@@ -3348,6 +3293,11 @@ var ActionSubItemPanel = function ActionSubItemPanel() {
         selectedField: selectedField,
         valueOptions: valueOptions,
         name: "".concat(name, ".metadata")
+      }), neetoCist.isPresent(action === null || action === void 0 ? void 0 : action.children) && /*#__PURE__*/jsxRuntime.jsx(ActionChildren, {
+        action: action,
+        index: index,
+        selectedField: selectedField,
+        parentFieldName: name
       })]
     }), /*#__PURE__*/jsxRuntime.jsx(Panel.Footer, {
       children: /*#__PURE__*/jsxRuntime.jsx(Button, {
@@ -3371,14 +3321,14 @@ var Target$7 = function Target(_ref) {
     _useField2 = _slicedToArray(_useField, 2),
     field = _useField2[0],
     meta = _useField2[1];
-  var _useActiveField = useActiveField("".concat(name, ".value")),
+  var _useActiveField = useActiveField.useActiveField("".concat(name, ".value")),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
-  var format = useUtilityStore.dotPath("".concat(name, ".format"), values);
-  var type = useUtilityStore.dotPath("".concat(name, ".type"), values);
-  var timezone = useUtilityStore.dotPath("".concat(name, ".timezone"), values);
+  var format = utils$1.dotPath("".concat(name, ".format"), values);
+  var type = utils$1.dotPath("".concat(name, ".type"), values);
+  var timezone = utils$1.dotPath("".concat(name, ".timezone"), values);
   var defaultLabel = t("neetoRules.form.selectDate");
-  var label = field.value ? useUtilityStore.getDateTimeFormattedValue({
+  var label = field.value ? utils$1.getDateTimeFormattedValue({
     date: field.value,
     format: format,
     type: type,
@@ -3417,15 +3367,15 @@ var DateField = function DateField(_ref2) {
     _useField4$ = _useField4[2],
     setValue = _useField4$.setValue,
     setTouched = _useField4$.setTouched;
-  var _useActiveField2 = useActiveField("".concat(name, ".value"), {
+  var _useActiveField2 = useActiveField.useActiveField("".concat(name, ".value"), {
       shouldAutoFocus: shouldAutoFocus
     }),
     ref = _useActiveField2.ref,
     setFieldActive = _useActiveField2.setFieldActive;
-  var format = useUtilityStore.dotPath("".concat(name, ".format"), values);
-  var type = useUtilityStore.dotPath("".concat(name, ".type"), values);
-  var timezone = useUtilityStore.dotPath("".concat(name, ".timezone"), values);
-  var value = useUtilityStore.getDateTimeValue({
+  var format = utils$1.dotPath("".concat(name, ".format"), values);
+  var type = utils$1.dotPath("".concat(name, ".type"), values);
+  var timezone = utils$1.dotPath("".concat(name, ".timezone"), values);
+  var value = utils$1.getDateTimeValue({
     date: field.value,
     format: format,
     type: type,
@@ -3433,8 +3383,8 @@ var DateField = function DateField(_ref2) {
   });
   var handleOnChange = function handleOnChange(date) {
     var _globalProps$user;
-    var type = selectedField.showTime ? useUtilityStore.DATE_TIME_TYPES.datetime : useUtilityStore.DATE_TIME_TYPES.date;
-    var format = selectedField.showTime ? useUtilityStore.DATE_TIME_FORMAT : useUtilityStore.DATE_FORMAT;
+    var type = selectedField.showTime ? utils$1.DATE_TIME_TYPES.datetime : utils$1.DATE_TIME_TYPES.date;
+    var format = selectedField.showTime ? utils$1.DATE_TIME_FORMAT : utils$1.DATE_FORMAT;
 
     // This is the format being stored in database as of now, standard doesn't include this format
     // eslint-disable-next-line @bigbinary/neeto/use-standard-date-time-formats
@@ -3474,7 +3424,7 @@ var Target$6 = function Target(_ref) {
     _useField2 = _slicedToArray(_useField, 2),
     field = _useField2[0],
     meta = _useField2[1];
-  var _useActiveField = useActiveField(name),
+  var _useActiveField = useActiveField.useActiveField(name),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
   var isFieldInvalid = meta.touched && meta.error;
@@ -3506,7 +3456,7 @@ var InputField$1 = function InputField(_ref2) {
     field = _useField4[0];
     _useField4[1];
     var setTouched = _useField4[2].setTouched;
-  var _useActiveField2 = useActiveField(name, {
+  var _useActiveField2 = useActiveField.useActiveField(name, {
       shouldAutoFocus: shouldAutoFocus
     }),
     ref = _useActiveField2.ref,
@@ -3540,7 +3490,7 @@ var Target$5 = function Target(_ref) {
     _useField2 = _slicedToArray(_useField, 2),
     field = _useField2[0],
     meta = _useField2[1];
-  var _useActiveField = useActiveField(name),
+  var _useActiveField = useActiveField.useActiveField(name),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
   var selectedOptions = field.value || [];
@@ -3604,7 +3554,7 @@ var MultiSelect = function MultiSelect(_ref2) {
     _useField4$ = _useField4[2],
     setValue = _useField4$.setValue,
     setTouched = _useField4$.setTouched;
-  var _useActiveField2 = useActiveField(name, {
+  var _useActiveField2 = useActiveField.useActiveField(name, {
       shouldAutoFocus: shouldAutoFocus
     }),
     ref = _useActiveField2.ref,
@@ -3648,7 +3598,7 @@ var Target$4 = function Target(_ref) {
     _useField2 = _slicedToArray(_useField, 2),
     field = _useField2[0],
     meta = _useField2[1];
-  var _useActiveField = useActiveField(name),
+  var _useActiveField = useActiveField.useActiveField(name),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
   var selectedOptions = field.value || [];
@@ -3712,7 +3662,7 @@ var MultiSelectCheckbox = function MultiSelectCheckbox(_ref2) {
     _useField4$ = _useField4[2],
     setValue = _useField4$.setValue,
     setTouched = _useField4$.setTouched;
-  var _useActiveField2 = useActiveField(name, {
+  var _useActiveField2 = useActiveField.useActiveField(name, {
       shouldAutoFocus: shouldAutoFocus
     }),
     ref = _useActiveField2.ref,
@@ -3805,7 +3755,7 @@ var Target$3 = function Target(_ref) {
     _useField2 = _slicedToArray(_useField, 2),
     field = _useField2[0],
     meta = _useField2[1];
-  var _useActiveField = useActiveField(name),
+  var _useActiveField = useActiveField.useActiveField(name),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
   var selectedOptions = field.value || [];
@@ -3865,7 +3815,7 @@ var MultiSelectCreate = function MultiSelectCreate(_ref2) {
     _useField4$ = _useField4[2],
     setValue = _useField4$.setValue,
     setTouched = _useField4$.setTouched;
-  var _useActiveField2 = useActiveField(name, {
+  var _useActiveField2 = useActiveField.useActiveField(name, {
       shouldAutoFocus: shouldAutoFocus
     }),
     ref = _useActiveField2.ref,
@@ -3911,7 +3861,7 @@ var Target$2 = function Target(_ref) {
     _useField2 = _slicedToArray(_useField, 2),
     field = _useField2[0],
     meta = _useField2[1];
-  var _useActiveField = useActiveField(name),
+  var _useActiveField = useActiveField.useActiveField(name),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
   var isFieldInvalid = meta.touched && meta.error;
@@ -3964,7 +3914,7 @@ var RadioField$1 = function RadioField(_ref2) {
     _useField4$ = _useField4[2],
     setValue = _useField4$.setValue,
     setTouched = _useField4$.setTouched;
-  var _useActiveField2 = useActiveField(name, {
+  var _useActiveField2 = useActiveField.useActiveField(name, {
       shouldAutoFocus: shouldAutoFocus
     }),
     ref = _useActiveField2.ref,
@@ -4038,7 +3988,7 @@ var Target$1 = function Target(_ref) {
     _useField2 = _slicedToArray(_useField, 2),
     field = _useField2[0],
     meta = _useField2[1];
-  var _useActiveField = useActiveField(name),
+  var _useActiveField = useActiveField.useActiveField(name),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
   var isFieldInvalid = meta.touched && meta.error;
@@ -4083,7 +4033,7 @@ var SelectField$1 = function SelectField(_ref2) {
     _useField4$ = _useField4[2],
     setValue = _useField4$.setValue,
     setTouched = _useField4$.setTouched;
-  var _useActiveField2 = useActiveField(name, {
+  var _useActiveField2 = useActiveField.useActiveField(name, {
       shouldAutoFocus: shouldAutoFocus
     }),
     ref = _useActiveField2.ref,
@@ -4128,14 +4078,14 @@ var Target = function Target(_ref) {
     _useField2 = _slicedToArray(_useField, 2),
     field = _useField2[0],
     meta = _useField2[1];
-  var _useActiveField = useActiveField("".concat(name, ".value")),
+  var _useActiveField = useActiveField.useActiveField("".concat(name, ".value")),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
-  var format = useUtilityStore.dotPath("".concat(name, ".format"), values);
-  var type = useUtilityStore.dotPath("".concat(name, ".type"), values);
-  var timezone = useUtilityStore.dotPath("".concat(name, ".timezone"), values);
+  var format = utils$1.dotPath("".concat(name, ".format"), values);
+  var type = utils$1.dotPath("".concat(name, ".type"), values);
+  var timezone = utils$1.dotPath("".concat(name, ".timezone"), values);
   var defaultLabel = t("neetoRules.form.selectTime");
-  var label = field.value ? useUtilityStore.getDateTimeFormattedValue({
+  var label = field.value ? utils$1.getDateTimeFormattedValue({
     date: field.value,
     format: format,
     type: type,
@@ -4173,15 +4123,15 @@ var TimeField = function TimeField(_ref2) {
     _useField4$ = _useField4[2],
     setValue = _useField4$.setValue,
     setTouched = _useField4$.setTouched;
-  var _useActiveField2 = useActiveField("".concat(name, ".value"), {
+  var _useActiveField2 = useActiveField.useActiveField("".concat(name, ".value"), {
       shouldAutoFocus: shouldAutoFocus
     }),
     ref = _useActiveField2.ref,
     setFieldActive = _useActiveField2.setFieldActive;
-  var format = useUtilityStore.dotPath("".concat(name, ".format"), values);
-  var type = useUtilityStore.dotPath("".concat(name, ".type"), values);
-  var timezone = useUtilityStore.dotPath("".concat(name, ".timezone"), values);
-  var value = useUtilityStore.getDateTimeValue({
+  var format = utils$1.dotPath("".concat(name, ".format"), values);
+  var type = utils$1.dotPath("".concat(name, ".type"), values);
+  var timezone = utils$1.dotPath("".concat(name, ".timezone"), values);
+  var value = utils$1.getDateTimeValue({
     date: field.value,
     format: format,
     type: type,
@@ -4191,9 +4141,9 @@ var TimeField = function TimeField(_ref2) {
     var _globalProps$user;
     // This is the format being stored in database as of now, standard doesn't include this format
     // eslint-disable-next-line @bigbinary/neeto/use-standard-date-time-formats
-    setValue(time ? utils.dayjs(time).format(useUtilityStore.TIME_FORMAT) : "");
-    setFieldValue("".concat(name, ".type"), useUtilityStore.DATE_TIME_TYPES.time);
-    setFieldValue("".concat(name, ".format"), useUtilityStore.TIME_FORMAT);
+    setValue(time ? utils.dayjs(time).format(utils$1.TIME_FORMAT) : "");
+    setFieldValue("".concat(name, ".type"), utils$1.DATE_TIME_TYPES.time);
+    setFieldValue("".concat(name, ".format"), utils$1.TIME_FORMAT);
     setFieldValue("".concat(name, ".timezone"), initializers.globalProps === null || initializers.globalProps === void 0 || (_globalProps$user = initializers.globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.timeZone);
   };
   return /*#__PURE__*/jsxRuntime.jsx(TimePicker, {
@@ -4581,10 +4531,10 @@ var DelayPanel = function DelayPanel() {
     value = _useField2[0].value,
     meta = _useField2[1],
     setValue = _useField2[2].setValue;
-  var _useActiveField = useActiveField("".concat(name, ".value.value")),
+  var _useActiveField = useActiveField.useActiveField("".concat(name, ".value.value")),
     valueRef = _useActiveField.ref,
     setValueFieldActive = _useActiveField.setFieldActive;
-  var _useActiveField2 = useActiveField("".concat(name, ".value.unit")),
+  var _useActiveField2 = useActiveField.useActiveField("".concat(name, ".value.unit")),
     unitRef = _useActiveField2.ref,
     setUnitFieldActive = _useActiveField2.setFieldActive;
   var handleContinue = function handleContinue() {
@@ -4694,7 +4644,7 @@ var EventsPanel = function EventsPanel() {
     error = _useField2$.error,
     touched = _useField2$.touched,
     setTouched = _useField2[2].setTouched;
-  var _useActiveField = useActiveField(name, {
+  var _useActiveField = useActiveField.useActiveField(name, {
       shouldAutoFocus: true
     }),
     ref = _useActiveField.ref,
@@ -4890,7 +4840,7 @@ var PerformerPanel = function PerformerPanel() {
     _useField2[0];
     var error = _useField2[1].error,
     setTouched = _useField2[2].setTouched;
-  var _useActiveField = useActiveField(performerName, {
+  var _useActiveField = useActiveField.useActiveField(performerName, {
       shouldAutoFocus: true
     }),
     ref = _useActiveField.ref,
@@ -5093,7 +5043,7 @@ var getConditionsSchema = function getConditionsSchema(element) {
         } else if ([constants.CONDITION_VALUE_TYPES.textarea].includes(type)) {
           return yup__namespace.object({
             value: yup__namespace.string().test("text", i18next.t("neetoRules.validations.required.text"), function (value) {
-              return !utils$1.isEditorEmpty(value);
+              return !utils$2.isEditorEmpty(value);
             })
           });
         }
@@ -5131,7 +5081,7 @@ var getActionsSchema = function getActionsSchema(element, customData) {
               }
             }) : schema,
             body: yup__namespace.string().test("body", i18next.t("neetoRules.validations.required.body"), function (value) {
-              return !utils$1.isEditorEmpty(value);
+              return !utils$2.isEditorEmpty(value);
             }),
             value: selectedAction.type === ACTION_TYPES.emailTo ? yup__namespace.string().required(i18next.t("neetoRules.validations.required.value")) : schema,
             templateName: TEMPLATE_NAME_VALIDATION_SCHEMA
@@ -5144,7 +5094,7 @@ var getActionsSchema = function getActionsSchema(element, customData) {
               return PhoneNumber.isPhoneNumberValid(value);
             })) : schema,
             body: yup__namespace.string().test("body", i18next.t("neetoRules.validations.required.body"), function (value) {
-              return !utils$1.isEditorEmpty(value);
+              return !utils$2.isEditorEmpty(value);
             }),
             value: selectedAction.type === ACTION_TYPES.smsTo ? yup__namespace.string().required(i18next.t("neetoRules.validations.required.value")) : schema,
             templateName: TEMPLATE_NAME_VALIDATION_SCHEMA
@@ -5189,7 +5139,7 @@ var getActionsSchema = function getActionsSchema(element, customData) {
         } else if ((selectedAction === null || selectedAction === void 0 ? void 0 : selectedAction.type) === ACTION_TYPES.note || (selectedAction === null || selectedAction === void 0 ? void 0 : selectedAction.type) === ACTION_TYPES.textarea) {
           return yup__namespace.object({
             value: yup__namespace.string().test("body", i18next.t("neetoRules.validations.required.body"), function (value) {
-              return !utils$1.isEditorEmpty(value);
+              return !utils$2.isEditorEmpty(value);
             })
           });
         } else if ((selectedAction === null || selectedAction === void 0 ? void 0 : selectedAction.type) === ACTION_TYPES.dropdown || (selectedAction === null || selectedAction === void 0 ? void 0 : selectedAction.type) === ACTION_TYPES.date) {
@@ -5385,7 +5335,7 @@ var ActionItem = function ActionItem(_ref) {
     values = _useFormikContext.values,
     errors = _useFormikContext.errors,
     touched = _useFormikContext.touched;
-  var _useActiveField = useActiveField(name),
+  var _useActiveField = useActiveField.useActiveField(name),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
   var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
@@ -5526,11 +5476,14 @@ var ActionItem = function ActionItem(_ref) {
         openPanel: function openPanel(panelSize) {
           return _openPanel(PANEL_TYPES.ACTION_SUBITEM, panelSize);
         }
-      })), neetoCist.isPresent(action === null || action === void 0 ? void 0 : action.children) && /*#__PURE__*/jsxRuntime.jsx(ActionChildren, {
+      })), neetoCist.isPresent(action === null || action === void 0 ? void 0 : action.children) && /*#__PURE__*/jsxRuntime.jsx(ActionChildren.Target, {
         action: action,
         index: index,
         selectedField: selectedField,
-        parentFieldName: name
+        parentFieldName: name,
+        openPanel: function openPanel(panelSize) {
+          _openPanel(PANEL_TYPES.ACTION_SUBITEM, panelSize);
+        }
       })]
     })
   });
@@ -5674,7 +5627,7 @@ var LogicalOperator = function LogicalOperator(_ref) {
   var _useField = formik.useField(name),
     _useField2 = _slicedToArray(_useField, 1),
     field = _useField2[0];
-  var _useActiveField = useActiveField(name),
+  var _useActiveField = useActiveField.useActiveField(name),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive,
     resetActiveField = _useActiveField.resetActiveField;
@@ -6021,10 +5974,10 @@ var AddDelay = function AddDelay(_ref) {
     value = _useField2[0].value,
     meta = _useField2[1],
     setValue = _useField2[2].setValue;
-  var _useActiveField = useActiveField("".concat(name, ".value.value")),
+  var _useActiveField = useActiveField.useActiveField("".concat(name, ".value.value")),
     isValueFieldActive = _useActiveField.isFieldActive,
     setValueFieldActive = _useActiveField.setFieldActive;
-  var _useActiveField2 = useActiveField("".concat(name, ".value.unit")),
+  var _useActiveField2 = useActiveField.useActiveField("".concat(name, ".value.unit")),
     isUnitFieldActive = _useActiveField2.isFieldActive,
     setUnitFieldActive = _useActiveField2.setFieldActive;
   var delayLabel =
@@ -6115,7 +6068,7 @@ var Performer = function Performer(_ref) {
     isMenuDisabled = _ref.isMenuDisabled;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var _useActiveField = useActiveField(performerName),
+  var _useActiveField = useActiveField.useActiveField(performerName),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
   var _useFormikContext = formik.useFormikContext(),
@@ -6183,7 +6136,7 @@ var Events = function Events(_ref) {
     performerName = _ref.performerName;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var _useActiveField = useActiveField(name),
+  var _useActiveField = useActiveField.useActiveField(name),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
   var _useFormikContext = formik.useFormikContext(),
@@ -6780,7 +6733,7 @@ var Form = function Form(_ref) {
     t = _useTranslation.t;
   var formikRef = react.useRef(null);
   var formRef = react.useRef(null);
-  var _useCustomDataStore = useCustomDataStore.useCustomDataStore(function (store) {
+  var _useCustomDataStore = useActiveField.useCustomDataStore(function (store) {
       return {
         customData: store["customData"]
       };