@koobiq/react-core 0.0.1-beta.2 → 0.0.1-beta.20

package/dist/hooks/index.d.ts

@@ -1,13 +1,15 @@
-export * from './usePrevious/index.js';
-export * from './useMultiRef/index.js';
-export * from './useIsomorphicEffect/index.js';
+export * from './usePrevious';
+export * from './useMultiRef';
+export * from './useIsomorphicEffect';
 export * from './useMediaQuery';
-export * from './useSsr/index.js';
-export * from './useDOMRef/index.js';
-export * from './useBoolean/index.js';
-export * from './useMutableRef/index.js';
-export * from './useInterval/index.js';
-export * from './useIsFirstRender/index.js';
-export * from './useEventListener/index.js';
-export * from './useResizeObserver/index.js';
-export * from './useElementSize/index.js';
+export * from './useSsr';
+export * from './useDOMRef';
+export * from './useBoolean';
+export * from './useMutableRef';
+export * from './useInterval';
+export * from './useIsFirstRender';
+export * from './useEventListener';
+export * from './useResizeObserver';
+export * from './useElementSize';
+export * from './useRefs';
+export * from './useDebounceCallback';

package/dist/hooks/useBoolean/useBoolean.js

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useCallback } from "react";
 function useBoolean(defaultValue = false) {
   const [value, setValue] = useState(defaultValue);

package/dist/hooks/useDOMRef/useDOMRef.js

@@ -1,3 +1,4 @@
+"use client";
 import { useRef, useImperativeHandle } from "react";
 function useDOMRef(ref) {
   const domRef = useRef(null);

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

@@ -0,0 +1 @@
+export * from './useDebounceCallback';

package/dist/hooks/useDebounceCallback/useDebounceCallback.d.ts

@@ -0,0 +1,29 @@
+type FunctionCallback = (...args: any[]) => void;
+export type UseDebounceCallbackReturnValue<CB extends FunctionCallback> = [
+    CB,
+    () => void
+];
+export type UseDebounceCallbackPropOptions = {
+    /**
+     * If `true`, the first call runs without delay.
+     * @default false
+     * */
+    firstCallWithoutDelay: boolean;
+};
+export type UseDebounceCallbackProps<CB> = {
+    /**
+     * The function to be debounced.
+     * It will only run after the specified delay has passed without new calls.
+     */
+    callback: CB;
+    /**
+     * Delay in milliseconds to wait before calling the callback.
+     * @default 300
+     */
+    delay?: number;
+    /** Additional debounce options. */
+    options?: UseDebounceCallbackPropOptions;
+};
+/** A hook that waits some time before running a function. */
+export declare function useDebounceCallback<CB extends FunctionCallback>({ callback, delay, options, }: UseDebounceCallbackProps<CB>): UseDebounceCallbackReturnValue<CB>;
+export {};

package/dist/hooks/useDebounceCallback/useDebounceCallback.js

@@ -0,0 +1,39 @@
+"use client";
+import { useRef, useCallback, useEffect } from "react";
+function useDebounceCallback({
+  callback,
+  delay = 300,
+  options = { firstCallWithoutDelay: false }
+}) {
+  const { firstCallWithoutDelay } = options;
+  const timeoutRef = useRef(null);
+  const debouncedHandler = useCallback(
+    (...args) => {
+      if (!timeoutRef.current && firstCallWithoutDelay) {
+        callback(...args);
+        timeoutRef.current = setTimeout(() => {
+          timeoutRef.current = null;
+        }, delay);
+        return;
+      }
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        callback(...args);
+        timeoutRef.current = null;
+      }, delay);
+    },
+    [callback, delay, options.firstCallWithoutDelay]
+  );
+  const cancel = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+  }, []);
+  useEffect(() => () => cancel(), []);
+  return [debouncedHandler, cancel];
+}
+export {
+  useDebounceCallback
+};

package/dist/hooks/useIsomorphicEffect/useIsomorphicEffect.js

@@ -1,3 +1,4 @@
+"use client";
 import { useLayoutEffect, useEffect } from "react";
 import { isBrowser } from "../../utils/isBrowser.js";
 const useIsomorphicEffect = isBrowser() ? useLayoutEffect : useEffect;

package/dist/hooks/usePrevious/usePrevious.js

