@bigbinary/neeto-filters-frontend 2.12.6 → 2.12.8

package/dist/index.cjs.js

@@ -2316,13 +2316,37 @@ instance.reloadResources;
 instance.use;
 instance.changeLanguage;
 instance.getFixedT;
-const t$1 = instance.t;
+const t$2 = instance.t;
 instance.exists;
 instance.setDefaultNamespace;
 instance.hasLoadedNamespace;
 instance.loadNamespaces;
 instance.loadLanguages;
 
+/**
+ * This file automatically generated from `pre-publish.js`.
+ * Do not manually edit.
+ */
+
+var voidElements = {
+  "area": true,
+  "base": true,
+  "br": true,
+  "col": true,
+  "embed": true,
+  "hr": true,
+  "img": true,
+  "input": true,
+  "link": true,
+  "meta": true,
+  "param": true,
+  "source": true,
+  "track": true,
+  "wbr": true
+};
+
+var t$1=/\s([^'"/\s><]+?)[\s/>]|([^\s=]+)=\s?(".*?"|'.*?')/g;function n$1(n){var r={type:"tag",name:"",voidElement:!1,attrs:{},children:[]},i=n.match(/<\/?([^\s]+?)[/\s>]/);if(i&&(r.name=i[1],(voidElements[i[1]]||"/"===n.charAt(n.length-2))&&(r.voidElement=!0),r.name.startsWith("!--"))){var s=n.indexOf("--\x3e");return {type:"comment",comment:-1!==s?n.slice(4,s):""}}for(var a=new RegExp(t$1),c=null;null!==(c=a.exec(n));)if(c[0].trim())if(c[1]){var o=c[1].trim(),l=[o,""];o.indexOf("=")>-1&&(l=o.split("=")),r.attrs[l[0]]=l[1],a.lastIndex--;}else c[2]&&(r.attrs[c[2]]=c[3].trim().substring(1,c[3].length-1));return r}var r=/<[a-zA-Z0-9\-\!\/](?:"[^"]*"|'[^']*'|[^'">])*>/g,i=/^\s*$/,s=Object.create(null);function a(e,t){switch(t.type){case"text":return e+t.content;case"tag":return e+="<"+t.name+(t.attrs?function(e){var t=[];for(var n in e)t.push(n+'="'+e[n]+'"');return t.length?" "+t.join(" "):""}(t.attrs):"")+(t.voidElement?"/>":">"),t.voidElement?e:e+t.children.reduce(a,"")+"</"+t.name+">";case"comment":return e+"\x3c!--"+t.comment+"--\x3e"}}var c={parse:function(e,t){t||(t={}),t.components||(t.components=s);var a,c=[],o=[],l=-1,m=!1;if(0!==e.indexOf("<")){var u=e.indexOf("<");c.push({type:"text",content:-1===u?e:e.substring(0,u)});}return e.replace(r,function(r,s){if(m){if(r!=="</"+a.name+">")return;m=!1;}var u,f="/"!==r.charAt(1),h=r.startsWith("\x3c!--"),p=s+r.length,d=e.charAt(p);if(h){var v=n$1(r);return l<0?(c.push(v),c):((u=o[l]).children.push(v),c)}if(f&&(l++,"tag"===(a=n$1(r)).type&&t.components[a.name]&&(a.type="component",m=!0),a.voidElement||m||!d||"<"===d||a.children.push({type:"text",content:e.slice(p,e.indexOf("<",p))}),0===l&&c.push(a),(u=o[l-1])&&u.children.push(a),o[l]=a),(!f||a.voidElement)&&(l>-1&&(a.voidElement||a.name===r.slice(2,-1))&&(l--,a=-1===l?c:o[l]),!m&&"<"!==d&&d)){u=-1===l?c:o[l].children;var x=e.indexOf("<",p),g=e.slice(p,-1===x?void 0:x);i.test(g)&&(g=" "),(x>-1&&l+u.length>=0||" "!==g)&&u.push({type:"text",content:g});}}),c},stringify:function(e){return e.reduce(function(e,t){return e+a("",t)},"")}};
+
 function warn() {
   if (console && console.warn) {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -2453,6 +2477,244 @@ function getI18n() {
   return i18nInstance;
 }
 
+function hasChildren(node, checkLength) {
+  if (!node) return false;
+  const base = node.props ? node.props.children : node.children;
+  if (checkLength) return base.length > 0;
+  return !!base;
+}
+function getChildren(node) {
+  if (!node) return [];
+  return node.props ? node.props.children : node.children;
+}
+function hasValidReactChildren(children) {
+  if (Object.prototype.toString.call(children) !== '[object Array]') return false;
+  return children.every(child => React.isValidElement(child));
+}
+function getAsArray(data) {
+  return Array.isArray(data) ? data : [data];
+}
+function mergeProps(source, target) {
+  const newTarget = {
+    ...target
+  };
+  newTarget.props = Object.assign(source.props, target.props);
+  return newTarget;
+}
+function nodesToString(children, i18nOptions) {
+  if (!children) return '';
+  let stringNode = '';
+  const childrenArray = getAsArray(children);
+  const keepArray = i18nOptions.transSupportBasicHtmlNodes && i18nOptions.transKeepBasicHtmlNodesFor ? i18nOptions.transKeepBasicHtmlNodesFor : [];
+  childrenArray.forEach((child, childIndex) => {
+    if (typeof child === 'string') {
+      stringNode += `${child}`;
+    } else if (React.isValidElement(child)) {
+      const childPropsCount = Object.keys(child.props).length;
+      const shouldKeepChild = keepArray.indexOf(child.type) > -1;
+      const childChildren = child.props.children;
+      if (!childChildren && shouldKeepChild && childPropsCount === 0) {
+        stringNode += `<${child.type}/>`;
+      } else if (!childChildren && (!shouldKeepChild || childPropsCount !== 0)) {
+        stringNode += `<${childIndex}></${childIndex}>`;
+      } else if (child.props.i18nIsDynamicList) {
+        stringNode += `<${childIndex}></${childIndex}>`;
+      } else if (shouldKeepChild && childPropsCount === 1 && typeof childChildren === 'string') {
+        stringNode += `<${child.type}>${childChildren}</${child.type}>`;
+      } else {
+        const content = nodesToString(childChildren, i18nOptions);
+        stringNode += `<${childIndex}>${content}</${childIndex}>`;
+      }
+    } else if (child === null) {
+      warn(`Trans: the passed in value is invalid - seems you passed in a null child.`);
+    } else if (typeof child === 'object') {
+      const {
+        format,
+        ...clone
+      } = child;
+      const keys = Object.keys(clone);
+      if (keys.length === 1) {
+        const value = format ? `${keys[0]}, ${format}` : keys[0];
+        stringNode += `{{${value}}}`;
+      } else {
+        warn(`react-i18next: the passed in object contained more than one variable - the object should look like {{ value, format }} where format is optional.`, child);
+      }
+    } else {
+      warn(`Trans: the passed in value is invalid - seems you passed in a variable like {number} - please pass in variables for interpolation as full objects like {{number}}.`, child);
+    }
+  });
+  return stringNode;
+}
+function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, shouldUnescape) {
+  if (targetString === '') return [];
+  const keepArray = i18nOptions.transKeepBasicHtmlNodesFor || [];
+  const emptyChildrenButNeedsHandling = targetString && new RegExp(keepArray.join('|')).test(targetString);
+  if (!children && !emptyChildrenButNeedsHandling) return [targetString];
+  const data = {};
+  function getData(childs) {
+    const childrenArray = getAsArray(childs);
+    childrenArray.forEach(child => {
+      if (typeof child === 'string') return;
+      if (hasChildren(child)) getData(getChildren(child));else if (typeof child === 'object' && !React.isValidElement(child)) Object.assign(data, child);
+    });
+  }
+  getData(children);
+  const ast = c.parse(`<0>${targetString}</0>`);
+  const opts = {
+    ...data,
+    ...combinedTOpts
+  };
+  function renderInner(child, node, rootReactNode) {
+    const childs = getChildren(child);
+    const mappedChildren = mapAST(childs, node.children, rootReactNode);
+    return hasValidReactChildren(childs) && mappedChildren.length === 0 ? childs : mappedChildren;
+  }
+  function pushTranslatedJSX(child, inner, mem, i, isVoid) {
+    if (child.dummy) child.children = inner;
+    mem.push(React.cloneElement(child, {
+      ...child.props,
+      key: i
+    }, isVoid ? undefined : inner));
+  }
+  function mapAST(reactNode, astNode, rootReactNode) {
+    const reactNodes = getAsArray(reactNode);
+    const astNodes = getAsArray(astNode);
+    return astNodes.reduce((mem, node, i) => {
+      const translationContent = node.children && node.children[0] && node.children[0].content && i18n.services.interpolator.interpolate(node.children[0].content, opts, i18n.language);
+      if (node.type === 'tag') {
+        let tmp = reactNodes[parseInt(node.name, 10)];
+        if (!tmp && rootReactNode.length === 1 && rootReactNode[0][node.name]) tmp = rootReactNode[0][node.name];
+        if (!tmp) tmp = {};
+        const child = Object.keys(node.attrs).length !== 0 ? mergeProps({
+          props: node.attrs
+        }, tmp) : tmp;
+        const isElement = React.isValidElement(child);
+        const isValidTranslationWithChildren = isElement && hasChildren(node, true) && !node.voidElement;
+        const isEmptyTransWithHTML = emptyChildrenButNeedsHandling && typeof child === 'object' && child.dummy && !isElement;
+        const isKnownComponent = typeof children === 'object' && children !== null && Object.hasOwnProperty.call(children, node.name);
+        if (typeof child === 'string') {
+          const value = i18n.services.interpolator.interpolate(child, opts, i18n.language);
+          mem.push(value);
+        } else if (hasChildren(child) || isValidTranslationWithChildren) {
+          const inner = renderInner(child, node, rootReactNode);
+          pushTranslatedJSX(child, inner, mem, i);
+        } else if (isEmptyTransWithHTML) {
+          const inner = mapAST(reactNodes, node.children, rootReactNode);
+          mem.push(React.cloneElement(child, {
+            ...child.props,
+            key: i
+          }, inner));
+        } else if (Number.isNaN(parseFloat(node.name))) {
+          if (isKnownComponent) {
+            const inner = renderInner(child, node, rootReactNode);
+            pushTranslatedJSX(child, inner, mem, i, node.voidElement);
+          } else if (i18nOptions.transSupportBasicHtmlNodes && keepArray.indexOf(node.name) > -1) {
+            if (node.voidElement) {
+              mem.push(React.createElement(node.name, {
+                key: `${node.name}-${i}`
+              }));
+            } else {
+              const inner = mapAST(reactNodes, node.children, rootReactNode);
+              mem.push(React.createElement(node.name, {
+                key: `${node.name}-${i}`
+              }, inner));
+            }
+          } else if (node.voidElement) {
+            mem.push(`<${node.name} />`);
+          } else {
+            const inner = mapAST(reactNodes, node.children, rootReactNode);
+            mem.push(`<${node.name}>${inner}</${node.name}>`);
+          }
+        } else if (typeof child === 'object' && !isElement) {
+          const content = node.children[0] ? translationContent : null;
+          if (content) mem.push(content);
+        } else if (node.children.length === 1 && translationContent) {
+          mem.push(React.cloneElement(child, {
+            ...child.props,
+            key: i
+          }, translationContent));
+        } else {
+          mem.push(React.cloneElement(child, {
+            ...child.props,
+            key: i
+          }));
+        }
+      } else if (node.type === 'text') {
+        const wrapTextNodes = i18nOptions.transWrapTextNodes;
+        const content = shouldUnescape ? i18nOptions.unescape(i18n.services.interpolator.interpolate(node.content, opts, i18n.language)) : i18n.services.interpolator.interpolate(node.content, opts, i18n.language);
+        if (wrapTextNodes) {
+          mem.push(React.createElement(wrapTextNodes, {
+            key: `${node.name}-${i}`
+          }, content));
+        } else {
+          mem.push(content);
+        }
+      }
+      return mem;
+    }, []);
+  }
+  const result = mapAST([{
+    dummy: true,
+    children: children || []
+  }], ast, getAsArray(children || []));
+  return getChildren(result[0]);
+}
+function Trans$1(_ref) {
+  let {
+    children,
+    count,
+    parent,
+    i18nKey,
+    context,
+    tOptions = {},
+    values,
+    defaults,
+    components,
+    ns,
+    i18n: i18nFromProps,
+    t: tFromProps,
+    shouldUnescape,
+    ...additionalProps
+  } = _ref;
+  const i18n = i18nFromProps || getI18n();
+  if (!i18n) {
+    warnOnce('You will need to pass in an i18next instance by using i18nextReactModule');
+    return children;
+  }
+  const t = tFromProps || i18n.t.bind(i18n) || (k => k);
+  if (context) tOptions.context = context;
+  const reactI18nextOptions = {
+    ...getDefaults(),
+    ...(i18n.options && i18n.options.react)
+  };
+  let namespaces = ns || t.ns || i18n.options && i18n.options.defaultNS;
+  namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
+  const defaultValue = defaults || nodesToString(children, reactI18nextOptions) || reactI18nextOptions.transEmptyNodeValue || i18nKey;
+  const {
+    hashTransKey
+  } = reactI18nextOptions;
+  const key = i18nKey || (hashTransKey ? hashTransKey(defaultValue) : defaultValue);
+  const interpolationOverride = values ? tOptions.interpolation : {
+    interpolation: {
+      ...tOptions.interpolation,
+      prefix: '#$?',
+      suffix: '?$#'
+    }
+  };
+  const combinedTOpts = {
+    ...tOptions,
+    count,
+    ...values,
+    ...interpolationOverride,
+    defaultValue,
+    ns: namespaces
+  };
+  const translation = key ? t(key, combinedTOpts) : defaultValue;
+  const content = renderNodes(components || children, translation, i18n, reactI18nextOptions, combinedTOpts, shouldUnescape);
+  const useAsParent = parent !== undefined ? parent : reactI18nextOptions.defaultTransParent;
+  return useAsParent ? React.createElement(useAsParent, additionalProps, content) : content;
+}
+
 const initReactI18next = {
   type: '3rdParty',
   init(instance) {
@@ -2476,6 +2738,47 @@ class ReportNamespaces {
   }
 }
 
+function Trans(_ref) {
+  let {
+    children,
+    count,
+    parent,
+    i18nKey,
+    context,
+    tOptions = {},
+    values,
+    defaults,
+    components,
+    ns,
+    i18n: i18nFromProps,
+    t: tFromProps,
+    shouldUnescape,
+    ...additionalProps
+  } = _ref;
+  const {
+    i18n: i18nFromContext,
+    defaultNS: defaultNSFromContext
+  } = React.useContext(I18nContext) || {};
+  const i18n = i18nFromProps || i18nFromContext || getI18n();
+  const t = tFromProps || i18n && i18n.t.bind(i18n);
+  return Trans$1({
+    children,
+    count,
+    parent,
+    i18nKey,
+    context,
+    tOptions,
+    values,
+    defaults,
+    components,
+    ns: ns || t && t.ns || defaultNSFromContext || i18n && i18n.options && i18n.options.defaultNS,
+    i18n,
+    t: tFromProps,
+    shouldUnescape,
+    ...additionalProps
+  });
+}
+
 const usePrevious = (value, ignore) => {
   const ref = React.useRef();
   React.useEffect(() => {
@@ -2594,7 +2897,8 @@ var common = {
 	rename: "Rename",
 	segments: "Segments",
 	userCount: "{{count}} Users",
-	yes: "Yes"
+	yes: "Yes",
+	update: "Update"
 };
 var messages = {
 	enterResource: "Enter {{resource}}",
@@ -2625,8 +2929,8 @@ var shortcuts = {
 };
 var segments = {
 	addNewSegment: "Add new segment",
-	deleteAlertMessage: "Are you sure you want to delete this {{entity}} ? This action cannot be undone.",
-	deleteAlertTitle: "Delete {{entity}} segment?",
+	deleteAlertMessage: "You are permanently deleting the segment <strong>{{entity}}</strong>. This can't be undone.",
+	deleteAlertTitle: "Delete segment?",
 	manageSegments: "Manage segments",
 	name: "Segment name",
 	noSegmentsFound: "No segments found",
@@ -2637,8 +2941,8 @@ var segments = {
 	segmentName: "Segment name",
 	showLess: "See less",
 	showMoreNumbers: "See {{entity}} more",
-	updateSegment: "Update segment",
-	updateSegmentMessage: "Are you sure you want to update the current segment?"
+	updateSegment: "Update segment?",
+	updateSegmentMessage: "You are trying to update the current segment."
 };
 var labels = {
 	keyword: "Keyword"
@@ -2737,15 +3041,15 @@ function _defineProperty(obj, key, value) {
 var SHORTCUTS = {
   closePane: {
     sequence: "escape",
-    description: t$1("shortcuts.closePane")
+    description: t$2("shortcuts.closePane")
   },
   deleteBlock: {
     sequence: "backspace",
-    description: t$1("shortcuts.deleteBlock")
+    description: t$2("shortcuts.deleteBlock")
   },
   openFilterPane: {
     sequence: "enter",
-    description: t$1("shortcuts.openFilterPane")
+    description: t$2("shortcuts.openFilterPane")
   }
 };
 
@@ -2833,48 +3137,48 @@ var DATE_RULES = {
 };
 
 var NUMBER_RULES = [{
-  label: t$1("rules.exactly"),
+  label: t$2("rules.exactly"),
   value: "is"
 }, {
-  label: t$1("rules.notExactly"),
+  label: t$2("rules.notExactly"),
   value: "is_not"
 }, {
-  label: t$1("rules.greaterThan"),
+  label: t$2("rules.greaterThan"),
   value: "greater_than"
 }, {
-  label: t$1("rules.lessThan"),
+  label: t$2("rules.lessThan"),
   value: "less_than"
 }];
 var TEXT_RULES = [{
-  label: t$1("rules.contains"),
+  label: t$2("rules.contains"),
   value: "contains"
 }, {
-  label: t$1("rules.doesNotContain"),
+  label: t$2("rules.doesNotContain"),
   value: "does_not_contain"
 }, {
-  label: t$1("rules.exactly"),
+  label: t$2("rules.exactly"),
   value: "is"
 }, {
-  label: t$1("rules.notExactly"),
+  label: t$2("rules.notExactly"),
   value: "is_not"
 }, {
-  label: t$1("rules.startsWith"),
+  label: t$2("rules.startsWith"),
   value: "starts_with"
 }, {
-  label: t$1("rules.doesNotStartWith"),
+  label: t$2("rules.doesNotStartWith"),
   value: "does_not_start_with"
 }, {
-  label: t$1("rules.endsWith"),
+  label: t$2("rules.endsWith"),
   value: "ends_with"
 }, {
-  label: t$1("rules.doesNotEndWith"),
+  label: t$2("rules.doesNotEndWith"),
   value: "does_not_end_with"
 }];
 var DEFAULT_BOOLEAN_OPTIONS = [{
-  label: t$1("common.yes"),
+  label: t$2("common.yes"),
   value: "true"
 }, {
-  label: t$1("common.no"),
+  label: t$2("common.no"),
   value: "false"
 }];
 
@@ -3887,6 +4191,7 @@ var Segment = function Segment(_ref) {
     isOpen: isUpdateAlertOpen,
     isSubmitting: isUpdating,
     message: t("segments.updateSegmentMessage"),
+    submitButtonLabel: t("common.update"),
     title: t("segments.updateSegment"),
     onClose: function onClose() {
       return setIsUpdateAlertOpen(false);
@@ -6995,7 +7300,8 @@ var Text = function Text(_ref) {
     filter = _ref.filter,
     filters = _ref.filters,
     handleApplyFilter = _ref.handleApplyFilter,
-    autoFocus = _ref.autoFocus;
+    autoFocus = _ref.autoFocus,
+    onClose = _ref.onClose;
   var key = column.key,
     _column$defaultType = column.defaultType,
     defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
@@ -7022,6 +7328,30 @@ var Text = function Text(_ref) {
   var debouncedInputValue = reactUtils.useDebounce(inputValue);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var handleUpdateAndApplyFilter = function handleUpdateAndApplyFilter() {
+    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : debouncedInputValue;
+    var rule = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : selectedRule;
+    if (ramda.equals(filter === null || filter === void 0 ? void 0 : filter.value, value) && ramda.equals(selectedRule, rule)) return;
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: {},
+      rule: rule.value,
+      value: value.trim()
+    });
+    handleApplyFilter(updatedFilter);
+  };
+  var handleKeydown = function handleKeydown(e) {
+    if (e.key === "Enter") {
+      handleUpdateAndApplyFilter(inputValue);
+      onClose();
+    }
+  };
+  var handleRuleChange = function handleRuleChange(ruleOption) {
+    setSelectedRule(ruleOption);
+    if (!debouncedInputValue) return;
+    handleUpdateAndApplyFilter(debouncedInputValue, ruleOption);
+  };
 
   // Reset states when "Clear filters" button is clicked.
   React.useEffect(function () {
@@ -7037,27 +7367,8 @@ var Text = function Text(_ref) {
       });
       return;
     }
-    var updatedFilter = buildUpdatedFilter({
-      column: column,
-      defaultType: defaultType,
-      option: {},
-      rule: selectedRule.value,
-      value: debouncedInputValue.trim()
-    });
-    handleApplyFilter(updatedFilter);
+    handleUpdateAndApplyFilter();
   }, [debouncedInputValue]);
-  var handleRuleChange = function handleRuleChange(ruleOption) {
-    setSelectedRule(ruleOption);
-    if (!debouncedInputValue) return;
-    var updatedFilter = buildUpdatedFilter({
-      column: column,
-      defaultType: defaultType,
-      option: {},
-      rule: ruleOption.value,
-      value: debouncedInputValue.trim()
-    });
-    handleApplyFilter(updatedFilter);
-  };
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-filters-pane-filter__item-wrapper"
   }, showRuleSelector && /*#__PURE__*/React__default["default"].createElement(neetoui.Select, {
@@ -7079,7 +7390,8 @@ var Text = function Text(_ref) {
     }),
     onChange: function onChange(event) {
       return setInputValue(event.target.value);
-    }
+    },
+    onKeyDown: handleKeydown
   }, otherProps)));
 };
 
@@ -7152,7 +7464,8 @@ var Item = function Item(_ref) {
   var column = _ref.column,
     filters = _ref.filters,
     onChange = _ref.onChange,
-    autoFocus = _ref.autoFocus;
+    autoFocus = _ref.autoFocus,
+    onClose = _ref.onClose;
   var key = column.key,
     _column$defaultType = column.defaultType,
     defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType;
@@ -7174,7 +7487,8 @@ var Item = function Item(_ref) {
       column: column,
       filter: filter,
       filters: filters,
-      handleApplyFilter: handleApplyFilter
+      handleApplyFilter: handleApplyFilter,
+      onClose: onClose
     });
   }
   if (isDate(defaultType)) {
@@ -7336,7 +7650,8 @@ var Pane = function Pane(_ref) {
       column: column,
       filters: filters,
       key: column.key,
-      onChange: handleChange
+      onChange: handleChange,
+      onClose: onClose
     });
   }), pure.isPresent(groupedColumns) && /*#__PURE__*/React__default["default"].createElement(neetoui.Accordion, {
     defaultActiveKey: groupedColumns.findIndex(function (_ref4) {
@@ -7470,12 +7785,13 @@ var DeleteAlert = function DeleteAlert(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
     isOpen: isOpen,
     isSubmitting: isDeleting,
-    message: t("segments.deleteAlertMessage", {
-      entity: segment.name
-    }),
-    submitButtonLabel: t("common.proceed"),
-    title: t("segments.deleteAlertTitle", {
-      entity: segment.name
+    submitButtonLabel: t("common.delete"),
+    title: t("segments.deleteAlertTitle"),
+    message: /*#__PURE__*/React__default["default"].createElement(Trans, {
+      i18nKey: "segments.deleteAlertMessage",
+      values: {
+        entity: segment.name
+      }
     }),
     onClose: onClose,
     onSubmit: handleDelete