@chakra-ui/checkbox - npm Package Compare versions

Comparing version 2.2.14 to 2.2.15

dist/checkbox.js

@@ -26,5 +26,5 @@ "use strict";
 module.exports = __toCommonJS(checkbox_exports);
+var import_shared_utils2 = require("@chakra-ui/shared-utils");
 var import_system2 = require("@chakra-ui/system");
-var import_shared_utils2 = require("@chakra-ui/shared-utils");
-var import_react2 = require("react");
+var import_react3 = require("react");
 
@@ -95,3 +95,3 @@ // src/checkbox-context.ts
 
-// ../../utilities/object-utils/src/index.ts
+// ../../utilities/object-utils/src/omit.ts
 function omit(object, keysToOmit = []) {
@@ -289,3 +289,3 @@ const clone = Object.assign({}, object);
             var _a2;
-            (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+            (_a2 = inputRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
           });
@@ -393,2 +393,14 @@ }
 
+// src/use-initial-animation-state.tsx
+var import_react2 = require("react");
+function useInitialAnimationState(isChecked) {
+  const [previousIsChecked, setPreviousIsChecked] = (0, import_react2.useState)(isChecked);
+  const [shouldAnimate, setShouldAnimate] = (0, import_react2.useState)(false);
+  if (isChecked !== previousIsChecked) {
+    setShouldAnimate(true);
+    setPreviousIsChecked(isChecked);
+  }
+  return shouldAnimate;
+}
+
 // src/checkbox.tsx
@@ -477,5 +489,6 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
   });
-  const iconStyles = (0, import_react2.useMemo)(
+  const shouldAnimate = useInitialAnimationState(state.isChecked);
+  const iconStyles = (0, import_react3.useMemo)(
     () => ({
-      animation: state.isIndeterminate ? `${indeterminateOpacityAnim} 20ms linear, ${indeterminateScaleAnim} 200ms linear` : `${checkAnim} 200ms linear`,
+      animation: !shouldAnimate ? void 0 : state.isIndeterminate ? `${indeterminateOpacityAnim} 20ms linear, ${indeterminateScaleAnim} 200ms linear` : `${checkAnim} 200ms linear`,
       fontSize: iconSize,
@@ -485,5 +498,5 @@ color: iconColor,
     }),
-    [iconColor, iconSize, state.isIndeterminate, styles.icon]
+    [iconColor, iconSize, shouldAnimate, state.isIndeterminate, styles.icon]
   );
-  const clonedIcon = (0, import_react2.cloneElement)(icon, {
+  const clonedIcon = (0, import_react3.cloneElement)(icon, {
     __css: iconStyles,
@@ -490,0 +503,0 @@ isIndeterminate: state.isIndeterminate,

dist/index.js

@@ -32,5 +32,5 @@ "use strict";
 // src/checkbox.tsx
+var import_shared_utils2 = require("@chakra-ui/shared-utils");
 var import_system2 = require("@chakra-ui/system");
-var import_shared_utils2 = require("@chakra-ui/shared-utils");
-var import_react2 = require("react");
+var import_react3 = require("react");
 
@@ -101,3 +101,3 @@ // src/checkbox-context.ts
 
-// ../../utilities/object-utils/src/index.ts
+// ../../utilities/object-utils/src/omit.ts
 function omit(object, keysToOmit = []) {
@@ -295,3 +295,3 @@ const clone = Object.assign({}, object);
             var _a2;
-            (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+            (_a2 = inputRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
           });
@@ -399,2 +399,14 @@ }
 
+// src/use-initial-animation-state.tsx
+var import_react2 = require("react");
+function useInitialAnimationState(isChecked) {
+  const [previousIsChecked, setPreviousIsChecked] = (0, import_react2.useState)(isChecked);
+  const [shouldAnimate, setShouldAnimate] = (0, import_react2.useState)(false);
+  if (isChecked !== previousIsChecked) {
+    setShouldAnimate(true);
+    setPreviousIsChecked(isChecked);
+  }
+  return shouldAnimate;
+}
+
 // src/checkbox.tsx
@@ -483,5 +495,6 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
   });
-  const iconStyles = (0, import_react2.useMemo)(
+  const shouldAnimate = useInitialAnimationState(state.isChecked);
+  const iconStyles = (0, import_react3.useMemo)(
     () => ({
-      animation: state.isIndeterminate ? `${indeterminateOpacityAnim} 20ms linear, ${indeterminateScaleAnim} 200ms linear` : `${checkAnim} 200ms linear`,
+      animation: !shouldAnimate ? void 0 : state.isIndeterminate ? `${indeterminateOpacityAnim} 20ms linear, ${indeterminateScaleAnim} 200ms linear` : `${checkAnim} 200ms linear`,
       fontSize: iconSize,
@@ -491,5 +504,5 @@ color: iconColor,
     }),
-    [iconColor, iconSize, state.isIndeterminate, styles.icon]
+    [iconColor, iconSize, shouldAnimate, state.isIndeterminate, styles.icon]
   );
-  const clonedIcon = (0, import_react2.cloneElement)(icon, {
+  const clonedIcon = (0, import_react3.cloneElement)(icon, {
     __css: iconStyles,
@@ -541,3 +554,3 @@ isIndeterminate: state.isIndeterminate,
 // src/checkbox-group.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
@@ -548,3 +561,3 @@ // src/use-checkbox-group.ts
 var import_shared_utils3 = require("@chakra-ui/shared-utils");
-var import_react3 = require("react");
+var import_react4 = require("react");
 function isInputEvent(value) {
@@ -567,3 +580,3 @@ return value && (0, import_shared_utils3.isObject)(value) && (0, import_shared_utils3.isObject)(value.target);
   });
-  const handleChange = (0, import_react3.useCallback)(
+  const handleChange = (0, import_react4.useCallback)(
     (eventOrValue) => {
@@ -579,3 +592,3 @@ if (!value)
   );
-  const getCheckboxProps = (0, import_react3.useCallback)(
+  const getCheckboxProps = (0, import_react4.useCallback)(
     (props2 = {}) => {
@@ -605,3 +618,3 @@ const checkedKey = isNative ? "checked" : "isChecked";
   const { value, onChange } = useCheckboxGroup(props);
-  const group = (0, import_react4.useMemo)(
+  const group = (0, import_react5.useMemo)(
     () => ({
@@ -608,0 +621,0 @@ size,

dist/use-checkbox.js

@@ -33,3 +33,3 @@ "use strict";
 
-// ../../utilities/object-utils/src/index.ts
+// ../../utilities/object-utils/src/omit.ts
 function omit(object, keysToOmit = []) {
@@ -227,3 +227,3 @@ const clone = Object.assign({}, object);
             var _a2;
-            (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+            (_a2 = inputRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
           });
@@ -230,0 +230,0 @@ }

package.json

 {
   "name": "@chakra-ui/checkbox",
-  "version": "2.2.14",
+  "version": "2.2.15",
   "description": "A React Checkbox component for use in forms",
@@ -53,5 +53,5 @@ "keywords": [
     "clean-package": "2.2.0",
-    "@chakra-ui/object-utils": "2.0.8",
-    "@chakra-ui/system": "2.5.5",
-    "@chakra-ui/layout": "2.1.18",
+    "@chakra-ui/object-utils": "2.1.0",
+    "@chakra-ui/system": "2.5.6",
+    "@chakra-ui/layout": "2.1.19",
     "@chakra-ui/icon": "3.0.16"
@@ -58,0 +58,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

92576

increased by4.08%

Number of package files

38

increased by11.76%

Lines of code

2825

increased by3.29%

No dependency changes