@himanshu-sorathiya/react-kit 1.0.10 → 1.0.12

package/dist/index.d.ts

@@ -1,12 +1,16 @@
 // Generated by dts-bundle-generator v9.5.1
 
-import { RefObject } from 'react';
+import { CSSProperties, RefObject } from 'react';
 
 export interface ModalLayoutProps {
+	modalId: string;
 	children: React.ReactNode;
-	className?: string;
+	wrapperClassName?: string;
+	wrapperStyle?: CSSProperties;
+	containerClassName?: string;
+	containerStyle?: CSSProperties;
 }
-export declare function ModalLayout({ children, className }: ModalLayoutProps): import("react").ReactPortal;
+export declare function ModalLayout({ modalId, children, wrapperClassName, wrapperStyle, containerClassName, containerStyle, }: ModalLayoutProps): import("react").ReactPortal | null;
 export interface DebounceOptions {
 	maxWait?: number;
 	leading?: boolean;
@@ -34,34 +38,74 @@ export type DateOperator = "equals" | "before" | "after" | "between";
 export type SelectOperator = "equals" | "notEquals";
 export type MultiselectOperator = "in" | "notIn" | "intersects";
 export type CustomOperator = "custom";
-export type FilterOperator = TextOperator | NumberOperator | BooleanOperator | DateOperator | SelectOperator | MultiselectOperator | CustomOperator;
-export interface FilterOptions {
+export interface FilterOptions<T = unknown> {
 	caseSensitive?: boolean;
-	compare?: (itemValue: any, filterValue: any, item: any) => boolean;
+	compare?: (itemValue: unknown, filterValue: unknown, item: T) => boolean;
 }
-export interface FilterConfig extends FilterOptions {
+export type BaseFilterConfig<T> = FilterOptions<T> & {
 	id: string;
 	field: string;
-	type: FilterType;
-	operator: FilterOperator;
-	value: any;
-}
-export type FilterState = FilterConfig[];
+	isActive?: boolean;
+};
+export type FilterConfig<T = unknown> = BaseFilterConfig<T> & ({
+	type: "text";
+	operator: TextOperator;
+	value: string;
+} | {
+	type: "number";
+	operator: "between";
+	value: {
+		min: number;
+		max: number;
+	};
+} | {
+	type: "number";
+	operator: Exclude<NumberOperator, "between">;
+	value: number;
+} | {
+	type: "boolean";
+	operator: BooleanOperator;
+	value: boolean;
+} | {
+	type: "date";
+	operator: "between";
+	value: {
+		min: string | number | Date;
+		max: string | number | Date;
+	};
+} | {
+	type: "date";
+	operator: Exclude<DateOperator, "between">;
+	value: string | number | Date;
+} | {
+	type: "select";
+	operator: SelectOperator;
+	value: string | number;
+} | {
+	type: "multiselect";
+	operator: MultiselectOperator;
+	value: (string | number)[];
+} | {
+	type: "custom";
+	operator: CustomOperator;
+	value: unknown;
+});
+export type FilterState<T> = FilterConfig<T>[];
 export interface UseFilterReturn<T> {
 	filteredItems: T[];
-	filters: FilterState;
-	addFilter: (filter: FilterConfig) => void;
+	filters: FilterState<T>;
+	upsertFilter: (filter: FilterConfig<T>) => void;
 	removeFilter: (id: string | string[]) => void;
 	clearFilters: () => void;
 	resetFilters: () => void;
-	setFilters: (filters: FilterConfig[]) => void;
-	toggleFilter: (filter: FilterConfig) => void;
-	updateFilterConfig: (id: string, partialConfig: Partial<Omit<FilterConfig, "id">>) => void;
-	getFilterValue: (id: string) => any;
-	updateFilterValue: (id: string, value: any) => void;
+	replaceFilters: (filters: FilterConfig<T>[]) => void;
+	toggleFilter: (filter: FilterConfig<T>) => void;
+	updateFilterConfig: (id: string, partialConfig: Partial<Omit<FilterConfig<T>, "id">>) => void;
+	getFilterValue: (id: string) => unknown;
+	updateFilterValue: (id: string, value: unknown) => void;
 	isFilterActive: (id: string) => boolean;
 }
-export declare function useFilter<T>(data: T[], initialFilters?: FilterState): UseFilterReturn<T>;
+export declare function useFilter<T>(data: T[], initialFilters?: FilterState<T>): UseFilterReturn<T>;
 export interface FuzzySearchOptions {
 	threshold?: number;
 	caseSensitive?: boolean;
@@ -80,38 +124,56 @@ declare const validKeyEventTypes: readonly [
 	"keypress"
 ];
 export type KeyEventType = (typeof validKeyEventTypes)[number];
-export interface KeyLifecycleOptions {
+export interface BaseKeyOptions {
 	enabled?: boolean;
 	target?: RefObject<HTMLElement | null> | Window;
-}
-export interface KeyEventModifiers {
 	preventDefault?: boolean;
 	stopPropagation?: boolean;
-	eventType?: KeyEventType;
-}
-export interface KeyChordModifiers {
+	ignoreWhenFocusedInInputs?: boolean;
 	ctrlKey?: boolean;
 	shiftKey?: boolean;
 	altKey?: boolean;
 	metaKey?: boolean;
 }
-export interface KeyFilterOptions {
-	requireReset?: boolean;
-	ignoreInputs?: boolean;
-}
-export interface KeyOptions extends KeyLifecycleOptions, KeyEventModifiers, KeyChordModifiers, KeyFilterOptions {
-}
+export type KeyOptions = BaseKeyOptions & ({
+	eventType?: "keydown" | "keypress";
+	preventRepeat?: boolean;
+} | {
+	eventType: "keyup";
+	preventRepeat?: never;
+});
 export type UseKeyReturn = void;
-export declare function useKey(key: string, func: (...args: any[]) => void, { enabled, preventDefault, stopPropagation, eventType, requireReset, ignoreInputs, ctrlKey, shiftKey, altKey, metaKey, target, }?: KeyOptions): UseKeyReturn;
-export interface UseModalReturn<TData> {
+export declare function useKey(key: string, handler: (e: KeyboardEvent) => void, { enabled, preventDefault, stopPropagation, eventType, preventRepeat, ignoreWhenFocusedInInputs, ctrlKey, shiftKey, altKey, metaKey, target, }?: KeyOptions): UseKeyReturn;
+export interface UseModalStateReturn<TData> {
+	isOpen: boolean;
 	id: string | null;
 	data: TData | undefined;
-	openModal: <T = any>(id: string, data?: T) => void;
-	closeModal: () => void;
 }
-export declare function useModal<TData = any>(): UseModalReturn<TData>;
+export interface UseModalActionsReturn {
+	openModal: <T = unknown>(id: string, data?: T) => void;
+	closeModal: () => void;
+	clearModal: () => void;
+}
+export type UseModalReturn<TData> = UseModalStateReturn<TData> & UseModalActionsReturn;
+export declare function useModalState<TData = unknown>(): UseModalStateReturn<TData>;
+export declare function useModalActions(): UseModalActionsReturn;
+export declare function useModal<TData = unknown>(): UseModalReturn<TData>;
+export interface UseOrderReturn<T> {
+	orderedItems: T[];
+	moveUp: (index: number) => void;
+	moveDown: (index: number) => void;
+	canMoveUp: (index: number) => boolean;
+	canMoveDown: (index: number) => boolean;
+	moveToTop: (index: number) => void;
+	moveToBottom: (index: number) => void;
+	move: (fromIndex: number, toIndex: number) => void;
+	swap: (indexA: number, indexB: number) => void;
+	replaceOrder: (newOrderedItems: T[]) => void;
+	resetOrder: () => void;
+}
+export declare function useOrder<T>(initialItems: T[]): UseOrderReturn<T>;
 export interface UsePaginationReturn<T> {
-	currentItems: T[];
+	pageItems: T[];
 	pageSize: number;
 	pageIndex: number;
 	totalPages: number;
@@ -119,41 +181,52 @@ export interface UsePaginationReturn<T> {
 	canNext: boolean;
 	nextPage: () => void;
 	previousPage: () => void;
-	firstPage: () => void;
-	lastPage: () => void;
-	setPageIndex: (newPageIndex: number) => void;
-	setPageSize: (newPageSize: number) => void;
+	goToFirstPage: () => void;
+	goToLastPage: () => void;
+	goToPage: (newPageIndex: number) => void;
+	changePageSize: (newPageSize: number) => void;
 	resetPageIndex: () => void;
 	resetPageSize: () => void;
+	resetPagination: () => void;
 }
 export declare function usePagination<T>(data: T[], initialPageSize: number, initialPageIndex?: number): UsePaginationReturn<T>;
 export type SortType = "numeric" | "alphabetical" | "alphanumeric" | "boolean" | "date" | "basic" | "custom";
-export interface SortOptions {
+export interface BaseSortOptions {
 	desc?: boolean;
-	caseSensitive?: boolean;
 	disableSortRemoval?: boolean;
 	invertSorting?: boolean;
-	sortUndefined?: "first" | "last" | false | -1 | 1;
-	compare?: (a: any, b: any) => number;
+	sortUndefined?: "first" | "last" | -1 | 1;
 }
-export interface SortConfig extends SortOptions {
+export interface BaseSortConfig extends BaseSortOptions {
 	id: string;
-	type: SortType;
 	field?: string;
 }
-export type SortState = Array<SortConfig>;
+export type SortConfig = BaseSortConfig & ({
+	type: "numeric" | "boolean" | "date" | "basic";
+} | {
+	type: "alphabetical" | "alphanumeric";
+	caseSensitive?: boolean;
+} | {
+	type: "custom";
+	compare: (a: unknown, b: unknown) => number;
+});
+export type SortState = SortConfig[];
+export type SortOptionsForType<T extends SortType> = Omit<Extract<SortConfig, {
+	type: T;
+}>, "id" | "type" | "field">;
 export interface UseSortReturn<T> {
 	sortedItems: T[];
 	sorts: SortState;
-	addSort: (sort: SortConfig) => void;
+	upsertSorts: (sort: SortConfig) => void;
 	removeSort: (id: string | string[]) => void;
 	clearSorts: () => void;
 	resetSorts: () => void;
-	setSorts: (sorts: SortState) => void;
-	getSortDirection: (id: string) => "asc" | "desc" | undefined;
-	toggleSort: (id: string, type: SortType, options?: SortOptions & {
+	replaceSorts: (sorts: SortState) => void;
+	toggleSort: <TType extends SortType>(id: string, type: TType, options?: SortOptionsForType<TType> & {
 		multi?: boolean;
+		field?: string;
 	}) => void;
+	getSortDirection: (id: string) => "asc" | "desc" | undefined;
 	getNextSortingOrder: (id: string) => "asc" | "desc" | "none";
 	getSortIndex: (id: string) => number | undefined;
 }

package/dist/index.js

@@ -1,38 +1,64 @@
-import { createContext as e, useCallback as t, useContext as n, useEffect as r, useMemo as i, useRef as a, useState as o } from "react";
-import { createPortal as s } from "react-dom";
-import { jsx as c } from "react/jsx-runtime";
+import { createContext as e, useCallback as t, useContext as n, useEffect as r, useLayoutEffect as i, useMemo as a, useRef as o, useState as s } from "react";
+import { createPortal as c } from "react-dom";
+import { jsx as l } from "react/jsx-runtime";
 //#region src/context/ModalContext.tsx
-var l = e(void 0);
+var u = e(null), d = e(null);
 //#endregion
 //#region src/hooks/useModal.ts
-function u() {
-	let e = n(l);
-	if (!e) throw Error("useModal must be used within a ModalProvider");
+function f() {
+	let e = n(u);
+	if (!e) throw Error("useModalState must be used within a ModalProvider");
 	return e;
 }
+function p() {
+	let e = n(d);
+	if (!e) throw Error("useModalActions must be used within a ModalProvider");
+	return e;
+}
+function m() {
+	return {
+		...f(),
+		...p()
+	};
+}
 //#endregion
 //#region src/components/Modal.tsx
-function d({ children: e, className: t }) {
-	let { id: n, closeModal: i } = u(), o = a(null);
+function h({ modalId: e, children: t, wrapperClassName: n = "", wrapperStyle: i, containerClassName: a = "", containerStyle: u }) {
+	let { isOpen: d, id: m } = f(), { closeModal: h, clearModal: g } = p(), [_, v] = s(!1), y = o(null), b = m === e, x = d && b;
 	return r(() => {
-		let e = o.current;
-		e && (n && !e.open ? e.showModal() : !n && e.open && e.close());
-	}, [n]), s(/* @__PURE__ */ c("dialog", {
-		ref: o,
+		let e = y.current;
+		e && (x && !e.open ? (v(!1), e.showModal()) : !x && e.open && v(!0));
+	}, [x]), typeof document > "u" || !b && !_ ? null : c(/* @__PURE__ */ l("dialog", {
+		ref: y,
 		onCancel: (e) => {
-			e.preventDefault(), i();
+			e.preventDefault(), h();
+		},
+		onClose: h,
+		onClick: (e) => {
+			let t = y.current;
+			if (!t) return;
+			let n = t.getBoundingClientRect();
+			(e.clientX < n.x || e.clientX > n.x + n.width || e.clientY < n.y || e.clientY > n.y + n.height) && h();
+		},
+		onAnimationEnd: () => {
+			if (_) {
+				let e = y.current;
+				e && e.close(), v(!1), b && g();
+			}
 		},
-		className: `universal-modal ${t}`,
-		children: /* @__PURE__ */ c("div", {
-			className: "modal-container",
-			children: e
+		className: `universal-modal ${n}`.trim(),
+		style: i,
+		children: /* @__PURE__ */ l("div", {
+			className: `modal-container ${a}`.trim(),
+			style: u,
+			children: t
 		})
 	}), document.body);
 }
 //#endregion
 //#region src/hooks/useDebounce.ts
-function f(e, n, i = {}) {
-	let [s, c] = o(!1), l = i.maxWait, u = !!i.leading, d = !u && i.trailing === !1 ? !0 : i.trailing ?? !u, f = a(e), p = a(null), m = a(-1), h = a(-1), g = a(null);
+function g(e, n, i = {}) {
+	let [a, c] = s(!1), l = i.maxWait, u = !!i.leading, d = !u && i.trailing === !1 ? !0 : i.trailing ?? !u, f = o(e), p = o(null), m = o(-1), h = o(-1), g = o(null);
 	r(() => {
 		f.current = e;
 	}, [e]);
@@ -56,28 +82,28 @@ function f(e, n, i = {}) {
 		]),
 		cancel: _,
 		flush: v,
-		isPending: s
+		isPending: a
 	};
 }
 //#endregion
 //#region src/hooks/useDebouncedValue.ts
-function p(e, t, n = {}) {
-	let [i, a] = o(e), { debouncedFunc: s } = f((e) => {
+function _(e, t, n = {}) {
+	let [i, a] = s(e), { debouncedFunc: o } = g((e) => {
 		a(e);
 	}, t, n);
 	return r(() => {
-		s(e);
-	}, [e, s]), i;
+		o(e);
+	}, [e, o]), i;
 }
 //#endregion
 //#region src/utils/filterUtils.ts
-var m = {
+var v = {
 	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(),
-		startsWith: (e, t, n) => n?.caseSensitive ? String(e).startsWith(String(t)) : String(e).toLowerCase().startsWith(String(t).toLowerCase()),
-		endsWith: (e, t, n) => n?.caseSensitive ? String(e).endsWith(String(t)) : String(e).toLowerCase().endsWith(String(t).toLowerCase()),
-		notContains: (e, t, n) => n?.caseSensitive ? !String(e).includes(String(t)) : !String(e).toLowerCase().includes(String(t).toLowerCase())
+		contains: (e, t, n) => e == null ? !1 : n?.caseSensitive ? String(e).includes(String(t)) : String(e).toLowerCase().includes(String(t).toLowerCase()),
+		equals: (e, t, n) => e == null ? !1 : n?.caseSensitive ? String(e) === String(t) : String(e).toLowerCase() === String(t).toLowerCase(),
+		startsWith: (e, t, n) => e == null ? !1 : n?.caseSensitive ? String(e).startsWith(String(t)) : String(e).toLowerCase().startsWith(String(t).toLowerCase()),
+		endsWith: (e, t, n) => e == null ? !1 : n?.caseSensitive ? String(e).endsWith(String(t)) : String(e).toLowerCase().endsWith(String(t).toLowerCase()),
+		notContains: (e, t, n) => e == null ? !0 : n?.caseSensitive ? !String(e).includes(String(t)) : !String(e).toLowerCase().includes(String(t).toLowerCase())
 	},
 	number: {
 		equals: (e, t) => Number(e) === Number(t),
@@ -85,29 +111,35 @@ var m = {
 		lessThan: (e, t) => Number(e) < Number(t),
 		greaterThanOrEqual: (e, t) => Number(e) >= Number(t),
 		lessThanOrEqual: (e, t) => Number(e) <= Number(t),
-		between: (e, t) => Number(e) >= Number(t.min) && Number(e) <= Number(t.max)
+		between: (e, t) => {
+			if (typeof t != "object" || !t) return !1;
+			let { min: n, max: r } = t;
+			return n == null || r == null ? !1 : Number(e) >= Number(n) && Number(e) <= Number(r);
+		}
 	},
 	boolean: { equals: (e, t) => !!e == !!t },
 	date: {
 		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;
+			let n = new Date(e), r = new Date(t);
+			return Number.isNaN(n.getTime()) || Number.isNaN(r.getTime()) ? !1 : n.getFullYear() === r.getFullYear() && n.getMonth() === r.getMonth() && n.getDate() === r.getDate();
 		},
 		before: (e, t) => {
 			if (!e || !t) return !1;
-			let n = new Date(e).getTime(), r = new Date(t).getTime();
+			let n = new Date(e).setHours(0, 0, 0, 0), r = new Date(t).setHours(0, 0, 0, 0);
 			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();
+			let n = new Date(e).setHours(0, 0, 0, 0), r = new Date(t).setHours(0, 0, 0, 0);
 			return Number.isNaN(n) || Number.isNaN(r) ? !1 : n > r;
 		},
 		between: (e, t) => {
-			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;
+			if (!e || typeof t != "object" || !t) return !1;
+			let { min: n, max: r } = t;
+			if (n == null || r == null) return !1;
+			let i = new Date(e).setHours(0, 0, 0, 0), a = new Date(n).setHours(0, 0, 0, 0), o = new Date(r).setHours(0, 0, 0, 0);
+			return Number.isNaN(i) || Number.isNaN(a) || Number.isNaN(o) ? !1 : i >= a && i <= o;
 		}
 	},
 	select: {
@@ -122,62 +154,77 @@ var m = {
 };
 //#endregion
 //#region src/utils/utils.ts
-function h(e, t, n) {
+function y(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];
+	let r = t ?? n ?? "";
+	return Array.isArray(r) ? r.reduce((e, t) => e?.[t], e) : r.includes(".") ? r.split(".").reduce((e, t) => e?.[t], e) : e?.[r];
 }
 //#endregion
 //#region src/hooks/useFilter.ts
-function g(e, n = []) {
-	let [r, a] = o(n), s = i(() => e.filter((e) => r.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;
-	})), [e, r]), c = t((e) => {
-		a((t) => t.some((t) => t.id === e.id) ? t.map((t) => t.id === e.id ? e : t) : [...t, e]);
+function b(e, n = []) {
+	let [r, i] = s(n), o = a(() => {
+		let t = r.filter((e) => e.isActive !== !1).map((e) => ({
+			...e,
+			pathArray: (e.field || e.id).split(".")
+		}));
+		return e.filter((e) => t.every((t) => {
+			let { id: n, type: r, operator: i, value: a, compare: o, pathArray: s } = t, c = y(e, s, n);
+			if (r === "custom") return o ? o(c, a, e) : !0;
+			let l = v[r];
+			if (!l) return !0;
+			let u = l[i];
+			return u ? u(c, a, t) : !0;
+		}));
+	}, [e, r]), c = t((e) => {
+		i((t) => t.some((t) => t.id === e.id) ? t.map((t) => t.id === e.id ? e : t) : [...t, e]);
 	}, []), l = t((e) => {
-		a((t) => Array.isArray(e) ? t.filter((t) => !e.includes(t.id)) : t.filter((t) => t.id !== e));
+		i((t) => Array.isArray(e) ? t.filter((t) => !e.includes(t.id)) : t.filter((t) => t.id !== e));
 	}, []), u = t(() => {
-		a([]);
+		i([]);
 	}, []), d = t(() => {
-		a(n);
+		i(n);
 	}, [n]), f = t((e) => {
-		a(e);
-	}, []), p = t((e) => r.find((t) => t.id === e)?.value, [r]), g = t((e, t) => {
-		a((n) => n.map((n) => n.id === e ? {
-			...n,
-			value: t
-		} : n));
-	}, []), _ = t((e) => r.some((t) => t.id === e), [r]);
+		i(e);
+	}, []);
 	return {
-		filteredItems: s,
+		filteredItems: o,
 		filters: r,
-		addFilter: c,
+		upsertFilter: c,
 		removeFilter: l,
 		clearFilters: u,
 		resetFilters: d,
 		toggleFilter: t((e) => {
-			a((t) => t.some((t) => t.id === e.id) ? t.filter((t) => t.id !== e.id) : [...t, e]);
+			i((t) => t.some((t) => t.id === e.id) ? t.map((t) => t.id === e.id ? {
+				...t,
+				isActive: t.isActive === !1
+			} : t) : [...t, {
+				...e,
+				isActive: !0
+			}]);
 		}, []),
 		updateFilterConfig: t((e, t) => {
-			a((n) => n.map((n) => n.id === e ? {
+			i((n) => n.map((n) => n.id === e ? {
 				...n,
 				...t
 			} : n));
 		}, []),
-		setFilters: f,
-		getFilterValue: p,
-		updateFilterValue: g,
-		isFilterActive: _
+		replaceFilters: f,
+		getFilterValue: t((e) => r.find((t) => t.id === e)?.value, [r]),
+		updateFilterValue: t((e, t) => {
+			i((n) => n.map((n) => n.id === e ? {
+				...n,
+				value: t
+			} : n));
+		}, []),
+		isFilterActive: t((e) => {
+			let t = r.find((t) => t.id === e);
+			return t ? t.isActive !== !1 : !1;
+		}, [r])
 	};
 }
 //#endregion
 //#region src/utils/fuzzySearchUtils.ts
-function _(e, t, n = !1) {
+function x(e, t, n = !1) {
 	let r = e.trim(), i = t.trim(), a = r.length > 1 && r === r.toUpperCase() && /^[A-Z]+$/.test(r);
 	if (n || (r = r.toLowerCase(), i = i.toLowerCase()), r === i) return 1;
 	if (r === "" || i === "") return 0;
@@ -226,11 +273,11 @@ function _(e, t, n = !1) {
 }
 //#endregion
 //#region src/hooks/useFuzzySearch.ts
-function v(e, t, n, r = {}) {
-	let a = r.threshold ?? .01, o = r.caseSensitive ?? !1, s = r.matchStrategy ?? "any", c = r.exactPhraseBonus ?? !0, l = i(() => n.length === 0 || e.length === 0 ? [] : e.map((e, t) => {
+function S(e, t, n, r = {}) {
+	let i = r.threshold ?? .01, o = r.caseSensitive ?? !1, s = r.matchStrategy ?? "any", c = r.exactPhraseBonus ?? !0, l = a(() => n.length === 0 || e.length === 0 ? [] : e.map((e, t) => {
 		let r = [], i = [];
 		for (let [t, a] of n) {
-			let n = h(e, t);
+			let n = y(e, t);
 			if (Array.isArray(n)) {
 				for (let e of n) if (e != null && e !== "" && typeof e != "object") {
 					let t = String(e);
@@ -258,12 +305,12 @@ function v(e, t, n, r = {}) {
 			combinedFlatText: i.join(" ")
 		};
 	}), [e, n]);
-	return i(() => {
+	return a(() => {
 		let n = t.trim();
 		if (!n || l.length === 0) return e;
 		let r = n.split(/\s+/).filter((e) => e.length > 0);
 		if (r.length === 0) return e;
-		let i = [], u = .3;
+		let a = [], u = .3;
 		for (let e of l) {
 			let t = 0, n = 0, l = !1;
 			for (let i of r) {
@@ -276,7 +323,7 @@ function v(e, t, n, r = {}) {
 							let e = Math.abs(i.length - n.length), t = Math.max(i.length, n.length);
 							if (t > 0 && (t - e) / t < u) continue;
 						}
-						let e = _(i, n, o) * t.weight;
+						let e = x(i, n, o) * t.weight;
 						e > r && (r = e);
 					}
 				}
@@ -288,19 +335,19 @@ function v(e, t, n, r = {}) {
 					let t = r.map((e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("\\s+");
 					new RegExp(t, o ? "g" : "gi").test(e.combinedFlatText) && (n += .15);
 				}
-				n >= a && i.push({
+				n >= i && a.push({
 					item: e.item,
 					score: n,
 					index: e.index
 				});
 			}
 		}
-		return i.toSorted((e, t) => t.score === e.score ? e.index - t.index : t.score - e.score).map((e) => e.item);
+		return a.toSorted((e, t) => t.score === e.score ? e.index - t.index : t.score - e.score).map((e) => e.item);
 	}, [
 		l,
 		e,
 		t,
-		a,
+		i,
 		o,
 		s,
 		c
@@ -308,42 +355,45 @@ function v(e, t, n, r = {}) {
 }
 //#endregion
 //#region src/constants/keyConstants.ts
-var y = [
+var C = [
 	"keydown",
 	"keyup",
 	"keypress"
 ];
 //#endregion
 //#region src/hooks/useKey.ts
-function b(e, t, { enabled: n = !0, preventDefault: i = !0, stopPropagation: o = !0, eventType: s = "keydown", requireReset: c = !1, ignoreInputs: l = !0, ctrlKey: u = !1, shiftKey: d = !1, altKey: f = !1, metaKey: p = !1, target: m = window } = {}) {
-	let h = a(t), g = a(n), _ = a(!1), v = m && "current" in m && m.current || window;
-	r(() => {
-		h.current = t;
+function w(e, t, { enabled: n = !0, preventDefault: a = !0, stopPropagation: s = !0, eventType: c = "keydown", preventRepeat: l = !1, ignoreWhenFocusedInInputs: u = !0, ctrlKey: d = !1, shiftKey: f = !1, altKey: p = !1, metaKey: m = !1, target: h = window } = {}) {
+	let g = o(t), _ = o(n), v = o(!1);
+	i(() => {
+		g.current = t;
 	}, [t]), r(() => {
-		g.current = n;
+		_.current = n;
 	}, [n]), r(() => {
-		if (!v) return;
-		let t = y.includes(s) ? s : "keydown";
-		function n(t) {
-			if (!(t instanceof KeyboardEvent)) return;
-			let n = t.key.toLowerCase();
-			(n === e.toLowerCase() || u && n === "control" || d && n === "shift" || f && n === "alt" || p && n === "meta") && (_.current = !1);
+		let t = h && "current" in h ? h.current : h;
+		if (!t) return;
+		let n = e.toLowerCase(), r = C.includes(c) ? c : "keydown", i = l && r !== "keyup";
+		function o() {
+			v.current = !1;
+		}
+		function y(e) {
+			if (!(e instanceof KeyboardEvent)) return;
+			let t = e.key.toLowerCase();
+			(t === n || d && t === "control" || f && t === "shift" || p && t === "alt" || m && t === "meta") && (v.current = !1);
 		}
-		function r(t) {
-			if (!(t instanceof KeyboardEvent) || !g.current) return;
-			let n = t.target;
-			if (!(l && n instanceof HTMLElement && (n instanceof HTMLInputElement || n instanceof HTMLTextAreaElement || n instanceof HTMLSelectElement || n.isContentEditable)) && t.ctrlKey === u && t.shiftKey === d && t.altKey === f && t.metaKey === p && e.toLowerCase() === t.key.toLowerCase()) {
-				if (c && _.current) return;
-				_.current = !0, h.current(t), i && t.preventDefault(), o && t.stopPropagation();
+		function b(e) {
+			if (!(e instanceof KeyboardEvent) || !_.current) return;
+			let t = e.target;
+			if (!(u && t instanceof HTMLElement && (t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement || t instanceof HTMLSelectElement || t.isContentEditable)) && e.ctrlKey === d && e.shiftKey === f && e.altKey === p && e.metaKey === m && n === e.key.toLowerCase()) {
+				if (i && v.current) return;
+				v.current = !0, g.current(e), a && e.preventDefault(), s && e.stopPropagation();
 			}
 		}
-		return v.addEventListener(t, r), v.addEventListener("keyup", n), () => {
-			v.removeEventListener(t, r), v.removeEventListener("keyup", n);
+		return t.addEventListener(r, b), i && (t.addEventListener("keyup", y), window.addEventListener("blur", o)), () => {
+			t.removeEventListener(r, b), i && (t.removeEventListener("keyup", y), window.removeEventListener("blur", o));
 		};
 	}, [
 		e,
-		i,
-		o,
+		a,
 		s,
 		c,
 		l,
@@ -351,20 +401,79 @@ function b(e, t, { enabled: n = !0, preventDefault: i = !0, stopPropagation: o =
 		d,
 		f,
 		p,
-		v
+		m,
+		h
 	]);
 }
 //#endregion
+//#region src/hooks/useOrder.ts
+function T(e) {
+	let n = o(e), [r, i] = s(e);
+	return {
+		orderedItems: r,
+		moveUp: t((e) => {
+			typeof e == "number" && i((t) => {
+				if (e <= 0 || e >= t.length) return t;
+				let n = [...t];
+				return [n[e], n[e - 1]] = [n[e - 1], n[e]], n;
+			});
+		}, []),
+		moveDown: t((e) => {
+			typeof e == "number" && i((t) => {
+				if (e < 0 || e >= t.length - 1) return t;
+				let n = [...t];
+				return [n[e], n[e + 1]] = [n[e + 1], n[e]], n;
+			});
+		}, []),
+		canMoveUp: t((e) => e > 0, []),
+		canMoveDown: t((e) => e < r.length - 1, [r.length]),
+		moveToTop: t((e) => {
+			typeof e == "number" && i((t) => {
+				if (e <= 0 || e >= t.length) return t;
+				let n = [...t], [r] = n.splice(e, 1);
+				return n.unshift(r), n;
+			});
+		}, []),
+		moveToBottom: t((e) => {
+			typeof e == "number" && i((t) => {
+				if (e < 0 || e >= t.length - 1) return t;
+				let n = [...t], [r] = n.splice(e, 1);
+				return n.push(r), n;
+			});
+		}, []),
+		move: t((e, t) => {
+			typeof e != "number" || typeof t != "number" || e === t || i((n) => {
+				if (e < 0 || e >= n.length || t < 0 || t >= n.length) return n;
+				let r = [...n], [i] = r.splice(e, 1);
+				return r.splice(t, 0, i), r;
+			});
+		}, []),
+		swap: t((e, t) => {
+			typeof e != "number" || typeof t != "number" || e === t || i((n) => {
+				if (e < 0 || e >= n.length || t < 0 || t >= n.length) return n;
+				let r = [...n];
+				return [r[e], r[t]] = [r[t], r[e]], r;
+			});
+		}, []),
+		replaceOrder: t((e) => {
+			i(e);
+		}, []),
+		resetOrder: t(() => {
+			i(n.current);
+		}, [])
+	};
+}
+//#endregion
 //#region src/hooks/usePagination.ts
-function x(e, n, r = 0) {
-	let [a, s] = o(n), [c, l] = o(r), u = Math.max(1, Math.ceil(e.length / Math.max(1, a))), d = Math.min(Math.max(0, c), u - 1);
+function E(e, n, r = 0) {
+	let [i, o] = s(n), [c, l] = s(r), u = Math.max(1, Math.ceil(e.length / Math.max(1, i))), d = Math.min(Math.max(0, c), u - 1);
 	return c !== d && l(d), {
-		currentItems: i(() => typeof a != "number" || a < 1 ? [] : e.slice(c * a, (c + 1) * a), [
+		pageItems: a(() => typeof i != "number" || i < 1 ? [] : e.slice(c * i, (c + 1) * i), [
 			c,
-			a,
+			i,
 			e
 		]),
-		pageSize: a,
+		pageSize: i,
 		pageIndex: c,
 		totalPages: u,
 		canPrevious: c > 0,
@@ -375,18 +484,18 @@ function x(e, n, r = 0) {
 		previousPage: t(() => {
 			l((e) => e > 0 ? e - 1 : e);
 		}, []),
-		firstPage: t(() => {
+		goToFirstPage: t(() => {
 			l(0);
 		}, []),
-		lastPage: t(() => {
+		goToLastPage: t(() => {
 			l(u - 1);
 		}, [u]),
-		setPageIndex: t((e) => {
+		goToPage: t((e) => {
 			typeof e == "number" && e >= 0 && e <= u - 1 && l(e);
 		}, [u]),
-		setPageSize: t((t) => {
+		changePageSize: t((t) => {
 			if (typeof t == "number" && t > 0) {
-				s(t);
+				o(t);
 				let n = Math.max(1, Math.ceil(e.length / Math.max(1, t)));
 				l((e) => Math.min(Math.max(0, e), n - 1));
 			}
@@ -395,34 +504,43 @@ function x(e, n, r = 0) {
 			l(Math.min(Math.max(0, r), u - 1));
 		}, [r, u]),
 		resetPageSize: t(() => {
-			s(Math.max(1, n));
+			o(Math.max(1, n));
 			let t = Math.max(1, Math.ceil(e.length / Math.max(1, n)));
 			l((e) => Math.min(Math.max(0, e), t - 1));
-		}, [n, e.length])
+		}, [n, e.length]),
+		resetPagination: t(() => {
+			o(Math.max(1, n));
+			let t = Math.max(1, Math.ceil(e.length / Math.max(1, n)));
+			l(Math.min(Math.max(0, r), t - 1));
+		}, [
+			n,
+			r,
+			e.length
+		])
 	};
 }
 //#endregion
 //#region src/utils/sortUtils.ts
-function S(e, t, n = {}) {
-	let { sortUndefined: r, desc: i = !1 } = n, a = k(e, t, r, i);
+function D(e, t, n = {}) {
+	let { sortUndefined: r, desc: i = !1 } = n, a = P(e, t, r, i);
 	if (a !== null) return a;
 	let o = !!e;
 	return o === !!t ? 0 : o ? 1 : -1;
 }
-function C(e, t, n = {}) {
-	let { sortUndefined: r, desc: i = !1 } = n, a = k(e, t, r, i);
+function O(e, t, n = {}) {
+	let { sortUndefined: r, desc: i = !1 } = n, a = P(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 ? k(c ? void 0 : o, l ? void 0 : s, r, i) ?? 0 : o - s;
+	let o = Number(e), s = Number(t), c = Number.isNaN(o), l = Number.isNaN(s);
+	return c || l ? P(c ? void 0 : o, l ? void 0 : s, r, i) ?? 0 : o - s;
 }
-function w(e, t, n = {}) {
-	let { desc: r = !1, sortUndefined: i, caseSensitive: a = !1 } = n, o = k(e, t, i, r);
+function k(e, t, n = {}) {
+	let { desc: r = !1, sortUndefined: i, caseSensitive: a = !1 } = n, o = P(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 T(e, t, n = {}) {
-	let { desc: r = !1, sortUndefined: i, caseSensitive: a = !1 } = n, o = k(e, t, i, r);
+function A(e, t, n = {}) {
+	let { desc: r = !1, sortUndefined: i, caseSensitive: a = !1 } = n, o = P(e, t, i, r);
 	if (o !== null) return o;
 	let s = String(e), c = String(t);
 	return s.localeCompare(c, void 0, {
@@ -430,116 +548,122 @@ function T(e, t, n = {}) {
 		sensitivity: a ? "variant" : "base"
 	});
 }
-function E(e, t, n = {}) {
-	let { desc: r = !1, sortUndefined: i } = n, a = k(e, t, i, r);
+function j(e, t, n = {}) {
+	let { desc: r = !1, sortUndefined: i } = n, a = P(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);
+	let o = new Date(e).getTime(), s = new Date(t).getTime(), c = Number.isNaN(o), l = Number.isNaN(s);
+	return (c || l) && (a = P(c ? void 0 : o, l ? void 0 : s, i, r), a !== null) ? a : o - s;
 }
-function D(e, t, n = {}) {
-	let { desc: r = !1, sortUndefined: i } = n, a = k(e, t, i, r);
+function M(e, t, n = {}) {
+	let { desc: r = !1, sortUndefined: i } = n, a = P(e, t, i, r);
 	return a === null ? e < t ? -1 : +(e > t) : a;
 }
-function O(e, t, n = {}) {
-	let { desc: r = !1, sortUndefined: i, compare: a } = n, o = k(e, t, i, r);
+function N(e, t, n = {}) {
+	let { desc: r = !1, sortUndefined: i, compare: a } = n, o = P(e, t, i, r);
 	return o === null ? typeof a == "function" ? a(e, t) : e < t ? -1 : +(e > t) : o;
 }
-function k(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;
-	if (n === "first") return i === void 0 ? -1 : 1;
-	if (n === "last") return i === void 0 ? 1 : -1;
+function P(e, t, n = "last", r) {
+	let i = e == null || e === "", a = t == null || t === "";
+	if (i && a) return 0;
+	if (!i && !a) return null;
+	if (n === "first") return i ? -1 : 1;
+	if (n === "last") return i ? 1 : -1;
 	if (n === -1) {
 		let e = r ? 1 : -1;
-		return i === void 0 ? e : -e;
+		return i ? e : -e;
 	}
 	if (n === 1) {
 		let e = r ? 1 : -1;
-		return i === void 0 ? -e : e;
+		return i ? -e : e;
 	}
 	return null;
 }
 //#endregion
 //#region src/hooks/useSort.ts
-function A(e, n = []) {
-	let [r, a] = o(n);
-	return {
-		sortedItems: i(() => e.toSorted((e, t) => {
-			for (let n of r) {
-				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) {
+function F(e, n = []) {
+	let [r, i] = s(n), o = a(() => {
+		let t = r.map((e) => ({
+			...e,
+			pathArray: (e.field || e.id).split(".")
+		}));
+		return [...e].sort((e, n) => {
+			for (let r of t) {
+				let { type: t, id: i, desc: a = !1, invertSorting: o = !1, pathArray: s } = r, c = y(e, s, i), l = y(n, s, i), u;
+				switch (t) {
 					case "numeric":
-						u = C(c, l, n);
+						u = O(c, l, r);
 						break;
 					case "alphabetical":
-						u = w(c, l, n);
+						u = k(c, l, r);
 						break;
 					case "alphanumeric":
-						u = T(c, l, n);
+						u = A(c, l, r);
 						break;
 					case "boolean":
-						u = S(c, l, n);
+						u = D(c, l, r);
 						break;
 					case "date":
-						u = E(c, l, n);
+						u = j(c, l, r);
 						break;
 					case "basic":
-						u = D(c, l, n);
+						u = M(c, l, r);
 						break;
 					case "custom":
-						u = O(c, l, n);
+						u = N(c, l, r);
 						break;
-					default: u = D(c, l, n);
+					default: u = M(c, l, r);
 				}
-				if (u !== 0) return u * (o === s ? 1 : -1);
+				if (u !== 0) return u * (a === o ? 1 : -1);
 			}
 			return 0;
-		}), [r, e]),
+		});
+	}, [r, e]), c = t((e) => i((t) => t.some((t) => t.id === e.id) ? t.map((t) => t.id === e.id ? e : t) : [...t, e]), []), l = t((e) => {
+		i((t) => Array.isArray(e) ? t.filter((t) => !e.includes(t.id)) : t.filter((t) => t.id !== e));
+	}, []), u = t(() => i([]), []), d = t(() => i(n), [n]), f = t((e) => i(e), []), p = t((e, t, n) => {
+		let { multi: r = !1, ...a } = n || {};
+		i((n) => {
+			let i = n.find((t) => t.id === e);
+			if (!i) {
+				let i = {
+					id: e,
+					type: t,
+					...a,
+					desc: !1
+				};
+				return r ? [...n, i] : [i];
+			}
+			if (!i.desc) {
+				let t = {
+					...i,
+					...a,
+					desc: !0
+				};
+				return r ? n.map((n) => n.id === e ? t : n) : [t];
+			}
+			if (i.disableSortRemoval || a.disableSortRemoval) {
+				let t = {
+					...i,
+					...a,
+					desc: !1
+				};
+				return r ? n.map((n) => n.id === e ? t : n) : [t];
+			}
+			return r ? n.filter((t) => t.id !== e) : [];
+		});
+	}, []);
+	return {
+		sortedItems: o,
 		sorts: r,
-		addSort: t((e) => a((t) => t.some((t) => t.id === e.id) ? t.map((t) => t.id === e.id ? e : t) : [...t, e]), []),
-		removeSort: t((e) => {
-			a((t) => Array.isArray(e) ? t.filter((t) => !e.includes(t.id)) : t.filter((t) => t.id !== e));
-		}, []),
-		clearSorts: t(() => a([]), []),
-		resetSorts: t(() => a(n), [n]),
-		setSorts: t((e) => a(e), []),
+		upsertSorts: c,
+		removeSort: l,
+		clearSorts: u,
+		resetSorts: d,
+		replaceSorts: f,
 		getSortDirection: t((e) => {
 			let t = r.find((t) => t.id === e);
 			return t ? t.desc ? "desc" : "asc" : void 0;
 		}, [r]),
-		toggleSort: t((e, t, n) => {
-			let { multi: r = !1, ...i } = n || {};
-			a((n) => {
-				let a = n.find((t) => t.id === e);
-				if (!a) {
-					let a = {
-						id: e,
-						type: t,
-						...i,
-						desc: !1
-					};
-					return r ? [...n, a] : [a];
-				}
-				if (!a.desc) {
-					let t = {
-						...a,
-						...i,
-						desc: !0
-					};
-					return r ? n.map((n) => n.id === e ? t : n) : [t];
-				}
-				if (a.disableSortRemoval || i.disableSortRemoval) {
-					let t = {
-						...a,
-						...i,
-						desc: !1
-					};
-					return r ? n.map((n) => n.id === e ? t : n) : [t];
-				}
-				return r ? n.filter((t) => t.id !== e) : [];
-			});
-		}, []),
+		toggleSort: p,
 		getNextSortingOrder: t((e) => {
 			let t = r.find((t) => t.id === e);
 			return t ? t.desc ? t.disableSortRemoval ? "asc" : "none" : "desc" : "asc";
@@ -552,8 +676,8 @@ function A(e, n = []) {
 }
 //#endregion
 //#region src/hooks/useThrottle.ts
-function j(e, n, i = {}) {
-	let [s, c] = o(!1), l = i.leading ?? !0, u = i.trailing ?? !0, d = a(e), f = a(null), p = a(-1), m = a(null);
+function I(e, n, i = {}) {
+	let [a, c] = s(!1), l = i.leading ?? !0, u = i.trailing ?? !0, d = o(e), f = o(null), p = o(-1), m = o(null);
 	r(() => {
 		d.current = e;
 	}, [e]);
@@ -582,8 +706,8 @@ function j(e, n, i = {}) {
 		]),
 		cancel: h,
 		flush: g,
-		isPending: s
+		isPending: a
 	};
 }
 //#endregion
-export { d as ModalLayout, f as useDebounce, p as useDebouncedValue, g as useFilter, v as useFuzzySearch, b as useKey, u as useModal, x as usePagination, A as useSort, j as useThrottle };
+export { h as ModalLayout, g as useDebounce, _ as useDebouncedValue, b as useFilter, S as useFuzzySearch, w as useKey, m as useModal, p as useModalActions, f as useModalState, T as useOrder, E as usePagination, F as useSort, I as useThrottle };

package/package.json

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