@fluentui/react-utilities - npm Package Compare versions

Comparing version 9.0.0-alpha.6 to 9.0.0-alpha.7

CHANGELOG.json

@@ -5,3 +5,26 @@ {
     {
-      "date": "Fri, 05 Mar 2021 20:29:23 GMT",
+      "date": "Wed, 10 Mar 2021 07:31:56 GMT",
+      "tag": "@fluentui/react-utilities_v9.0.0-alpha.7",
+      "version": "9.0.0-alpha.7",
+      "comments": {
+        "none": [
+          {
+            "comment": "remove a JSDoc comment",
+            "author": "[e-mail]",
+            "commit": "7f5086718eec496063c6830302c162117fcfc4ec",
+            "package": "@fluentui/react-utilities"
+          }
+        ],
+        "prerelease": [
+          {
+            "comment": "useControllableValue should behave natively",
+            "author": "[e-mail]",
+            "commit": "458d1a05b3288c5d36da578f954df06f227066bf",
+            "package": "@fluentui/react-utilities"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 05 Mar 2021 20:30:59 GMT",
       "tag": "@fluentui/react-utilities_v9.0.0-alpha.6",
@@ -8,0 +31,0 @@ "version": "9.0.0-alpha.6",

CHANGELOG.md

 # Change Log - @fluentui/react-utilities
 
-This log was last generated on Fri, 05 Mar 2021 20:29:23 GMT and should not be manually modified.
+This log was last generated on Wed, 10 Mar 2021 07:31:56 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.0.0-alpha.7)
+
+Wed, 10 Mar 2021 07:31:56 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.0.0-alpha.6..@fluentui/react-utilities_v9.0.0-alpha.7)
+
+### Changes
+
+- useControllableValue should behave natively ([PR #17293](https://github.com/microsoft/fluentui/pull/17293) by [e-mail])
+
 ## [9.0.0-alpha.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.0.0-alpha.6)
 
-Fri, 05 Mar 2021 20:29:23 GMT 
+Fri, 05 Mar 2021 20:30:59 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.0.0-alpha.5..@fluentui/react-utilities_v9.0.0-alpha.6)
@@ -11,0 +20,0 @@

dist/react-utilities.d.ts

@@ -60,2 +60,7 @@ import * as React from 'react';
 /**
+ * Default value can be a value or an initializer
+ */
+declare type DefaultValue<TValue> = TValue | (() => TValue);
+
+/**
  * An array of DIV tag properties and events.
@@ -333,5 +338,5 @@ *
  */
-export declare function useControllableValue<TValue, TElement extends HTMLElement>(controlledValue: TValue | undefined, defaultUncontrolledValue: TValue | undefined): Readonly<[TValue | undefined, (update: React.SetStateAction<TValue | undefined>) => void]>;
+export declare function useControllableValue<TValue, TElement extends HTMLElement>(controlledValue: TValue, defaultUncontrolledValue: DefaultValue<TValue>): Readonly<[TValue, (update: React.SetStateAction<TValue>) => void]>;
 
-export declare function useControllableValue<TValue, TElement extends HTMLElement, TEvent extends React.SyntheticEvent<TElement> | undefined>(controlledValue: TValue | undefined, defaultUncontrolledValue: TValue | undefined, onChange: ChangeCallback<TElement, TValue, TEvent> | undefined): Readonly<[TValue | undefined, (update: React.SetStateAction<TValue | undefined>, ev?: React.FormEvent<TElement>) => void]>;
+export declare function useControllableValue<TValue, TElement extends HTMLElement, TEvent extends React.SyntheticEvent<TElement> | undefined>(controlledValue: TValue, defaultUncontrolledValue: DefaultValue<TValue>, onChange: ChangeCallback<TElement, TValue, TEvent>): Readonly<[TValue, (update: React.SetStateAction<TValue>, ev?: React.FormEvent<TElement>) => void]>;
 
@@ -349,3 +354,2 @@ /**
  * @param fn - The callback function that will be used
- * @param dependencies - Shouldn't be needed since the callback is ref based, but good to behave like native
  */
@@ -352,0 +356,0 @@ export declare const useEventCallback: <Args extends unknown[], Return>(fn: (...args: Args) => Return) => (...args: Args) => Return;

etc/react-utilities.api.md

@@ -171,7 +171,9 @@ ## API Report File for "@fluentui/react-utilities"
 
+// Warning: (ae-forgotten-export) The symbol "DefaultValue" needs to be exported by the entry point index.d.ts
+//
 // @public
-export function useControllableValue<TValue, TElement extends HTMLElement>(controlledValue: TValue | undefined, defaultUncontrolledValue: TValue | undefined): Readonly<[TValue | undefined, (update: React.SetStateAction<TValue | undefined>) => void]>;
+export function useControllableValue<TValue, TElement extends HTMLElement>(controlledValue: TValue, defaultUncontrolledValue: DefaultValue<TValue>): Readonly<[TValue, (update: React.SetStateAction<TValue>) => void]>;
 
 // @public (undocumented)
-export function useControllableValue<TValue, TElement extends HTMLElement, TEvent extends React.SyntheticEvent<TElement> | undefined>(controlledValue: TValue | undefined, defaultUncontrolledValue: TValue | undefined, onChange: ChangeCallback<TElement, TValue, TEvent> | undefined): Readonly<[TValue | undefined, (update: React.SetStateAction<TValue | undefined>, ev?: React.FormEvent<TElement>) => void]>;
+export function useControllableValue<TValue, TElement extends HTMLElement, TEvent extends React.SyntheticEvent<TElement> | undefined>(controlledValue: TValue, defaultUncontrolledValue: DefaultValue<TValue>, onChange: ChangeCallback<TElement, TValue, TEvent>): Readonly<[TValue, (update: React.SetStateAction<TValue>, ev?: React.FormEvent<TElement>) => void]>;
 
@@ -178,0 +180,0 @@ // @public

lib-amd/hooks/useControllableValue.d.ts

 import * as React from 'react';
 export declare type ChangeCallback<TElement extends HTMLElement, TValue, TEvent extends React.SyntheticEvent<TElement> | undefined> = (ev: TEvent, newValue: TValue | undefined) => void;
 /**
+ * Default value can be a value or an initializer
+ */
+declare type DefaultValue<TValue> = TValue | (() => TValue);
+/**
  * Hook to manage a value that could be either controlled or uncontrolled, such as a checked state or
@@ -14,3 +18,4 @@ * text box string.
  */
-export declare function useControllableValue<TValue, TElement extends HTMLElement>(controlledValue: TValue | undefined, defaultUncontrolledValue: TValue | undefined): Readonly<[TValue | undefined, (update: React.SetStateAction<TValue | undefined>) => void]>;
-export declare function useControllableValue<TValue, TElement extends HTMLElement, TEvent extends React.SyntheticEvent<TElement> | undefined>(controlledValue: TValue | undefined, defaultUncontrolledValue: TValue | undefined, onChange: ChangeCallback<TElement, TValue, TEvent> | undefined): Readonly<[TValue | undefined, (update: React.SetStateAction<TValue | undefined>, ev?: React.FormEvent<TElement>) => void]>;
+export declare function useControllableValue<TValue, TElement extends HTMLElement>(controlledValue: TValue, defaultUncontrolledValue: DefaultValue<TValue>): Readonly<[TValue, (update: React.SetStateAction<TValue>) => void]>;
+export declare function useControllableValue<TValue, TElement extends HTMLElement, TEvent extends React.SyntheticEvent<TElement> | undefined>(controlledValue: TValue, defaultUncontrolledValue: DefaultValue<TValue>, onChange: ChangeCallback<TElement, TValue, TEvent>): Readonly<[TValue, (update: React.SetStateAction<TValue>, ev?: React.FormEvent<TElement>) => void]>;
+export {};

lib-amd/hooks/useControllableValue.js

@@ -6,3 +6,3 @@ define(["require", "exports", "react", "./useConst"], function (require, exports, React, useConst_1) {
         var _a = React.useState(defaultUncontrolledValue), value = _a[0], setValue = _a[1];
-        var isControlled = useConst_1.useConst(controlledValue !== undefined);
+        var isControlled = useIsControlled(controlledValue);
         var currentValue = isControlled ? controlledValue : value;
@@ -33,3 +33,12 @@ // Duplicate the current value and onChange in refs so they're accessible from
     exports.useControllableValue = useControllableValue;
+    /**
+     * Helper hook to handle previous comparison of controlled/uncontrolled
+     * Prints an error when isControlled value switches between subsequent renders
+     */
+    var useIsControlled = function (controlledValue) {
+        var isControlled = useConst_1.useConst(controlledValue !== undefined);
+        
+        return isControlled;
+    };
 });
 //# sourceMappingURL=useControllableValue.js.map

lib-amd/hooks/useEventCallback.d.ts

@@ -12,4 +12,3 @@ /**
  * @param fn - The callback function that will be used
- * @param dependencies - Shouldn't be needed since the callback is ref based, but good to behave like native
  */
 export declare const useEventCallback: <Args extends unknown[], Return>(fn: (...args: Args) => Return) => (...args: Args) => Return;

lib-amd/hooks/useEventCallback.js

@@ -15,3 +15,2 @@ define(["require", "exports", "react", "./useIsomorphicLayoutEffect"], function (require, exports, React, useIsomorphicLayoutEffect_1) {
      * @param fn - The callback function that will be used
-     * @param dependencies - Shouldn't be needed since the callback is ref based, but good to behave like native
      */
@@ -18,0 +17,0 @@ exports.useEventCallback = function (fn) {

lib-commonjs/hooks/useControllableValue.d.ts

 import * as React from 'react';
 export declare type ChangeCallback<TElement extends HTMLElement, TValue, TEvent extends React.SyntheticEvent<TElement> | undefined> = (ev: TEvent, newValue: TValue | undefined) => void;
 /**
+ * Default value can be a value or an initializer
+ */
+declare type DefaultValue<TValue> = TValue | (() => TValue);
+/**
  * Hook to manage a value that could be either controlled or uncontrolled, such as a checked state or
@@ -14,3 +18,4 @@ * text box string.
  */
-export declare function useControllableValue<TValue, TElement extends HTMLElement>(controlledValue: TValue | undefined, defaultUncontrolledValue: TValue | undefined): Readonly<[TValue | undefined, (update: React.SetStateAction<TValue | undefined>) => void]>;
-export declare function useControllableValue<TValue, TElement extends HTMLElement, TEvent extends React.SyntheticEvent<TElement> | undefined>(controlledValue: TValue | undefined, defaultUncontrolledValue: TValue | undefined, onChange: ChangeCallback<TElement, TValue, TEvent> | undefined): Readonly<[TValue | undefined, (update: React.SetStateAction<TValue | undefined>, ev?: React.FormEvent<TElement>) => void]>;
+export declare function useControllableValue<TValue, TElement extends HTMLElement>(controlledValue: TValue, defaultUncontrolledValue: DefaultValue<TValue>): Readonly<[TValue, (update: React.SetStateAction<TValue>) => void]>;
+export declare function useControllableValue<TValue, TElement extends HTMLElement, TEvent extends React.SyntheticEvent<TElement> | undefined>(controlledValue: TValue, defaultUncontrolledValue: DefaultValue<TValue>, onChange: ChangeCallback<TElement, TValue, TEvent>): Readonly<[TValue, (update: React.SetStateAction<TValue>, ev?: React.FormEvent<TElement>) => void]>;
+export {};

lib-commonjs/hooks/useControllableValue.js

@@ -7,3 +7,3 @@ "use strict";
     var _a = React.useState(defaultUncontrolledValue), value = _a[0], setValue = _a[1];
-    var isControlled = useConst_1.useConst(controlledValue !== undefined);
+    var isControlled = useIsControlled(controlledValue);
     var currentValue = isControlled ? controlledValue : value;
@@ -34,2 +34,32 @@ // Duplicate the current value and onChange in refs so they're accessible from
 exports.useControllableValue = useControllableValue;
+/**
+ * Helper hook to handle previous comparison of controlled/uncontrolled
+ * Prints an error when isControlled value switches between subsequent renders
+ */
+var useIsControlled = function (controlledValue) {
+    var isControlled = useConst_1.useConst(controlledValue !== undefined);
+    if (process.env.NODE_ENV !== 'production') {
+        // We don't want these warnings in production even though it is against native behaviour
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        React.useEffect(function () {
+            if (isControlled !== (controlledValue !== undefined)) {
+                var error = new Error();
+                var controlWarning = isControlled
+                    ? 'a controlled value to be uncontrolled'
+                    : 'an uncontrolled value to be controlled';
+                var undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';
+                // eslint-disable-next-line no-console
+                console.error([
+                    // Default react error
+                    'A component is changing ' + controlWarning + '. This is likely caused by the value',
+                    'changing from ' + undefinedWarning + ' value, which should not happen.',
+                    'Decide between using a controlled or uncontrolled input element for the lifetime of the component.',
+                    'More info: https://reactjs.org/link/controlled-components',
+                    error.stack,
+                ].join(' '));
+            }
+        }, [isControlled, controlledValue]);
+    }
+    return isControlled;
+};
 //# sourceMappingURL=useControllableValue.js.map

lib-commonjs/hooks/useEventCallback.d.ts

@@ -12,4 +12,3 @@ /**
  * @param fn - The callback function that will be used
- * @param dependencies - Shouldn't be needed since the callback is ref based, but good to behave like native
  */
 export declare const useEventCallback: <Args extends unknown[], Return>(fn: (...args: Args) => Return) => (...args: Args) => Return;

lib-commonjs/hooks/useEventCallback.js

@@ -16,3 +16,2 @@ "use strict";
  * @param fn - The callback function that will be used
- * @param dependencies - Shouldn't be needed since the callback is ref based, but good to behave like native
  */
@@ -19,0 +18,0 @@ exports.useEventCallback = function (fn) {

lib/hooks/useControllableValue.d.ts

 import * as React from 'react';
 export declare type ChangeCallback<TElement extends HTMLElement, TValue, TEvent extends React.SyntheticEvent<TElement> | undefined> = (ev: TEvent, newValue: TValue | undefined) => void;
 /**
+ * Default value can be a value or an initializer
+ */
+declare type DefaultValue<TValue> = TValue | (() => TValue);
+/**
  * Hook to manage a value that could be either controlled or uncontrolled, such as a checked state or
@@ -14,3 +18,4 @@ * text box string.
  */
-export declare function useControllableValue<TValue, TElement extends HTMLElement>(controlledValue: TValue | undefined, defaultUncontrolledValue: TValue | undefined): Readonly<[TValue | undefined, (update: React.SetStateAction<TValue | undefined>) => void]>;
-export declare function useControllableValue<TValue, TElement extends HTMLElement, TEvent extends React.SyntheticEvent<TElement> | undefined>(controlledValue: TValue | undefined, defaultUncontrolledValue: TValue | undefined, onChange: ChangeCallback<TElement, TValue, TEvent> | undefined): Readonly<[TValue | undefined, (update: React.SetStateAction<TValue | undefined>, ev?: React.FormEvent<TElement>) => void]>;
+export declare function useControllableValue<TValue, TElement extends HTMLElement>(controlledValue: TValue, defaultUncontrolledValue: DefaultValue<TValue>): Readonly<[TValue, (update: React.SetStateAction<TValue>) => void]>;
+export declare function useControllableValue<TValue, TElement extends HTMLElement, TEvent extends React.SyntheticEvent<TElement> | undefined>(controlledValue: TValue, defaultUncontrolledValue: DefaultValue<TValue>, onChange: ChangeCallback<TElement, TValue, TEvent>): Readonly<[TValue, (update: React.SetStateAction<TValue>, ev?: React.FormEvent<TElement>) => void]>;
+export {};

lib/hooks/useControllableValue.js

@@ -5,3 +5,3 @@ import * as React from 'react';
     var _a = React.useState(defaultUncontrolledValue), value = _a[0], setValue = _a[1];
-    var isControlled = useConst(controlledValue !== undefined);
+    var isControlled = useIsControlled(controlledValue);
     var currentValue = isControlled ? controlledValue : value;
@@ -31,2 +31,32 @@ // Duplicate the current value and onChange in refs so they're accessible from
 }
+/**
+ * Helper hook to handle previous comparison of controlled/uncontrolled
+ * Prints an error when isControlled value switches between subsequent renders
+ */
+var useIsControlled = function (controlledValue) {
+    var isControlled = useConst(controlledValue !== undefined);
+    if (process.env.NODE_ENV !== 'production') {
+        // We don't want these warnings in production even though it is against native behaviour
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        React.useEffect(function () {
+            if (isControlled !== (controlledValue !== undefined)) {
+                var error = new Error();
+                var controlWarning = isControlled
+                    ? 'a controlled value to be uncontrolled'
+                    : 'an uncontrolled value to be controlled';
+                var undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';
+                // eslint-disable-next-line no-console
+                console.error([
+                    // Default react error
+                    'A component is changing ' + controlWarning + '. This is likely caused by the value',
+                    'changing from ' + undefinedWarning + ' value, which should not happen.',
+                    'Decide between using a controlled or uncontrolled input element for the lifetime of the component.',
+                    'More info: https://reactjs.org/link/controlled-components',
+                    error.stack,
+                ].join(' '));
+            }
+        }, [isControlled, controlledValue]);
+    }
+    return isControlled;
+};
 //# sourceMappingURL=useControllableValue.js.map

lib/hooks/useEventCallback.d.ts

@@ -12,4 +12,3 @@ /**
  * @param fn - The callback function that will be used
- * @param dependencies - Shouldn't be needed since the callback is ref based, but good to behave like native
  */
 export declare const useEventCallback: <Args extends unknown[], Return>(fn: (...args: Args) => Return) => (...args: Args) => Return;

lib/hooks/useEventCallback.js

@@ -14,3 +14,2 @@ import * as React from 'react';
  * @param fn - The callback function that will be used
- * @param dependencies - Shouldn't be needed since the callback is ref based, but good to behave like native
  */
@@ -17,0 +16,0 @@ export var useEventCallback = function (fn) {

package.json

 {
   "name": "@fluentui/react-utilities",
-  "version": "9.0.0-alpha.6",
+  "version": "9.0.0-alpha.7",
   "description": "A set of general React-specific utilities.",
@@ -5,0 +5,0 @@ "main": "lib-commonjs/index.js",

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

347373

increased by3.19%

Lines of code

4542

increased by2.32%

Worsened metrics

Number of low supply chain risk alerts

2

increased byInfinity%

No dependency changes