@povio/ui 2.1.14 → 2.1.15

package/dist/uiStyle.context.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, use } from "react";
+let UIStyle;
+(function(_UIStyle) {
+	const Context = createContext(null);
+	_UIStyle.Provider = ({ children, config }) => {
+		return /* @__PURE__ */ jsx(Context.Provider, {
+			value: config,
+			children
+		});
+	};
+	_UIStyle.useConfig = () => {
+		return use(Context);
+	};
+})(UIStyle || (UIStyle = {}));
+export { UIStyle };

package/dist/useAutosave.js

@@ -0,0 +1,62 @@
+import { ObjectUtils } from "./object.utils.js";
+import { isEqual } from "./isEqual.js";
+import { useEffect, useRef } from "react";
+import { useFormState, useWatch } from "react-hook-form";
+function isNilOrEqual(left, right) {
+	if (ObjectUtils.isNil(left) && ObjectUtils.isNil(right)) return true;
+	return isEqual(left, right);
+}
+function diffLeftOnly(left, right, shallowKeys) {
+	if (!ObjectUtils.isObject(left) || ObjectUtils.isDate(left) || ObjectUtils.isRegExp(left)) return !isNilOrEqual(left, right) ? left : void 0;
+	if (Array.isArray(left)) return !isNilOrEqual(left, right) ? left : void 0;
+	const result = Object.entries(left).reduce((acc, [key, value]) => {
+		const shallowSubtree = shallowKeys?.[key];
+		if (shallowSubtree === true) {
+			if (!isNilOrEqual(value, right?.[key])) acc[key] = value;
+			return acc;
+		}
+		const diff = diffLeftOnly(value, right?.[key], shallowSubtree);
+		if (diff !== void 0 && (!ObjectUtils.isObject(diff) || !ObjectUtils.isEmpty(diff))) acc[key] = diff;
+		return acc;
+	}, {});
+	return ObjectUtils.isEmpty(result) ? void 0 : result;
+}
+function useAutosave({ form, delay = 500, enabled = true, onSave, onSaveSuccess }) {
+	const timeoutRef = useRef(void 0);
+	const { control, reset, handleSubmit } = form;
+	const { dirtyFields, defaultValues } = useFormState({ control });
+	useEffect(() => {
+		if (!enabled || Object.keys(dirtyFields).length === 0) return;
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		timeoutRef.current = setTimeout(() => {
+			handleSubmit(async (data) => {
+				const changedData = diffLeftOnly(Object.entries(dirtyFields).filter(([, value]) => value).reduce((acc, [key]) => {
+					acc[key] = data[key];
+					return acc;
+				}, {}), defaultValues, dirtyFields) ?? {};
+				if (Object.keys(changedData).length === 0) return;
+				try {
+					reset(void 0, { keepValues: true });
+					await onSave(changedData);
+					onSaveSuccess?.();
+				} catch {
+					reset(defaultValues);
+					return;
+				}
+			})();
+		}, delay);
+		return () => {
+			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		};
+	}, [
+		defaultValues,
+		dirtyFields,
+		useWatch({ control }),
+		delay,
+		onSave,
+		handleSubmit,
+		enabled,
+		reset
+	]);
+}
+export { useAutosave };

package/dist/useBreakpoint.js

@@ -0,0 +1,28 @@
+import { useMemo } from "react";
+import { useMediaQuery } from "react-responsive";
+var breakpoints = null;
+function getBreakpoints() {
+	if (breakpoints) return breakpoints;
+	if (typeof window === "undefined") return {
+		sm: "23.75rem",
+		md: "37.5rem",
+		lg: "80rem",
+		xl: "105rem"
+	};
+	const cs = getComputedStyle(document.documentElement);
+	const entries = [
+		"sm",
+		"md",
+		"lg",
+		"xl",
+		"2xl"
+	].map((k) => [k, cs.getPropertyValue(`--breakpoint-${k}`).trim()]).filter(([, v]) => !!v);
+	breakpoints = Object.fromEntries(entries);
+	return breakpoints;
+}
+function useBreakpoint(breakpointKey) {
+	const breakpoints$1 = useMemo(() => getBreakpoints(), []);
+	if (!breakpoints$1) throw new Error("Tailwind config is missing theme.screens");
+	return useMediaQuery({ query: `(min-width: ${breakpoints$1[breakpointKey]})` });
+}
+export { useBreakpoint };

package/dist/useDebounceCallback.js

