react-simplikit 0.0.47 → 0.0.49

package/dist/components/ImpressionArea/index.cjs

@@ -91,9 +91,12 @@ function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
 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);
   }, []);
@@ -109,7 +112,7 @@ function useDebouncedCallback({
   const handleChange = usePreservedCallback(onChange);
   const ref = (0, import_react2.useRef)({ value: false, clearPreviousDebounce: () => {
   } });
-  (0, import_react2.useEffect)(() => {
+  (0, import_react2.useEffect)(function clearDebouncedOnUnmount() {
     const current = ref.current;
     return () => {
       current.clearPreviousDebounce();

package/dist/components/Separated/index.cjs

@@ -33,7 +33,7 @@ function Separated({ children, by: separator }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: childrenArray.map((child, i, { length }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
     child,
     i + 1 !== length && separator
-  ] }, i)) });
+  ] }, child.key ?? i)) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/hooks/useCallbackOncePerRender/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);
   }, []);

package/dist/hooks/useDebounce/index.cjs

@@ -33,9 +33,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);
   }, []);
@@ -111,11 +114,14 @@ function useDebounce(callback, wait, options = {}) {
   const debounced = (0, import_react3.useMemo)(() => {
     return debounce(preservedCallback, wait, { edges });
   }, [preservedCallback, wait, edges]);
-  (0, import_react2.useEffect)(() => {
-    return () => {
-      debounced.cancel();
-    };
-  }, [debounced]);
+  (0, import_react2.useEffect)(
+    function cancelDebouncedOnUnmount() {
+      return () => {
+        debounced.cancel();
+      };
+    },
+    [debounced]
+  );
   return debounced;
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/hooks/useDebouncedCallback/index.cjs

@@ -85,9 +85,12 @@ function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
 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);
   }, []);
