react-simplikit 0.0.34 → 0.0.36

package/dist/hooks/useLongPress/index.cjs

@@ -0,0 +1,123 @@
+"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/useLongPress/index.ts
+var useLongPress_exports = {};
+__export(useLongPress_exports, {
+  useLongPress: () => useLongPress
+});
+module.exports = __toCommonJS(useLongPress_exports);
+
+// src/hooks/useLongPress/useLongPress.ts
+var import_react2 = 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/useLongPress/useLongPress.ts
+function useLongPress(onLongPress, { delay = 500, moveThreshold, onClick, onLongPressEnd } = {}) {
+  const timeoutRef = (0, import_react2.useRef)(null);
+  const isLongPressActiveRef = (0, import_react2.useRef)(false);
+  const initialPositionRef = (0, import_react2.useRef)({ x: 0, y: 0 });
+  const preservedOnLongPress = usePreservedCallback(onLongPress);
+  const preservedOnClick = usePreservedCallback(onClick || (() => {
+  }));
+  const preservedOnLongPressEnd = usePreservedCallback(onLongPressEnd || (() => {
+  }));
+  const hasThreshold = moveThreshold?.x !== void 0 || moveThreshold?.y !== void 0;
+  const getClientPosition = (0, import_react2.useCallback)((event) => {
+    if ("touches" in event.nativeEvent) {
+      const touch = event.nativeEvent.touches[0];
+      return { x: touch.clientX, y: touch.clientY };
+    }
+    return {
+      x: event.nativeEvent.clientX,
+      y: event.nativeEvent.clientY
+    };
+  }, []);
+  const isMovedBeyondThreshold = (0, import_react2.useCallback)(
+    (event) => {
+      const { x, y } = getClientPosition(event);
+      const deltaX = Math.abs(x - initialPositionRef.current.x);
+      const deltaY = Math.abs(y - initialPositionRef.current.y);
+      return moveThreshold?.x !== void 0 && deltaX > moveThreshold.x || moveThreshold?.y !== void 0 && deltaY > moveThreshold.y;
+    },
+    [getClientPosition, moveThreshold]
+  );
+  const cancelLongPress = (0, import_react2.useCallback)(() => {
+    if (timeoutRef.current !== null) {
+      window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+  const handlePressStart = (0, import_react2.useCallback)(
+    (event) => {
+      cancelLongPress();
+      const position = getClientPosition(event);
+      initialPositionRef.current = position;
+      isLongPressActiveRef.current = false;
+      timeoutRef.current = window.setTimeout(() => {
+        isLongPressActiveRef.current = true;
+        preservedOnLongPress(event);
+      }, delay);
+    },
+    [cancelLongPress, delay, getClientPosition, preservedOnLongPress]
+  );
+  const handlePressEnd = (0, import_react2.useCallback)(
+    (event) => {
+      if (isLongPressActiveRef.current) {
+        preservedOnLongPressEnd(event);
+      } else if (timeoutRef.current !== null) {
+        preservedOnClick(event);
+      }
+      cancelLongPress();
+      isLongPressActiveRef.current = false;
+    },
+    [cancelLongPress, preservedOnClick, preservedOnLongPressEnd]
+  );
+  const handlePressMove = (0, import_react2.useCallback)(
+    (event) => {
+      if (timeoutRef.current !== null && isMovedBeyondThreshold(event)) {
+        cancelLongPress();
+      }
+    },
+    [cancelLongPress, isMovedBeyondThreshold]
+  );
+  return {
+    onMouseDown: handlePressStart,
+    onMouseUp: handlePressEnd,
+    onMouseLeave: cancelLongPress,
+    onTouchStart: handlePressStart,
+    onTouchEnd: handlePressEnd,
+    ...hasThreshold ? { onTouchMove: handlePressMove, onMouseMove: handlePressMove } : {}
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useLongPress
+});

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

@@ -0,0 +1,70 @@
+import { MouseEvent, TouchEvent } from 'react';
+
+type Handler<E extends HTMLElement> = (event: MouseEvent<E> | TouchEvent<E>) => void;
+type UseLongPressOptions<E extends HTMLElement> = {
+    delay?: number;
+    moveThreshold?: {
+        x?: number;
+        y?: number;
+    };
+    onClick?: Handler<E>;
+    onLongPressEnd?: Handler<E>;
+};
+/**
+ * @description
+ * `useLongPress` is a React hook that detects when an element is pressed and held for a specified duration.
+ * It handles both mouse and touch events, making it work consistently across desktop and mobile devices.
+ *
+ * @template {HTMLElement} E - The HTML element type that will use the long press handlers.
+ * @param {(event: React.MouseEvent<E> | React.TouchEvent<E>) => void} onLongPress - The callback function to be executed when a long press is detected.
+ * @param {UseLongPressOptions} [options] - Configuration options for the long press behavior.
+ * @param {number} [options.delay=500] - The time in milliseconds before triggering the long press. Defaults to 500ms.
+ * @param {Object} [options.moveThreshold] - Maximum movement allowed before canceling a long press.
+ * @param {number} [options.moveThreshold.x] - Maximum horizontal movement in pixels.
+ * @param {number} [options.moveThreshold.y] - Maximum vertical movement in pixels.
+ * @param {(event) => void} [options.onClick] - Optional function to execute on a normal click (press and release before delay).
+ * @param {(event) => void} [options.onLongPressEnd] - Optional function to execute when a long press ends.
+ *
+ * @returns {Object} Event handlers to attach to an element.
+ * - onMouseDown `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for mouse down events.
+ * - onMouseUp `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for mouse up events.
+ * - onMouseLeave `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for mouse leave events.
+ * - onTouchStart `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for touch start events.
+ * - onTouchEnd `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for touch end events.
+ * - onMouseMove `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for mouse move events. Included if `moveThreshold` is provided.
+ * - onTouchMove `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for touch move events. Included if `moveThreshold` is provided.
+ *
+ * @example
+ * import { useLongPress } from 'react-simplikit';
+ *
+ * function ContextMenu() {
+ *   const [menuVisible, setMenuVisible] = useState(false);
+ *
+ *   const longPressHandlers = useLongPress(
+ *     () => setMenuVisible(true),
+ *     {
+ *       delay: 400,
+ *       onClick: () => console.log('Normal click'),
+ *       onLongPressEnd: () => console.log('Long press completed')
+ *     }
+ *   );
+ *
+ *   return (
+ *     <div>
+ *       <button {...longPressHandlers}>Press and hold</button>
+ *       {menuVisible && <div className="context-menu">Context Menu</div>}
+ *     </div>
+ *   );
+ * }
+ */
+declare function useLongPress<E extends HTMLElement = HTMLElement>(onLongPress: Handler<E>, { delay, moveThreshold, onClick, onLongPressEnd }?: UseLongPressOptions<E>): {
+    onTouchMove?: ((event: MouseEvent<E> | TouchEvent<E>) => void) | undefined;
+    onMouseMove?: ((event: MouseEvent<E> | TouchEvent<E>) => void) | undefined;
+    onMouseDown: (event: MouseEvent<E> | TouchEvent<E>) => void;
+    onMouseUp: (event: MouseEvent<E> | TouchEvent<E>) => void;
+    onMouseLeave: () => void;
+    onTouchStart: (event: MouseEvent<E> | TouchEvent<E>) => void;
+    onTouchEnd: (event: MouseEvent<E> | TouchEvent<E>) => void;
+};
+
+export { useLongPress };

package/dist/hooks/useMap/index.cjs

@@ -0,0 +1,77 @@
+"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/useMap/index.ts
+var useMap_exports = {};
+__export(useMap_exports, {
+  useMap: () => useMap
+});
+module.exports = __toCommonJS(useMap_exports);
+
+// src/hooks/useMap/useMap.ts
+var import_react2 = require("react");
+
+// src/hooks/usePreservedReference/usePreservedReference.ts
+var import_react = require("react");
+function usePreservedReference(value, areValuesEqual = areDeeplyEqual) {
+  const ref = (0, import_react.useRef)(value);
+  return (0, import_react.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/useMap/useMap.ts
+function useMap(initialState = /* @__PURE__ */ new Map()) {
+  const [map, setMap] = (0, import_react2.useState)(() => new Map(initialState));
+  const preservedInitialState = usePreservedReference(initialState);
+  const set = (0, import_react2.useCallback)((key, value) => {
+    setMap((prev) => {
+      const nextMap = new Map(prev);
+      nextMap.set(key, value);
+      return nextMap;
+    });
+  }, []);
+  const setAll = (0, import_react2.useCallback)((entries) => {
+    setMap(() => new Map(entries));
+  }, []);
+  const remove = (0, import_react2.useCallback)((key) => {
+    setMap((prev) => {
+      const nextMap = new Map(prev);
+      nextMap.delete(key);
+      return nextMap;
+    });
+  }, []);
+  const reset = (0, import_react2.useCallback)(() => {
+    setMap(() => new Map(preservedInitialState));
+  }, [preservedInitialState]);
+  const actions = (0, import_react2.useMemo)(() => {
+    return { set, setAll, remove, reset };
+  }, [set, setAll, remove, reset]);
+  return [map, actions];
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useMap
+});

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

@@ -0,0 +1,46 @@
+/**
+ * Defines the type for either a Map or an array of key-value pairs.
+ */
+type MapOrEntries<K, V> = Map<K, V> | [K, V][];
+/**
+ * Actions to manipulate the Map state.
+ */
+type MapActions<K, V> = {
+    /** Sets a key-value pair in the map. */
+    set: (key: K, value: V) => void;
+    /** Sets multiple key-value pairs in the map at once. */
+    setAll: (entries: MapOrEntries<K, V>) => void;
+    /** Removes a key from the map. */
+    remove: (key: K) => void;
+    /** Resets the map to its initial state. */
+    reset: () => void;
+};
+/**
+ * Return type of the useMap hook.
+ * Hides certain methods to prevent direct mutations.
+ */
+type UseMapReturn<K, V> = [Omit<Map<K, V>, 'set' | 'clear' | 'delete'>, MapActions<K, V>];
+/**
+ * @description
+ * A React hook that manages a key-value Map as state.
+ * Provides efficient state management and stable action functions.
+ *
+ * @param {MapOrEntries<K, V>} initialState - Initial Map state (Map object or array of key-value pairs)
+ * @returns {UseMapReturn<K, V>} A tuple containing the Map state and actions to manipulate it
+ *
+ * @example
+ * ```tsx
+ * const [userMap, actions] = useMap<string, User>([
+ *   ['user1', { name: 'John', age: 30 }]
+ * ]);
+ *
+ * // Using values from the Map
+ * const user1 = userMap.get('user1');
+ *
+ * // Updating the Map
+ * actions.set('user2', { name: 'Jane', age: 25 });
+ * ```
+ */
+declare function useMap<K, V>(initialState?: MapOrEntries<K, V>): UseMapReturn<K, V>;
+
+export { useMap };

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

@@ -1,7 +1,7 @@
 /**
  * @description
- * Returns the previous value of the input state.
- * If a re-render occurs but the state value does not change, the previous value remains unchanged.
+ * `usePrevious` is a React hook that returns the previous value of the input state.
+ * It preserves the previous value unchanged when re-render occur without state changes.
  * If the state is an object or requires custom change detection, a `compare` function can be provided.
  * By default, state changes are detected using `prev === next`.
  *

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

@@ -3,7 +3,7 @@ import { DependencyList } from 'react';
 type CleanupCallback = () => void;
 /**
  * @description
- * `useRefEffect` is a custom hook that helps you set a reference to a specific DOM element and execute a callback whenever the element changes.
+ * `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.

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

@@ -23,7 +23,7 @@ type StorageStateOptionsWithSerializer<T> = StorageStateOptions<T> & {
 type SerializableGuard<T extends readonly any[]> = T[0] extends any ? T : T[0] extends never ? 'Received a non-serializable value' : T;
 /**
  * @description
- * A React hook that functions like `useState` but persists the state value in browser storage.
+ * `useStorageState` is a React that functions like `useState` but persists the state value in browser storage.
  * 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.

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

@@ -16,7 +16,7 @@ declare function throttle<F extends (...args: any[]) => void>(func: F, throttleM
 
 /**
  * @description
- * A React hook that creates a throttled version of a callback function.
+ * `useThrottle` is a React hook that creates a throttled version of a callback function.
  * This is useful for limiting the rate at which a function can be called,
  * such as when handling scroll or resize events.
  *

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

@@ -3,7 +3,7 @@ type Options = {
 };
 /**
  * @description
- * A React hook that listens to changes in the document's visibility state and triggers a callback.
+ * `useVisibilityEvent` is a React hook that listens to changes in the document's visibility state and triggers a callback.
  *
  * @param {(visibilityState: 'visible' | 'hidden') => void} callback - A function to be called
  * when the visibility state changes. It receives the current visibility state ('visible' or 'hidden') as an argument.