@@ -0,0 +1,23 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+function useDebounceCallback(callback, { delay = 500 } = {}) {
+	const timeoutRef = useRef(null);
+	const [isDebouncing, setIsDebouncing] = useState(false);
+	const debouncedCallback = useCallback((...args) => {
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		setIsDebouncing(true);
+		timeoutRef.current = setTimeout(() => {
+			setIsDebouncing(false);
+			callback?.(...args);
+		}, delay);
+	}, [callback, delay]);
+	useEffect(() => {
+		return () => {
+			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		};
+	}, []);
+	return {
+		callback: debouncedCallback,
+		isDebouncing
+	};
+}
+export { useDebounceCallback };

package/dist/useDeepCompare.js

@@ -0,0 +1,21 @@
+import { isEqual } from "./isEqual.js";
+import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
+const useDeepCompareEffect = (callback, dependencies) => {
+	return useEffect(callback, useDeepCompareDeps(dependencies));
+};
+const useDeepCompareLayoutEffect = (callback, dependencies) => {
+	return useLayoutEffect(callback, useDeepCompareDeps(dependencies));
+};
+const useDeepCompareMemo = (factory, dependencies) => {
+	return useMemo(factory, useDeepCompareDeps(dependencies));
+};
+var useDeepCompareDeps = (value) => {
+	const ref = useRef(void 0);
+	const signalRef = useRef(0);
+	if (!isEqual(value, ref.current)) {
+		ref.current = value;
+		signalRef.current += 1;
+	}
+	return [signalRef.current];
+};
+export { useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo };

package/dist/useFilters.js

@@ -0,0 +1,121 @@
+import { UIRouter } from "./router.context.js";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { z } from "zod";
+function getFieldType(schema, fieldKey) {
+	if (!schema || !schema.shape) return "unknown";
+	let fieldSchema = schema.shape[fieldKey];
+	while (fieldSchema) if (fieldSchema instanceof z.ZodOptional || fieldSchema instanceof z.ZodNullable) fieldSchema = fieldSchema.unwrap();
+	else break;
+	if (!fieldSchema) return "unknown";
+	if (fieldSchema instanceof z.ZodNumber) return "number";
+	if (fieldSchema instanceof z.ZodBoolean) return "boolean";
+	if (fieldSchema instanceof z.ZodString) return "string";
+	return "unknown";
+}
+var serializeFiltersToQuery = (filterData, prefix) => {
+	const query = {};
+	for (const [key, value] of Object.entries(filterData)) {
+		if (value === null || value === void 0) continue;
+		const filterKey = `filter[${prefix && `${prefix}-`}${key}]`;
+		if (Array.isArray(value) || typeof value === "object") query[filterKey] = JSON.stringify(value);
+		else if (typeof value === "boolean") query[filterKey] = value ? "true" : "false";
+		else query[filterKey] = value.toString();
+	}
+	return query;
+};
+var parseFilterFromQuery = (searchParams, schema) => {
+	const filter = {};
+	for (const [key, value] of searchParams.entries()) {
+		const match = /^filter\[(.+?)\]$/.exec(key);
+		if (!match) continue;
+		const filterKey = match[1];
+		const isArray = value.startsWith("[") && value.endsWith("]");
+		const isObject = value.startsWith("{") && value.endsWith("}");
+		const isNumber = !Number.isNaN(Number(value)) && value !== "";
+		const isBoolean = ["true", "false"].includes(value);
+		if (isArray || isObject || isNumber) filter[filterKey] = JSON.parse(value);
+		else if (isBoolean) filter[filterKey] = value === "true";
+		else {
+			const expectedType = getFieldType(schema, filterKey);
+			if (expectedType === "number" && !Number.isNaN(Number(value)) && value !== "" && value !== null) filter[filterKey] = Number(value);
+			else if (expectedType === "boolean" && ["true", "false"].includes(value)) filter[filterKey] = value === "true";
+			else filter[filterKey] = value;
+		}
+	}
+	return filter;
+};
+const useFilters = (defaultFilterValues, prefix = "", schema) => {
+	const { searchParams, pathname, replace } = UIRouter.useUIRouter();
+	const [filterData, setFilterData] = useState(() => parseFilterFromQuery(searchParams, schema));
+	useEffect(() => {
+		const setUrlToDefaultFilters = () => {
+			const flatFilterQuery = serializeFiltersToQuery(defaultFilterValues, prefix);
+			replace(`${pathname}?${new URLSearchParams({
+				...Object.fromEntries(searchParams.entries()),
+				...flatFilterQuery
+			}).toString()}`);
+		};
+		const currentFilters = parseFilterFromQuery(searchParams, schema);
+		const hasFiltersSet = Object.keys(currentFilters).length > 0;
+		if (defaultFilterValues && !hasFiltersSet) setUrlToDefaultFilters();
+	}, [
+		defaultFilterValues,
+		prefix,
+		schema
+	]);
+	useEffect(() => {
+		setFilterData(parseFilterFromQuery(searchParams, schema));
+	}, [searchParams, schema]);
+	const setFilterValue = useCallback((data) => {
+		let newFilters = { ...filterData };
+		const isReset = Object.keys(data).length === 0;
+		if (data === defaultFilterValues) newFilters = { ...defaultFilterValues };
+		else if (isReset) newFilters = {};
+		else Object.entries(data).forEach(([key, value]) => {
+			if (value === void 0) delete newFilters[key];
+			else newFilters[key] = value;
+		});
+		const prefixPart = prefix ? `${prefix}-` : "";
+		const cleanedQuery = searchParams.keys().reduce((acc, k) => {
+			if (!k.startsWith(`filter[${prefixPart}`)) acc[k] = searchParams.get(k) ?? "";
+			return acc;
+		}, {});
+		const flatFilterQuery = serializeFiltersToQuery(newFilters, prefix);
+		replace(`${pathname}?${new URLSearchParams({
+			...cleanedQuery,
+			...flatFilterQuery
+		}).toString()}`);
+		setFilterData(newFilters);
+	}, [
+		filterData,
+		prefix,
+		pathname,
+		replace,
+		defaultFilterValues,
+		searchParams
+	]);
+	const getFilterValue = useCallback((keys) => {
+		const result = {};
+		keys.forEach((key) => {
+			result[key] = filterData[key];
+		});
+		return result;
+	}, [filterData]);
+	const clearAllFilters = useCallback(() => {
+		setFilterValue(defaultFilterValues ?? {});
+	}, [defaultFilterValues, setFilterValue]);
+	return useMemo(() => {
+		return {
+			filterData,
+			setFilterValue,
+			getFilterValue,
+			clearAllFilters
+		};
+	}, [
+		filterData,
+		setFilterValue,
+		getFilterValue,
+		clearAllFilters
+	]);
+};
+export { useFilters };

