react-simplikit 0.0.6 → 0.0.7

package/dist/components/ImpressionArea/index.js

@@ -27,87 +27,8 @@ module.exports = __toCommonJS(ImpressionArea_exports);
 // src/hooks/useImpressionRef/useImpressionRef.ts
 var import_react6 = require("react");
 
-// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
-var import_react3 = require("react");
-
-// src/hooks/usePreservedCallback/usePreservedCallback.ts
-var import_react = require("react");
-function usePreservedCallback(callback) {
-  const callbackRef = (0, import_react.useRef)(callback);
-  (0, import_react.useEffect)(() => {
-    callbackRef.current = callback;
-  }, [callback]);
-  return (0, import_react.useCallback)((...args) => {
-    return callbackRef.current(...args);
-  }, []);
-}
-
-// src/hooks/useRefEffect/useRefEffect.ts
+// src/hooks/useDebouncedCallback/useDebouncedCallback.ts
 var import_react2 = require("react");
-function useRefEffect(callback, deps) {
-  const preservedCallback = usePreservedCallback(callback);
-  const cleanupCallbackRef = (0, import_react2.useRef)(() => {
-  });
-  const effect = (0, import_react2.useCallback)(
-    (element) => {
-      cleanupCallbackRef.current();
-      cleanupCallbackRef.current = () => {
-      };
-      if (element == null) {
-        return;
-      }
-      const cleanup = preservedCallback(element);
-      if (typeof cleanup === "function") {
-        cleanupCallbackRef.current = cleanup;
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [preservedCallback, ...deps]
-  );
-  return effect;
-}
-
-// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
-function useIntersectionObserver(callback, options) {
-  const preservedCallback = usePreservedCallback(callback);
-  const observer = (0, import_react3.useMemo)(() => {
-    if (typeof IntersectionObserver === "undefined") {
-      return;
-    }
-    return new IntersectionObserver(([entry]) => {
-      preservedCallback(entry);
-    }, options);
-  }, [preservedCallback, options]);
-  return useRefEffect(
-    (element) => {
-      observer?.observe(element);
-      return () => {
-        observer?.unobserve(element);
-      };
-    },
-    [preservedCallback, options]
-  );
-}
-
-// src/hooks/useVisibilityEvent/useVisibilityEvent.ts
-var import_react4 = require("react");
-function useVisibilityEvent(callback, options = {}) {
-  const handleVisibilityChange = (0, import_react4.useCallback)(() => {
-    callback(document.visibilityState);
-  }, [callback]);
-  (0, import_react4.useEffect)(() => {
-    if (options?.immediate ?? false) {
-      handleVisibilityChange();
-    }
-    document.addEventListener("visibilitychange", handleVisibilityChange);
-    return () => {
-      document.removeEventListener("visibilitychange", handleVisibilityChange);
-    };
-  }, [handleVisibilityChange, options?.immediate]);
-}
-
-// src/hooks/useImpressionRef/useDebouncedCallback.ts
-var import_react5 = require("react");
 
 // src/hooks/useDebounce/debounce.ts
 function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
@@ -162,37 +83,132 @@ function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
   return debounced;
 }
 
-// src/hooks/useImpressionRef/useDebouncedCallback.ts
+// src/hooks/usePreservedCallback/usePreservedCallback.ts
+var import_react = require("react");
+function usePreservedCallback(callback) {
+  const callbackRef = (0, import_react.useRef)(callback);
+  (0, import_react.useEffect)(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  return (0, import_react.useCallback)((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+}
+
+// src/hooks/useDebouncedCallback/useDebouncedCallback.ts
 function useDebouncedCallback({
   onChange,
-  timeThreshold
+  timeThreshold,
+  leading = false,
+  trailing = true
 }) {
   const handleChange = usePreservedCallback(onChange);
-  const ref = (0, import_react5.useRef)({ value: false, clearPreviousDebounce: () => {
+  const ref = (0, import_react2.useRef)({ value: false, clearPreviousDebounce: () => {
   } });
-  (0, import_react5.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const current = ref.current;
     return () => {
       current.clearPreviousDebounce();
     };
   }, []);
-  return (0, import_react5.useCallback)(
+  const edges = (0, import_react2.useMemo)(() => {
+    const _edges = [];
+    if (leading) {
+      _edges.push("leading");
+    }
+    if (trailing) {
+      _edges.push("trailing");
+    }
+    return _edges;
+  }, [leading, trailing]);
+  return (0, import_react2.useCallback)(
     (nextValue) => {
       if (nextValue === ref.current.value) {
         return;
       }
-      const debounced = debounce(() => {
-        handleChange(nextValue);
-        ref.current.value = nextValue;
-      }, timeThreshold);
+      const debounced = debounce(
+        () => {
+          handleChange(nextValue);
+          ref.current.value = nextValue;
+        },
+        timeThreshold,
+        { edges }
+      );
       ref.current.clearPreviousDebounce();
       debounced();
       ref.current.clearPreviousDebounce = debounced.cancel;
     },
-    [handleChange, timeThreshold]
+    [handleChange, timeThreshold, edges]
+  );
+}
+
+// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
+var import_react4 = require("react");
+
+// src/hooks/useRefEffect/useRefEffect.ts
+var import_react3 = require("react");
+function useRefEffect(callback, deps) {
+  const preservedCallback = usePreservedCallback(callback);
+  const cleanupCallbackRef = (0, import_react3.useRef)(() => {
+  });
+  const effect = (0, import_react3.useCallback)(
+    (element) => {
+      cleanupCallbackRef.current();
+      cleanupCallbackRef.current = () => {
+      };
+      if (element == null) {
+        return;
+      }
+      const cleanup = preservedCallback(element);
+      if (typeof cleanup === "function") {
+        cleanupCallbackRef.current = cleanup;
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [preservedCallback, ...deps]
+  );
+  return effect;
+}
+
+// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
+function useIntersectionObserver(callback, options) {
+  const preservedCallback = usePreservedCallback(callback);
+  const observer = (0, import_react4.useMemo)(() => {
+    if (typeof IntersectionObserver === "undefined") {
+      return;
+    }
+    return new IntersectionObserver(([entry]) => {
+      preservedCallback(entry);
+    }, options);
+  }, [preservedCallback, options]);
+  return useRefEffect(
+    (element) => {
+      observer?.observe(element);
+      return () => {
+        observer?.unobserve(element);
+      };
+    },
+    [preservedCallback, options]
   );
 }
 
+// src/hooks/useVisibilityEvent/useVisibilityEvent.ts
+var import_react5 = require("react");
+function useVisibilityEvent(callback, options = {}) {
+  const handleVisibilityChange = (0, import_react5.useCallback)(() => {
+    callback(document.visibilityState);
+  }, [callback]);
+  (0, import_react5.useEffect)(() => {
+    if (options?.immediate ?? false) {
+      handleVisibilityChange();
+    }
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [handleVisibilityChange, options?.immediate]);
+}
+
 // src/hooks/useImpressionRef/useImpressionRef.ts
 function useImpressionRef({
   onImpressionStart = () => {
@@ -210,7 +226,8 @@ function useImpressionRef({
     timeThreshold,
     onChange: (impressed) => {
       (impressed ? impressionStartHandler : impressionEndHandler)();
-    }
+    },
+    leading: true
   });
   useVisibilityEvent((documentVisible) => {
     if (!isIntersectingRef.current) {

package/dist/hooks/useAsyncEffect/index.d.ts

@@ -5,7 +5,7 @@ import { DependencyList } from 'react';
  * `useAsyncEffect` is a custom hook for handling asynchronous side effects in React components.
  * It follows the same cleanup pattern as `useEffect` while ensuring async operations are handled safely.
  *
- * @param {() => Promise<void | (() => void)>} effect - An asynchronous function executed in the `useEffect` pattern.
+ * @param {() => Promise<void | (() => void)>} [effect] - An asynchronous function executed in the `useEffect` pattern.
  *   This function can optionally return a cleanup function.
  * @param {DependencyList} [deps] - A dependency array.
  *   The effect will re-run whenever any value in this array changes. If omitted, it runs only once when the component mounts.

package/dist/hooks/useImpressionRef/index.js

@@ -27,87 +27,8 @@ module.exports = __toCommonJS(useImpressionRef_exports);
 // src/hooks/useImpressionRef/useImpressionRef.ts
 var import_react6 = require("react");
 
-// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
-var import_react3 = require("react");
-
-// src/hooks/usePreservedCallback/usePreservedCallback.ts
-var import_react = require("react");
-function usePreservedCallback(callback) {
-  const callbackRef = (0, import_react.useRef)(callback);
-  (0, import_react.useEffect)(() => {
-    callbackRef.current = callback;
-  }, [callback]);
-  return (0, import_react.useCallback)((...args) => {
-    return callbackRef.current(...args);
-  }, []);
-}
-
-// src/hooks/useRefEffect/useRefEffect.ts
+// src/hooks/useDebouncedCallback/useDebouncedCallback.ts
 var import_react2 = require("react");
-function useRefEffect(callback, deps) {
-  const preservedCallback = usePreservedCallback(callback);
-  const cleanupCallbackRef = (0, import_react2.useRef)(() => {
-  });
-  const effect = (0, import_react2.useCallback)(
-    (element) => {
-      cleanupCallbackRef.current();
-      cleanupCallbackRef.current = () => {
-      };
-      if (element == null) {
-        return;
-      }
-      const cleanup = preservedCallback(element);
-      if (typeof cleanup === "function") {
-        cleanupCallbackRef.current = cleanup;
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [preservedCallback, ...deps]
-  );
-  return effect;
-}
-
-// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
-function useIntersectionObserver(callback, options) {
-  const preservedCallback = usePreservedCallback(callback);
-  const observer = (0, import_react3.useMemo)(() => {
-    if (typeof IntersectionObserver === "undefined") {
-      return;
-    }
-    return new IntersectionObserver(([entry]) => {
-      preservedCallback(entry);
-    }, options);
-  }, [preservedCallback, options]);
-  return useRefEffect(
-    (element) => {
-      observer?.observe(element);
-      return () => {
-        observer?.unobserve(element);
-      };
-    },
-    [preservedCallback, options]
-  );
-}
-
-// src/hooks/useVisibilityEvent/useVisibilityEvent.ts
-var import_react4 = require("react");
-function useVisibilityEvent(callback, options = {}) {
-  const handleVisibilityChange = (0, import_react4.useCallback)(() => {
-    callback(document.visibilityState);
-  }, [callback]);
-  (0, import_react4.useEffect)(() => {
-    if (options?.immediate ?? false) {
-      handleVisibilityChange();
-    }
-    document.addEventListener("visibilitychange", handleVisibilityChange);
-    return () => {
-      document.removeEventListener("visibilitychange", handleVisibilityChange);
-    };
-  }, [handleVisibilityChange, options?.immediate]);
-}
-
-// src/hooks/useImpressionRef/useDebouncedCallback.ts
-var import_react5 = require("react");
 
 // src/hooks/useDebounce/debounce.ts
 function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
@@ -162,37 +83,132 @@ function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
   return debounced;
 }
 
-// src/hooks/useImpressionRef/useDebouncedCallback.ts
+// src/hooks/usePreservedCallback/usePreservedCallback.ts
+var import_react = require("react");
+function usePreservedCallback(callback) {
+  const callbackRef = (0, import_react.useRef)(callback);
+  (0, import_react.useEffect)(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  return (0, import_react.useCallback)((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+}
+
+// src/hooks/useDebouncedCallback/useDebouncedCallback.ts
 function useDebouncedCallback({
   onChange,
-  timeThreshold
+  timeThreshold,
+  leading = false,
+  trailing = true
 }) {
   const handleChange = usePreservedCallback(onChange);
-  const ref = (0, import_react5.useRef)({ value: false, clearPreviousDebounce: () => {
+  const ref = (0, import_react2.useRef)({ value: false, clearPreviousDebounce: () => {
   } });
-  (0, import_react5.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const current = ref.current;
     return () => {
       current.clearPreviousDebounce();
     };
   }, []);
-  return (0, import_react5.useCallback)(
+  const edges = (0, import_react2.useMemo)(() => {
+    const _edges = [];
+    if (leading) {
+      _edges.push("leading");
+    }
+    if (trailing) {
+      _edges.push("trailing");
+    }
+    return _edges;
+  }, [leading, trailing]);
+  return (0, import_react2.useCallback)(
     (nextValue) => {
       if (nextValue === ref.current.value) {
         return;
       }
-      const debounced = debounce(() => {
-        handleChange(nextValue);
-        ref.current.value = nextValue;
-      }, timeThreshold);
+      const debounced = debounce(
+        () => {
+          handleChange(nextValue);
+          ref.current.value = nextValue;
+        },
+        timeThreshold,
+        { edges }
+      );
       ref.current.clearPreviousDebounce();
       debounced();
       ref.current.clearPreviousDebounce = debounced.cancel;
     },
-    [handleChange, timeThreshold]
+    [handleChange, timeThreshold, edges]
   );
 }
 
+// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
+var import_react4 = require("react");
+
+// src/hooks/useRefEffect/useRefEffect.ts
+var import_react3 = require("react");
+function useRefEffect(callback, deps) {
+  const preservedCallback = usePreservedCallback(callback);
+  const cleanupCallbackRef = (0, import_react3.useRef)(() => {
+  });
+  const effect = (0, import_react3.useCallback)(
+    (element) => {
+      cleanupCallbackRef.current();
+      cleanupCallbackRef.current = () => {
+      };
+      if (element == null) {
+        return;
+      }
+      const cleanup = preservedCallback(element);
+      if (typeof cleanup === "function") {
+        cleanupCallbackRef.current = cleanup;
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [preservedCallback, ...deps]
+  );
+  return effect;
+}
+
+// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
+function useIntersectionObserver(callback, options) {
+  const preservedCallback = usePreservedCallback(callback);
+  const observer = (0, import_react4.useMemo)(() => {
+    if (typeof IntersectionObserver === "undefined") {
+      return;
+    }
+    return new IntersectionObserver(([entry]) => {
+      preservedCallback(entry);
+    }, options);
+  }, [preservedCallback, options]);
+  return useRefEffect(
+    (element) => {
+      observer?.observe(element);
+      return () => {
+        observer?.unobserve(element);
+      };
+    },
+    [preservedCallback, options]
+  );
+}
+
+// src/hooks/useVisibilityEvent/useVisibilityEvent.ts
+var import_react5 = require("react");
+function useVisibilityEvent(callback, options = {}) {
+  const handleVisibilityChange = (0, import_react5.useCallback)(() => {
+    callback(document.visibilityState);
+  }, [callback]);
+  (0, import_react5.useEffect)(() => {
+    if (options?.immediate ?? false) {
+      handleVisibilityChange();
+    }
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [handleVisibilityChange, options?.immediate]);
+}
+
 // src/hooks/useImpressionRef/useImpressionRef.ts
 function useImpressionRef({
   onImpressionStart = () => {
@@ -210,7 +226,8 @@ function useImpressionRef({
     timeThreshold,
     onChange: (impressed) => {
       (impressed ? impressionStartHandler : impressionEndHandler)();
-    }
+    },
+    leading: true
   });
   useVisibilityEvent((documentVisible) => {
     if (!isIntersectingRef.current) {

package/dist/hooks/useStorageState/index.d.ts

@@ -23,7 +23,7 @@ type StorageStateOptionsWithDefaultValue<T> = StorageStateOptions<T> & {
  * The value is retained across page reloads and can be shared between tabs when using `localStorage`.
  *
  * @param {string} key - The key used to store the value in storage.
- * @param {object} [options] - Configuration options for storage behavior.
+ * @param {Object} [options] - Configuration options for storage behavior.
  * @param {Storage} [options.storage=localStorage] - The storage type (`localStorage` or `sessionStorage`). Defaults to `localStorage`.
  * @param {T} [options.defaultValue] - The initial value if no existing value is found.
  *