@bigbinary/neeto-rules-frontend 2.7.18 → 2.7.20

package/dist/NeetoRulesForm.js

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import './keyboardShortcuts-DNOhEY8h.js';
+import './keyboardShortcuts-DXP5YgeG.js';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useShallow } from 'zustand/shallow';
@@ -15,7 +15,7 @@ import { u as useUtilityStore } from './useUtilityStore-CCUYS1mS.js';
 import classNames from 'classnames';
 import Typography from '@bigbinary/neetoui/Typography';
 import { isNotNil, isEmpty, pluck } from 'ramda';
-import { g as getActionOptions, a as getFieldDetails, b as getSlackChannelErrors, c as getOptionsKey, d as getActionLabel, A as ActionSubItem, F as FIELDS_WITH_OPTIONS, P as PANEL_TYPES, D as DEFAULT_RULE_ACTION, e as getLogicalOperatorOptions, f as getFieldDetails$1, h as getVerbOptions, R as RadioField$1, S as SelectField$1, V as ValueField, i as DEFAULT_DELAY, j as getAllEvents, O as OPERATORS$1, k as STATUS_KEYS, l as formatData, u as usePollRuleName, T as TouchErrors, m as buildPayload, n as ScrollToErrorField, o as Panel, p as getValidationSchema, q as DEFAULT_INITIAL_VALUE } from './index-ogJeZ752.js';
+import { g as getActionOptions, a as getFieldDetails, b as getSlackChannelErrors, c as getOptionsKey, d as getActionLabel, A as ActionSubItem, F as FIELDS_WITH_OPTIONS, P as PANEL_TYPES, D as DEFAULT_RULE_ACTION, e as getLogicalOperatorOptions, f as getFieldDetails$1, h as getVerbOptions, R as RadioField$1, S as SelectField$1, V as ValueField, i as DEFAULT_DELAY, j as getAllEvents, O as OPERATORS$1, k as STATUS_KEYS, l as formatData, u as usePollRuleName, T as TouchErrors, m as buildPayload, n as ScrollToErrorField, o as Panel, p as getValidationSchema, q as DEFAULT_INITIAL_VALUE } from './index-D_dEe2Gg.js';
 import { a as useActiveField, u as useCustomDataStore } from './useCustomDataStore-BtKYtLVc.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils';

package/dist/cjs/NeetoRulesBuilder.js

@@ -2,7 +2,7 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectDestructuringEmpty = require('@babel/runtime/helpers/objectDestructuringEmpty');
-var keyboardShortcuts = require('../keyboardShortcuts-SAk712q8.js');
+var keyboardShortcuts = require('../keyboardShortcuts-lX0oq49M.js');
 var shallow = require('zustand/shallow');
 var react = require('react');
 var classNames = require('classnames');
@@ -13,7 +13,7 @@ var Header = require('@bigbinary/neeto-molecules/Header');
 var Spinner = require('@bigbinary/neetoui/Spinner');
 var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
 var reactI18next = require('react-i18next');
-var index = require('../index-DwGEK-_1.js');
+var index = require('../index-DMCgC01M.js');
 var useCustomDataStore = require('../useCustomDataStore-DxFx8aCf.js');
 var useUtilityStore = require('../useUtilityStore-C_U20IMX.js');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
@@ -26,8 +26,8 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var jsxRuntime = require('react/jsx-runtime');
 var i18next = require('i18next');
 var yup = require('yup');
-var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var useHotkeys = require('@bigbinary/neeto-hotkeys');
 var Search = require('@bigbinary/neeto-icons/Search');
 var Input = require('@bigbinary/neetoui/Input');
 var Typography = require('@bigbinary/neetoui/Typography');
@@ -47,6 +47,7 @@ var MultiEmailInput = require('@bigbinary/neetoui/MultiEmailInput');
 require('@babel/runtime/helpers/typeof');
 require('../useAutomationRulesApi-C1T2E1AN.js');
 require('@tanstack/react-query');