package/dist/useForm.js

@@ -0,0 +1,12 @@
+import { useMemo } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+function useForm$1({ resolver, zodSchema, defaultValues,...props }) {
+	const formResolver = useMemo(() => resolver ?? (zodSchema ? zodResolver(zodSchema) : void 0), [resolver, zodSchema]);
+	return useForm({
+		...props,
+		resolver: formResolver,
+		defaultValues
+	});
+}
+export { useForm$1 as useForm };

package/dist/useFormAutosave.js

@@ -0,0 +1,52 @@
+import { ObjectUtils } from "./object.utils.js";
+import { useAutosave } from "./useAutosave.js";
+import { useForm } from "./useForm.js";
+import { useEffect, useRef } from "react";
+var getResetTimeoutErrorMessage = (resetTimeout) => `Form Reset Timeout (${resetTimeout}ms) - Action Required
+Problem: Form values weren't reset after submission.
+
+Likely causes:
+• Missing variables in reset dependency array
+• Reset dependencies not updating after form save
+• Async operations blocking timely reset
+
+Solutions:
+1. Ensure reset dependencies include all relevant state variables
+2. Confirm your submission handler updates state properly (check query invalidation)
+3. For slower operations, consider increasing the timeout threshold`;
+function useFormAutosave({ autosaveDelay, enableAutosave, onAutosave, getResetValues, resetDeps, resetTimeout = 5e3,...props }) {
+	const form = useForm({
+		...props,
+		defaultValues: getResetValues()
+	});
+	const shouldResetFormValuesRef = useRef(false);
+	const resetFormValuesTimeoutRef = useRef(void 0);
+	useEffect(() => {
+		const resetValues = getResetValues();
+		if (resetValues === void 0) return;
+		const resetFormValues = async () => {
+			const keepStateOptions = shouldResetFormValuesRef.current ? { keepDirtyValues: true } : void 0;
+			shouldResetFormValuesRef.current = false;
+			let values = resetValues;
+			if (ObjectUtils.isFunction(resetValues)) values = await resetValues();
+			form.reset(values, keepStateOptions);
+		};
+		resetFormValues();
+	}, [...resetDeps]);
+	const onSaveSuccess = () => {
+		shouldResetFormValuesRef.current = true;
+		if (resetFormValuesTimeoutRef.current) clearTimeout(resetFormValuesTimeoutRef.current);
+		resetFormValuesTimeoutRef.current = setTimeout(() => {
+			if (shouldResetFormValuesRef.current) throw new Error(getResetTimeoutErrorMessage(resetTimeout));
+		}, resetTimeout);
+	};
+	useAutosave({
+		form,
+		delay: autosaveDelay,
+		enabled: enableAutosave,
+		onSave: onAutosave,
+		onSaveSuccess
+	});
+	return form;
+}
+export { useFormAutosave };

