react-simplikit 0.0.49 → 0.0.51

package/dist/components/ImpressionArea/index.d.cts

@@ -1,7 +1,7 @@
 import { ElementType, ReactNode, Ref } from 'react';
 import { UseImpressionRefOptions } from '../../hooks/useImpressionRef/index.cjs';
 
-type Element<T extends ElementType, InstrinsicElements = T extends keyof React.JSX.IntrinsicElements ? React.JSX.IntrinsicElements[T] : HTMLElement> = InstrinsicElements extends React.ClassAttributes<infer E extends HTMLElement> ? E : HTMLElement;
+type Element<T extends ElementType, IntrinsicElementsOf = T extends keyof React.JSX.IntrinsicElements ? React.JSX.IntrinsicElements[T] : HTMLElement> = IntrinsicElementsOf extends React.ClassAttributes<infer E extends HTMLElement> ? E : HTMLElement;
 type Props<Tag extends ElementType> = React.ComponentPropsWithoutRef<Tag> & UseImpressionRefOptions & {
     as?: Tag;
     children?: ReactNode;

package/dist/hooks/useAsyncEffect/index.cjs

@@ -30,10 +30,15 @@ var import_react = require("react");
 function useAsyncEffect(effect, deps) {
   (0, import_react.useEffect)(() => {
     let cleanup;
+    let isCleaned = false;
     effect().then((result) => {
       cleanup = result;
+      if (isCleaned) {
+        cleanup?.();
+      }
     });
     return () => {
+      isCleaned = true;
       cleanup?.();
     };
   }, deps);

package/dist/hooks/useCounter/index.cjs

@@ -27,27 +27,25 @@ module.exports = __toCommonJS(useCounter_exports);
 
 // src/hooks/useCounter/useCounter.ts
 var import_react = require("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] = (0, import_react.useState)(() => validateValue(initialValue));
-  const validateValueMemoized = (0, import_react.useCallback)(validateValue, [min, max]);
+  const [count, setCountState] = (0, import_react.useState)(() => validateValue(initialValue, { min, max }));
   const setCount = (0, import_react.useCallback)(
     (value) => {
       setCountState((prev) => {
         const nextValue = typeof value === "function" ? value(prev) : value;
-        return validateValueMemoized(nextValue);
+        return validateValue(nextValue, { min, max });
       });
     },
-    [validateValueMemoized]
+    [min, max]
   );
   const increment = (0, import_react.useCallback)(() => {
     setCount((prev) => prev + step);

package/dist/hooks/useInterval/index.cjs

@@ -49,11 +49,21 @@ 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);
+  const immediateCalledRef = (0, import_react2.useRef)(false);
   (0, import_react2.useEffect)(
     function runImmediateCallback() {
-      if (immediate === true && enabled) {
-        preservedCallback();
+      if (immediate !== true) {
+        immediateCalledRef.current = false;
+        return;
+      }
+      if (!enabled) {
+        return;
+      }
+      if (immediateCalledRef.current) {
+        return;
       }
+      immediateCalledRef.current = true;
+      preservedCallback();
     },
     [immediate, preservedCallback, enabled]
   );

package/dist/hooks/usePrevious/index.d.cts

@@ -1,15 +1,15 @@
 /**
  * @description
  * `usePrevious` is a React hook that returns the previous value of the input state.
- * It preserves the previous value unchanged when re-render occur without state changes.
+ * It preserves the previous value unchanged when re-renders occur without state changes.
  * If the state is an object or requires custom change detection, a `compare` function can be provided.
  * By default, state changes are detected using `prev === next`.
  *
  * @template T - The type of the state.
  * @param {T} state - The state whose previous value is to be tracked.
- * @param {(prev: T | undefined, next: T) => boolean} [compare] - An optional comparison function to determine if the state has changed.
+ * @param {(prev: T, next: T) => boolean} [compare] - An optional comparison function to determine if the state has changed.
  *
- * @returns {T | undefined} The previous value of the state.
+ * @returns {T} The previous value of the state.
  *
  * @example
  * const [count, setCount] = useState(0);

package/dist/index.cjs

@@ -349,10 +349,15 @@ var import_react9 = require("react");
 function useAsyncEffect(effect, deps) {
   (0, import_react9.useEffect)(() => {
     let cleanup;
+    let isCleaned = false;
     effect().then((result) => {
       cleanup = result;
+      if (isCleaned) {
+        cleanup?.();
+      }
     });
     return () => {
+      isCleaned = true;
       cleanup?.();
     };
   }, deps);
@@ -440,27 +445,25 @@ function isSetStateAction(next) {
 
 // src/hooks/useCounter/useCounter.ts
 var import_react14 = require("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] = (0, import_react14.useState)(() => validateValue(initialValue));
-  const validateValueMemoized = (0, import_react14.useCallback)(validateValue, [min, max]);
+  const [count, setCountState] = (0, import_react14.useState)(() => validateValue(initialValue, { min, max }));
   const setCount = (0, import_react14.useCallback)(
     (value) => {
       setCountState((prev) => {
         const nextValue = typeof value === "function" ? value(prev) : value;
-        return validateValueMemoized(nextValue);
+        return validateValue(nextValue, { min, max });
       });
     },
-    [validateValueMemoized]
+    [min, max]
   );
   const increment = (0, import_react14.useCallback)(() => {
     setCount((prev) => prev + step);
@@ -689,11 +692,21 @@ 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);
+  const immediateCalledRef = (0, import_react20.useRef)(false);
   (0, import_react20.useEffect)(
     function runImmediateCallback() {
-      if (immediate === true && enabled) {
-        preservedCallback();
+      if (immediate !== true) {
+        immediateCalledRef.current = false;
+        return;
+      }
+      if (!enabled) {
+        return;
+      }
+      if (immediateCalledRef.current) {
+        return;
       }
+      immediateCalledRef.current = true;
+      preservedCallback();
     },
     [immediate, preservedCallback, enabled]
   );

package/esm/components/ImpressionArea/index.d.ts

@@ -1,7 +1,7 @@
 import { ElementType, ReactNode, Ref } from 'react';
 import { UseImpressionRefOptions } from '../../hooks/useImpressionRef/index.js';
 
-type Element<T extends ElementType, InstrinsicElements = T extends keyof React.JSX.IntrinsicElements ? React.JSX.IntrinsicElements[T] : HTMLElement> = InstrinsicElements extends React.ClassAttributes<infer E extends HTMLElement> ? E : HTMLElement;
+type Element<T extends ElementType, IntrinsicElementsOf = T extends keyof React.JSX.IntrinsicElements ? React.JSX.IntrinsicElements[T] : HTMLElement> = IntrinsicElementsOf extends React.ClassAttributes<infer E extends HTMLElement> ? E : HTMLElement;
 type Props<Tag extends ElementType> = React.ComponentPropsWithoutRef<Tag> & UseImpressionRefOptions & {
     as?: Tag;
     children?: ReactNode;

package/esm/hooks/useAsyncEffect/index.js

@@ -5,10 +5,15 @@ import { useEffect } from "react";
 function useAsyncEffect(effect, deps) {
   useEffect(() => {
     let cleanup;
+    let isCleaned = false;
     effect().then((result) => {
       cleanup = result;
+      if (isCleaned) {
+        cleanup?.();
+      }
     });
     return () => {
+      isCleaned = true;
       cleanup?.();
     };
   }, deps);

package/esm/hooks/useCounter/index.js

@@ -2,27 +2,25 @@
 
 // src/hooks/useCounter/useCounter.ts
 import { useCallback, useState } 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] = useState(() => validateValue(initialValue));
-  const validateValueMemoized = useCallback(validateValue, [min, max]);
+  const [count, setCountState] = useState(() => validateValue(initialValue, { min, max }));
   const setCount = useCallback(
     (value) => {
       setCountState((prev) => {
         const nextValue = typeof value === "function" ? value(prev) : value;
-        return validateValueMemoized(nextValue);
+        return validateValue(nextValue, { min, max });
       });
     },
-    [validateValueMemoized]
+    [min, max]
   );
   const increment = useCallback(() => {
     setCount((prev) => prev + step);

package/esm/hooks/useInterval/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/hooks/useInterval/useInterval.ts
-import { useEffect as useEffect2 } from "react";
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
 
 // src/hooks/usePreservedCallback/usePreservedCallback.ts
 import { useCallback, useEffect, useRef } from "react";
@@ -24,11 +24,21 @@ 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);
+  const immediateCalledRef = useRef2(false);
   useEffect2(
     function runImmediateCallback() {
-      if (immediate === true && enabled) {
-        preservedCallback();
+      if (immediate !== true) {
+        immediateCalledRef.current = false;
+        return;
+      }
+      if (!enabled) {
+        return;
+      }
+      if (immediateCalledRef.current) {
+        return;
       }
+      immediateCalledRef.current = true;
+      preservedCallback();
     },
     [immediate, preservedCallback, enabled]
   );

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

@@ -1,15 +1,15 @@
 /**
  * @description
  * `usePrevious` is a React hook that returns the previous value of the input state.
- * It preserves the previous value unchanged when re-render occur without state changes.
+ * It preserves the previous value unchanged when re-renders occur without state changes.
  * If the state is an object or requires custom change detection, a `compare` function can be provided.
  * By default, state changes are detected using `prev === next`.
  *
  * @template T - The type of the state.
  * @param {T} state - The state whose previous value is to be tracked.
- * @param {(prev: T | undefined, next: T) => boolean} [compare] - An optional comparison function to determine if the state has changed.
+ * @param {(prev: T, next: T) => boolean} [compare] - An optional comparison function to determine if the state has changed.
  *
- * @returns {T | undefined} The previous value of the state.
+ * @returns {T} The previous value of the state.
  *
  * @example
  * const [count, setCount] = useState(0);

package/esm/index.js

@@ -287,10 +287,15 @@ import { useEffect as useEffect4 } from "react";
 function useAsyncEffect(effect, deps) {
   useEffect4(() => {
     let cleanup;
+    let isCleaned = false;
     effect().then((result) => {
       cleanup = result;
+      if (isCleaned) {
+        cleanup?.();
+      }
     });
     return () => {
+      isCleaned = true;
       cleanup?.();
     };
   }, deps);
@@ -378,27 +383,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);
@@ -621,17 +624,27 @@ function echo(v) {
 }
 
 // src/hooks/useInterval/useInterval.ts
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect10, useRef as useRef9 } from "react";
 function useInterval(callback, options) {
   const delay = typeof options === "number" ? options : options.delay;
   const immediate = typeof options === "number" ? false : options.immediate;
   const enabled = typeof options === "number" ? true : options.enabled ?? true;
   const preservedCallback = usePreservedCallback(callback);
+  const immediateCalledRef = useRef9(false);
   useEffect10(
     function runImmediateCallback() {
-      if (immediate === true && enabled) {
-        preservedCallback();
+      if (immediate !== true) {
+        immediateCalledRef.current = false;
+        return;
+      }
+      if (!enabled) {
+        return;
+      }
+      if (immediateCalledRef.current) {
+        return;
       }
+      immediateCalledRef.current = true;
+      preservedCallback();
     },
     [immediate, preservedCallback, enabled]
   );
@@ -666,9 +679,9 @@ var useIsomorphicLayoutEffect = isServer ? useEffect12 : useLayoutEffect;
 import { useMemo as useMemo5, useState as useState7 } from "react";
 
 // src/hooks/usePreservedReference/usePreservedReference.ts
-import { useMemo as useMemo4, useRef as useRef9 } from "react";
+import { useMemo as useMemo4, useRef as useRef10 } from "react";
 function usePreservedReference(value, areValuesEqual = areDeeplyEqual) {
-  const ref = useRef9(value);
+  const ref = useRef10(value);
   return useMemo4(() => {
     if (!areValuesEqual(ref.current, value)) {
       ref.current = value;
@@ -722,7 +735,7 @@ function useList(initialState = []) {
 }
 
 // src/hooks/useLoading/useLoading.ts
-import { useCallback as useCallback12, useEffect as useEffect13, useMemo as useMemo6, useRef as useRef10, useState as useState8 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect13, useMemo as useMemo6, useRef as useRef11, useState as useState8 } from "react";
 function useLoading() {
   const [loading, setLoading] = useState8(false);
   const ref = useIsMountedRef();
@@ -743,7 +756,7 @@ function useLoading() {
   return useMemo6(() => [loading, startTransition], [loading, startTransition]);
 }
 function useIsMountedRef() {
-  const ref = useRef10({ isMounted: true }).current;
+  const ref = useRef11({ isMounted: true }).current;
   useEffect13(
     function trackMountedState() {
       ref.isMounted = true;
@@ -757,11 +770,11 @@ function useIsMountedRef() {
 }
 
 // src/hooks/useLongPress/useLongPress.ts
-import { useCallback as useCallback13, useRef as useRef11 } from "react";
+import { useCallback as useCallback13, useRef as useRef12 } from "react";
 function useLongPress(onLongPress, { delay = 500, moveThreshold, onClick, onLongPressEnd } = {}) {
-  const timeoutRef = useRef11(null);
-  const isLongPressActiveRef = useRef11(false);
-  const initialPositionRef = useRef11({ x: 0, y: 0 });
+  const timeoutRef = useRef12(null);
+  const isLongPressActiveRef = useRef12(false);
+  const initialPositionRef = useRef12({ x: 0, y: 0 });
   const preservedOnLongPress = usePreservedCallback(onLongPress);
   const preservedOnClick = usePreservedCallback(onClick || (() => {
   }));
@@ -868,9 +881,9 @@ function useMap(initialState = /* @__PURE__ */ new Map()) {
 }
 
 // src/hooks/useOutsideClickEffect/useOutsideClickEffect.ts
-import { useEffect as useEffect14, useRef as useRef12 } from "react";
+import { useEffect as useEffect14, useRef as useRef13 } from "react";
 function useOutsideClickEffect(container, callback) {
-  const containers = useRef12([]);
+  const containers = useRef13([]);
   const handleDocumentClick = usePreservedCallback(({ target }) => {
     if (target === null) {
       return;
@@ -895,12 +908,12 @@ function useOutsideClickEffect(container, callback) {
 }
 
 // src/hooks/usePrevious/usePrevious.ts
-import { useRef as useRef13 } from "react";
+import { useRef as useRef14 } from "react";
 var strictEquals = (prev, next) => prev === next;
 function usePrevious(state, compare = strictEquals) {
-  const prevRef = useRef13(state);
-  const currentRef = useRef13(state);
-  const isFirstRender = useRef13(true);
+  const prevRef = useRef14(state);
+  const currentRef = useRef14(state);
+  const isFirstRender = useRef14(true);
   if (isFirstRender.current) {
     isFirstRender.current = false;
     return prevRef.current;
@@ -956,7 +969,7 @@ function useSet(initialState = /* @__PURE__ */ new Set()) {
 }
 
 // src/hooks/useStorageState/useStorageState.ts
-import { useCallback as useCallback15, useRef as useRef14, useSyncExternalStore } from "react";
+import { useCallback as useCallback15, useRef as useRef15, useSyncExternalStore } from "react";
 
 // src/hooks/useStorageState/storage.ts
 var MemoStorage = class {
@@ -1068,7 +1081,7 @@ function useStorageState(key, {
   ...options
 } = {}) {
   const serializedDefaultValue = defaultValue;
-  const cache = useRef14({
+  const cache = useRef15({
     data: null,
     parsed: serializedDefaultValue
   });
@@ -1160,14 +1173,14 @@ function useThrottle(callback, wait, options) {
 }
 
 // src/hooks/useThrottledCallback/useThrottledCallback.ts
-import { useCallback as useCallback16, useEffect as useEffect16, useRef as useRef15 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect16, useRef as useRef16 } from "react";
 function useThrottledCallback({
   onChange,
   timeThreshold,
   edges = ["leading", "trailing"]
 }) {
   const handleChange = usePreservedCallback(onChange);
-  const ref = useRef15({ value: false, clearPreviousThrottle: () => {
+  const ref = useRef16({ value: false, clearPreviousThrottle: () => {
   } });
   useEffect16(function cleanupThrottleOnUnmount() {
     const current = ref.current;

package/package.json

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