react-simplikit 0.0.48 → 0.0.50

package/dist/hooks/useSet/index.cjs

@@ -0,0 +1,105 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/useSet/index.ts
+var useSet_exports = {};
+__export(useSet_exports, {
+  useSet: () => useSet
+});
+module.exports = __toCommonJS(useSet_exports);
+
+// src/hooks/useSet/useSet.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)(
+    function syncCallbackRef() {
+      callbackRef.current = callback;
+    },
+    [callback]
+  );
+  return (0, import_react.useCallback)((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+}
+
+// src/hooks/usePreservedReference/usePreservedReference.ts
+var import_react2 = require("react");
+function usePreservedReference(value, areValuesEqual = areDeeplyEqual) {
+  const ref = (0, import_react2.useRef)(value);
+  return (0, import_react2.useMemo)(() => {
+    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/useSet/useSet.ts
+function useSet(initialState = /* @__PURE__ */ new Set()) {
+  const [set, setSet] = (0, import_react3.useState)(() => 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 toggle = 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 = (0, import_react3.useMemo)(
+    () => ({ add, remove, toggle, setAll, reset }),
+    [add, remove, toggle, setAll, reset]
+  );
+  return [set, actions];
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useSet
+});

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

@@ -0,0 +1,39 @@
+type SetOrValues<T> = Set<T> | T[];
+type SetActions<T> = {
+    add: (value: T) => void;
+    remove: (value: T) => void;
+    toggle: (value: T) => void;
+    setAll: (values: SetOrValues<T>) => void;
+    reset: () => void;
+};
+type UseSetReturn<T> = [Omit<Set<T>, 'add' | 'clear' | 'delete'>, SetActions<T>];
+/**
+ * @description
+ * A React hook that manages a Set as state.
+ * Provides efficient state management and stable action functions.
+ *
+ * @param {SetOrValues<T>} initialState - Initial Set state (Set object or array of values)
+ * @returns {UseSetReturn<T>} A tuple containing the Set state and actions to manipulate it
+ *
+ * @example
+ * ```tsx
+ * import { useSet } from 'react-simplikit';
+ *
+ * function TagSelector() {
+ *   const [selectedTags, { add, remove, toggle }] = useSet<string>(['react']);
+ *
+ *   return (
+ *     <div>
+ *       {['react', 'vue', 'svelte'].map(tag => (
+ *         <button key={tag} onClick={() => toggle(tag)}>
+ *           {selectedTags.has(tag) ? '✓' : ''} {tag}
+ *         </button>
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useSet<T>(initialState?: SetOrValues<T>): UseSetReturn<T>;
+
+export { useSet };

package/dist/hooks/useThrottle/index.cjs

@@ -32,9 +32,12 @@ var import_react3 = require("react");
 var import_react = require("react");
 function usePreservedCallback(callback) {
   const callbackRef = (0, import_react.useRef)(callback);
-  (0, import_react.useEffect)(() => {
-    callbackRef.current = callback;
-  }, [callback]);
+  (0, import_react.useEffect)(
+    function syncCallbackRef() {
+      callbackRef.current = callback;
+    },
+    [callback]
+  );
   return (0, import_react.useCallback)((...args) => {
     return callbackRef.current(...args);
   }, []);

package/dist/hooks/useThrottledCallback/index.cjs

@@ -0,0 +1,172 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/useThrottledCallback/index.ts
+var useThrottledCallback_exports = {};
+__export(useThrottledCallback_exports, {
+  useThrottledCallback: () => useThrottledCallback
+});
+module.exports = __toCommonJS(useThrottledCallback_exports);
+
+// src/hooks/useThrottledCallback/useThrottledCallback.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)(
+    function syncCallbackRef() {
+      callbackRef.current = callback;
+    },
+    [callback]
+  );
+  return (0, import_react.useCallback)((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+}
+
+// src/hooks/usePreservedReference/usePreservedReference.ts
+var import_react2 = require("react");
+function usePreservedReference(value, areValuesEqual = areDeeplyEqual) {
+  const ref = (0, import_react2.useRef)(value);
+  return (0, import_react2.useMemo)(() => {
+    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/useDebounce/debounce.ts
+function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
+  let pendingThis = void 0;
+  let pendingArgs = null;
+  const leading = edges != null && edges.includes("leading");
+  const trailing = edges == null || edges.includes("trailing");
+  const invoke = () => {
+    if (pendingArgs !== null) {
+      func.apply(pendingThis, pendingArgs);
+      pendingThis = void 0;
+      pendingArgs = null;
+    }
+  };
+  const onTimerEnd = () => {
+    if (trailing) {
+      invoke();
+    }
+    cancel();
+  };
+  let timeoutId = null;
+  const schedule = () => {
+    if (timeoutId != null) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      timeoutId = null;
+      onTimerEnd();
+    }, debounceMs);
+  };
+  const cancelTimer = () => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  };
+  const cancel = () => {
+    cancelTimer();
+    pendingThis = void 0;
+    pendingArgs = null;
+  };
+  const debounced = function(...args) {
+    pendingThis = this;
+    pendingArgs = args;
+    const isFirstCall = timeoutId == null;
+    schedule();
+    if (leading && isFirstCall) {
+      invoke();
+    }
+  };
+  debounced.cancel = cancel;
+  return debounced;
+}
+
+// src/hooks/useThrottle/throttle.ts
+function throttle(func, throttleMs, { edges = ["leading", "trailing"] } = {}) {
+  let pendingAt = null;
+  const debounced = debounce(func, throttleMs, { edges });
+  const throttled = function(...args) {
+    if (pendingAt == null) {
+      pendingAt = Date.now();
+    } else {
+      if (Date.now() - pendingAt >= throttleMs) {
+        pendingAt = Date.now();
+        debounced.cancel();
+      }
+    }
+    debounced(...args);
+  };
+  throttled.cancel = debounced.cancel;
+  return throttled;
+}
+
+// src/hooks/useThrottledCallback/useThrottledCallback.ts
+function useThrottledCallback({
+  onChange,
+  timeThreshold,
+  edges = ["leading", "trailing"]
+}) {
+  const handleChange = usePreservedCallback(onChange);
+  const ref = (0, import_react3.useRef)({ value: false, clearPreviousThrottle: () => {
+  } });
+  (0, import_react3.useEffect)(function cleanupThrottleOnUnmount() {
+    const current = ref.current;
+    return () => {
+      current.clearPreviousThrottle();
+    };
+  }, []);
+  const preservedEdges = usePreservedReference(edges);
+  return (0, import_react3.useCallback)(
+    (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]
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useThrottledCallback
+});

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

@@ -0,0 +1,30 @@
+type ThrottleOptions = {
+    edges?: Array<'leading' | 'trailing'>;
+};
+/**
+ * @description
+ * `useThrottledCallback` is a React hook that returns a throttled version of the provided callback function.
+ * The throttled callback will only be invoked at most once per specified interval.
+ *
+ * @param {Object} options - The options object.
+ * @param {Function} options.onChange - The callback function to throttle.
+ * @param {number} options.timeThreshold - The number of milliseconds to throttle invocations to.
+ * @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 {Function} A throttled function that limits invoking the callback.
+ *
+ * @example
+ * function ScrollTracker() {
+ *   const throttledScroll = useThrottledCallback({
+ *     onChange: (scrollY: number) => console.log(scrollY),
+ *     timeThreshold: 200,
+ *   });
+ *   return <div onScroll={(e) => throttledScroll(e.currentTarget.scrollTop)} />;
+ * }
+ */
+declare function useThrottledCallback({ onChange, timeThreshold, edges, }: ThrottleOptions & {
+    onChange: (newValue: boolean) => void;
+    timeThreshold: number;
+}): (nextValue: boolean) => void;
+
+export { useThrottledCallback };

package/dist/hooks/useTimeout/index.cjs

@@ -32,9 +32,12 @@ var import_react2 = require("react");
 var import_react = require("react");
 function usePreservedCallback(callback) {
   const callbackRef = (0, import_react.useRef)(callback);
-  (0, import_react.useEffect)(() => {
-    callbackRef.current = callback;
-  }, [callback]);
+  (0, import_react.useEffect)(
+    function syncCallbackRef() {
+      callbackRef.current = callback;
+    },
+    [callback]
+  );
   return (0, import_react.useCallback)((...args) => {
     return callbackRef.current(...args);
   }, []);
@@ -44,8 +47,8 @@ function usePreservedCallback(callback) {
 function useTimeout(callback, delay = 0) {
   const preservedCallback = usePreservedCallback(callback);
   (0, import_react2.useEffect)(() => {
-    const timeoutId = window.setTimeout(preservedCallback, delay);
-    return () => window.clearTimeout(timeoutId);
+    const timeoutId = setTimeout(preservedCallback, delay);
+    return () => clearTimeout(timeoutId);
   }, [delay, preservedCallback]);
 }
 // Annotate the CommonJS export names for ESM import in node:

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

@@ -1,7 +1,7 @@
 /**
  * @description
  * `useTimeout` is a React hook that executes a callback function after a specified delay.
- * It manages `window.setTimeout` in accordance with the React lifecycle, ensuring cleanup on unmount or when dependencies change.
+ * It manages `setTimeout` in accordance with the React lifecycle, ensuring cleanup on unmount or when dependencies change.
  *
  * @param {() => void} callback - The function to be executed after the delay.
  * @param {number} [delay=0] - The time in milliseconds to wait before executing the callback.