@vertigis/react-ui 18.0.2 → 19.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertigis/react-ui",
-  "version": "18.0.2",
+  "version": "19.0.1",
   "description": "Utilities and React components used in VertiGIS applications.",
   "keywords": [
     "vertigis",

package/styles/index.d.ts

@@ -1,6 +1,7 @@
 export type * from "../styles/themeAugmentation.js";
 export { alpha, ThemeProvider as GcxThemeProvider, createStyles, darken, decomposeColor, duration, easing, emphasize, getContrastRatio, getLuminance, hexToRgb, hslToRgb, lighten, recomposeColor, responsiveFontSizes, rgbToHex, styled, useTheme, } from "@mui/material/styles";
 export type { ColorFormat, ColorObject, ComponentsPropsList, CSSObject, Duration, Easing, PaletteColorOptions, SimplePaletteColorOptions, Transitions, TransitionsOptions, TypographyStyle, TypographyVariant, } from "@mui/material/styles";
+export type { CSSProperties } from "@mui/material/styles/createMixins";
 export type { ThemeProviderProps } from "@mui/material/styles/ThemeProvider";
 export { default as CacheProvider, createCache } from "./CacheProvider.js";
 export { default as createTheme } from "./createTheme.js";

package/utils/debounce.d.ts

@@ -6,11 +6,24 @@
  * @param wait The amount of time to wait for inactivity (in milliseconds).
  * @param immediate If true, trigger the function on the leading edge, instead
  *   of the trailing.
+ * @param abortSignal Optionally specify an abortSignal for the throttled
+ *   function.
  */
-export declare function debounce<T extends unknown[]>(func: (...args: [...T]) => void, wait: number, immediate?: boolean): (...args: [...T]) => void;
+export declare function debounce<T extends unknown[]>(func: (...args: [...T]) => void, wait: number, immediate?: boolean, abortSignal?: AbortSignal): (...args: [...T]) => void;
 /**
  * Same as `debounce()`, but optimized for animation and rendering.
  *
  * @param func The function to debounce.
+ * @param abortSignal Optionally specify an abortSignal for the throttled
+ *   function.
  */
-export declare function debounceAnimation<T extends unknown[]>(func: (...args: [...T]) => void): (...args: [...T]) => void;
+export declare function debounceAnimation<T extends unknown[]>(func: (...args: [...T]) => void, abortSignal?: AbortSignal): (...args: [...T]) => void;
+/**
+ * Returns a debounced and memoized version of the callback that only changes if
+ * one of the `deps` has changed.
+ *
+ * @param callback The function to debounce and memoize.
+ * @param timeout The debounce delay.
+ * @param deps The dependencies of the callback.
+ */
+export declare function useDebounce<T extends unknown[]>(callback: (...args: [...T]) => void, timeout: number, deps: unknown[]): (...args: [...T]) => void;

package/utils/debounce.js

@@ -1,3 +1,4 @@
+import { useCallback, useEffect, useRef } from "react";
 /**
  * Debounces a function, i.e. creates a wrapper that only invokes the original
  * once a certain amount of time has elapsed without being invoked.
@@ -6,34 +7,82 @@
  * @param wait The amount of time to wait for inactivity (in milliseconds).
  * @param immediate If true, trigger the function on the leading edge, instead
  *   of the trailing.
+ * @param abortSignal Optionally specify an abortSignal for the throttled
+ *   function.
  */
-export function debounce(func, wait, immediate) {
-    // Taken from https://davidwalsh.name/function-debounce, originally from Underscore.js
+export function debounce(func, wait, immediate, abortSignal) {
     let timeout;
+    const cleanup = () => {
+        window.clearTimeout(timeout);
+        abortSignal?.removeEventListener("abort", cleanup);
+        timeout = undefined;
+    };
     return (...args) => {
         const later = () => {
-            timeout = undefined;
-            if (!immediate) {
+            cleanup();
+            // Do not execute here if 'immediate=true` this function is just a
+            // timer to block execution until completed.
+            if (!immediate && !abortSignal?.aborted) {
                 func(...args);
             }
         };
+        if (abortSignal?.aborted) {
+            return;
+        }
         const callNow = immediate && !timeout;
-        clearTimeout(timeout);
-        timeout = window.setTimeout(later, wait);
+        cleanup();
         if (callNow) {
             func(...args);
         }
+        abortSignal?.addEventListener("abort", cleanup);
+        timeout = window.setTimeout(later, wait);
     };
 }
 /**
  * Same as `debounce()`, but optimized for animation and rendering.
  *
  * @param func The function to debounce.
+ * @param abortSignal Optionally specify an abortSignal for the throttled
+ *   function.
  */
-export function debounceAnimation(func) {
-    let token;
+export function debounceAnimation(func, abortSignal) {
+    let animationFrame;
+    const cleanup = () => {
+        cancelAnimationFrame(animationFrame);
+        abortSignal?.removeEventListener("abort", cleanup);
+    };
     return (...args) => {
-        cancelAnimationFrame(token);
-        token = requestAnimationFrame(() => func(...args));
+        cleanup();
+        if (abortSignal?.aborted) {
+            return;
+        }
+        animationFrame = requestAnimationFrame(() => {
+            abortSignal?.removeEventListener("abort", cleanup);
+            if (!abortSignal?.aborted) {
+                func(...args);
+            }
+        });
+        abortSignal?.addEventListener("abort", cleanup);
     };
 }
+/**
+ * Returns a debounced and memoized version of the callback that only changes if
+ * one of the `deps` has changed.
+ *
+ * @param callback The function to debounce and memoize.
+ * @param timeout The debounce delay.
+ * @param deps The dependencies of the callback.
+ */
+export function useDebounce(callback, timeout, deps) {
+    // Abort any debounced calls on unmount.
+    const abortController = useRef(new AbortController());
+    useEffect(() => () => {
+        abortController.current.abort();
+        // `React.StrictMode` causes all components to mount twice in
+        // development. This will break debounced functions unless
+        // we refresh the abort controller here.
+        abortController.current = new AbortController();
+    }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return useCallback(debounce(callback, timeout, false, abortController.current.signal), deps);
+}