@@ -103,7 +106,7 @@ function useDebouncedCallback({
   const handleChange = usePreservedCallback(onChange);
   const ref = (0, import_react2.useRef)({ value: false, clearPreviousDebounce: () => {
   } });
-  (0, import_react2.useEffect)(() => {
+  (0, import_react2.useEffect)(function clearDebouncedOnUnmount() {
     const current = ref.current;
     return () => {
       current.clearPreviousDebounce();

package/dist/hooks/useDoubleClick/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);
   }, []);

package/dist/hooks/useImpressionRef/index.cjs

@@ -88,9 +88,12 @@ function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
 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);
   }, []);
@@ -106,7 +109,7 @@ function useDebouncedCallback({
   const handleChange = usePreservedCallback(onChange);
   const ref = (0, import_react2.useRef)({ value: false, clearPreviousDebounce: () => {
   } });
-  (0, import_react2.useEffect)(() => {
+  (0, import_react2.useEffect)(function clearDebouncedOnUnmount() {
     const current = ref.current;
     return () => {
       current.clearPreviousDebounce();

package/dist/hooks/useIntersectionObserver/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/useInterval/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);
   }, []);
@@ -46,18 +49,24 @@ 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);
-  (0, import_react2.useEffect)(() => {
-    if (immediate === true && enabled) {
-      preservedCallback();
-    }
-  }, [immediate, preservedCallback, enabled]);
-  (0, import_react2.useEffect)(() => {
-    if (!enabled) {
-      return;
-    }
-    const id = window.setInterval(preservedCallback, delay);
-    return () => window.clearInterval(id);
-  }, [delay, preservedCallback, enabled]);
+  (0, import_react2.useEffect)(
+    function runImmediateCallback() {
+      if (immediate === true && enabled) {
+        preservedCallback();
+      }
+    },
+    [immediate, preservedCallback, enabled]
+  );
+  (0, import_react2.useEffect)(
+    function startInterval() {
+      if (!enabled) {
+        return;
+      }
+      const id = setInterval(preservedCallback, delay);
+      return () => clearInterval(id);
+    },
+    [delay, preservedCallback, enabled]
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/hooks/useIsClient/index.cjs

@@ -0,0 +1,40 @@
+"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/useIsClient/index.ts
+var useIsClient_exports = {};
+__export(useIsClient_exports, {
+  useIsClient: () => useIsClient
+});
+module.exports = __toCommonJS(useIsClient_exports);
+
+// src/hooks/useIsClient/useIsClient.ts
+var import_react = require("react");
+function useIsClient() {
+  const [isClient, setIsClient] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(function syncClientState() {
+    setIsClient(true);
+  }, []);
+  return isClient;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useIsClient
+});

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

@@ -0,0 +1,40 @@
+/**
+ * @description
+ * `useIsClient` is a React hook that returns `true` only in the client-side environment.
+ * It is primarily used to differentiate between client-side and server-side rendering (SSR).
+ * The state is set to `true` only after the component is mounted in the client-side environment.
+ *
+ * @returns {boolean} Returns `true` in a client-side environment, and `false` otherwise.
+ *
+ * @example
+ * function ClientSideContent() {
+ *   const isClient = useIsClient();
+ *
+ *   if (!isClient) {
+ *     return <div>Loading...</div>; // Rendered on the server side
+ *   }
+ *
+ *   return <div>Client-side rendered content</div>; // Rendered on the client side
+ * }
+ *
+ * @example
+ * function ClientOnlyMap() {
+ *   const isClient = useIsClient();
+ *
+ *   if (!isClient) return null;
+ *
+ *   return <div id="map" />;
+ * }
+ *
+ * @example
+ * function ClientTheme() {
+ *   const isClient = useIsClient();
+ *
+ *   const theme = isClient ? localStorage.getItem('theme') : 'light';
+ *
+ *   return <div>Current theme: {theme}</div>;
+ * }
+ */
+declare function useIsClient(): boolean;
+
+export { useIsClient };

package/dist/hooks/useList/index.cjs

@@ -0,0 +1,104 @@
+"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/useList/index.ts
+var useList_exports = {};
+__export(useList_exports, {
+  useList: () => useList
+});
+module.exports = __toCommonJS(useList_exports);
+
+// src/hooks/useList/useList.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/useList/useList.ts
+function useList(initialState = []) {
+  const [list, setList] = (0, import_react3.useState)(initialState);
+  const preservedInitialState = usePreservedReference(initialState);
+  const push = usePreservedCallback((value) => {
+    setList((prev) => [...prev, value]);
+  });
+  const insertAt = usePreservedCallback((index, value) => {
+    setList((prev) => {
+      const next = [...prev];
+      next.splice(index, 0, value);
+      return next;
+    });
+  });
+  const updateAt = usePreservedCallback((index, value) => {
+    setList((prev) => {
+      const next = [...prev];
+      next[index] = value;
+      return next;
+    });
+  });
+  const removeAt = usePreservedCallback((index) => {
+    setList((prev) => {
+      const next = [...prev];
+      next.splice(index, 1);
+      return next;
+    });
+  });
+  const setAll = usePreservedCallback((values) => {
+    setList(values);
+  });
+  const reset = usePreservedCallback(() => {
+    setList(preservedInitialState);
+  });
+  const actions = (0, import_react3.useMemo)(
+    () => ({ push, insertAt, updateAt, removeAt, setAll, reset }),
+    [push, insertAt, updateAt, removeAt, setAll, reset]
+  );
+  return [list, actions];
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useList
+});

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

@@ -0,0 +1,50 @@
+type ListActions<T> = {
+    push: (value: T) => void;
+    insertAt: (index: number, value: T) => void;
+    updateAt: (index: number, value: T) => void;
+    removeAt: (index: number) => void;
+    setAll: (values: T[]) => void;
+    reset: () => void;
+};
+type UseListReturn<T> = [ReadonlyArray<T>, ListActions<T>];
+/**
+ * @description
+ * A React hook that manages an array as state.
+ * Provides efficient state management and stable action functions.
+ *
+ * @param {T[]} initialState - Initial array state
+ *
+ * @returns {UseListReturn<T>} A tuple containing the array state and actions to manipulate it
+ * - `push` - Appends a value to the end of the list
+ * - `insertAt` - Inserts a value at the specified index
+ * - `updateAt` - Updates the value at the specified index
+ * - `removeAt` - Removes the value at the specified index
+ * - `setAll` - Replaces the entire list with a new array
+ * - `reset` - Resets the list to its initial state
+ *
+ * @example
+ * ```tsx
+ * const [list, actions] = useList<string>(['apple', 'banana']);
+ *
+ * // Add an item
+ * actions.push('cherry');
+ *
+ * // Insert at index
+ * actions.insertAt(1, 'grape');
+ *
+ * // Update at index
+ * actions.updateAt(0, 'orange');
+ *
+ * // Remove at index
+ * actions.removeAt(2);
+ *
+ * // Replace all
+ * actions.setAll(['kiwi', 'mango']);
+ *
+ * // Reset to initial state
+ * actions.reset();
+ * ```
+ */
+declare function useList<T>(initialState?: T[]): UseListReturn<T>;
+
+export { useList };

package/dist/hooks/useLoading/index.cjs

@@ -48,12 +48,15 @@ function useLoading() {
 }
 function useIsMountedRef() {
   const ref = (0, import_react.useRef)({ isMounted: true }).current;
-  (0, import_react.useEffect)(() => {
-    ref.isMounted = true;
-    return () => {
-      ref.isMounted = false;
-    };
-  }, [ref]);
+  (0, import_react.useEffect)(
+    function trackMountedState() {
+      ref.isMounted = true;
+      return () => {
+        ref.isMounted = false;
+      };
+    },
+    [ref]
+  );
   return ref;
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/hooks/useLongPress/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);
   }, []);

package/dist/hooks/useOutsideClickEffect/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);
   }, []);