package/dist/useIntersectionObserver.js

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+const useIntersectionObserver = ({ onIntersection, root, rootMargin, threshold }) => {
+	const [ref, setRef] = useState(null);
+	useEffect(() => {
+		const observer = new IntersectionObserver((entries) => {
+			if (entries.some((entry) => entry.isIntersecting)) onIntersection?.();
+		}, {
+			root,
+			rootMargin,
+			threshold
+		});
+		if (ref) observer.observe(ref);
+		return () => observer.disconnect();
+	}, [
+		ref,
+		root,
+		rootMargin,
+		threshold,
+		onIntersection
+	]);
+	return { setRef };
+};
+export { useIntersectionObserver };

package/dist/useLocalStorage.js

@@ -0,0 +1,35 @@
+import { useCallback, useState } from "react";
+var getValue = (key, schema) => {
+	if (!localStorage) return null;
+	const lsValue = localStorage.getItem(key);
+	if (!lsValue) return null;
+	let jsonOrString;
+	try {
+		jsonOrString = JSON.parse(lsValue);
+	} catch {
+		jsonOrString = lsValue;
+	}
+	const parsedValue = schema.safeParse(jsonOrString);
+	if (parsedValue.success) return parsedValue.data;
+	else return null;
+};
+const useLocalStorage = ({ key, schema }) => {
+	const [value, setValue] = useState(() => getValue(key, schema));
+	return {
+		value,
+		set: useCallback((newValue) => {
+			if (!localStorage) return;
+			const parsedValue = schema.safeParse(newValue);
+			if (!parsedValue.success) return;
+			if (typeof parsedValue.data === "string") localStorage.setItem(key, parsedValue.data);
+			else localStorage.setItem(key, JSON.stringify(parsedValue.data));
+			setValue(parsedValue.data);
+		}, [key, schema]),
+		remove: useCallback(() => {
+			if (!localStorage) return;
+			localStorage.removeItem(key);
+			setValue(null);
+		}, [key])
+	};
+};
+export { useLocalStorage };

package/dist/useLongPressRepeat.js

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from "react";
+const useLongPressRepeat = ({ onPress, enabled = true, interval = 85, timeout = 500 }) => {
+	const intervalRef = useRef(void 0);
+	useEffect(() => {
+		return () => {
+			clearInterval(intervalRef.current);
+		};
+	}, []);
+	const onPressStart = () => {
+		onPress(false);
+		if (!enabled) return;
+		intervalRef.current = setTimeout(() => {
+			onPress(true);
+			intervalRef.current = setInterval(() => {
+				onPress(true);
+			}, interval);
+		}, timeout);
+	};
+	const onPressEnd = () => {
+		clearInterval(intervalRef.current);
+	};
+	return {
+		onPressStart,
+		onPressEnd
+	};
+};
+export { useLongPressRepeat };

package/dist/usePagination.js

@@ -0,0 +1,26 @@
+import { UIRouter } from "./router.context.js";
+import { useEffect, useState } from "react";
+var DEFAULT_STATE = {
+	pageIndex: 1,
+	pageSize: 20
+};
+function usePagination(defaultPagination) {
+	const { pathname, replace, searchParams } = UIRouter.useUIRouter();
+	const [pagination, setPagination] = useState(defaultPagination ?? {
+		pageIndex: searchParams.has("page") ? Number.parseInt(searchParams.get("page") ?? "", 10) : DEFAULT_STATE.pageIndex,
+		pageSize: searchParams.has("size") ? Number.parseInt(searchParams.get("size") ?? "", 10) : DEFAULT_STATE.pageSize
+	});
+	useEffect(() => {
+		const params = new URLSearchParams(searchParams);
+		if (pagination.pageSize !== DEFAULT_STATE.pageSize) params.append("size", pagination.pageSize.toString());
+		if (pagination.pageIndex !== DEFAULT_STATE.pageIndex) params.append("page", pagination.pageIndex.toString());
+		replace(`${pathname}${params.size > 0 ? `?${params.toString()}` : ""}`);
+	}, [pagination]);
+	return {
+		pagination,
+		setPagination,
+		pageIndex: pagination.pageIndex,
+		pageSize: pagination.pageSize
+	};
+}
+export { usePagination };

