react-simplikit 0.0.48 → 0.0.49

package/esm/hooks/useThrottledCallback/index.js

@@ -0,0 +1,146 @@
+"use client";
+
+// src/hooks/useThrottledCallback/useThrottledCallback.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef3 } from "react";
+
+// src/hooks/usePreservedCallback/usePreservedCallback.ts
+import { useCallback, useEffect, useRef } from "react";
+function usePreservedCallback(callback) {
+  const callbackRef = useRef(callback);
+  useEffect(
+    function syncCallbackRef() {
+      callbackRef.current = callback;
+    },
+    [callback]
+  );
+  return useCallback((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+}
+
+// src/hooks/usePreservedReference/usePreservedReference.ts
+import { useMemo, useRef as useRef2 } from "react";
+function usePreservedReference(value, areValuesEqual = areDeeplyEqual) {
+  const ref = useRef2(value);
+  return useMemo(() => {
+    if (!areValuesEqual(ref.current, value)) {
+      ref.current = value;
+    }
+    return ref.current;
+  }, [areValuesEqual, value]);
+}
+function areDeeplyEqual(x, y) {
+  return JSON.stringify(x) === JSON.stringify(y);
+}
+
+// src/hooks/useDebounce/debounce.ts
+function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
+  let pendingThis = void 0;
+  let pendingArgs = null;
+  const leading = edges != null && edges.includes("leading");
+  const trailing = edges == null || edges.includes("trailing");
+  const invoke = () => {
+    if (pendingArgs !== null) {
+      func.apply(pendingThis, pendingArgs);
+      pendingThis = void 0;
+      pendingArgs = null;
+    }
+  };
+  const onTimerEnd = () => {
+    if (trailing) {
+      invoke();
+    }
+    cancel();
+  };
+  let timeoutId = null;
+  const schedule = () => {
+    if (timeoutId != null) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      timeoutId = null;
+      onTimerEnd();
+    }, debounceMs);
+  };
+  const cancelTimer = () => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  };
+  const cancel = () => {
+    cancelTimer();
+    pendingThis = void 0;
+    pendingArgs = null;
+  };
+  const debounced = function(...args) {
+    pendingThis = this;
+    pendingArgs = args;
+    const isFirstCall = timeoutId == null;
+    schedule();
+    if (leading && isFirstCall) {
+      invoke();
+    }
+  };
+  debounced.cancel = cancel;
+  return debounced;
+}
+
+// src/hooks/useThrottle/throttle.ts
+function throttle(func, throttleMs, { edges = ["leading", "trailing"] } = {}) {
+  let pendingAt = null;
+  const debounced = debounce(func, throttleMs, { edges });
+  const throttled = function(...args) {
+    if (pendingAt == null) {
+      pendingAt = Date.now();
+    } else {
+      if (Date.now() - pendingAt >= throttleMs) {
+        pendingAt = Date.now();
+        debounced.cancel();
+      }
+    }
+    debounced(...args);
+  };
+  throttled.cancel = debounced.cancel;
+  return throttled;
+}
+
+// src/hooks/useThrottledCallback/useThrottledCallback.ts
+function useThrottledCallback({
+  onChange,
+  timeThreshold,
+  edges = ["leading", "trailing"]
+}) {
+  const handleChange = usePreservedCallback(onChange);
+  const ref = useRef3({ value: false, clearPreviousThrottle: () => {
+  } });
+  useEffect2(function cleanupThrottleOnUnmount() {
+    const current = ref.current;
+    return () => {
+      current.clearPreviousThrottle();
+    };
+  }, []);
+  const preservedEdges = usePreservedReference(edges);
+  return useCallback2(
+    (nextValue) => {
+      if (nextValue === ref.current.value) {
+        return;
+      }
+      const throttled = throttle(
+        () => {
+          handleChange(nextValue);
+          ref.current.value = nextValue;
+        },
+        timeThreshold,
+        { edges: preservedEdges }
+      );
+      ref.current.clearPreviousThrottle();
+      throttled();
+      ref.current.clearPreviousThrottle = throttled.cancel;
+    },
+    [handleChange, timeThreshold, preservedEdges]
+  );
+}
+export {
+  useThrottledCallback
+};

