@himanshu-sorathiya/react-kit 1.0.5 → 1.0.7

package/dist/index.d.ts

@@ -1,10 +1,29 @@
 // Generated by dts-bundle-generator v9.5.1
 
-export interface ModalProps {
+export interface ModalLayoutProps {
 	children: React.ReactNode;
 	className?: string;
 }
-export declare function Modal({ children, className }: ModalProps): import("react").ReactPortal;
+export declare function ModalLayout({ children, className }: ModalLayoutProps): import("react").ReactPortal;
+export interface DebounceOptions {
+	maxWait?: number;
+	leading?: boolean;
+	trailing?: boolean;
+}
+export interface UseDebounceReturn<Args extends any[]> {
+	debouncedFunc: (...args: Args) => void;
+	cancel: () => void;
+	flush: () => void;
+	isPending: boolean;
+}
+export declare function useDebounce<Args extends any[]>(func: (...args: Args) => void, delay: number, options?: DebounceOptions): UseDebounceReturn<Args>;
+export interface DebouncedValueOptions {
+	maxWait?: number;
+	leading?: boolean;
+	trailing?: boolean;
+}
+export type UseDebouncedValueReturn<T> = T;
+export declare function useDebouncedValue<T>(value: T, delay: number, options?: DebouncedValueOptions): UseDebouncedValueReturn<T>;
 export type FilterType = "text" | "number" | "boolean" | "date" | "select" | "multiselect" | "custom";
 export type TextOperator = "contains" | "equals" | "startsWith" | "endsWith" | "notContains";
 export type NumberOperator = "equals" | "greaterThan" | "lessThan" | "greaterThanOrEqual" | "lessThanOrEqual" | "between";

package/dist/index.js

@@ -1,6 +1,6 @@
-import { createStore as o, useSelector as s } from "@tanstack/react-store";
-import { useCallback as e, useState as i, useMemo as n, useRef as r, useEffect as t } from "react";
+import { useCallback as e, useEffect as t, useMemo as n, useRef as r, useState as i } from "react";
 import { createPortal as a } from "react-dom";
+import { createStore as o, useSelector as s } from "@tanstack/react-store";
 import { jsx as c } from "react/jsx-runtime";
 //#region src/store/modalStore.ts
 var l = o({
@@ -30,7 +30,7 @@ function u() {
 }
 //#endregion
 //#region src/components/Modal.tsx
-function d({ children: e, className: n = "" }) {
+function d({ children: e, className: n }) {
 	let { id: i, closeModal: o } = u(), s = r(null);
 	return t(() => {
 		let e = s.current;
@@ -40,7 +40,7 @@ function d({ children: e, className: n = "" }) {
 		onCancel: (e) => {
 			e.preventDefault(), o();
 		},
-		className: `universal-modal ${n ?? ""}`,
+		className: `universal-modal ${n}`,
 		children: /* @__PURE__ */ c("div", {
 			className: "modal-container",
 			children: e
@@ -48,8 +48,48 @@ function d({ children: e, className: n = "" }) {
 	}), document.body);
 }
 //#endregion
+//#region src/hooks/useDebounce.ts
+function f(n, a, o = {}) {
+	let [s, c] = i(!1), l = o.maxWait, u = !!o.leading, d = !u && o.trailing === !1 ? !0 : o.trailing ?? !u, f = r(n), p = r(null), m = r(-1), h = r(-1), g = r(null);
+	t(() => {
+		f.current = n;
+	}, [n]);
+	let _ = e(() => {
+		p.current &&= (clearTimeout(p.current), null), m.current = -1, h.current = -1, g.current = null, c(!1);
+	}, []), v = e(() => {
+		p.current && g.current && (clearTimeout(p.current), p.current = null, f.current(...g.current), m.current = Date.now(), h.current = -1, g.current = null, c(!1));
+	}, []);
+	return t(() => () => {
+		_();
+	}, [_]), {
+		debouncedFunc: e((...e) => {
+			c(!0), h.current = Date.now(), g.current = e, m.current === -1 && (m.current = Date.now(), u === !0 && f.current(...e)), l !== void 0 && Date.now() - m.current >= l ? (p.current && clearTimeout(p.current), f.current(...e), m.current = -1, c(!1)) : (p.current && clearTimeout(p.current), p.current = setTimeout(() => {
+				h.current !== m.current && d !== !1 && f.current(...e), m.current = -1, c(!1);
+			}, a));
+		}, [
+			a,
+			l,
+			d,
+			u
+		]),
+		cancel: _,
+		flush: v,
+		isPending: s
+	};
+}
+//#endregion
+//#region src/hooks/useDebouncedValue.ts
+function p(e, n, r = {}) {
+	let [a, o] = i(e), { debouncedFunc: s } = f((e) => {
+		o(e);
+	}, n, r);
+	return t(() => {
+		s(e);
+	}, [e, s]), a;
+}
+//#endregion
 //#region src/utils/filterUtils.ts
-var f = {
+var m = {
 	text: {
 		contains: (e, t, n) => n?.caseSensitive ? String(e).includes(String(t)) : String(e).toLowerCase().includes(String(t).toLowerCase()),
 		equals: (e, t, n) => n?.caseSensitive ? String(e) === String(t) : String(e).toLowerCase() === String(t).toLowerCase(),
@@ -67,12 +107,25 @@ var f = {
 	},
 	boolean: { equals: (e, t) => !!e == !!t },
 	date: {
-		equals: (e, t) => new Date(e).getTime() === new Date(t).getTime(),
-		before: (e, t) => new Date(e).getTime() < new Date(t).getTime(),
-		after: (e, t) => new Date(e).getTime() > new Date(t).getTime(),
+		equals: (e, t) => {
+			if (!e || !t) return !1;
+			let n = new Date(e).getTime(), r = new Date(t).getTime();
+			return Number.isNaN(n) || Number.isNaN(r) ? !1 : n === r;
+		},
+		before: (e, t) => {
+			if (!e || !t) return !1;
+			let n = new Date(e).getTime(), r = new Date(t).getTime();
+			return Number.isNaN(n) || Number.isNaN(r) ? !1 : n < r;
+		},
+		after: (e, t) => {
+			if (!e || !t) return !1;
+			let n = new Date(e).getTime(), r = new Date(t).getTime();
+			return Number.isNaN(n) || Number.isNaN(r) ? !1 : n > r;
+		},
 		between: (e, t) => {
-			let n = new Date(e).getTime();
-			return n >= new Date(t.min).getTime() && n <= new Date(t.max).getTime();
+			if (!e || !t?.min || !t?.max) return !1;
+			let n = new Date(e).getTime(), r = new Date(t.min).getTime(), i = new Date(t.max).getTime();
+			return Number.isNaN(n) || Number.isNaN(r) || Number.isNaN(i) ? !1 : n >= r && n <= i;
 		}
 	},
 	select: {
@@ -85,62 +138,64 @@ var f = {
 		intersects: (e, t) => e.some((e) => t.includes(e))
 	}
 };
-function p(e, t, n) {
+//#endregion
+//#region src/utils/utils.ts
+function h(e, t, n) {
 	if (typeof e != "object" || !e) return e;
-	let r = t || n;
+	let r = (t || n) ?? "";
 	return r.includes(".") ? r.split(".").reduce((e, t) => e?.[t], e) : e?.[r];
 }
 //#endregion
 //#region src/hooks/useFilter.ts
-function m(t, n = []) {
-	let [r, a] = i(n), o = t.filter((e) => r.every((t) => {
-		let { id: n, field: r, type: i, operator: a, value: o, compare: s, ...c } = t, l = p(e, r, n);
-		if (i === "custom" || a === "custom") return s ? s(l, o, e) : !0;
-		let u = f[i];
-		if (!u) return !0;
-		let d = u[a];
-		return d ? d(l, o, c) : !0;
-	})), s = e((e) => {
-		a((t) => t.some((t) => t.id === e.id) ? t.map((t) => t.id === e.id ? e : t) : [...t, e]);
-	}, []), c = e((e) => {
-		a((t) => Array.isArray(e) ? t.filter((t) => !e.includes(t.id)) : t.filter((t) => t.id !== e));
-	}, []), l = e(() => {
-		a([]);
+function g(t, r = []) {
+	let [a, o] = i(r), s = n(() => t.filter((e) => a.every((t) => {
+		let { id: n, field: r, type: i, operator: a, value: o, compare: s } = t, c = h(e, r, n);
+		if (i === "custom" || a === "custom") return s ? s(c, o, e) : !0;
+		let l = m[i];
+		if (!l) return !0;
+		let u = l[a];
+		return u ? u(c, o, t) : !0;
+	})), [t, a]), c = e((e) => {
+		o((t) => t.some((t) => t.id === e.id) ? t.map((t) => t.id === e.id ? e : t) : [...t, e]);
+	}, []), l = e((e) => {
+		o((t) => Array.isArray(e) ? t.filter((t) => !e.includes(t.id)) : t.filter((t) => t.id !== e));
 	}, []), u = e(() => {
-		a(n);
-	}, [n]), d = e((e) => {
-		a(e);
-	}, []), m = e((e) => r.find((t) => t.id === e)?.value, [r]), h = e((e, t) => {
-		a((n) => n.map((n) => n.id === e ? {
+		o([]);
+	}, []), d = e(() => {
+		o(r);
+	}, [r]), f = e((e) => {
+		o(e);
+	}, []), p = e((e) => a.find((t) => t.id === e)?.value, [a]), g = e((e, t) => {
+		o((n) => n.map((n) => n.id === e ? {
 			...n,
 			value: t
 		} : n));
-	}, []), g = e((e) => r.some((t) => t.id === e), [r]);
+	}, []), _ = e((e) => a.some((t) => t.id === e), [a]);
 	return {
-		filteredItems: o,
-		filters: r,
-		addFilter: s,
-		removeFilter: c,
-		clearFilters: l,
-		resetFilters: u,
+		filteredItems: s,
+		filters: a,
+		addFilter: c,
+		removeFilter: l,
+		clearFilters: u,
+		resetFilters: d,
 		toggleFilter: e((e) => {
-			a((t) => t.some((t) => t.id === e.id) ? t.filter((t) => t.id !== e.id) : [...t, e]);
+			o((t) => t.some((t) => t.id === e.id) ? t.filter((t) => t.id !== e.id) : [...t, e]);
 		}, []),
 		updateFilterConfig: e((e, t) => {
-			a((n) => n.map((n) => n.id === e ? {
+			o((n) => n.map((n) => n.id === e ? {
 				...n,
 				...t
 			} : n));
 		}, []),
-		setFilters: d,
-		getFilterValue: m,
-		updateFilterValue: h,
-		isFilterActive: g
+		setFilters: f,
+		getFilterValue: p,
+		updateFilterValue: g,
+		isFilterActive: _
 	};
 }
 //#endregion
 //#region src/hooks/usePagination.ts
-function h(t, r, a = 0) {
+function _(t, r, a = 0) {
 	let [o, s] = i(r), [c, l] = i(a), u = Math.max(1, Math.ceil(t.length / Math.max(1, o))), d = Math.min(Math.max(0, c), u - 1);
 	return c !== d && l(d), {
 		currentItems: n(() => typeof o != "number" || o < 1 ? [] : t.slice(c * o, (c + 1) * o), [
@@ -187,24 +242,26 @@ function h(t, r, a = 0) {
 }
 //#endregion
 //#region src/utils/sortUtils.ts
-function g(e, t, n = {}) {
-	let { sortUndefined: r, desc: i = !1 } = n, a = w(e, t, r, i);
+function v(e, t, n = {}) {
+	let { sortUndefined: r, desc: i = !1 } = n, a = T(e, t, r, i);
 	if (a !== null) return a;
 	let o = !!e;
 	return o === !!t ? 0 : o ? 1 : -1;
 }
-function _(e, t, n = {}) {
-	let { sortUndefined: r, desc: i = !1 } = n, a = w(e, t, r, i);
-	return a === null ? (Number.isNaN(Number(e)) ? 0 : Number(e)) - (Number.isNaN(Number(t)) ? 0 : Number(t)) : a;
+function y(e, t, n = {}) {
+	let { sortUndefined: r, desc: i = !1 } = n, a = T(e, t, r, i);
+	if (a !== null) return a;
+	let o = e === "" || e === null ? NaN : Number(e), s = t === "" || t === null ? NaN : Number(t), c = Number.isNaN(o), l = Number.isNaN(s);
+	return c || l ? T(c ? void 0 : o, l ? void 0 : s, r, i) ?? 0 : o - s;
 }
-function v(e, t, n = {}) {
-	let { desc: r = !1, sortUndefined: i, caseSensitive: a = !1 } = n, o = w(e, t, i, r);
+function b(e, t, n = {}) {
+	let { desc: r = !1, sortUndefined: i, caseSensitive: a = !1 } = n, o = T(e, t, i, r);
 	if (o !== null) return o;
 	let s = String(e), c = String(t);
 	return s.localeCompare(c, void 0, { sensitivity: a ? "variant" : "base" });
 }
-function y(e, t, n = {}) {
-	let { desc: r = !1, sortUndefined: i, caseSensitive: a = !1 } = n, o = w(e, t, i, r);
+function x(e, t, n = {}) {
+	let { desc: r = !1, sortUndefined: i, caseSensitive: a = !1 } = n, o = T(e, t, i, r);
 	if (o !== null) return o;
 	let s = String(e), c = String(t);
 	return s.localeCompare(c, void 0, {
@@ -212,26 +269,21 @@ function y(e, t, n = {}) {
 		sensitivity: a ? "variant" : "base"
 	});
 }
-function b(e, t, n = {}) {
-	let { desc: r = !1, sortUndefined: i } = n, a = w(e, t, i, r);
+function S(e, t, n = {}) {
+	let { desc: r = !1, sortUndefined: i } = n, a = T(e, t, i, r);
 	if (a !== null) return a;
 	let o = new Date(e).getTime(), s = new Date(t).getTime();
 	return (Number.isNaN(o) ? 0 : o) - (Number.isNaN(s) ? 0 : s);
 }
-function x(e, t, n = {}) {
-	let { desc: r = !1, sortUndefined: i } = n, a = w(e, t, i, r);
+function C(e, t, n = {}) {
+	let { desc: r = !1, sortUndefined: i } = n, a = T(e, t, i, r);
 	return a === null ? e < t ? -1 : +(e > t) : a;
 }
-function S(e, t, n = {}) {
-	let { desc: r = !1, sortUndefined: i, compare: a } = n, o = w(e, t, i, r);
+function w(e, t, n = {}) {
+	let { desc: r = !1, sortUndefined: i, compare: a } = n, o = T(e, t, i, r);
 	return o === null ? typeof a == "function" ? a(e, t) : e < t ? -1 : +(e > t) : o;
 }
-function C(e, t, n) {
-	if (typeof e != "object" || !e) return e;
-	let r = t || n;
-	return r.includes(".") ? r.split(".").reduce((e, t) => e?.[t], e) : e?.[r];
-}
-function w(e, t, n = !1, r) {
+function T(e, t, n = !1, r) {
 	let i = e ?? void 0, a = t ?? void 0;
 	if (i !== void 0 && a !== void 0) return null;
 	if (i === void 0 && a === void 0 || n === !1) return 0;
@@ -249,35 +301,35 @@ function w(e, t, n = !1, r) {
 }
 //#endregion
 //#region src/hooks/useSort.ts
-function T(t, r = []) {
+function E(t, r = []) {
 	let [a, o] = i(r);
 	return {
 		sortedItems: n(() => t.toSorted((e, t) => {
 			for (let n of a) {
-				let { type: r, field: i, id: a, desc: o = !1, invertSorting: s = !1 } = n, c = C(e, i, a), l = C(t, i, a), u;
+				let { type: r, field: i, id: a, desc: o = !1, invertSorting: s = !1 } = n, c = h(e, i, a), l = h(t, i, a), u;
 				switch (r) {
 					case "numeric":
-						u = _(c, l, n);
+						u = y(c, l, n);
 						break;
 					case "alphabetical":
-						u = v(c, l, n);
+						u = b(c, l, n);
 						break;
 					case "alphanumeric":
-						u = y(c, l, n);
+						u = x(c, l, n);
 						break;
 					case "boolean":
-						u = g(c, l, n);
+						u = v(c, l, n);
 						break;
 					case "date":
-						u = b(c, l, n);
+						u = S(c, l, n);
 						break;
 					case "basic":
-						u = x(c, l, n);
+						u = C(c, l, n);
 						break;
 					case "custom":
-						u = S(c, l, n);
+						u = w(c, l, n);
 						break;
-					default: u = x(c, l, n);
+					default: u = C(c, l, n);
 				}
 				if (u !== 0) return u * (o === s ? 1 : -1);
 			}
@@ -338,4 +390,4 @@ function T(t, r = []) {
 	};
 }
 //#endregion
-export { d as Modal, m as useFilter, u as useModal, h as usePagination, T as useSort };
+export { d as ModalLayout, f as useDebounce, p as useDebouncedValue, g as useFilter, u as useModal, _ as usePagination, E as useSort };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@himanshu-sorathiya/react-kit",
-	"version": "1.0.5",
+	"version": "1.0.7",
 	"description": "An opinionated collection of react hooks, and reusable UI components.",
 	"type": "module",
 	"module": "./dist/index.js",

package/dist/index.css

@@ -1,2 +0,0 @@
-:where(html){scrollbar-gutter:stable both}:where(body:has(dialog[open])){overflow:hidden}:where(dialog.universal-modal){box-sizing:border-box;max-width:var(--modal-max-width,500px);background:0 0;border:none;width:calc(100% - 2rem);padding:0}:where(dialog.universal-modal .modal-container){box-sizing:border-box;padding:var(--modal-padding,24px);background-color:var(--modal-bg,#fff);border-radius:var(--modal-radius,8px);box-shadow:var(--modal-shadow,0 4px 12px #00000026)}dialog.universal-modal::backdrop{background-color:var(--modal-backdrop-bg,#00000080);-webkit-backdrop-filter:blur(var(--modal-backdrop-blur,none));backdrop-filter:blur(var(--modal-backdrop-blur,none))}:where(dialog.universal-modal[open]){animation:.2s ease-out modal-fade-in}@keyframes modal-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
-/*$vite$:1*/