react-simplikit 0.0.48 → 0.0.50

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
@@ -375,27 +378,25 @@ function isSetStateAction(next) {
 
 // src/hooks/useCounter/useCounter.ts
 import { useCallback as useCallback8, useState as useState3 } from "react";
+var validateValue = (value, { min, max }) => {
+  if (min !== void 0 && value < min) {
+    return min;
+  }
+  if (max !== void 0 && value > max) {
+    return max;
+  }
+  return value;
+};
 function useCounter(initialValue = 0, { min, max, step = 1 } = {}) {
-  const validateValue = (value) => {
-    let validatedValue = value;
-    if (min !== void 0 && validatedValue < min) {
-      validatedValue = min;
-    }
-    if (max !== void 0 && validatedValue > max) {
-      validatedValue = max;
-    }
-    return validatedValue;
-  };
-  const [count, setCountState] = useState3(() => validateValue(initialValue));
-  const validateValueMemoized = useCallback8(validateValue, [min, max]);
+  const [count, setCountState] = useState3(() => validateValue(initialValue, { min, max }));
   const setCount = useCallback8(
     (value) => {
       setCountState((prev) => {
         const nextValue = typeof value === "function" ? value(prev) : value;
-        return validateValueMemoized(nextValue);
+        return validateValue(nextValue, { min, max });
       });
     },
-    [validateValueMemoized]
+    [min, max]
   );
   const increment = useCallback8(() => {
     setCount((prev) => prev + step);
@@ -434,11 +435,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 +625,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 +738,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 +835,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 +859,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 +881,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 +910,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 +1120,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 +1145,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 +1157,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 +1213,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 +1299,9 @@ export {
   useInputState,
   useIntersectionObserver,
   useInterval,
+  useIsClient,
   useIsomorphicLayoutEffect,
+  useList,
   useLoading,
   useLongPress,
   useMap,
@@ -1162,8 +1310,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.50",
   "main": "./dist/index.cjs",
   "module": "./esm/index.js",
   "types": "./dist/index.d.cts",