package/esm/hooks/useTimeout/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * @description
  * `useTimeout` is a React hook that executes a callback function after a specified delay.
- * It manages `window.setTimeout` in accordance with the React lifecycle, ensuring cleanup on unmount or when dependencies change.
+ * It manages `setTimeout` in accordance with the React lifecycle, ensuring cleanup on unmount or when dependencies change.
  *
  * @param {() => void} callback - The function to be executed after the delay.
  * @param {number} [delay=0] - The time in milliseconds to wait before executing the callback.

package/esm/hooks/useTimeout/index.js

@@ -7,9 +7,12 @@ import { useEffect as useEffect2 } from "react";
 import { useCallback, useEffect, useRef } from "react";
 function usePreservedCallback(callback) {
   const callbackRef = useRef(callback);
-  useEffect(() => {
-    callbackRef.current = callback;
-  }, [callback]);
+  useEffect(
+    function syncCallbackRef() {
+      callbackRef.current = callback;
+    },
+    [callback]
+  );
   return useCallback((...args) => {
     return callbackRef.current(...args);
   }, []);
@@ -19,8 +22,8 @@ function usePreservedCallback(callback) {
 function useTimeout(callback, delay = 0) {
   const preservedCallback = usePreservedCallback(callback);
   useEffect2(() => {
-    const timeoutId = window.setTimeout(preservedCallback, delay);
-    return () => window.clearTimeout(timeoutId);
+    const timeoutId = setTimeout(preservedCallback, delay);
+    return () => clearTimeout(timeoutId);
   }, [delay, preservedCallback]);
 }
 export {

package/esm/index.d.ts

@@ -15,7 +15,9 @@ export { useImpressionRef } from './hooks/useImpressionRef/index.js';
 export { useInputState } from './hooks/useInputState/index.js';
 export { useIntersectionObserver } from './hooks/useIntersectionObserver/index.js';
 export { useInterval } from './hooks/useInterval/index.js';
+export { useIsClient } from './hooks/useIsClient/index.js';
 export { useIsomorphicLayoutEffect } from './hooks/useIsomorphicLayoutEffect/index.js';
+export { useList } from './hooks/useList/index.js';
 export { useLoading } from './hooks/useLoading/index.js';
 export { useLongPress } from './hooks/useLongPress/index.js';
 export { useMap } from './hooks/useMap/index.js';
@@ -24,8 +26,10 @@ export { usePreservedCallback } from './hooks/usePreservedCallback/index.js';
 export { usePreservedReference } from './hooks/usePreservedReference/index.js';
 export { usePrevious } from './hooks/usePrevious/index.js';
 export { useRefEffect } from './hooks/useRefEffect/index.js';
+export { useSet } from './hooks/useSet/index.js';
 export { useStorageState } from './hooks/useStorageState/index.js';
 export { useThrottle } from './hooks/useThrottle/index.js';
+export { useThrottledCallback } from './hooks/useThrottledCallback/index.js';
 export { useTimeout } from './hooks/useTimeout/index.js';
 export { useToggle } from './hooks/useToggle/index.js';
 export { useVisibilityEvent } from './hooks/useVisibilityEvent/index.js';

package/esm/index.js

@@ -66,9 +66,12 @@ function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
 import { useCallback, useEffect, useRef } from "react";
 function usePreservedCallback(callback) {
   const callbackRef = useRef(callback);
-  useEffect(() => {
-    callbackRef.current = callback;
-  }, [callback]);
+  useEffect(
+    function syncCallbackRef() {
+      callbackRef.current = callback;
+    },
+    [callback]
+  );
   return useCallback((...args) => {
     return callbackRef.current(...args);
   }, []);
@@ -84,7 +87,7 @@ function useDebouncedCallback({
   const handleChange = usePreservedCallback(onChange);
   const ref = useRef2({ value: false, clearPreviousDebounce: () => {
   } });
-  useEffect2(() => {
+  useEffect2(function clearDebouncedOnUnmount() {
     const current = ref.current;
     return () => {
       current.clearPreviousDebounce();
@@ -270,7 +273,7 @@ function Separated({ children, by: separator }) {
   return /* @__PURE__ */ jsx2(Fragment2, { children: childrenArray.map((child, i, { length }) => /* @__PURE__ */ jsxs(Fragment, { children: [
     child,
     i + 1 !== length && separator
-  ] }, i)) });
+  ] }, child.key ?? i)) });
 }
 
 // src/components/SwitchCase/SwitchCase.tsx
@@ -434,11 +437,14 @@ function useDebounce(callback, wait, options = {}) {
   const debounced = useMemo3(() => {
     return debounce(preservedCallback, wait, { edges });
   }, [preservedCallback, wait, edges]);
-  useEffect7(() => {
-    return () => {
-      debounced.cancel();
-    };
-  }, [debounced]);
+  useEffect7(
+    function cancelDebouncedOnUnmount() {
+      return () => {
+        debounced.cancel();
+      };
+    },
+    [debounced]
+  );
   return debounced;
 }
 
@@ -621,29 +627,104 @@ function useInterval(callback, options) {
   const immediate = typeof options === "number" ? false : options.immediate;
   const enabled = typeof options === "number" ? true : options.enabled ?? true;
   const preservedCallback = usePreservedCallback(callback);
-  useEffect10(() => {
-    if (immediate === true && enabled) {
-      preservedCallback();
-    }
-  }, [immediate, preservedCallback, enabled]);
-  useEffect10(() => {
-    if (!enabled) {
-      return;
-    }
-    const id = window.setInterval(preservedCallback, delay);
-    return () => window.clearInterval(id);
-  }, [delay, preservedCallback, enabled]);
+  useEffect10(
+    function runImmediateCallback() {
+      if (immediate === true && enabled) {
+        preservedCallback();
+      }
+    },
+    [immediate, preservedCallback, enabled]
+  );
+  useEffect10(
+    function startInterval() {
+      if (!enabled) {
+        return;
+      }
+      const id = setInterval(preservedCallback, delay);
+      return () => clearInterval(id);
+    },
+    [delay, preservedCallback, enabled]
+  );
+}
+
+// src/hooks/useIsClient/useIsClient.ts
+import { useEffect as useEffect11, useState as useState6 } from "react";
+function useIsClient() {
+  const [isClient, setIsClient] = useState6(false);
+  useEffect11(function syncClientState() {
+    setIsClient(true);
+  }, []);
+  return isClient;
 }
 
 // src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts
-import { useEffect as useEffect11, useLayoutEffect } from "react";
+import { useEffect as useEffect12, useLayoutEffect } from "react";
 var isServer = typeof window === "undefined";
-var useIsomorphicLayoutEffect = isServer ? useEffect11 : useLayoutEffect;
+var useIsomorphicLayoutEffect = isServer ? useEffect12 : useLayoutEffect;
+
+// src/hooks/useList/useList.ts
+import { useMemo as useMemo5, useState as useState7 } from "react";
+
+// src/hooks/usePreservedReference/usePreservedReference.ts
+import { useMemo as useMemo4, useRef as useRef9 } from "react";
+function usePreservedReference(value, areValuesEqual = areDeeplyEqual) {
+  const ref = useRef9(value);
+  return useMemo4(() => {
+    if (!areValuesEqual(ref.current, value)) {
+      ref.current = value;
+    }
+    return ref.current;
+  }, [areValuesEqual, value]);
+}
+function areDeeplyEqual(x, y) {
+  return JSON.stringify(x) === JSON.stringify(y);
+}
+
+// src/hooks/useList/useList.ts
+function useList(initialState = []) {
+  const [list, setList] = useState7(initialState);
+  const preservedInitialState = usePreservedReference(initialState);
+  const push = usePreservedCallback((value) => {
+    setList((prev) => [...prev, value]);
+  });
+  const insertAt = usePreservedCallback((index, value) => {
+    setList((prev) => {
+      const next = [...prev];
+      next.splice(index, 0, value);
+      return next;
+    });
+  });
+  const updateAt = usePreservedCallback((index, value) => {
+    setList((prev) => {
+      const next = [...prev];
+      next[index] = value;
+      return next;
+    });
+  });
+  const removeAt = usePreservedCallback((index) => {
+    setList((prev) => {
+      const next = [...prev];
+      next.splice(index, 1);
+      return next;
+    });
+  });
+  const setAll = usePreservedCallback((values) => {
+    setList(values);
+  });
+  const reset = usePreservedCallback(() => {
+    setList(preservedInitialState);
+  });
+  const actions = useMemo5(
+    () => ({ push, insertAt, updateAt, removeAt, setAll, reset }),
+    [push, insertAt, updateAt, removeAt, setAll, reset]
+  );
+  return [list, actions];
+}
 
 // src/hooks/useLoading/useLoading.ts
-import { useCallback as useCallback12, useEffect as useEffect12, useMemo as useMemo4, useRef as useRef9, useState as useState6 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect13, useMemo as useMemo6, useRef as useRef10, useState as useState8 } from "react";
 function useLoading() {
-  const [loading, setLoading] = useState6(false);
+  const [loading, setLoading] = useState8(false);
   const ref = useIsMountedRef();
   const startTransition = useCallback12(
     async (promise) => {
@@ -659,25 +740,28 @@ function useLoading() {
     },
     [ref.isMounted]
   );
-  return useMemo4(() => [loading, startTransition], [loading, startTransition]);
+  return useMemo6(() => [loading, startTransition], [loading, startTransition]);
 }
 function useIsMountedRef() {
-  const ref = useRef9({ isMounted: true }).current;
-  useEffect12(() => {
-    ref.isMounted = true;
-    return () => {
-      ref.isMounted = false;
-    };
-  }, [ref]);
+  const ref = useRef10({ isMounted: true }).current;
+  useEffect13(
+    function trackMountedState() {
+      ref.isMounted = true;
+      return () => {
+        ref.isMounted = false;
+      };
+    },
+    [ref]
+  );
   return ref;
 }
 
 // src/hooks/useLongPress/useLongPress.ts
-import { useCallback as useCallback13, useRef as useRef10 } from "react";
+import { useCallback as useCallback13, useRef as useRef11 } from "react";
 function useLongPress(onLongPress, { delay = 500, moveThreshold, onClick, onLongPressEnd } = {}) {
-  const timeoutRef = useRef10(null);
-  const isLongPressActiveRef = useRef10(false);
-  const initialPositionRef = useRef10({ x: 0, y: 0 });
+  const timeoutRef = useRef11(null);
+  const isLongPressActiveRef = useRef11(false);
+  const initialPositionRef = useRef11({ x: 0, y: 0 });
   const preservedOnLongPress = usePreservedCallback(onLongPress);
   const preservedOnClick = usePreservedCallback(onClick || (() => {
   }));
@@ -753,26 +837,9 @@ function useLongPress(onLongPress, { delay = 500, moveThreshold, onClick, onLong
 }
 
 // src/hooks/useMap/useMap.ts
-import { useCallback as useCallback14, useMemo as useMemo6, useState as useState7 } from "react";
-
-// src/hooks/usePreservedReference/usePreservedReference.ts
-import { useMemo as useMemo5, useRef as useRef11 } from "react";
-function usePreservedReference(value, areValuesEqual = areDeeplyEqual) {
-  const ref = useRef11(value);
-  return useMemo5(() => {
-    if (!areValuesEqual(ref.current, value)) {
-      ref.current = value;
-    }
-    return ref.current;
-  }, [areValuesEqual, value]);
-}
-function areDeeplyEqual(x, y) {
-  return JSON.stringify(x) === JSON.stringify(y);
-}
-
-// src/hooks/useMap/useMap.ts
+import { useCallback as useCallback14, useMemo as useMemo7, useState as useState9 } from "react";
 function useMap(initialState = /* @__PURE__ */ new Map()) {
-  const [map, setMap] = useState7(() => new Map(initialState));
+  const [map, setMap] = useState9(() => new Map(initialState));
   const preservedInitialState = usePreservedReference(initialState);
   const set = useCallback14((key, value) => {
     setMap((prev) => {
@@ -794,14 +861,14 @@ function useMap(initialState = /* @__PURE__ */ new Map()) {
   const reset = useCallback14(() => {
     setMap(() => new Map(preservedInitialState));
   }, [preservedInitialState]);
-  const actions = useMemo6(() => {
+  const actions = useMemo7(() => {
     return { set, setAll, remove, reset };
   }, [set, setAll, remove, reset]);
   return [map, actions];
 }
 
 // src/hooks/useOutsideClickEffect/useOutsideClickEffect.ts
-import { useEffect as useEffect13, useRef as useRef12 } from "react";
+import { useEffect as useEffect14, useRef as useRef12 } from "react";
 function useOutsideClickEffect(container, callback) {
   const containers = useRef12([]);
   const handleDocumentClick = usePreservedCallback(({ target }) => {
@@ -816,10 +883,10 @@ function useOutsideClickEffect(container, callback) {
     }
     callback();
   });
-  useEffect13(() => {
+  useEffect14(() => {
     containers.current = [container].flat(1).filter((item) => item != null);
   }, [container]);
-  useEffect13(() => {
+  useEffect14(() => {
     document.addEventListener("click", handleDocumentClick);
     return () => {
       document.removeEventListener("click", handleDocumentClick);
@@ -845,6 +912,49 @@ function usePrevious(state, compare = strictEquals) {
   return prevRef.current;
 }
 
+// src/hooks/useSet/useSet.ts
+import { useMemo as useMemo8, useState as useState10 } from "react";
+function useSet(initialState = /* @__PURE__ */ new Set()) {
+  const [set, setSet] = useState10(() => new Set(initialState));
+  const preservedInitialState = usePreservedReference(initialState);
+  const add = usePreservedCallback((value) => {
+    setSet((prev) => {
+      const nextSet = new Set(prev);
+      nextSet.add(value);
+      return nextSet;
+    });
+  });
+  const remove = usePreservedCallback((value) => {
+    setSet((prev) => {
+      const nextSet = new Set(prev);
+      nextSet.delete(value);
+      return nextSet;
+    });
+  });
+  const toggle2 = usePreservedCallback((value) => {
+    setSet((prev) => {
+      const nextSet = new Set(prev);
+      if (nextSet.has(value)) {
+        nextSet.delete(value);
+      } else {
+        nextSet.add(value);
+      }
+      return nextSet;
+    });
+  });
+  const setAll = usePreservedCallback((values) => {
+    setSet(() => new Set(values));
+  });
+  const reset = usePreservedCallback(() => {
+    setSet(() => new Set(preservedInitialState));
+  });
+  const actions = useMemo8(
+    () => ({ add, remove, toggle: toggle2, setAll, reset }),
+    [add, remove, toggle2, setAll, reset]
+  );
+  return [set, actions];
+}
+
 // src/hooks/useStorageState/useStorageState.ts
 import { useCallback as useCallback15, useRef as useRef14, useSyncExternalStore } from "react";
 
@@ -1012,7 +1122,7 @@ function useStorageState(key, {
 }
 
 // src/hooks/useThrottle/useThrottle.ts
-import { useEffect as useEffect14, useMemo as useMemo7 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo9 } from "react";
 
 // src/hooks/useThrottle/throttle.ts
 function throttle(func, throttleMs, { edges = ["leading", "trailing"] } = {}) {
@@ -1037,11 +1147,11 @@ function throttle(func, throttleMs, { edges = ["leading", "trailing"] } = {}) {
 function useThrottle(callback, wait, options) {
   const preservedCallback = usePreservedCallback(callback);
   const preservedOptions = usePreservedReference(options ?? {});
-  const throttledCallback = useMemo7(
+  const throttledCallback = useMemo9(
     () => throttle(preservedCallback, wait, preservedOptions),
     [preservedOptions, preservedCallback, wait]
   );
-  useEffect14(() => {
+  useEffect15(() => {
     return () => {
       throttledCallback.cancel();
     };
@@ -1049,13 +1159,51 @@ function useThrottle(callback, wait, options) {
   return throttledCallback;
 }
 
+// src/hooks/useThrottledCallback/useThrottledCallback.ts
+import { useCallback as useCallback16, useEffect as useEffect16, useRef as useRef15 } from "react";
+function useThrottledCallback({
+  onChange,
+  timeThreshold,
+  edges = ["leading", "trailing"]
+}) {
+  const handleChange = usePreservedCallback(onChange);
+  const ref = useRef15({ value: false, clearPreviousThrottle: () => {
+  } });
+  useEffect16(function cleanupThrottleOnUnmount() {
+    const current = ref.current;
+    return () => {
+      current.clearPreviousThrottle();
+    };
+  }, []);
+  const preservedEdges = usePreservedReference(edges);
+  return useCallback16(
+    (nextValue) => {
+      if (nextValue === ref.current.value) {
+        return;
+      }
+      const throttled = throttle(
+        () => {
+          handleChange(nextValue);
+          ref.current.value = nextValue;
+        },
+        timeThreshold,
+        { edges: preservedEdges }
+      );
+      ref.current.clearPreviousThrottle();
+      throttled();
+      ref.current.clearPreviousThrottle = throttled.cancel;
+    },
+    [handleChange, timeThreshold, preservedEdges]
+  );
+}
+
 // src/hooks/useTimeout/useTimeout.ts
-import { useEffect as useEffect15 } from "react";
+import { useEffect as useEffect17 } from "react";
 function useTimeout(callback, delay = 0) {
   const preservedCallback = usePreservedCallback(callback);
-  useEffect15(() => {
-    const timeoutId = window.setTimeout(preservedCallback, delay);
-    return () => window.clearTimeout(timeoutId);
+  useEffect17(() => {
+    const timeoutId = setTimeout(preservedCallback, delay);
+    return () => clearTimeout(timeoutId);
   }, [delay, preservedCallback]);
 }
 
@@ -1067,12 +1215,12 @@ function useToggle(initialValue = false) {
 var toggle = (state) => !state;
 
 // src/utils/buildContext/buildContext.tsx
-import { createContext, useContext, useMemo as useMemo8 } from "react";
+import { createContext, useContext, useMemo as useMemo10 } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
 function buildContext(contextName, defaultContextValues) {
   const Context = createContext(defaultContextValues ?? void 0);
   function Provider({ children, ...contextValues }) {
-    const value = useMemo8(
+    const value = useMemo10(
       () => Object.keys(contextValues).length > 0 ? contextValues : null,
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [...Object.values(contextValues)]
@@ -1153,7 +1301,9 @@ export {
   useInputState,
   useIntersectionObserver,
   useInterval,
+  useIsClient,
   useIsomorphicLayoutEffect,
+  useList,
   useLoading,
   useLongPress,
   useMap,
@@ -1162,8 +1312,10 @@ export {
   usePreservedReference,
   usePrevious,
   useRefEffect,
+  useSet,
   useStorageState,
   useThrottle,
+  useThrottledCallback,
   useTimeout,
   useToggle,
   useVisibilityEvent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simplikit",
-  "version": "0.0.48",
+  "version": "0.0.49",
   "main": "./dist/index.cjs",
   "module": "./esm/index.js",
   "types": "./dist/index.d.cts",