@chakra-ui/hooks - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

CHANGELOG.md

 # Change Log
 
+## 1.1.2
+
+### Patch Changes
+
+- [`002a4361`](https://github.com/chakra-ui/chakra-ui/commit/002a4361bd738bef49e021a2fff2b9b6a9af5815)
+  [#3125](https://github.com/chakra-ui/chakra-ui/pull/3125) Thanks
+  [@segunadebayo](https://github.com/segunadebayo)! - Fixed issue where using an
+  uncontrolled RadioGroup without a defaultValue causes multiple radio options
+  can be selected.
+
+  This was caused by the `useControllableProp` hook that uses `useRef` to check
+  if a value is controlled or uncontrolled.
+
 ## 1.1.1
@@ -4,0 +17,0 @@

dist/cjs/use-controllable.js

@@ -11,2 +11,4 @@ "use strict";
 
+var _useCallbackRef = require("./use-callback-ref");
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -16,7 +18,4 @@
 
-/* eslint-disable react-hooks/exhaustive-deps */
 function useControllableProp(prop, state) {
-  var _React$useRef = React.useRef(prop !== undefined),
-      isControlled = _React$useRef.current;
-
+  var isControlled = prop !== undefined;
   var value = isControlled && typeof prop !== "undefined" ? prop : state;
@@ -26,7 +25,2 @@ return [isControlled, value];
 
-var defaultPropsMap = {
-  value: "value",
-  defaultValue: "defaultValue",
-  onChange: "onChange"
-};
 /**
@@ -36,11 +30,7 @@ * React hook for using controlling component state.
  */
-
 function useControllableState(props) {
   var valueProp = props.value,
       defaultValue = props.defaultValue,
-      onChange = props.onChange,
-      _props$name = props.name,
-      name = _props$name === void 0 ? "Component" : _props$name,
-      _props$propsMap = props.propsMap,
-      propsMap = _props$propsMap === void 0 ? defaultPropsMap : _props$propsMap;
+      onChange = props.onChange;
+  var handleChange = (0, _useCallbackRef.useCallbackRef)(onChange);
 
@@ -51,33 +41,15 @@ var _React$useState = React.useState(defaultValue),
 
-  var _React$useRef2 = React.useRef(valueProp !== undefined),
-      isControlled = _React$useRef2.current; // don't switch from controlled to uncontrolled
-
-
-  React.useEffect(function () {
-    var nextIsControlled = valueProp !== undefined;
-    var nextMode = nextIsControlled ? "a controlled" : "an uncontrolled";
-    var mode = isControlled ? "a controlled" : "an uncontrolled";
-    (0, _utils.warn)({
-      condition: isControlled !== nextIsControlled,
-      message: "Warning: " + name + " is changing from " + mode + " to " + nextMode + " component. " + "Components should not switch from controlled to uncontrolled (or vice versa). " + ("Use the '" + propsMap.value + "' with an '" + propsMap.onChange + "' handler. ") + ("If you want an uncontrolled component, remove the " + propsMap.value + " prop and use '" + propsMap.defaultValue + "' instead. \"") + "More info: https://fb.me/react-controlled-components"
-    });
-  }, [valueProp, isControlled, name]);
-
-  var _React$useRef3 = React.useRef(defaultValue),
-      initialDefaultValue = _React$useRef3.current;
-
-  React.useEffect(function () {
-    (0, _utils.warn)({
-      condition: initialDefaultValue !== defaultValue,
-      message: "Warning: A component is changing the default value of an uncontrolled " + name + " after being initialized. " + ("To suppress this warning opt to use a controlled " + name + ".")
-    });
-  }, [JSON.stringify(defaultValue)]);
+  var isControlled = valueProp !== undefined;
   var value = isControlled ? valueProp : valueState;
   var updateValue = React.useCallback(function (next) {
     var nextValue = (0, _utils.runIfFn)(next, value);
-    if (!isControlled) setValue(nextValue);
-    onChange == null ? void 0 : onChange(nextValue);
-  }, [onChange, value]);
+
+    if (!isControlled) {
+      setValue(nextValue);
+    }
+
+    handleChange(nextValue);
+  }, [isControlled, handleChange, value]);
   return [value, updateValue];
 }
 //# sourceMappingURL=use-controllable.js.map

dist/esm/use-controllable.js

@@ -1,16 +0,10 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import { runIfFn, warn } from "@chakra-ui/utils";
+import { runIfFn } from "@chakra-ui/utils";
 import * as React from "react";
+import { useCallbackRef } from "./use-callback-ref";
 export function useControllableProp(prop, state) {
-  var {
-    current: isControlled
-  } = React.useRef(prop !== undefined);
+  var isControlled = prop !== undefined;
   var value = isControlled && typeof prop !== "undefined" ? prop : state;
   return [isControlled, value];
 }
-var defaultPropsMap = {
-  value: "value",
-  defaultValue: "defaultValue",
-  onChange: "onChange"
-};
+
 /**
@@ -20,3 +14,2 @@ * React hook for using controlling component state.
  */
-
 export function useControllableState(props) {
@@ -26,37 +19,19 @@ var {
     defaultValue,
-    onChange,
-    name = "Component",
-    propsMap = defaultPropsMap
+    onChange
   } = props;
+  var handleChange = useCallbackRef(onChange);
   var [valueState, setValue] = React.useState(defaultValue);
-  var {
-    current: isControlled
-  } = React.useRef(valueProp !== undefined); // don't switch from controlled to uncontrolled
-
-  React.useEffect(() => {
-    var nextIsControlled = valueProp !== undefined;
-    var nextMode = nextIsControlled ? "a controlled" : "an uncontrolled";
-    var mode = isControlled ? "a controlled" : "an uncontrolled";
-    warn({
-      condition: isControlled !== nextIsControlled,
-      message: "Warning: " + name + " is changing from " + mode + " to " + nextMode + " component. " + "Components should not switch from controlled to uncontrolled (or vice versa). " + ("Use the '" + propsMap.value + "' with an '" + propsMap.onChange + "' handler. ") + ("If you want an uncontrolled component, remove the " + propsMap.value + " prop and use '" + propsMap.defaultValue + "' instead. \"") + "More info: https://fb.me/react-controlled-components"
-    });
-  }, [valueProp, isControlled, name]);
-  var {
-    current: initialDefaultValue
-  } = React.useRef(defaultValue);
-  React.useEffect(() => {
-    warn({
-      condition: initialDefaultValue !== defaultValue,
-      message: "Warning: A component is changing the default value of an uncontrolled " + name + " after being initialized. " + ("To suppress this warning opt to use a controlled " + name + ".")
-    });
-  }, [JSON.stringify(defaultValue)]);
+  var isControlled = valueProp !== undefined;
   var value = isControlled ? valueProp : valueState;
   var updateValue = React.useCallback(next => {
     var nextValue = runIfFn(next, value);
-    if (!isControlled) setValue(nextValue);
-    onChange == null ? void 0 : onChange(nextValue);
-  }, [onChange, value]);
+
+    if (!isControlled) {
+      setValue(nextValue);
+    }
+
+    handleChange(nextValue);
+  }, [isControlled, handleChange, value]);
   return [value, updateValue];
 }
 //# sourceMappingURL=use-controllable.js.map

dist/types/use-controllable.d.ts

@@ -20,14 +20,2 @@ import * as React from "react";
     name?: string;
-    /**
-     * A mapping for the props to give more contextual warning messages.
-     *
-     * In some components `value` might be called `index`, and defaultValue
-     * might be called `defaultIndex`, so this map helps us generate
-     * contextual warning messages
-     */
-    propsMap?: {
-        value: string;
-        defaultValue: string;
-        onChange: string;
-    };
 }
@@ -34,0 +22,0 @@ /**

package.json

 {
   "name": "@chakra-ui/hooks",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "React hooks for Chakra components",
@@ -5,0 +5,0 @@ "keywords": [

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

Worsened metrics

Total package byte prevSize

204971

decreased by-4.18%

Lines of code

2163

decreased by-2.92%

No dependency changes