@@ -1,3 +1,4 @@
+"use client";
 import { useRef, useEffect } from "react";
 function usePrevious(value) {
   const ref = useRef(null);

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

@@ -0,0 +1 @@
+export * from './useRefs';

package/dist/hooks/useRefs/useRefs.d.ts

@@ -0,0 +1,3 @@
+import { type RefObject } from 'react';
+export type UseRefsReturn<T, Keys extends number | readonly string[]> = Keys extends readonly string[] ? Record<Keys[number], RefObject<T>> : Array<RefObject<T>>;
+export declare const useRefs: <T, Keys extends number | readonly string[] = number>(keys: Keys, deps?: unknown[]) => UseRefsReturn<T, Keys>;

package/dist/hooks/useRefs/useRefs.js

@@ -0,0 +1,14 @@
+"use client";
+import { useMemo, createRef } from "react";
+import { isNumber } from "../../utils/typeGuards/isNumber.js";
+const useRefs = (keys, deps = []) => useMemo(() => {
+  if (!isNumber(keys)) {
+    return Object.fromEntries(
+      keys.map((key) => [key, createRef()])
+    );
+  }
+  return new Array(keys).fill(0).map(() => createRef());
+}, [isNumber(keys) ? keys : keys.join("-"), ...deps]);
+export {
+  useRefs
+};

package/dist/hooks/useSsr/useSsr.js

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useEffect } from "react";
 import { isBrowser } from "../../utils/isBrowser.js";
 const useSsr = () => {

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import { useFocusRing, FocusableProvider } from '@react-aria/focus';
-import { useHover, usePress } from '@react-aria/interactions';
+import { useHover, usePress, Pressable } from '@react-aria/interactions';
 import { mergeProps, filterDOMProps } from '@react-aria/utils';
 import { useToggleState } from '@react-stately/toggle';
 export * from './types/index.js';
 export * from './styles/index.js';
 export * from './hooks/index.js';
 export * from './utils/index.js';
-export { FocusableProvider, mergeProps, useFocusRing, useHover, usePress, useToggleState, filterDOMProps, };
+export { FocusableProvider, Pressable, mergeProps, useFocusRing, useHover, usePress, useToggleState, filterDOMProps, };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { FocusableProvider, useFocusRing } from "@react-aria/focus";
-import { useHover, usePress } from "@react-aria/interactions";
+import { Pressable, useHover, usePress } from "@react-aria/interactions";
 import { filterDOMProps, mergeProps } from "@react-aria/utils";
 import { useToggleState } from "@react-stately/toggle";
 import { clsx } from "./styles/clsx.js";
@@ -16,6 +16,8 @@ import { useIsFirstRender } from "./hooks/useIsFirstRender/useIsFirstRender.js";
 import { useEventListener } from "./hooks/useEventListener/useEventListener.js";
 import { useResizeObserver } from "./hooks/useResizeObserver/useResizeObserver.js";
 import { useElementSize } from "./hooks/useElementSize/useElementSize.js";
+import { useRefs } from "./hooks/useRefs/useRefs.js";
+import { useDebounceCallback } from "./hooks/useDebounceCallback/useDebounceCallback.js";
 import { polymorphicForwardRef } from "./utils/polymorphicForwardRef.js";
 import { isNotNil } from "./utils/typeGuards/isNotNil.js";
 import { isString } from "./utils/typeGuards/isString.js";
@@ -25,6 +27,7 @@ import { isBrowser } from "./utils/isBrowser.js";
 import { capitalizeFirstLetter } from "./utils/capitalizeFirstLetter/capitalizeFirstLetter.js";
 export {
   FocusableProvider,
+  Pressable,
   capitalizeFirstLetter,
   clsx,
   filterDOMProps,
@@ -37,6 +40,7 @@ export {
   setRef,
   useBoolean,
   useDOMRef,
+  useDebounceCallback,
   useElementSize,
   useEventListener,
   useFocusRing,
@@ -49,6 +53,7 @@ export {
   useMutableRef,
   usePress,
   usePrevious,
+  useRefs,
   useResizeObserver,
   useSsr,
   useToggleState

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-core",
-  "version": "0.0.1-beta.2",
+  "version": "0.0.1-beta.20",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -16,6 +16,11 @@
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git",
+    "directory": "packages/core",
+    "url": "git+https://github.com/koobiq/react-components.git"
+  },
   "sideEffects": false,
   "dependencies": {
     "@react-aria/focus": "^3.18.0",