react-simplikit 0.0.6 → 0.0.8

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/components/SwitchCase/index.d.ts

@@ -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/dist/hooks/useImpressionRef/index.d.ts

@@ -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.

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/useIntersectionObserver/index.d.ts

@@ -6,7 +6,9 @@
  * @param {(entry: IntersectionObserverEntry) => void} callback - A callback function that is executed when the visibility of the element changes.
  *   You can check `entry.isIntersecting` to determine if the element is in view.
  * @param {IntersectionObserverInit} options - Options for the `IntersectionObserver`.
- *   You can specify values such as `root`, `rootMargin`, and `threshold`.
+ * @param {boolean} [options.root] - The element that is used as the viewport for checking visibility of the target.
+ * @param {string} [options.rootMargin] - Margin around the root.
+ * @param {number | number[]} [options.threshold] - Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed.
  *
  * @returns {(element: Element | null) => void} A function to set the element. Attach this function to the `ref` attribute, and the `callback` will be executed whenever the element's visibility changes.
  *

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.
  *

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

@@ -24,6 +24,7 @@ declare function throttle<F extends (...args: any[]) => void>(func: F, throttleM
  * @param {F} callback - The function to be throttled.
  * @param {number} wait - The number of milliseconds to throttle invocations to.
  * @param {{ edges?: Array<'leading' | 'trailing'> }} [options] - Options to control the behavior of the throttle.
+ * @param {Array<'leading' | 'trailing'>} [options.edges=['leading', 'trailing']] - An optional array specifying whether the function should be invoked on the leading edge, trailing edge, or both.
  * @returns {F & { cancel: () => void }} - Returns the throttled function with a `cancel` method to cancel pending executions.
  *
  * @example