package/dist/hooks/usePreservedCallback/index.cjs

@@ -29,9 +29,12 @@ module.exports = __toCommonJS(usePreservedCallback_exports);
 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/useRefEffect/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);
   }, []);

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

@@ -6,10 +6,10 @@ type CleanupCallback = () => void;
  * `useRefEffect` is a React hook that helps you set a reference to a specific DOM element and execute a callback whenever the element changes.
  * This hook calls a cleanup function whenever the element changes to prevent memory leaks.
  *
- * @param {(element: Element) => CleanupCallback | void} callback - A callback function that is executed when the element is set. This function can return a cleanup function.
+ * @param {(element: RefElement) => CleanupCallback | void} callback - A callback function that is executed when the element is set. This function can return a cleanup function.
  * @param {DependencyList} deps - An array of dependencies that define when the callback should be re-executed. The `callback` is re-executed whenever the `deps` change.
  *
- * @returns {(element: Element | null) => void} A function to set the element. Pass this function to the `ref` attribute, and the `callback` will be called whenever the element changes.
+ * @returns {(element: RefElement | null) => void} A function to set the element. Pass this function to the `ref` attribute, and the `callback` will be called whenever the element changes.
  *
  * @example
  * import { useRefEffect } from 'react-simplikit';
@@ -26,6 +26,6 @@ type CleanupCallback = () => void;
  *   return <div ref={ref}>Basic Example</div>;
  * }
  */
-declare function useRefEffect<Element extends HTMLElement = HTMLElement>(callback: (element: Element) => CleanupCallback | void, deps: DependencyList): (element: Element | null) => void;
+declare function useRefEffect<RefElement extends HTMLElement = HTMLElement>(callback: (element: RefElement) => CleanupCallback | void, deps: DependencyList): (element: RefElement | null) => void;
 
 export { useRefEffect };