package/dist/useScrollableListBox.js

@@ -0,0 +1,24 @@
+import { useBreakpoint } from "./useBreakpoint.js";
+import { useEffect, useRef } from "react";
+function useScrollableListBox() {
+	const ref = useRef(null);
+	const isDesktop = useBreakpoint("md");
+	useEffect(() => {
+		const node = ref.current;
+		if (!node || isDesktop) return;
+		const onPointerDownCapture = (e) => {
+			e.stopPropagation();
+		};
+		const onClickCapture = (e) => {
+			if (e.currentTarget?.contains(e.target) && e.target !== e.currentTarget) e.target.click();
+		};
+		node.addEventListener("pointerdown", onPointerDownCapture);
+		node.addEventListener("click", onClickCapture);
+		return () => {
+			node.removeEventListener("pointerdown", onPointerDownCapture);
+			node.removeEventListener("click", onClickCapture);
+		};
+	}, [ref, isDesktop]);
+	return { ref };
+}
+export { useScrollableListBox };

package/dist/useSelectItems.js

@@ -0,0 +1,82 @@
+import { useFilter } from "react-aria-components";
+import { useMemo } from "react";
+const SelectAllItemId = "all-item-id";
+var SelectAllItem = (inputValue) => ({
+	id: SelectAllItemId,
+	label: inputValue,
+	isSelectAllItem: true
+});
+const NewItemId = "new-item-id";
+var NewItem = (inputValue) => ({
+	id: NewItemId,
+	label: inputValue,
+	isNewItem: true
+});
+const LoadingItemId = "loading-item-id";
+var LoadingItem = (inputValue) => ({
+	id: LoadingItemId,
+	label: inputValue,
+	isLoadingItem: true
+});
+const ReservedItemIds = [
+	SelectAllItemId,
+	NewItemId,
+	LoadingItemId
+];
+function useSelectItems({ initialSelectedItems, selectedItems, cachedItems, inputValue, showAll, isMultiple, showSelectAllOption, showNewItemOption, newItemMinLength = 3, isLoading, hasLoadMore, isClientSearchDisabled }) {
+	const { contains } = useFilter({ sensitivity: "base" });
+	const allListItems = useMemo(() => {
+		const showSelectAllItem = isMultiple && showSelectAllOption && inputValue.length === 0 && !hasLoadMore;
+		const showNewItem = showNewItemOption && inputValue.length >= newItemMinLength && !cachedItems.find((item) => contains(item.label, inputValue));
+		const showLoadingItem = isLoading || hasLoadMore;
+		return [
+			...showSelectAllItem ? [SelectAllItem(inputValue)] : [],
+			...cachedItems,
+			...showNewItem ? [NewItem(inputValue)] : [],
+			...showLoadingItem ? [LoadingItem(inputValue)] : []
+		];
+	}, [
+		isMultiple,
+		showNewItemOption,
+		inputValue,
+		newItemMinLength,
+		cachedItems,
+		contains,
+		isLoading,
+		hasLoadMore,
+		showSelectAllOption
+	]);
+	const allItems = useMemo(() => {
+		const items = [
+			...Array.isArray(initialSelectedItems) ? initialSelectedItems : [initialSelectedItems],
+			...Array.isArray(selectedItems) ? selectedItems : [selectedItems],
+			...allListItems
+		].filter((item) => !!item);
+		const allItemsMap = /* @__PURE__ */ new Map();
+		items.forEach((item) => allItemsMap.set(item.id, item));
+		return Array.from(allItemsMap.values());
+	}, [
+		allListItems,
+		initialSelectedItems,
+		selectedItems
+	]);
+	const filteredListItems = useMemo(() => allListItems.filter((item) => contains(item.label, inputValue)), [
+		allListItems,
+		contains,
+		inputValue
+	]);
+	const listItems = useMemo(() => showAll || isClientSearchDisabled ? allListItems : filteredListItems, [
+		showAll,
+		isClientSearchDisabled,
+		allListItems,
+		filteredListItems
+	]);
+	return {
+		allItems,
+		allListItems,
+		filteredListItems,
+		listItems,
+		selectableListItems: useMemo(() => listItems.filter((item) => !item.isDisabled && !ReservedItemIds.includes(String(item.id))), [listItems])
+	};
+}
+export { NewItemId, SelectAllItemId, useSelectItems };

