react-simplikit 0.0.6 → 0.0.8

package/dist/index.js

@@ -50,87 +50,8 @@ module.exports = __toCommonJS(index_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"] } = {}) {
@@ -185,37 +106,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 = () => {
@@ -233,7 +249,8 @@ function useImpressionRef({
     timeThreshold,
     onChange: (impressed) => {
       (impressed ? impressionStartHandler : impressionEndHandler)();
-    }
+    },
+    leading: true
   });
   useVisibilityEvent((documentVisible) => {
     if (!isIntersectingRef.current) {

package/esm/components/ImpressionArea/index.mjs

@@ -1,87 +1,8 @@
 // src/hooks/useImpressionRef/useImpressionRef.ts
 import { useRef as useRef4 } from "react";
 
-// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
-import { useMemo } from "react";
-
-// src/hooks/usePreservedCallback/usePreservedCallback.ts
-import { useCallback, useEffect, useRef } from "react";
-function usePreservedCallback(callback) {
-  const callbackRef = useRef(callback);
-  useEffect(() => {
-    callbackRef.current = callback;
-  }, [callback]);
-  return useCallback((...args) => {
-    return callbackRef.current(...args);
-  }, []);
-}
-
-// src/hooks/useRefEffect/useRefEffect.ts
-import { useCallback as useCallback2, useRef as useRef2 } from "react";
-function useRefEffect(callback, deps) {
-  const preservedCallback = usePreservedCallback(callback);
-  const cleanupCallbackRef = useRef2(() => {
-  });
-  const effect = useCallback2(
-    (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 = 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
-import { useCallback as useCallback3, useEffect as useEffect2 } from "react";
-function useVisibilityEvent(callback, options = {}) {
-  const handleVisibilityChange = useCallback3(() => {
-    callback(document.visibilityState);
-  }, [callback]);
-  useEffect2(() => {
-    if (options?.immediate ?? false) {
-      handleVisibilityChange();
-    }
-    document.addEventListener("visibilitychange", handleVisibilityChange);
-    return () => {
-      document.removeEventListener("visibilitychange", handleVisibilityChange);
-    };
-  }, [handleVisibilityChange, options?.immediate]);
-}
-
-// src/hooks/useImpressionRef/useDebouncedCallback.ts
-import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3 } from "react";
+// src/hooks/useDebouncedCallback/useDebouncedCallback.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef2 } from "react";
 
 // src/hooks/useDebounce/debounce.ts
 function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
@@ -136,37 +57,132 @@ function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
   return debounced;
 }
 
-// src/hooks/useImpressionRef/useDebouncedCallback.ts
+// src/hooks/usePreservedCallback/usePreservedCallback.ts
+import { useCallback, useEffect, useRef } from "react";
+function usePreservedCallback(callback) {
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  return 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 = useRef3({ value: false, clearPreviousDebounce: () => {
+  const ref = useRef2({ value: false, clearPreviousDebounce: () => {
   } });
-  useEffect3(() => {
+  useEffect2(() => {
     const current = ref.current;
     return () => {
       current.clearPreviousDebounce();
     };
   }, []);
-  return useCallback4(
+  const edges = useMemo(() => {
+    const _edges = [];
+    if (leading) {
+      _edges.push("leading");
+    }
+    if (trailing) {
+      _edges.push("trailing");
+    }
+    return _edges;
+  }, [leading, trailing]);
+  return useCallback2(
     (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
+import { useMemo as useMemo2 } from "react";
+
+// src/hooks/useRefEffect/useRefEffect.ts
+import { useCallback as useCallback3, useRef as useRef3 } from "react";
+function useRefEffect(callback, deps) {
+  const preservedCallback = usePreservedCallback(callback);
+  const cleanupCallbackRef = useRef3(() => {
+  });
+  const effect = useCallback3(
+    (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 = useMemo2(() => {
+    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
+import { useCallback as useCallback4, useEffect as useEffect3 } from "react";
+function useVisibilityEvent(callback, options = {}) {
+  const handleVisibilityChange = useCallback4(() => {
+    callback(document.visibilityState);
+  }, [callback]);
+  useEffect3(() => {
+    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 = () => {
@@ -184,7 +200,8 @@ function useImpressionRef({
     timeThreshold,
     onChange: (impressed) => {
       (impressed ? impressionStartHandler : impressionEndHandler)();
-    }
+    },
+    leading: true
   });
   useVisibilityEvent((documentVisible) => {
     if (!isIntersectingRef.current) {

package/esm/components/SwitchCase/index.d.mts

@@ -19,7 +19,7 @@ type Props<Case> = {
  * @param {Record<string | number, () => JSX.Element>} caseBy - An object that maps values to
  *   components to render. The keys represent possible values, and the values are functions returning
  *   the corresponding components.
- * @param {() => JSX.Element} defaultComponent - The component to render if `value` does not match
+ * @param {() => JSX.Element} [defaultComponent] - The component to render if `value` does not match
  *   any key in `caseBy`.
  *
  * @returns {JSX.Element} A React component that conditionally renders based on cases.

package/esm/hooks/useImpressionRef/index.d.mts

@@ -11,10 +11,10 @@ type UseImpressionRefOptions = Partial<{
  * This hook uses `IntersectionObserver` and the `Visibility API` to track the element's visibility.
  *
  * @param {UseImpressionRefOptions} options - Options for tracking the element's visibility.
- * @param {() => void} options.onImpressionStart - Callback function executed when the element enters the view
- * @param {() => void} options.onImpressionEnd - Callback function executed when the element exits the view
- * @param {number} options.timeThreshold - Minimum time the element must be visible (in milliseconds)
- * @param {number} options.areaThreshold - Minimum ratio of the element that must be visible (0 to 1)
+ * @param {() => void} [options.onImpressionStart] - Callback function executed when the element enters the view
+ * @param {() => void} [options.onImpressionEnd] - Callback function executed when the element exits the view
+ * @param {number} [options.timeThreshold=0] - Minimum time the element must be visible (in milliseconds)
+ * @param {number} [options.areaThreshold=0] - Minimum ratio of the element that must be visible (0 to 1)
  * @param {string} options.rootMargin - Margin to adjust the detection area
  *
  * @returns {(element: Element | null) => void} A function to set the element. Attach this function to the `ref` attribute, and the callbacks will be executed whenever the element's visibility changes.