@trackunit/react-components 0.1.95 → 0.1.97

package/index.cjs

@@ -836,7 +836,7 @@ const usePopoverContext = () => {
  *
  *
  * @param {PopoverProps} props The props for the popover
- * @returns {JSX.Element} A Popover Context Provider contining the children
+ * @returns {JSX.Element} A Popover Context Provider containing the children
  */
 const Popover = (_a) => {
     var { children, isModal = false } = _a, restOptions = __rest(_a, ["children", "isModal"]);
@@ -1159,18 +1159,28 @@ const useClickOutside = (el, options = {}, onClick) => {
  *
  * @param {any} value The value to set
  * @param {number} delay The debounce time
- * @returns {any} value The latest values received
+ * @param {"in" | "out" | "both"} direction Considers truthiness of value. If set to "in", the value will only be debounced if it is truthy. If set to "out", the value will only be debounced if it is falsy. If set to "both" or if not defined, the value will be debounced regardless of truthiness.
+ * @returns {any} The latest value received
  */
-const useDebounce = (value, delay = 500) => {
+const useDebounce = (value, delay = 500, direction) => {
     const [debouncedValue, setDebouncedValue] = React.useState(value);
     React.useEffect(() => {
-        const handler = setTimeout(() => {
+        let handler;
+        if ((direction === "in" && !debouncedValue && value) ||
+            (direction === "out" && debouncedValue && !value) ||
+            direction === "both" ||
+            !direction) {
+            handler = setTimeout(() => {
+                setDebouncedValue(value);
+            }, delay);
+        }
+        else {
             setDebouncedValue(value);
-        }, delay);
+        }
         return () => {
             clearTimeout(handler);
         };
-    }, [value, delay]);
+    }, [value, delay, direction, debouncedValue]);
     return debouncedValue;
 };
 

package/index.js

@@ -809,7 +809,7 @@ const usePopoverContext = () => {
  *
  *
  * @param {PopoverProps} props The props for the popover
- * @returns {JSX.Element} A Popover Context Provider contining the children
+ * @returns {JSX.Element} A Popover Context Provider containing the children
  */
 const Popover = (_a) => {
     var { children, isModal = false } = _a, restOptions = __rest(_a, ["children", "isModal"]);
@@ -1132,18 +1132,28 @@ const useClickOutside = (el, options = {}, onClick) => {
  *
  * @param {any} value The value to set
  * @param {number} delay The debounce time
- * @returns {any} value The latest values received
+ * @param {"in" | "out" | "both"} direction Considers truthiness of value. If set to "in", the value will only be debounced if it is truthy. If set to "out", the value will only be debounced if it is falsy. If set to "both" or if not defined, the value will be debounced regardless of truthiness.
+ * @returns {any} The latest value received
  */
-const useDebounce = (value, delay = 500) => {
+const useDebounce = (value, delay = 500, direction) => {
     const [debouncedValue, setDebouncedValue] = useState(value);
     useEffect(() => {
-        const handler = setTimeout(() => {
+        let handler;
+        if ((direction === "in" && !debouncedValue && value) ||
+            (direction === "out" && debouncedValue && !value) ||
+            direction === "both" ||
+            !direction) {
+            handler = setTimeout(() => {
+                setDebouncedValue(value);
+            }, delay);
+        }
+        else {
             setDebouncedValue(value);
-        }, delay);
+        }
         return () => {
             clearTimeout(handler);
         };
-    }, [value, delay]);
+    }, [value, delay, direction, debouncedValue]);
     return debouncedValue;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.95",
+  "version": "0.1.97",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {

package/src/components/Popover/Popover.d.ts

@@ -65,7 +65,7 @@ export declare const usePopoverContext: () => {
  *
  *
  * @param {PopoverProps} props The props for the popover
- * @returns {JSX.Element} A Popover Context Provider contining the children
+ * @returns {JSX.Element} A Popover Context Provider containing the children
  */
 export declare const Popover: ({ children, isModal, ...restOptions }: {
     children: React.ReactNode;

package/src/hooks/useDebounce.d.ts

@@ -3,6 +3,7 @@
  *
  * @param {any} value The value to set
  * @param {number} delay The debounce time
- * @returns {any} value The latest values received
+ * @param {"in" | "out" | "both"} direction Considers truthiness of value. If set to "in", the value will only be debounced if it is truthy. If set to "out", the value will only be debounced if it is falsy. If set to "both" or if not defined, the value will be debounced regardless of truthiness.
+ * @returns {any} The latest value received
  */
-export declare const useDebounce: <T>(value: T, delay?: number) => T;
+export declare const useDebounce: <T>(value: T, delay?: number, direction?: "in" | "out" | "both") => T;