package/dist/useSorting.js

@@ -0,0 +1,34 @@
+import { UIRouter } from "./router.context.js";
+import { useEffect, useMemo, useState } from "react";
+function useSorting(defaultSorting, prefix = "") {
+	const { pathname, replace, searchParams } = UIRouter.useUIRouter();
+	const [sorting, setSorting] = useState(defaultSorting ?? searchParams.get(`order${prefix && `-${prefix}`}`)?.split(",").map((item) => {
+		if (item.startsWith("-")) return {
+			id: item.slice(1),
+			desc: true
+		};
+		if (item.startsWith("+")) return {
+			id: item.slice(1),
+			desc: false
+		};
+		return {
+			id: item,
+			desc: false
+		};
+	}) ?? []);
+	const order = useMemo(() => {
+		return sorting.map((field) => `${field.desc ? "-" : "+"}${field.id}`).join(",");
+	}, [sorting]);
+	useEffect(() => {
+		const params = new URLSearchParams(searchParams);
+		params.delete("order");
+		if (order) params.append(`order${prefix && `-${prefix}`}`, order);
+		replace(`${pathname}${params.size > 0 ? `?${params.toString()}` : ""}`);
+	}, [order]);
+	return {
+		sorting,
+		setSorting,
+		order
+	};
+}
+export { useSorting };

package/dist/useStateAndRef.js

@@ -0,0 +1,15 @@
+import { ObjectUtils } from "./object.utils.js";
+import { useCallback, useRef, useState } from "react";
+const useStateAndRef = (initialState) => {
+	const [state, setState] = useState(initialState);
+	const ref = useRef(state);
+	return [
+		state,
+		ref,
+		useCallback((value) => {
+			ref.current = ObjectUtils.isFunction(value) ? value(ref.current) : value;
+			setState(ref.current);
+		}, [setState])
+	];
+};
+export { useStateAndRef };

package/dist/useTableColumnConfig.js

@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+function sortByKeyOrder(data, orderedKeys = []) {
+	return [...data].sort((a, b) => {
+		return orderedKeys.findIndex((key) => key === (a.id ?? a.accessorKey)) - orderedKeys.findIndex((key) => key === (b.id ?? b.accessorKey));
+	});
+}
+function useTableColumnConfig(defaultColumns, options = {}) {
+	const [internalVisibleColumns, setInternalVisibleColumns] = useState(() => defaultColumns.reduce((acc, col) => {
+		const key = col.id ?? col.accessorKey;
+		acc[key] = true;
+		return acc;
+	}, {}));
+	const [internalColumnOrder, setInternalColumnOrder] = useState(() => defaultColumns.map((col) => col.id ?? col.accessorKey));
+	useEffect(() => {
+		if (options.visibleColumns) setInternalVisibleColumns(options.visibleColumns);
+	}, [options.visibleColumns]);
+	useEffect(() => {
+		if (options.columnOrder) setInternalColumnOrder(options.columnOrder);
+	}, [options.columnOrder]);
+	const handleVisibilityChange = useCallback((value) => {
+		setInternalVisibleColumns(value);
+		options?.onVisibilityChange?.(value);
+	}, [options]);
+	const handleOrderChange = useCallback((value) => {
+		setInternalColumnOrder(value);
+		options?.onOrderChange?.(value);
+	}, [options]);
+	const configColumns = useMemo(() => sortByKeyOrder(defaultColumns, internalColumnOrder), [defaultColumns, internalColumnOrder]);
+	return {
+		configColumns,
+		columns: useMemo(() => configColumns.filter((col) => internalVisibleColumns?.[col.id ?? col.accessorKey] ?? true), [configColumns, internalVisibleColumns]),
+		visibleColumns: internalVisibleColumns,
+		columnOrder: internalColumnOrder,
+		onVisibilityChange: handleVisibilityChange,
+		onOrderChange: handleOrderChange
+	};
+}
+export { useTableColumnConfig };