jy-headless 0.2.26 → 0.2.27

package/buttons/Button/Button.d.ts

@@ -1,3 +1,3 @@
 import type { ButtonProps } from '../../types';
-declare const Button: ({ onClick, debounce, loading, readOnly, disabled, children, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ onClick, loading, readOnly, disabled, useDebounce, timeout, children, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/buttons/Button/Button.js

@@ -1,19 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import { useRef } from 'react';
+import useDebouncing from '../../hooks/useDebouncing.js';
 
-const Button = ({ onClick, debounce = false, loading = false, readOnly = false, disabled = false, children, ...props }) => {
-    const timer = useRef(0);
-    const handleClick = (() => {
-        if (!onClick)
-            return;
-        if (debounce) {
-            return () => {
-                clearTimeout(timer.current);
-                timer.current = setTimeout(onClick, 300);
-            };
-        }
-        return onClick;
-    })();
+const Button = ({ onClick, loading = false, readOnly = false, disabled = false, useDebounce = false, timeout = 300, children, ...props }) => {
+    const handleClick = onClick && useDebounce ? useDebouncing(onClick, timeout || 300) : onClick;
     return (jsx("button", { onClick: handleClick, disabled: disabled || loading || readOnly, ...props, children: children }));
 };
 

package/cjs/buttons/Button/Button.d.ts

@@ -1,3 +1,3 @@
 import type { ButtonProps } from '../../types';
-declare const Button: ({ onClick, debounce, loading, readOnly, disabled, children, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ onClick, loading, readOnly, disabled, useDebounce, timeout, children, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/cjs/buttons/Button/Button.js

@@ -1,21 +1,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var useDebouncing = require('../../hooks/useDebouncing.js');
 
-const Button = ({ onClick, debounce = false, loading = false, readOnly = false, disabled = false, children, ...props }) => {
-    const timer = react.useRef(0);
-    const handleClick = (() => {
-        if (!onClick)
-            return;
-        if (debounce) {
-            return () => {
-                clearTimeout(timer.current);
-                timer.current = setTimeout(onClick, 300);
-            };
-        }
-        return onClick;
-    })();
+const Button = ({ onClick, loading = false, readOnly = false, disabled = false, useDebounce = false, timeout = 300, children, ...props }) => {
+    const handleClick = onClick && useDebounce ? useDebouncing(onClick, timeout || 300) : onClick;
     return (jsxRuntime.jsx("button", { onClick: handleClick, disabled: disabled || loading || readOnly, ...props, children: children }));
 };
 

package/cjs/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useDebouncing';
+export * from './useThrottling';

package/cjs/hooks/useDebouncing.d.ts

@@ -0,0 +1,2 @@
+declare const useDebouncing: <T extends (...args: any[]) => void>(callback: T, delay: number) => T;
+export default useDebouncing;

package/cjs/hooks/useDebouncing.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var react = require('react');
+
+const useDebouncing = (callback, delay) => {
+    const timer = react.useRef(null);
+    return react.useCallback(() => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        timer.current = setTimeout(() => {
+            callback();
+        }, delay);
+    }, [callback, delay]);
+};
+
+module.exports = useDebouncing;

package/cjs/hooks/useThrottling.d.ts

@@ -0,0 +1,2 @@
+declare const useThrottling: <T extends (...args: any[]) => void>(callback: T, delay: number) => T;
+export default useThrottling;

package/cjs/hooks/useThrottling.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var react = require('react');
+
+const useThrottling = (callback, delay) => {
+    const lastCalled = react.useRef(0);
+    return react.useCallback((...args) => {
+        const now = Date.now();
+        if (now - lastCalled.current >= delay) {
+            lastCalled.current = now;
+            callback(...args);
+        }
+    }, [callback, delay]);
+};
+
+module.exports = useThrottling;

package/cjs/index.d.ts

@@ -1,4 +1,5 @@
-export { default as Button } from './buttons/Button/Button';
-export { default as Input } from './inputs/Input/Input';
-export * as Types from './types';
-export * as Utils from './utils';
+export { default as Button } from './buttons';
+export { default as Input } from './inputs';
+export * from './types';
+export * from './utils';
+export * from './hooks';

package/cjs/index.js

@@ -2,16 +2,9 @@
 
 var Button = require('./buttons/Button/Button.js');
 var Input = require('./inputs/Input/Input.js');
-var index = require('./types/index.js');
-var index$1 = require('./utils/index.js');
-
-function _interopNamespaceDefaultOnly (e) { return Object.freeze({ __proto__: null, default: e }); }
-
-var index__namespace = /*#__PURE__*/_interopNamespaceDefaultOnly(index$1);
+require('react');
 
 
 
 exports.Button = Button;
 exports.Input = Input;
-exports.Types = index;
-exports.Utils = index__namespace;

package/cjs/inputs/Input/Input.d.ts

@@ -1,3 +1,3 @@
-import { InputProps } from '../../types/inputs/types';
-declare const Input: ({ id, suffixElement, prefixElement, wrapperStyle, wrapperClass, children, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
+import { InputProps } from '../../types';
+declare const Input: ({ id, suffixElement, prefixElement, wrapperStyle, wrapperClass, onChange, timeout, useThrottle, children, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
 export default Input;

package/cjs/inputs/Input/Input.js

@@ -1,10 +1,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var ArrayUtils = require('../../utils/ArrayUtils.js');
+var useThrottling = require('../../hooks/useThrottling.js');
 
-const Input = ({ id, suffixElement, prefixElement, wrapperStyle, wrapperClass, children, ...props }) => {
-    return (jsxRuntime.jsxs("span", { "data-testid": 'input-wrapper', id: [id, 'input-wrapper'].join('-'), className: wrapperClass && ArrayUtils.toFlat(wrapperClass).join(' '), style: wrapperStyle, children: [prefixElement, jsxRuntime.jsx("input", { id: id, ...props }), suffixElement] }));
+const Input = ({ id, suffixElement, prefixElement, wrapperStyle, wrapperClass = [], onChange, timeout = 300, useThrottle = false, children, ...props }) => {
+    const handleChange = onChange && useThrottle ? useThrottling(onChange, timeout) : onChange;
+    return (jsxRuntime.jsxs("span", { "data-testid": 'input-wrapper', id: [id, 'input-wrapper'].join('-'), className: wrapperClass?.join(' '), style: wrapperStyle, children: [prefixElement, jsxRuntime.jsx("input", { id: id, onChange: handleChange, ...props }), suffixElement] }));
 };
 
 module.exports = Input;

package/cjs/types/buttons/index.d.ts

@@ -0,0 +1,7 @@
+import { ButtonHTMLAttributes } from 'react';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    loading?: boolean;
+    readOnly?: boolean;
+    useDebounce?: boolean;
+    timeout?: number;
+}

package/cjs/types/index.d.ts

@@ -1,2 +1,2 @@
-export * from './buttons/types';
-export * from './inputs/types';
+export * from './buttons';
+export * from './inputs';

package/cjs/types/inputs/index.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties, InputHTMLAttributes, ReactElement, ReactNode } from 'react';
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    suffixElement?: ReactElement | ReactNode;
+    prefixElement?: ReactElement | ReactNode;
+    wrapperStyle?: CSSProperties;
+    wrapperClass?: string[];
+    useThrottle?: boolean;
+    timeout?: number;
+}

package/cjs/utils/ArrayUtils.d.ts

@@ -1,4 +1,2 @@
-declare const ArrayUtils: {
-    toFlat(...args: (string | string[])[]): string[];
-};
+declare const ArrayUtils: {};
 export default ArrayUtils;

package/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useDebouncing';
+export * from './useThrottling';

package/hooks/useDebouncing.d.ts

@@ -0,0 +1,2 @@
+declare const useDebouncing: <T extends (...args: any[]) => void>(callback: T, delay: number) => T;
+export default useDebouncing;

package/hooks/useDebouncing.js

@@ -0,0 +1,14 @@
+import { useRef, useCallback } from 'react';
+
+const useDebouncing = (callback, delay) => {
+    const timer = useRef(null);
+    return useCallback(() => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        timer.current = setTimeout(() => {
+            callback();
+        }, delay);
+    }, [callback, delay]);
+};
+
+export { useDebouncing as default };

package/hooks/useThrottling.d.ts

@@ -0,0 +1,2 @@
+declare const useThrottling: <T extends (...args: any[]) => void>(callback: T, delay: number) => T;
+export default useThrottling;

package/hooks/useThrottling.js

@@ -0,0 +1,14 @@
+import { useRef, useCallback } from 'react';
+
+const useThrottling = (callback, delay) => {
+    const lastCalled = useRef(0);
+    return useCallback((...args) => {
+        const now = Date.now();
+        if (now - lastCalled.current >= delay) {
+            lastCalled.current = now;
+            callback(...args);
+        }
+    }, [callback, delay]);
+};
+
+export { useThrottling as default };

package/index.d.ts

@@ -1,4 +1,5 @@
-export { default as Button } from './buttons/Button/Button';
-export { default as Input } from './inputs/Input/Input';
-export * as Types from './types';
-export * as Utils from './utils';
+export { default as Button } from './buttons';
+export { default as Input } from './inputs';
+export * from './types';
+export * from './utils';
+export * from './hooks';

package/index.js

@@ -1,6 +1,3 @@
 export { default as Button } from './buttons/Button/Button.js';
 export { default as Input } from './inputs/Input/Input.js';
-import * as index from './types/index.js';
-export { index as Types };
-import * as index$1 from './utils/index.js';
-export { index$1 as Utils };
+import 'react';

package/inputs/Input/Input.d.ts

@@ -1,3 +1,3 @@
-import { InputProps } from '../../types/inputs/types';
-declare const Input: ({ id, suffixElement, prefixElement, wrapperStyle, wrapperClass, children, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
+import { InputProps } from '../../types';
+declare const Input: ({ id, suffixElement, prefixElement, wrapperStyle, wrapperClass, onChange, timeout, useThrottle, children, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
 export default Input;

package/inputs/Input/Input.js

@@ -1,8 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import ArrayUtils from '../../utils/ArrayUtils.js';
+import useThrottling from '../../hooks/useThrottling.js';
 
-const Input = ({ id, suffixElement, prefixElement, wrapperStyle, wrapperClass, children, ...props }) => {
-    return (jsxs("span", { "data-testid": 'input-wrapper', id: [id, 'input-wrapper'].join('-'), className: wrapperClass && ArrayUtils.toFlat(wrapperClass).join(' '), style: wrapperStyle, children: [prefixElement, jsx("input", { id: id, ...props }), suffixElement] }));
+const Input = ({ id, suffixElement, prefixElement, wrapperStyle, wrapperClass = [], onChange, timeout = 300, useThrottle = false, children, ...props }) => {
+    const handleChange = onChange && useThrottle ? useThrottling(onChange, timeout) : onChange;
+    return (jsxs("span", { "data-testid": 'input-wrapper', id: [id, 'input-wrapper'].join('-'), className: wrapperClass?.join(' '), style: wrapperStyle, children: [prefixElement, jsx("input", { id: id, onChange: handleChange, ...props }), suffixElement] }));
 };
 
 export { Input as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jy-headless",
-  "version": "0.2.26",
+  "version": "0.2.27",
   "description": "A lightweight and customizable headless UI library for React components",
   "license": "MIT",
   "repository": "https://github.com/yCZwIqY/jy-headless",
@@ -23,6 +23,16 @@
       "require": "./cjs/cjs/index.js",
       "types": "./cjs/index.d.ts"
     },
+    "./useDebouncing": {
+      "import": "./hooks/useDebouncing.js",
+      "require": "./cjs/hooks/useDebouncing.js",
+      "types": "./hooks/useDebouncing.d.ts"
+    },
+    "./useThrottling": {
+      "import": "./hooks/useThrottling.js",
+      "require": "./cjs/hooks/useThrottling.js",
+      "types": "./hooks/useThrottling.d.ts"
+    },
     "./index": {
       "import": "./utils/index.js",
       "require": "./cjs/utils/index.js",

package/types/buttons/index.d.ts

@@ -0,0 +1,7 @@
+import { ButtonHTMLAttributes } from 'react';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    loading?: boolean;
+    readOnly?: boolean;
+    useDebounce?: boolean;
+    timeout?: number;
+}

package/types/index.d.ts

@@ -1,2 +1,2 @@
-export * from './buttons/types';
-export * from './inputs/types';
+export * from './buttons';
+export * from './inputs';

package/types/inputs/index.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties, InputHTMLAttributes, ReactElement, ReactNode } from 'react';
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    suffixElement?: ReactElement | ReactNode;
+    prefixElement?: ReactElement | ReactNode;
+    wrapperStyle?: CSSProperties;
+    wrapperClass?: string[];
+    useThrottle?: boolean;
+    timeout?: number;
+}

package/utils/ArrayUtils.d.ts

@@ -1,4 +1,2 @@
-declare const ArrayUtils: {
-    toFlat(...args: (string | string[])[]): string[];
-};
+declare const ArrayUtils: {};
 export default ArrayUtils;

package/version.txt

@@ -1 +1 @@
-0.2.26
+0.2.27