+require('@bigbinary/neeto-commons-frontend/react-utils');
 require('axios');
 require('../index-DFwPrb81.js');
 require('@bigbinary/neetoui/formik/Radio');
@@ -64,7 +65,6 @@ require('@bigbinary/neetoui/Label');
 require('@bigbinary/neetoui/formik/MultiEmailInput');
 require('@bigbinary/neeto-editor/FormikEditor');
 require('@bigbinary/neeto-icons/Refresh');
-require('@bigbinary/neeto-hotkeys');
 require('@bigbinary/neeto-icons/Check');
 require('react-select/creatable');
 require('@babel/runtime/helpers/toArray');
@@ -277,6 +277,21 @@ var TOKEN_STATE = {
 };
 var STATE_CLASS = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, TOKEN_STATE.PLACEHOLDER, "mb-placeholder"), TOKEN_STATE.PLACEHOLDER_NEXT, "mb-placeholder mb-placeholder-next"), TOKEN_STATE.DISABLED, "mb-placeholder mb-placeholder-disabled"), TOKEN_STATE.FILLED, "mb-tok"), TOKEN_STATE.MUTED, "mb-tok mb-tok-muted");
 
+// The flash is a run-once CSS animation, so a repeat submit while it is still
+// applied would not replay it on its own.
+var useReplayFlash = function useReplayFlash(flashSeq) {
+  var ref = react.useRef(null);
+  react.useEffect(function () {
+    var _ref$current, _ref$current$getAnima;
+    if (!flashSeq) return;
+    (_ref$current = ref.current) === null || _ref$current === void 0 || (_ref$current$getAnima = _ref$current.getAnimations) === null || _ref$current$getAnima === void 0 || _ref$current$getAnima.call(_ref$current).forEach(function (animation) {
+      animation.cancel();
+      animation.play();
+    });
+  }, [flashSeq]);
+  return ref;
+};
+
 var _excluded = ["children", "state", "active", "invalid", "onClick", "className", "dataTestid"];
 function ownKeys$c(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$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -293,8 +308,10 @@ var Token = function Token(_ref) {
     dataTestid = _ref.dataTestid,
     rest = _objectWithoutProperties(_ref, _excluded);
   var isInteractive = typeof onClick === "function" && state !== TOKEN_STATE.DISABLED;
+  var tokenRef = useReplayFlash(invalid);
   return /*#__PURE__*/jsxRuntime.jsx("span", _objectSpread$c(_objectSpread$c({
     "data-testid": dataTestid,
+    ref: tokenRef,
     role: isInteractive ? "button" : undefined,
     tabIndex: isInteractive ? 0 : undefined,
     className: classNames(
@@ -1108,15 +1125,17 @@ var DelayRow = function DelayRow(_ref) {
   });
 };
 
-var MetaBlock = reactUtils.withT(function (_ref) {
-  var t = _ref.t,
-    rule = _ref.rule,
+var MetaBlock = function MetaBlock(_ref) {
+  var rule = _ref.rule,
     _ref$showName = _ref.showName,
     showName = _ref$showName === void 0 ? true : _ref$showName,
     _ref$isInvalid = _ref.isInvalid,
     isInvalid = _ref$isInvalid === void 0 ? false : _ref$isInvalid,
     handleEditName = _ref.onEditName,
     handleToggleActive = _ref.onToggleActive;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var nameRef = useReplayFlash(isInvalid);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "mb-meta",
     children: [showName && /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -1125,6 +1144,7 @@ var MetaBlock = reactUtils.withT(function (_ref) {
         className: "mb-meta-label",
         children: t("neetoRules.builder.automationName")
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        ref: nameRef,
         role: handleEditName ? "button" : undefined,
         tabIndex: handleEditName ? 0 : undefined,
         className: classNames("mb-meta-input-wrap", {
@@ -1174,7 +1194,7 @@ var MetaBlock = reactUtils.withT(function (_ref) {
       }), t("neetoRules.builder.activateThisAutomation")]
     })]
   });
-});
+};
 
 function ownKeys$8(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$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -2836,10 +2856,10 @@ var Canvas = function Canvas(_ref) {
   var flatErrors = react.useMemo(function () {
     return keyboardShortcuts.flatten(errors || {});
   }, [errors]);
-  var _useState = react.useState(false),
+  var _useState = react.useState(0),
     _useState2 = _slicedToArray(_useState, 2),
-    flashing = _useState2[0],
-    setFlashing = _useState2[1];
+    flashSeq = _useState2[0],
+    setFlashSeq = _useState2[1];
   var lastSubmitCount = react.useRef(submitCount);
   react.useEffect(function () {
     if (submitCount <= lastSubmitCount.current) return undefined;
@@ -2853,9 +2873,9 @@ var Canvas = function Canvas(_ref) {
     }))) {
       return undefined;
     }
-    setFlashing(true);
+    setFlashSeq(submitCount);
     var timer = setTimeout(function () {
-      return setFlashing(false);
+      return setFlashSeq(0);
     }, FLASH_DURATION_MS);
     return function () {
       return clearTimeout(timer);
@@ -2872,11 +2892,10 @@ var Canvas = function Canvas(_ref) {
       });
     });
   };
-  var isInvalid = function isInvalid(_ref4) {
+  var matchesInvalid = function matchesInvalid(_ref4) {
     var _schema$actions, _schema$actions$actio, _schema$actions2, _schema$actions2$rend, _schema$actions3, _schema$actions3$rend, _schema$actions4, _schema$actions4$opti, _schema$actions5, _schema$actions5$opti, _schema$actions6, _schema$actions7;
     var type = _ref4.type,
       index = _ref4.index;
-    if (!flashing) return false;
     var conditionMeta = "".concat(fieldKeys.conditions, ".value.").concat(index, ".metadata");
     var actionMeta = "".concat(fieldKeys.actions, ".value.").concat(index, ".metadata");
     // eslint-disable-next-line security/detect-object-injection
@@ -2967,6 +2986,12 @@ var Canvas = function Canvas(_ref) {
         return false;
     }
   };
+
+  // Returns the submit generation, not a boolean, so consumers can replay the
+  // flash animation when the same token is still invalid on a repeat submit.
+  var isInvalid = function isInvalid(args) {
+    return flashSeq && matchesInvalid(args) ? flashSeq : 0;
+  };
   var closePaneIfTargeting = function closePaneIfTargeting(_ref5) {
     var anchors = _ref5.anchors,
       index = _ref5.index;
@@ -3583,6 +3608,10 @@ var ConfigPane = function ConfigPane(_ref) {
       return _ref2.apply(this, arguments);
     };
   }();
+  useHotkeys(keyboardShortcuts.SHORTCUTS["continue"].sequence, handleContinue, {
+    enabled: shouldAdvanceToRecipient,
+    mode: "global"
+  });
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(index.Panel.Header, {
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -4080,6 +4109,11 @@ var OptionsPane = function OptionsPane(_ref) {
       data: target.data
     });else closePane();
   };
+  var canContinue = cascade && selectedValues.some(Boolean);
+  useHotkeys(keyboardShortcuts.SHORTCUTS["continue"].sequence, handleContinue, {
+    enabled: canContinue,
+    mode: "global"
+  });
   var optionLabel = function optionLabel(option) {
     var Icon = option.icon;
     if (!Icon && !option.disabledReason) return option.label;
@@ -4194,7 +4228,7 @@ var OptionsPane = function OptionsPane(_ref) {
       children: [renderBody(), belowContent]
     }), cascade && /*#__PURE__*/jsxRuntime.jsx(index.Panel.Footer, {
       children: /*#__PURE__*/jsxRuntime.jsx(Button, {
-        disabled: !selectedValues.some(Boolean),
+        disabled: !canContinue,
         label: t("neetoRules.buttons.continue"),
         size: "large",
         onClick: handleContinue