@workos-inc/widgets 1.20.2-next.1792700156145 → 1.20.2

package/src/lib/use-debounce.ts

@@ -1,8 +1,55 @@
 // Fork of https://github.com/xnimorz/use-debounce
 // MIT License, Copyright (c) 2018 Nikita Mostovoy
 import * as React from "react";
+import { useLayoutEffect } from "./use-layout-effect.js";
 import { canUseDOM } from "./utils.js";
 
+interface Options {
+  /**
+   * The number of milliseconds to delay. if omitted, invocation is deferred to
+   * the next animation frame (or the next tick where that's unavailable).
+   */
+  wait?: number;
+  /**
+   * Controls if the function should be invoked on the leading edge of the
+   * timeout.
+   * @default false
+   */
+  leading?: boolean;
+  /**
+   * Controls if the function should be invoked on the trailing edge of the
+   * timeout.
+   * @default true
+   */
+  trailing?: boolean;
+  /**
+   * Controls if the function should be invoked when the React component
+   * unmounts or the page is closed. This is usually desirable whenever `func`
+   * has persistent side-effects such as persists data.
+   *
+   * NOTE: If the callback calls `fetch()`, you usually also want to specify the
+   * `keepalive=true` option for `fetch()` so it can finish in the background
+   * after the page is closed.
+   *
+   * This option has no effect if `trailing == false`.
+   *
+   * @default false
+   */
+  flushOnExit?: boolean;
+  /**
+   * The maximum time the given function is allowed to be delayed before it's
+   * invoked. Pass `null` and the maximum wait time is equal to the `wait` time.
+   */
+  maxWait?: number | null;
+  /**
+   * If the setting is set to true, all debouncing and timers will happen on the
+   * server side as well.
+   *
+   * @default false
+   */
+  debounceOnServer?: boolean;
+}
+
 /**
  * Creates a debounced function that delays invoking `func` until after `wait`
  * milliseconds have elapsed since the last time the debounced function was
@@ -33,34 +80,25 @@ import { canUseDOM } from "./utils.js";
  * article](https://css-tricks.com/debouncing-throttling-explained-examples/)
  * for details over the differences between `debounce` and `throttle`.
  *
- * @category Function
- * @param {Function} func The function to debounce.
- * @param {number} [wait=0] The number of milliseconds to delay; if omitted,
- *  `requestAnimationFrame` is used (if available, otherwise it will be
- *  setTimeout(...,0)).
- * @param {Object} [options={}] The options object. Controls if `func` should be
- *  invoked on the leading edge of the timeout.
- * @param {boolean} [options.leading=false] The maximum time `func` is allowed
- *  to be delayed before it's invoked.
- * @param {number} [options.maxWait] Controls if `func` should be invoked the
- *  trailing edge of the timeout.
- * @param {boolean} [options.trailing=true]
- * @returns {Function} Returns the new debounced function.
+ * @param func The function to debounce
+ * @param options The options object
+ * @returns Returns the new debounced function.
  * @example
  * ```tsx
  * // Avoid costly calculations while the window size is in flux.
- * const resizeHandler = useDebouncedCallback(calculateLayout, 150);
+ * const resizeHandler = useDebouncedCallback(calculateLayout, { wait: 150 });
  * window.addEventListener('resize', resizeHandler)
  *
  * // Invoke `sendMail` when clicked, debouncing subsequent calls.
- * const clickHandler = useDebouncedCallback(sendMail, 300, {
+ * const clickHandler = useDebouncedCallback(sendMail, {
+ *   wait: 300,
  *   leading: true,
  *   trailing: false,
  * })
  * <button onClick={clickHandler}>click me</button>
  *
  * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
- * const debounced = useDebouncedCallback(batchLog, 250, { 'maxWait': 1000 })
+ * const debounced = useDebouncedCallback(batchLog, { wait: 250, maxWait: 1000 })
  * const source = new EventSource('/stream')
  * source.addEventListener('message', debounced)
  *
@@ -72,258 +110,272 @@ import { canUseDOM } from "./utils.js";
  * ```
  */
 function useDebouncedCallback<T extends (...args: any) => ReturnType<T>>(
-  this: unknown,
   func: T,
-  wait?: number,
-  options?: Options,
+  options: Options = {},
 ): DebouncedState<T> {
-  const lastCallTime = React.useRef<number>(null);
-  const lastInvokeTime = React.useRef(0);
-  const timerId = React.useRef<number>(null);
-  const lastArgs = React.useRef<unknown[]>(null);
-  const lastThis = React.useRef<unknown>(undefined);
-  const result = React.useRef<ReturnType<T>>(undefined);
-  const funcRef = React.useRef(func);
-  const mounted = React.useRef(true);
-  const visibilityListener = React.useRef<VoidFunction>(null);
-  const debouncedRef = React.useRef<DebouncedState<T>>(undefined);
-  // Always keep the latest version of debounce callback, with no wait time.
-  // TODO: Fix this!
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  funcRef.current = func;
-
-  // Bypass `requestAnimationFrame` by explicitly setting `wait=0`.
-  const useRAF = !wait && wait !== 0 && canUseDOM;
-
-  if (typeof func !== "function") {
-    throw new TypeError("Expected a function");
-  }
-
-  wait = +(wait || 0);
-  options = options || {};
-
-  const leading = !!options.leading;
-  const trailing = "trailing" in options ? !!options.trailing : true; // `true` by default
+  const {
+    wait = 0,
+    leading = false,
+    trailing = true,
+    maxWait: maxWaitOption,
+    debounceOnServer = false,
+  } = options;
+  // Bypass `requestAnimationFrame` by explicitly setting `wait: 0`.
+  const useRAF = options.wait === undefined && canUseDOM;
   const flushOnExit = !!options.flushOnExit && trailing;
-  const maxing = "maxWait" in options;
-  const debounceOnServer =
-    "debounceOnServer" in options ? !!options.debounceOnServer : false; // `false` by default
-  const maxWait = maxing ? Math.max(+(options.maxWait || 0), wait) : null;
+  const maxWait =
+    maxWaitOption === undefined ? null : Math.max(maxWaitOption ?? 0, wait);
+
+  const stateRef = React.useRef<DebounceState<T>>({
+    func,
+    lastCallTime: null,
+    lastInvokeTime: 0,
+    timerId: null,
+    lastArgs: null,
+    lastThis: undefined,
+    result: undefined,
+    mounted: true,
+    visibilityListener: null,
+    debounced: undefined,
+  });
 
-  // You may have a question, why we have so many code under the useMemo definition.
-  //
-  // This was made as we want to escape from useCallback hell and
-  // not to initialize a number of functions each time useDebouncedCallback is called.
-  //
-  // It means that we have less garbage for our GC calls which improves performance.
-  // Also, it makes this library smaller.
-  //
-  // And the last reason, that the code without lots of useCallback with deps is easier to read.
-  // You have only one place for that.
   const debounced = React.useMemo(() => {
-    const invokeFunc = (time: number) => {
-      const args = lastArgs.current;
-      const thisArg = lastThis.current;
-      lastArgs.current = lastThis.current = null;
-      lastInvokeTime.current = time;
-
-      return (result.current = funcRef.current.apply(thisArg, args || []));
+    const config: DebounceConfig = {
+      wait,
+      maxWait,
+      leading,
+      trailing,
+      flushOnExit,
+      useRAF,
+      debounceOnServer,
     };
-
-    const startTimer = (pendingFunc: () => void, wait: number) => {
-      if (useRAF) {
-        cancelAnimationFrame(timerId.current!);
-      }
-      timerId.current = useRAF
-        ? requestAnimationFrame(pendingFunc)
-        : (setTimeout(pendingFunc, wait) as unknown as number);
+    const debounced: DebouncedState<T> = function (
+      this: unknown,
+      ...args: Parameters<T>
+    ) {
+      return debounce(stateRef.current, config, this, args);
     };
+    debounced.cancel = () => cancel(stateRef.current, config);
+    debounced.isPending = () => !!stateRef.current.timerId;
+    debounced.flush = () => flush(stateRef.current, config);
+    return debounced;
+  }, [wait, maxWait, leading, trailing, flushOnExit, useRAF, debounceOnServer]);
 
-    const shouldInvoke = (time: number) => {
-      if (!mounted.current) return false;
+  useLayoutEffect(() => {
+    stateRef.current.func = func;
+    stateRef.current.debounced = debounced;
+  });
 
-      const timeSinceLastCall = time - (lastCallTime.current || 0);
-      const timeSinceLastInvoke = time - lastInvokeTime.current;
-
-      // Either this is the first call, activity has stopped and we're at the
-      // trailing edge, the system time has gone backwards and we're treating
-      // it as the trailing edge, or we've hit the `maxWait` limit.
-      return (
-        !lastCallTime.current ||
-        timeSinceLastCall >= wait ||
-        timeSinceLastCall < 0 ||
-        (maxing && timeSinceLastInvoke >= (maxWait || 0))
-      );
+  React.useEffect(() => {
+    const state = stateRef.current;
+    state.mounted = true;
+    return () => {
+      if (flushOnExit) {
+        state.debounced?.flush();
+      }
+      if (state.visibilityListener) {
+        globalThis.document?.removeEventListener?.(
+          "visibilitychange",
+          state.visibilityListener,
+        );
+        state.visibilityListener = null;
+      }
+      state.mounted = false;
     };
+  }, [flushOnExit]);
 
-    const trailingEdge = (time: number) => {
-      timerId.current = null;
-
-      // Only invoke if we have `lastArgs` which means `func` has been
-      // debounced at least once.
-      if (trailing && lastArgs.current) {
-        return invokeFunc(time);
-      }
+  return debounced;
+}
 
-      lastArgs.current = lastThis.current = null;
-      return result.current;
-    };
+/**
+ * Mutable timer state for a hook instance. It outlives any single debounced
+ * function, so changing options doesn't drop pending invocations.
+ */
+interface DebounceState<T extends (...args: any) => ReturnType<T>> {
+  func: T;
+  lastCallTime: number | null;
+  lastInvokeTime: number;
+  timerId: number | null;
+  lastArgs: Parameters<T> | null;
+  lastThis: unknown;
+  result: ReturnType<T> | undefined;
+  mounted: boolean;
+  visibilityListener: VoidFunction | null;
+  debounced: DebouncedState<T> | undefined;
+}
 
-    const timerExpired = () => {
-      const time = Date.now();
+interface DebounceConfig {
+  wait: number;
+  maxWait: number | null;
+  leading: boolean;
+  trailing: boolean;
+  flushOnExit: boolean;
+  useRAF: boolean;
+  debounceOnServer: boolean;
+}
 
-      if (shouldInvoke(time)) {
-        return trailingEdge(time);
-      }
-      // https://github.com/xnimorz/use-debounce/issues/97
-      if (!mounted.current) {
-        return;
-      }
-      // Remaining wait calculation
-      const timeSinceLastCall = time - (lastCallTime.current || 0);
-      const timeSinceLastInvoke = time - lastInvokeTime.current;
-      const timeWaiting = wait - timeSinceLastCall;
-      const remainingWait = maxing
-        ? Math.min(timeWaiting, (maxWait || 0) - timeSinceLastInvoke)
-        : timeWaiting;
+function invokeFunc<T extends (...args: any) => ReturnType<T>>(
+  state: DebounceState<T>,
+  time: number,
+) {
+  const args = state.lastArgs;
+  const thisArg = state.lastThis;
+  state.lastArgs = state.lastThis = null;
+  state.lastInvokeTime = time;
 
-      // Restart the timer
-      startTimer(timerExpired, remainingWait);
-    };
+  return (state.result = state.func.apply(thisArg, args || []));
+}
 
-    const func: DebouncedState<T> = (...args: Parameters<T>): ReturnType<T> => {
-      if (!canUseDOM && !debounceOnServer) {
-        // TODO: Fixme
-        return undefined!;
-      }
+function startTimer<T extends (...args: any) => ReturnType<T>>(
+  state: DebounceState<T>,
+  config: DebounceConfig,
+  wait: number,
+) {
+  const onTimer = () => timerExpired(state, config);
+  if (config.useRAF) {
+    cancelAnimationFrame(state.timerId!);
+  }
+  state.timerId = config.useRAF
+    ? requestAnimationFrame(onTimer)
+    : (setTimeout(onTimer, wait) as unknown as number);
+}
 
-      const time = Date.now();
-      const isInvoking = shouldInvoke(time);
+function shouldInvoke<T extends (...args: any) => ReturnType<T>>(
+  state: DebounceState<T>,
+  { wait, maxWait }: DebounceConfig,
+  time: number,
+) {
+  if (!state.mounted) return false;
+
+  const timeSinceLastCall = time - (state.lastCallTime || 0);
+  const timeSinceLastInvoke = time - state.lastInvokeTime;
+
+  // Either this is the first call, activity has stopped and we're at the
+  // trailing edge, the system time has gone backwards and we're treating
+  // it as the trailing edge, or we've hit the `maxWait` limit.
+  return (
+    !state.lastCallTime ||
+    timeSinceLastCall >= wait ||
+    timeSinceLastCall < 0 ||
+    (maxWait !== null && timeSinceLastInvoke >= maxWait)
+  );
+}
 
-      lastArgs.current = args;
-      lastThis.current = this;
-      lastCallTime.current = time;
+function trailingEdge<T extends (...args: any) => ReturnType<T>>(
+  state: DebounceState<T>,
+  config: DebounceConfig,
+  time: number,
+) {
+  state.timerId = null;
+
+  // Only invoke if we have `lastArgs` which means `func` has been
+  // debounced at least once.
+  if (config.trailing && state.lastArgs) {
+    return invokeFunc(state, time);
+  }
 
-      if (flushOnExit && !visibilityListener.current) {
-        visibilityListener.current = () => {
-          if (globalThis.document?.visibilityState === "hidden") {
-            debouncedRef.current?.flush();
-          }
-        };
-        globalThis.document?.addEventListener?.(
-          "visibilitychange",
-          visibilityListener.current,
-        );
-      }
-      if (isInvoking) {
-        if (!timerId.current && mounted.current) {
-          // Reset any `maxWait` timer.
-          lastInvokeTime.current = lastCallTime.current;
-          // Start the timer for the trailing edge.
-          startTimer(timerExpired, wait);
-          // Invoke the leading edge.
-          return leading ? invokeFunc(lastCallTime.current) : result.current!;
-        }
-        if (maxing) {
-          // Handle invocations in a tight loop.
-          startTimer(timerExpired, wait);
-          return invokeFunc(lastCallTime.current);
-        }
-      }
-      if (!timerId.current) {
-        startTimer(timerExpired, wait);
-      }
-      return result.current!;
-    };
+  state.lastArgs = state.lastThis = null;
+  return state.result;
+}
 
-    func.cancel = () => {
-      if (timerId.current) {
-        useRAF
-          ? cancelAnimationFrame(timerId.current!)
-          : clearTimeout(timerId.current!);
-      }
-      lastInvokeTime.current = 0;
-      lastArgs.current =
-        lastCallTime.current =
-        lastThis.current =
-        timerId.current =
-          null;
-    };
+function timerExpired<T extends (...args: any) => ReturnType<T>>(
+  state: DebounceState<T>,
+  config: DebounceConfig,
+) {
+  const time = Date.now();
 
-    func.isPending = () => {
-      return !!timerId.current;
-    };
+  if (shouldInvoke(state, config, time)) {
+    trailingEdge(state, config, time);
+    return;
+  }
+  // https://github.com/xnimorz/use-debounce/issues/97
+  if (!state.mounted) {
+    return;
+  }
+  // Remaining wait calculation
+  const timeSinceLastCall = time - (state.lastCallTime || 0);
+  const timeSinceLastInvoke = time - state.lastInvokeTime;
+  const timeWaiting = config.wait - timeSinceLastCall;
+  const remainingWait =
+    config.maxWait !== null
+      ? Math.min(timeWaiting, config.maxWait - timeSinceLastInvoke)
+      : timeWaiting;
+
+  // Restart the timer
+  startTimer(state, config, remainingWait);
+}
 
-    func.flush = () => {
-      return !timerId.current ? result.current : trailingEdge(Date.now());
-    };
+function debounce<T extends (...args: any) => ReturnType<T>>(
+  state: DebounceState<T>,
+  config: DebounceConfig,
+  thisArg: unknown,
+  args: Parameters<T>,
+): ReturnType<T> | undefined {
+  if (!canUseDOM && !config.debounceOnServer) {
+    return undefined;
+  }
 
-    return func;
-  }, [
-    leading,
-    maxing,
-    wait,
-    maxWait,
-    trailing,
-    flushOnExit,
-    useRAF,
-    debounceOnServer,
-  ]);
+  const time = Date.now();
+  const isInvoking = shouldInvoke(state, config, time);
 
-  // Store reference to debounced function for cleanup
-  debouncedRef.current = debounced;
+  state.lastArgs = args;
+  state.lastThis = thisArg;
+  state.lastCallTime = time;
 
-  React.useEffect(() => {
-    mounted.current = true;
-    return () => {
-      if (flushOnExit) {
-        debouncedRef.current?.flush();
-      }
-      if (visibilityListener.current) {
-        globalThis.document?.removeEventListener?.(
-          "visibilitychange",
-          visibilityListener.current,
-        );
-        visibilityListener.current = null;
+  if (config.flushOnExit && !state.visibilityListener) {
+    state.visibilityListener = () => {
+      if (globalThis.document?.visibilityState === "hidden") {
+        state.debounced?.flush();
       }
-      mounted.current = false;
     };
-  }, [flushOnExit]);
-
-  return debounced;
+    globalThis.document?.addEventListener?.(
+      "visibilitychange",
+      state.visibilityListener,
+    );
+  }
+  if (isInvoking) {
+    if (!state.timerId && state.mounted) {
+      // Reset any `maxWait` timer.
+      state.lastInvokeTime = time;
+      // Start the timer for the trailing edge.
+      startTimer(state, config, config.wait);
+      // Invoke the leading edge.
+      return config.leading ? invokeFunc(state, time) : state.result;
+    }
+    if (config.maxWait !== null) {
+      // Handle invocations in a tight loop.
+      startTimer(state, config, config.wait);
+      return invokeFunc(state, time);
+    }
+  }
+  if (!state.timerId) {
+    startTimer(state, config, config.wait);
+  }
+  return state.result;
 }
 
-interface CallOptions {
-  /**
-   * Controls if the function should be invoked on the leading edge of the timeout.
-   */
-  leading?: boolean;
-  /**
-   * Controls if the function should be invoked on the trailing edge of the timeout.
-   */
-  trailing?: boolean;
-  /**
-   * Controls if the function should be invoked when the React component unmounts or
-   * the page is closed. This is usually desirable whenever `func` has persistent side-effects
-   * such as persists data.
-   *
-   * NOTE: If the callback calls `fetch()`, you usually also want to specify the `keepalive=true`
-   * option for `fetch()` so it can finish in the background after the page is closed.
-   *
-   * This option has no effect if `trailing == false`.
-   */
-  flushOnExit?: boolean;
+function cancel<T extends (...args: any) => ReturnType<T>>(
+  state: DebounceState<T>,
+  config: DebounceConfig,
+) {
+  if (state.timerId) {
+    if (config.useRAF) {
+      cancelAnimationFrame(state.timerId);
+    } else {
+      clearTimeout(state.timerId);
+    }
+  }
+  state.lastInvokeTime = 0;
+  state.lastArgs = state.lastCallTime = state.lastThis = state.timerId = null;
 }
 
-interface Options extends CallOptions {
-  /**
-   * The maximum time the given function is allowed to be delayed before it's invoked.
-   */
-  maxWait?: number;
-  /**
-   * If the setting is set to true, all debouncing and timers will happen on the server side as well
-   */
-  debounceOnServer?: boolean;
+function flush<T extends (...args: any) => ReturnType<T>>(
+  state: DebounceState<T>,
+  config: DebounceConfig,
+) {
+  return !state.timerId
+    ? state.result
+    : trailingEdge(state, config, Date.now());
 }
 
 interface ControlFunctions<ReturnT> {

package/src/lib/use-widgets-invalidator.ts

@@ -7,10 +7,6 @@ function useWidgetsInvalidatorImpl() {
 
   return React.useCallback(async () => {
     await queryClient.invalidateQueries({ queryKey: ["authToken"] });
-    // TODO: Unclear why, but invalidating other widgets' queries immediately
-    // after the authToken invalidation (even though it's async?) doesn't work,
-    // and We end up with stale data. Waiting for the next tick fixes this.
-    await new Promise((resolve) => setTimeout(resolve, 1));
     return queryClient.invalidateQueries({
       predicate: (query) => isClientGraphqlQueryKey(query.queryKey),
     });

package/src/lib/utils.ts

@@ -4,18 +4,6 @@ export const canUseDOM = !!(
   window.document.createElement
 );
 
-export function composeEventHandlers<E extends { defaultPrevented: boolean }>(
-  originalEventHandler?: (event: E) => void,
-  ourEventHandler?: (event: E) => void,
-) {
-  return function handleEvent(event: E) {
-    originalEventHandler?.(event);
-    if (!event || !event.defaultPrevented) {
-      return ourEventHandler?.(event);
-    }
-  };
-}
-
 export function getBestName({
   firstName,
   lastName,

package/src/widgets/api-keys/api-keys-search.tsx

@@ -20,9 +20,12 @@ const ApiKeysSearch = React.forwardRef<HTMLInputElement, ApiKeysSearchProps>(
     const { dispatch } = useApiKeysContext();
     const translate = useTranslation();
 
-    const filter = useDebouncedCallback((value) => {
-      dispatch({ type: "FILTER_BY_SEARCH", searchQuery: value });
-    }, 200);
+    const filter = useDebouncedCallback(
+      (value) => {
+        dispatch({ type: "FILTER_BY_SEARCH", searchQuery: value });
+      },
+      { wait: 200 },
+    );
 
     const resetSearch = () => {
       clearSearch();

package/src/widgets/api-keys/user-api-keys-search.tsx

@@ -22,9 +22,12 @@ const UserApiKeysSearch = React.forwardRef<
   const { dispatch } = useUserApiKeysContext();
   const translate = useTranslation();
 
-  const filter = useDebouncedCallback((value) => {
-    dispatch({ type: "FILTER_BY_SEARCH", searchQuery: value });
-  }, 200);
+  const filter = useDebouncedCallback(
+    (value) => {
+      dispatch({ type: "FILTER_BY_SEARCH", searchQuery: value });
+    },
+    { wait: 200 },
+  );
 
   const resetSearch = () => {
     clearSearch();