@chakra-ui/editable - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

CHANGELOG.md

 # Change Log
 
+## 1.1.3
+
+### Patch Changes
+
+- [`fd0252be2`](https://github.com/chakra-ui/chakra-ui/commit/fd0252be2c5fcb1202721aa5dbeef2efe5ec31dd)
+  Thanks [@segunadebayo](https://github.com/segunadebayo)! - Fix: issue where
+  blur/submit fires unexpectedly if `submitOnBlur` is true and you try to click
+  the cancel button
+- Updated dependencies
+  [[`e748219f3`](https://github.com/chakra-ui/chakra-ui/commit/e748219f300f0c51b0eb304fce38b014d7bcbc86),
+  [`9c143bfe5`](https://github.com/chakra-ui/chakra-ui/commit/9c143bfe5bbf180929fabb0a1b4c18d40f7fd3fc),
+  [`91ef14839`](https://github.com/chakra-ui/chakra-ui/commit/91ef148397187010804eb8f30307d2ec94c32c5b)]:
+  - @chakra-ui/hooks@1.2.0
+  - @chakra-ui/utils@1.4.0
+
 ## 1.1.2
@@ -4,0 +19,0 @@

dist/cjs/use-editable.js

@@ -74,21 +74,18 @@ "use strict";
   var editButtonRef = (0, _react.useRef)(null);
+  var cancelButtonRef = (0, _react.useRef)(null);
+  var submitButtonRef = (0, _react.useRef)(null);
+  (0, _hooks.useFocusOnPointerDown)({
+    doc: _utils.isBrowser ? (0, _utils.getOwnerDocument)(inputRef.current) : null,
+    elements: [cancelButtonRef, submitButtonRef]
+  });
   var isInteractive = !isEditing || !isDisabled;
   (0, _hooks.useUpdateEffect)(function () {
     if (!isEditing) {
-      var _editButtonRef$curren;
-
-      (_editButtonRef$curren = editButtonRef.current) == null ? void 0 : _editButtonRef$curren.focus();
+      (0, _utils.focus)(editButtonRef.current);
       return;
     }
 
-    if (selectAllOnFocus) {
-      var _inputRef$current;
-
-      (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.select();
-    } else {
-      var _inputRef$current2;
-
-      (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.focus();
-    }
-
+    (0, _utils.focus)(inputRef.current, {
+      selectTextIfInput: selectAllOnFocus
+    });
     onEditProp == null ? void 0 : onEditProp();
@@ -132,15 +129,13 @@ }, [isEditing, onEditProp, selectAllOnFocus]);
   var isValueEmpty = (0, _utils.isEmpty)(value);
+  var onBlur = (0, _react.useCallback)(function (event) {
+    var relatedTarget = (0, _utils.getRelatedTarget)(event);
+    var targetIsCancel = (0, _utils.contains)(cancelButtonRef.current, relatedTarget);
+    var targetIsSubmit = (0, _utils.contains)(submitButtonRef.current, relatedTarget);
+    var isValidBlur = !targetIsCancel && !targetIsSubmit;
 
-  var getTabIndex = function getTabIndex() {
-    var shouldHaveTabIndex = isInteractive && isPreviewFocusable;
-    return shouldHaveTabIndex ? 0 : undefined;
-  };
-
-  var onBlur = (0, _react.useCallback)(function () {
-    if (submitOnBlur) {
+    if (isValidBlur && submitOnBlur) {
       onSubmit();
     }
   }, [submitOnBlur, onSubmit]);
-
-  var getPreviewProps = function getPreviewProps(props, ref) {
+  var getPreviewProps = (0, _react.useCallback)(function (props, ref) {
     if (props === void 0) {
@@ -154,2 +149,3 @@ props = {};
 
+    var tabIndex = isInteractive && isPreviewFocusable ? 0 : undefined;
     return _extends({}, props, {
@@ -160,8 +156,7 @@ ref: (0, _utils.mergeRefs)(ref, previewRef),
       "aria-disabled": (0, _utils.ariaAttr)(isDisabled),
-      tabIndex: getTabIndex(),
+      tabIndex: tabIndex,
       onFocus: (0, _utils.callAllHandlers)(props.onFocus, onEdit)
     });
-  };
-
-  var getInputProps = function getInputProps(props, ref) {
+  }, [isDisabled, isEditing, isInteractive, isPreviewFocusable, isValueEmpty, onEdit, placeholder, value]);
+  var getInputProps = (0, _react.useCallback)(function (props, ref) {
     if (props === void 0) {
@@ -186,5 +181,4 @@ props = {};
     });
-  };
-
-  var getEditButtonProps = function getEditButtonProps(props, ref) {
+  }, [isDisabled, isEditing, onBlur, onChange, onKeyDown, placeholder, value]);
+  var getEditButtonProps = (0, _react.useCallback)(function (props, ref) {
     if (props === void 0) {
@@ -205,5 +199,4 @@ props = {};
     });
-  };
-
-  var getSubmitButtonProps = function getSubmitButtonProps(props, ref) {
+  }, [onEdit]);
+  var getSubmitButtonProps = (0, _react.useCallback)(function (props, ref) {
     if (props === void 0) {
@@ -219,9 +212,8 @@ props = {};
       "aria-label": "Submit",
-      ref: ref,
+      ref: (0, _utils.mergeRefs)(submitButtonRef, ref),
       type: "button",
       onClick: (0, _utils.callAllHandlers)(props.onClick, onSubmit)
     });
-  };
-
-  var getCancelButtonProps = function getCancelButtonProps(props, ref) {
+  }, [onSubmit]);
+  var getCancelButtonProps = (0, _react.useCallback)(function (props, ref) {
     if (props === void 0) {
@@ -236,10 +228,10 @@ props = {};
     return _extends({
-      "aria-label": "Cancel"
+      "aria-label": "Cancel",
+      id: "cancel"
     }, props, {
-      ref: ref,
+      ref: (0, _utils.mergeRefs)(cancelButtonRef, ref),
       type: "button",
       onClick: (0, _utils.callAllHandlers)(props.onClick, onCancel)
     });
-  };
-
+  }, [onCancel]);
   return {
@@ -246,0 +238,0 @@ isEditing: isEditing,

dist/esm/use-editable.js

@@ -5,4 +5,4 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import { useControllableState, useUpdateEffect } from "@chakra-ui/hooks";
-import { ariaAttr, callAllHandlers, isEmpty, mergeRefs, normalizeEventKey } from "@chakra-ui/utils";
+import { useControllableState, useFocusOnPointerDown, useUpdateEffect } from "@chakra-ui/hooks";
+import { ariaAttr, callAllHandlers, contains, focus, getOwnerDocument, getRelatedTarget, isBrowser, isEmpty, mergeRefs, normalizeEventKey } from "@chakra-ui/utils";
 import { useCallback, useRef, useState } from "react";
@@ -56,21 +56,18 @@
   var editButtonRef = useRef(null);
+  var cancelButtonRef = useRef(null);
+  var submitButtonRef = useRef(null);
+  useFocusOnPointerDown({
+    doc: isBrowser ? getOwnerDocument(inputRef.current) : null,
+    elements: [cancelButtonRef, submitButtonRef]
+  });
   var isInteractive = !isEditing || !isDisabled;
   useUpdateEffect(() => {
     if (!isEditing) {
-      var _editButtonRef$curren;
-
-      (_editButtonRef$curren = editButtonRef.current) == null ? void 0 : _editButtonRef$curren.focus();
+      focus(editButtonRef.current);
       return;
     }
 
-    if (selectAllOnFocus) {
-      var _inputRef$current;
-
-      (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.select();
-    } else {
-      var _inputRef$current2;
-
-      (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.focus();
-    }
-
+    focus(inputRef.current, {
+      selectTextIfInput: selectAllOnFocus
+    });
     onEditProp == null ? void 0 : onEditProp();
@@ -114,15 +111,13 @@ }, [isEditing, onEditProp, selectAllOnFocus]);
   var isValueEmpty = isEmpty(value);
+  var onBlur = useCallback(event => {
+    var relatedTarget = getRelatedTarget(event);
+    var targetIsCancel = contains(cancelButtonRef.current, relatedTarget);
+    var targetIsSubmit = contains(submitButtonRef.current, relatedTarget);
+    var isValidBlur = !targetIsCancel && !targetIsSubmit;
 
-  var getTabIndex = () => {
-    var shouldHaveTabIndex = isInteractive && isPreviewFocusable;
-    return shouldHaveTabIndex ? 0 : undefined;
-  };
-
-  var onBlur = useCallback(() => {
-    if (submitOnBlur) {
+    if (isValidBlur && submitOnBlur) {
       onSubmit();
     }
   }, [submitOnBlur, onSubmit]);
-
-  var getPreviewProps = function getPreviewProps(props, ref) {
+  var getPreviewProps = useCallback(function (props, ref) {
     if (props === void 0) {
@@ -136,2 +131,3 @@ props = {};
 
+    var tabIndex = isInteractive && isPreviewFocusable ? 0 : undefined;
     return _extends({}, props, {
@@ -142,8 +138,7 @@ ref: mergeRefs(ref, previewRef),
       "aria-disabled": ariaAttr(isDisabled),
-      tabIndex: getTabIndex(),
+      tabIndex,
       onFocus: callAllHandlers(props.onFocus, onEdit)
     });
-  };
-
-  var getInputProps = function getInputProps(props, ref) {
+  }, [isDisabled, isEditing, isInteractive, isPreviewFocusable, isValueEmpty, onEdit, placeholder, value]);
+  var getInputProps = useCallback(function (props, ref) {
     if (props === void 0) {
@@ -168,5 +163,4 @@ props = {};
     });
-  };
-
-  var getEditButtonProps = function getEditButtonProps(props, ref) {
+  }, [isDisabled, isEditing, onBlur, onChange, onKeyDown, placeholder, value]);
+  var getEditButtonProps = useCallback(function (props, ref) {
     if (props === void 0) {
@@ -187,5 +181,4 @@ props = {};
     });
-  };
-
-  var getSubmitButtonProps = function getSubmitButtonProps(props, ref) {
+  }, [onEdit]);
+  var getSubmitButtonProps = useCallback(function (props, ref) {
     if (props === void 0) {
@@ -201,9 +194,8 @@ props = {};
       "aria-label": "Submit",
-      ref,
+      ref: mergeRefs(submitButtonRef, ref),
       type: "button",
       onClick: callAllHandlers(props.onClick, onSubmit)
     });
-  };
-
-  var getCancelButtonProps = function getCancelButtonProps(props, ref) {
+  }, [onSubmit]);
+  var getCancelButtonProps = useCallback(function (props, ref) {
     if (props === void 0) {
@@ -218,10 +210,10 @@ props = {};
     return _extends({
-      "aria-label": "Cancel"
+      "aria-label": "Cancel",
+      id: "cancel"
     }, props, {
-      ref,
+      ref: mergeRefs(cancelButtonRef, ref),
       type: "button",
       onClick: callAllHandlers(props.onClick, onCancel)
     });
-  };
-
+  }, [onCancel]);
   return {
@@ -228,0 +220,0 @@ isEditing,

package.json

 {
   "name": "@chakra-ui/editable",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "React component used to build inline-editable components",
@@ -58,7 +58,7 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/hooks": "1.1.5",
-    "@chakra-ui/utils": "1.3.0"
+    "@chakra-ui/hooks": "1.2.0",
+    "@chakra-ui/utils": "1.4.0"
   },
   "devDependencies": {
-    "@chakra-ui/system": "1.4.0",
+    "@chakra-ui/system": "1.5.0",
     "react": "^17.0.1"
@@ -65,0 +65,0 @@ },

New alerts

SPDX disjunction

License

SPDX disjunction for an artifact's license information

Found 1 instance in 1 package

Fixed alerts

SPDX disjunction

License

SPDX disjunction for an artifact's license information

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

90725

increased by6.88%

Lines of code

852

increased by0.71%

Dependency changes

• + Added@chakra-ui/hooks@1.2.0(transitive)

• + Added@chakra-ui/utils@1.4.0(transitive)

• - Removed@chakra-ui/hooks@1.1.5(transitive)

• - Removed@chakra-ui/utils@1.3.0(transitive)

• Updated@chakra-ui/hooks@1.2.0

• Updated@chakra-ui/utils@1.4.0