@povio/ui 2.2.6 → 2.2.7

package/dist/helpers/dynamicColumns.js

@@ -3,6 +3,7 @@ import { ZodUtils } from "../utils/zod.utils.js";
 import { DateUtils } from "../utils/date.utils.js";
 import { z } from "zod";
 import i18next from "i18next";
+//#region src/helpers/dynamicColumns.ts
 var DEFAULT_NAMESPACE = "dynamicColumns";
 var FORMAT_MAP = {
 	datetime: (value) => DateUtils.formatDate(new Date(value)),
@@ -47,7 +48,7 @@ var convertCustomEntriesToColumnDefs = (entries) => {
 var excludeEntries = (entries) => {
 	return entries.filter(([, value]) => value !== false && value !== void 0);
 };
-const sortColumns = (columns, orderKeys) => {
+var sortColumns = (columns, orderKeys) => {
 	if (!orderKeys) return columns;
 	const wildcardIndex = orderKeys.indexOf("*");
 	if (wildcardIndex === -1) return columns.sort((columnA, columnB) => {
@@ -246,7 +247,7 @@ var validateParams = (schema, presetColumns, options) => {
 	validateOptionKeyArray(allKeys, order, "order");
 	validateOptionKeyArray(usedKeys, disableFormatting, "disableFormatting");
 };
-const dynamicColumns = ({ schema, preset = [], options }) => {
+var dynamicColumns = ({ schema, preset = [], options }) => {
 	validateParams(schema, preset, options);
 	const sortableKeys = normalizeSortable(options.sortable);
 	let entries = Object.entries(options.columns ?? {});
@@ -269,4 +270,5 @@ const dynamicColumns = ({ schema, preset = [], options }) => {
 	];
 	return sortColumns(options.includeAll ? addMissingSchemaFields(schema, mergedColumns, options, sortableKeys) : mergedColumns, options.order);
 };
+//#endregion
 export { dynamicColumns };

package/dist/helpers/dynamicInputs.js

@@ -2,6 +2,7 @@ import { StringUtils } from "../utils/string.utils.js";
 import { ZodUtils } from "../utils/zod.utils.js";
 import { z } from "zod";
 import i18next from "i18next";
+//#region src/helpers/dynamicInputs.ts
 var defaultComponentTypes = {
 	datetime: "datePicker",
 	dateRange: "dateRangePicker",
@@ -52,7 +53,7 @@ var convertInputsConfigToObjectDefinitions = (entries) => {
 		return [key, inputConfigToObjectDefinition(value)];
 	});
 };
-const getDefaultInputComponentType = (schemaType) => {
+var getDefaultInputComponentType = (schemaType) => {
 	if (ZodUtils.isDateRange(schemaType)) return defaultComponentTypes.dateRange;
 	const unwrappedType = ZodUtils.unwrapZodType(schemaType);
 	const componentType = ZOD_TYPE_COMPONENT_TYPE.find(([zodType]) => unwrappedType instanceof zodType)?.[1];
@@ -67,7 +68,7 @@ var getDefaultSelectionItems = (keyType) => {
 	}));
 	return [];
 };
-const getDefaultSelectionMode = (keyType) => {
+var getDefaultSelectionMode = (keyType) => {
 	return keyType instanceof z.ZodArray ? "multiple" : "single";
 };
 var getDefaultProps = (componentType, keyType) => {
@@ -171,7 +172,7 @@ var addMissingSchemaFields = (schema, existingInputDefs, options) => {
 	});
 	return [...existingInputDefs, ...additionalInputDefs];
 };
-const dynamicInputs = ({ schema, preset = [], options }) => {
+var dynamicInputs = ({ schema, preset = [], options }) => {
 	validateParams(schema, preset, options);
 	let entries = Object.entries(options.inputs ?? {});
 	entries = excludeEntries(entries);
@@ -183,4 +184,5 @@ const dynamicInputs = ({ schema, preset = [], options }) => {
 	const mergedInputDefs = [...presetInputDefs, ...inputDefs];
 	return sortInputDefs(options.includeAll ? addMissingSchemaFields(schema, mergedInputDefs, options) : mergedInputDefs, options.order);
 };
+//#endregion
 export { dynamicInputs, getDefaultInputComponentType };

package/dist/hooks/useAutosave.js

@@ -2,6 +2,7 @@ import { ObjectUtils } from "../utils/object.utils.js";
 import { isEqual } from "../utils/isEqual.js";
 import { useEffect, useRef } from "react";
 import { useFormState, useWatch } from "react-hook-form";
+//#region src/hooks/useAutosave.ts
 function isNilOrEqual(left, right) {
 	if (ObjectUtils.isNil(left) && ObjectUtils.isNil(right)) return true;
 	return isEqual(left, right);
@@ -59,4 +60,5 @@ function useAutosave({ form, delay = 500, enabled = true, onSave, onSaveSuccess
 		reset
 	]);
 }
+//#endregion
 export { useAutosave };

package/dist/hooks/useBreakpoint.js

@@ -1,5 +1,6 @@
 import { useMemo } from "react";
 import { useMediaQuery } from "react-responsive";
+//#region src/hooks/useBreakpoint.ts
 var breakpoints = null;
 function getBreakpoints() {
 	if (breakpoints) return breakpoints;
@@ -21,8 +22,9 @@ function getBreakpoints() {
 	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]})` });
+	const breakpoints = useMemo(() => getBreakpoints(), []);
+	if (!breakpoints) throw new Error("Tailwind config is missing theme.screens");
+	return useMediaQuery({ query: `(min-width: ${breakpoints[breakpointKey]})` });
 }
+//#endregion
 export { useBreakpoint };

package/dist/hooks/useDebounceCallback.js

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/hooks/useDebounceCallback.ts
 function useDebounceCallback(callback, { delay = 500 } = {}) {
 	const timeoutRef = useRef(null);
 	const [isDebouncing, setIsDebouncing] = useState(false);
@@ -20,4 +21,5 @@ function useDebounceCallback(callback, { delay = 500 } = {}) {
 		isDebouncing
 	};
 }
+//#endregion
 export { useDebounceCallback };

package/dist/hooks/useDeepCompare.js

@@ -1,12 +1,13 @@
 import { isEqual } from "../utils/isEqual.js";
 import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
-const useDeepCompareEffect = (callback, dependencies) => {
+//#region src/hooks/useDeepCompare.ts
+var useDeepCompareEffect = (callback, dependencies) => {
 	return useEffect(callback, useDeepCompareDeps(dependencies));
 };
-const useDeepCompareLayoutEffect = (callback, dependencies) => {
+var useDeepCompareLayoutEffect = (callback, dependencies) => {
 	return useLayoutEffect(callback, useDeepCompareDeps(dependencies));
 };
-const useDeepCompareMemo = (factory, dependencies) => {
+var useDeepCompareMemo = (factory, dependencies) => {
 	return useMemo(factory, useDeepCompareDeps(dependencies));
 };
 var useDeepCompareDeps = (value) => {
@@ -18,4 +19,5 @@ var useDeepCompareDeps = (value) => {
 	}
 	return [signalRef.current];
 };
+//#endregion
 export { useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo };

package/dist/hooks/useFilters.js

@@ -1,6 +1,7 @@
 import { UIRouter } from "../config/router.context.js";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { z } from "zod";
+//#region src/hooks/useFilters.ts
 function getFieldType(schema, fieldKey) {
 	if (!schema || !schema.shape) return "unknown";
 	let fieldSchema = schema.shape[fieldKey];
@@ -44,7 +45,7 @@ var parseFilterFromQuery = (searchParams, schema) => {
 	}
 	return filter;
 };
-const useFilters = (defaultFilterValues, prefix = "", schema) => {
+var useFilters = (defaultFilterValues, prefix = "", schema) => {
 	const { searchParams, pathname, replace } = UIRouter.useUIRouter();
 	const [filterData, setFilterData] = useState(() => parseFilterFromQuery(searchParams, schema));
 	useEffect(() => {
@@ -118,4 +119,5 @@ const useFilters = (defaultFilterValues, prefix = "", schema) => {
 		clearAllFilters
 	]);
 };
+//#endregion
 export { useFilters };

package/dist/hooks/useForm.js

@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
+//#region src/hooks/useForm.ts
 function useForm$1({ resolver, zodSchema, defaultValues, ...props }) {
 	const formResolver = useMemo(() => resolver ?? (zodSchema ? zodResolver(zodSchema) : void 0), [resolver, zodSchema]);
 	return useForm({
@@ -9,4 +10,5 @@ function useForm$1({ resolver, zodSchema, defaultValues, ...props }) {
 		defaultValues
 	});
 }
+//#endregion
 export { useForm$1 as useForm };

package/dist/hooks/useFormAutosave.js

@@ -2,6 +2,7 @@ import { ObjectUtils } from "../utils/object.utils.js";
 import { useAutosave } from "./useAutosave.js";
 import { useForm } from "./useForm.js";
 import { useEffect, useRef } from "react";
+//#region src/hooks/useFormAutosave.ts
 var getResetTimeoutErrorMessage = (resetTimeout) => `Form Reset Timeout (${resetTimeout}ms) - Action Required
 Problem: Form values weren't reset after submission.
 
@@ -49,4 +50,5 @@ function useFormAutosave({ autosaveDelay, enableAutosave, onAutosave, getResetVa
 	});
 	return form;
 }
+//#endregion
 export { useFormAutosave };

package/dist/hooks/useIntersectionObserver.js

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from "react";
-const useIntersectionObserver = ({ onIntersection, onIntersectionChange, root, rootMargin, threshold }) => {
+//#region src/hooks/useIntersectionObserver.ts
+var useIntersectionObserver = ({ onIntersection, onIntersectionChange, root, rootMargin, threshold }) => {
 	const ref = useRef(null);
 	useEffect(() => {
 		const observer = new IntersectionObserver((entries) => {
@@ -20,4 +21,5 @@ const useIntersectionObserver = ({ onIntersection, onIntersectionChange, root, r
 	]);
 	return { ref };
 };
+//#endregion
 export { useIntersectionObserver };

package/dist/hooks/useLocalStorage.js

@@ -1,4 +1,5 @@
 import { useCallback, useState } from "react";
+//#region src/hooks/useLocalStorage.ts
 var getValue = (key, schema) => {
 	if (!localStorage) return null;
 	const lsValue = localStorage.getItem(key);
@@ -13,7 +14,7 @@ var getValue = (key, schema) => {
 	if (parsedValue.success) return parsedValue.data;
 	else return null;
 };
-const useLocalStorage = ({ key, schema }) => {
+var useLocalStorage = ({ key, schema }) => {
 	const [value, setValue] = useState(() => getValue(key, schema));
 	return {
 		value,
@@ -32,4 +33,5 @@ const useLocalStorage = ({ key, schema }) => {
 		}, [key])
 	};
 };
+//#endregion
 export { useLocalStorage };

package/dist/hooks/useLongPressRepeat.js

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from "react";
-const useLongPressRepeat = ({ onPress, enabled = true, interval = 85, timeout = 500 }) => {
+//#region src/hooks/useLongPressRepeat.ts
+var useLongPressRepeat = ({ onPress, enabled = true, interval = 85, timeout = 500 }) => {
 	const intervalRef = useRef(void 0);
 	useEffect(() => {
 		return () => {
@@ -24,4 +25,5 @@ const useLongPressRepeat = ({ onPress, enabled = true, interval = 85, timeout =
 		onPressEnd
 	};
 };
+//#endregion
 export { useLongPressRepeat };

package/dist/hooks/usePagination.js

@@ -1,5 +1,6 @@
 import { UIRouter } from "../config/router.context.js";
 import { useEffect, useState } from "react";
+//#region src/hooks/usePagination.ts
 var DEFAULT_STATE = {
 	pageIndex: 1,
 	pageSize: 20
@@ -23,4 +24,5 @@ function usePagination(defaultPagination) {
 		pageSize: pagination.pageSize
 	};
 }
+//#endregion
 export { usePagination };

package/dist/hooks/useScrollableListBox.js

@@ -1,5 +1,6 @@
 import { useBreakpoint } from "./useBreakpoint.js";
 import { useEffect, useRef } from "react";
+//#region src/hooks/useScrollableListBox.ts
 function useScrollableListBox() {
 	const ref = useRef(null);
 	const isDesktop = useBreakpoint("md");
@@ -21,4 +22,5 @@ function useScrollableListBox() {
 	}, [ref, isDesktop]);
 	return { ref };
 }
+//#endregion
 export { useScrollableListBox };

package/dist/hooks/useSorting.js

@@ -1,5 +1,6 @@
 import { UIRouter } from "../config/router.context.js";
 import { useEffect, useMemo, useState } from "react";
+//#region src/hooks/useSorting.ts
 function useSorting(defaultSorting, prefix = "") {
 	const { pathname, replace, searchParams } = UIRouter.useUIRouter();
 	const [sorting, setSorting] = useState(defaultSorting ?? searchParams.get(`order${prefix && `-${prefix}`}`)?.split(",").map((item) => {
@@ -31,4 +32,5 @@ function useSorting(defaultSorting, prefix = "") {
 		order
 	};
 }
+//#endregion
 export { useSorting };

package/dist/hooks/useStateAndRef.js

@@ -1,6 +1,7 @@
 import { ObjectUtils } from "../utils/object.utils.js";
 import { useCallback, useRef, useState } from "react";
-const useStateAndRef = (initialState) => {
+//#region src/hooks/useStateAndRef.ts
+var useStateAndRef = (initialState) => {
 	const [state, setState] = useState(initialState);
 	const ref = useRef(state);
 	return [
@@ -12,4 +13,5 @@ const useStateAndRef = (initialState) => {
 		}, [setState])
 	];
 };
+//#endregion
 export { useStateAndRef };

package/dist/hooks/useTableColumnConfig.js

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
+//#region src/hooks/useTableColumnConfig.ts
 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));
@@ -35,4 +36,5 @@ function useTableColumnConfig(defaultColumns, options = {}) {
 		onOrderChange: handleOrderChange
 	};
 }
+//#endregion
 export { useTableColumnConfig };

package/dist/hooks/useTableNav.js

@@ -1,20 +1,23 @@
 import { logger } from "../utils/logger.js";
-var Keys = /* @__PURE__ */ function(Keys$1) {
-	Keys$1["Enter"] = "Enter";
-	Keys$1["Escape"] = "Escape";
-	Keys$1["Shift"] = "Shift";
-	Keys$1["Control"] = "Control";
-	Keys$1["Home"] = "Home";
-	Keys$1["End"] = "End";
-	Keys$1["Backspace"] = "Backspace";
-	Keys$1["PageUp"] = "PageUp";
-	Keys$1["PageDown"] = "PageDown";
-	Keys$1["ArrowLeft"] = "ArrowLeft";
-	Keys$1["ArrowUp"] = "ArrowUp";
-	Keys$1["ArrowRight"] = "ArrowRight";
-	Keys$1["ArrowDown"] = "ArrowDown";
-	Keys$1["F2"] = "F2";
-	return Keys$1;
+//#region src/hooks/useTableNav.ts
+var Keys = /* @__PURE__ */ function(Keys) {
+	Keys["Enter"] = "Enter";
+	Keys["Escape"] = "Escape";
+	Keys["Shift"] = "Shift";
+	Keys["Control"] = "Control";
+	Keys["Home"] = "Home";
+	Keys["End"] = "End";
+	Keys["Backspace"] = "Backspace";
+	/** Page Keys */
+	Keys["PageUp"] = "PageUp";
+	Keys["PageDown"] = "PageDown";
+	/** Arrow Keys */
+	Keys["ArrowLeft"] = "ArrowLeft";
+	Keys["ArrowUp"] = "ArrowUp";
+	Keys["ArrowRight"] = "ArrowRight";
+	Keys["ArrowDown"] = "ArrowDown";
+	Keys["F2"] = "F2";
+	return Keys;
 }(Keys || {});
 var Selectors = {
 	Cell: "[role=\"cell\"],[role=\"gridcell\"],[role=\"columnheader\"],[role=\"rowheader\"],td,th",
@@ -39,9 +42,17 @@ var DataGridNav = class {
 		this.debug = debug;
 		this.disabled = false;
 	}
+	/**
+	* Disables the keyboard listener in cases
+	* that elements inside the grid need to use
+	* arrows keys etc., like select dropdowns
+	*/
 	disable() {
 		this.disabled = true;
 	}
+	/**
+	* Enables the keyboard listeners
+	*/
 	enable() {
 		this.disabled = false;
 	}
@@ -51,21 +62,48 @@ var DataGridNav = class {
 	getActiveCell() {
 		return this.activeCell;
 	}
+	/** Used as a keyboard listener for key up */
 	tableKeyUp() {
 		this.keys = [];
 	}
+	/** Used as a keyboard listener for key down */
 	tableKeyDown(e) {
 		if (this.disabled) return;
+		/**
+		* Avoid page scrolling etc.
+		* Enable default behavior for:
+		* Tab, Shift + Tab
+		* TODO: Actually it will be better to just prevent
+		* in ArrowKeys and PageKeys maybe?
+		* Or should the consumer stop propagation?!
+		* Cannot work with preventDefault as it will
+		* first capture the event from an input in cell for example
+		*/
 		if (Keys.ArrowDown === e.key || Keys.ArrowUp === e.key || Keys.ArrowLeft === e.key || Keys.ArrowRight === e.key) e.preventDefault();
+		/**
+		* Add key to the stack if it's
+		* not the same with the last (long press)
+		*/
 		if (this.keys.length === 0 || this.keys[this.keys.length - 1] !== e.key) this.keys.push(e.key);
+		/**
+		* Need to check if we are inside a grid cell
+		* or not to enable/disable Grid Navigation
+		*/
 		if (!(e.target instanceof Element)) return;
 		const cell = e.target.parentElement?.closest(`${this.selectors.Cell},${this.selectors.Row}`);
 		if (!cell) return;
 		if (cell.matches(this.selectors.Cell)) this.cellNavigation(e);
 		else this.gridNavigation(e);
 	}
+	/**
+	* Handles the navigation inside a cell
+	*/
 	cellNavigation(e) {
 		if (!(e.target instanceof Element)) return;
+		/**
+		* Keys: Escape
+		* Restore grid navigation
+		*/
 		if (e.key === Keys.Escape) {
 			const cell = e.target.closest(this.selectors.Cell);
 			if (cell && this.isFocusable(cell)) {
@@ -73,6 +111,13 @@ var DataGridNav = class {
 				return;
 			}
 		}
+		/**
+		* Keys: ArrowRight, ArrowDown
+		* Move to the next focusable cell, or the first one
+		*
+		* Arrow Down disabled:
+		* https://github.com/w3c/aria-practices/issues/2739#issuecomment-1613538972
+		*/
 		if (e.key === Keys.ArrowRight || e.key === Keys.ArrowDown) {
 			const cell = e.target.closest(this.selectors.Cell);
 			if (!cell) return;
@@ -82,6 +127,13 @@ var DataGridNav = class {
 			if (this.isFocusable(widgetToFocus)) widgetToFocus.focus();
 			return;
 		}
+		/**
+		* Keys: ArrowLeft, ArrowUp
+		* Move to the previous focusable cell, or the last one
+		*
+		* Arrow Up disabled:
+		* https://github.com/w3c/aria-practices/issues/2739#issuecomment-1613538972
+		*/
 		if (e.key === Keys.ArrowLeft || e.key === Keys.ArrowUp) {
 			const cell = e.target.closest(this.selectors.Cell);
 			if (!cell) return;
@@ -91,11 +143,20 @@ var DataGridNav = class {
 			if (this.isFocusable(widgetToFocus)) widgetToFocus.focus();
 		}
 	}
+	/**
+	* Handles the navigation outside a cell
+	* on the grid level
+	*/
 	gridNavigation(e) {
 		const { target } = e;
 		if (!(e.target instanceof Element)) return;
 		if (!(target instanceof Element)) return;
 		if (this.keys.length === 1) {
+			/**
+			* Keys: Enter
+			* Should move focus inside the cell to the first focusable element:
+			* https://www.w3.org/WAI/ARIA/apg/patterns/grid/#gridNav_inside
+			*/
 			if (/^[a-zA-Z0-9]$/.test(e.key)) {
 				const cell = e.target.querySelector(this.selectors.Focusable);
 				if (cell && this.isFocusable(cell) && cell instanceof HTMLInputElement) {
@@ -129,6 +190,10 @@ var DataGridNav = class {
 				}
 				return;
 			}
+			/**
+			* Keys: ArrowLeft, ArrowRight
+			* Should move focus to the next/previous cell
+			*/
 			if (e.key === Keys.ArrowLeft || e.key === Keys.ArrowRight) {
 				const direction = e.key === Keys.ArrowLeft ? "prev" : "next";
 				const cell = e.target.closest(this.selectors.Cell);
@@ -140,20 +205,37 @@ var DataGridNav = class {
 					e.preventDefault();
 				}
 			}
+			/**
+			* Keys: Up,Down
+			* Should move focus to the same column of the next/previous row
+			*/
 			if (e.key === Keys.ArrowDown || e.key === Keys.ArrowUp) {
 				this.verticalCellNavigation(e);
 				return;
 			}
+			/**
+			* Keys: PageUp, PageDown
+			* Should move focus to the first/last row
+			* or a predefined number of rows if user provides a value
+			*/
 			if (e.key === Keys.PageUp || e.key === Keys.PageDown) {
 				this.pageCellNavigation(e);
 				return;
 			}
+			/**
+			* Keys: Home, End
+			* Should move focus to the first/last cell of the current row
+			*/
 			if (e.key === Keys.Home || e.key === Keys.End) {
 				const rowChildren = [...e.target.closest(this.selectors.Row)?.children || []];
 				if (e.key === Keys.End) rowChildren.reverse();
 				this.focusOnFirstCell(rowChildren);
 			}
 		} else {
+			/**
+			* Keys: Control + Home, Control + End
+			* Should move focus to the first/last cell of the first/last row
+			*/
 			const [firstKey, secondKey] = this.keys;
 			if (firstKey === "Control" && (secondKey === Keys.Home || secondKey === Keys.End)) {
 				const siblings = e.target.closest(this.selectors.Row).parentElement?.children;
@@ -200,34 +282,43 @@ var DataGridNav = class {
 			const rowPosition = this.getRowIndex(row);
 			if (cellPosition === void 0 || rowPosition === void 0) return;
 			const direction = e.key === Keys.ArrowUp ? "prev" : "next";
+			/** Find previous rowgroup and focus on the proper cell */
 			if (rowPosition === 0 && direction === "prev") {
 				const currentRowGroup = row.parentElement?.closest(this.selectors.RowGroup);
 				const siblingRowGroups = [...currentRowGroup?.parentElement?.children || []];
 				const currentRowGroupIdx = siblingRowGroups.findIndex((el) => el === currentRowGroup);
 				if (currentRowGroupIdx !== 0) {
 					const rows = [...siblingRowGroups[currentRowGroupIdx - 1].querySelectorAll(this.selectors.Row)];
-					const child$1 = rows[rows.length - 1].children[cellPosition];
-					if (child$1 && this.isFocusable(child$1)) child$1.focus();
+					const child = rows[rows.length - 1].children[cellPosition];
+					if (child && this.isFocusable(child)) child.focus();
 					return;
 				}
 			}
+			/** Find next rowgroup and focus on the proper cell */
 			if (rowPosition === [...row.parentElement?.querySelectorAll(this.selectors.Row) || []].length - 1 && direction === "next") {
 				const currentRowGroup = row.parentElement?.closest(this.selectors.RowGroup);
 				const siblingRowGroups = [...currentRowGroup?.parentElement?.children || []];
 				const currentRowGroupIdx = siblingRowGroups.findIndex((el) => el === currentRowGroup);
 				if (currentRowGroupIdx !== siblingRowGroups.length - 1) {
-					const child$1 = [...siblingRowGroups[currentRowGroupIdx + 1].querySelectorAll(this.selectors.Row)][0].children[cellPosition];
-					if (child$1 && this.isFocusable(child$1)) child$1.focus();
+					const child = [...siblingRowGroups[currentRowGroupIdx + 1].querySelectorAll(this.selectors.Row)][0].children[cellPosition];
+					if (child && this.isFocusable(child)) child.focus();
 					return;
 				}
 				return;
 			}
+			/** Navigation in the same rowgroup */
 			const destinationRow = this.findUntil(direction, row, this.selectors.Row);
 			if (!destinationRow) return;
 			const child = destinationRow.children[cellPosition];
 			if (child && this.isFocusable(child)) child.focus();
 		}
 	}
+	/**
+	* Sending a row `Element` and then the first cell will be focused.
+	*
+	* If you want to focus the last cell then the row children can be passed in
+	* reversed order
+	*/
 	focusOnFirstCell(el) {
 		for (let i = 0; i < el.length; i++) {
 			const child = el[i];
@@ -237,6 +328,10 @@ var DataGridNav = class {
 			}
 		}
 	}
+	/**
+	* Get the column index of a `cell` based on the first `row` parent.
+	* `cellIndex` could be used, but it's not supported in HTML tables.
+	*/
 	getColumnIndex(cell) {
 		let position = 0;
 		const siblings = cell?.parentNode?.children;
@@ -245,6 +340,10 @@ var DataGridNav = class {
 		if (siblings[position] === void 0) return;
 		return position;
 	}
+	/**
+	* Get the row index of a `row` based
+	* on its sibling rows
+	*/
 	getRowIndex(row) {
 		let position = 0;
 		const siblings = row?.parentNode?.children;
@@ -253,6 +352,10 @@ var DataGridNav = class {
 		if (siblings[position] === void 0) return;
 		return position;
 	}
+	/**
+	* Equivalent to prevUntil/nextUntil in jQuery
+	* https://api.jquery.com/prevUntil/
+	*/
 	findUntil(direction, el, matchSelector, exitSelector) {
 		let element = el;
 		const method = direction === "next" ? "nextSibling" : "previousSibling";
@@ -276,4 +379,5 @@ function useTableNav(options) {
 		tableNav: nav
 	};
 }
+//#endregion
 export { useTableNav };

package/dist/hooks/useTranslationMemo.js

@@ -1,5 +1,6 @@
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
+//#region src/hooks/useTranslationMemo.ts
 function useTranslationMemo(func) {
 	const { t } = useTranslation();
 	return useMemo(() => {
@@ -7,4 +8,5 @@ function useTranslationMemo(func) {
 		return func();
 	}, [func, t]);
 }
+//#endregion
 export { useTranslationMemo };

package/dist/tw-ui-plugin.js

@@ -1,5 +1,6 @@
 import plugin from "tailwindcss/plugin";
-var tw_ui_plugin_default = plugin(({ addVariant }) => {
+//#region src/tw-ui-plugin.ts
+var uiPlugin = plugin(({ addVariant }) => {
 	addVariant("input-filled", [
 		"&:has(input:not(:placeholder-shown))",
 		"&:is(:where(.group\\/input-content):has(:is(input:not(:placeholder-shown))) *)",
@@ -18,4 +19,5 @@ var tw_ui_plugin_default = plugin(({ addVariant }) => {
 		"&:is(:where(.group\\/date-picker-content):where([data-rac])[data-disabled] *)"
 	].join(", "));
 });
-export { tw_ui_plugin_default as default };
+//#endregion
+export { uiPlugin as default };

package/dist/utils/array.utils.js

@@ -1,8 +1,10 @@
-let ArrayUtils;
+//#region src/utils/array.utils.ts
+var ArrayUtils;
 (function(_ArrayUtils) {
 	_ArrayUtils.fromCommaSeparatedStr = (str) => {
 		if (!str) return [];
 		return str.split(",").map((item) => item.trim());
 	};
 })(ArrayUtils || (ArrayUtils = {}));
+//#endregion
 export { ArrayUtils };

package/dist/utils/compoundMapper.js

@@ -1,4 +1,5 @@
-const compoundMapper = (config) => {
+//#region src/utils/compoundMapper.ts
+var compoundMapper = (config) => {
 	return (props) => {
 		return (config.compoundVariants?.find((v) => {
 			return Object.entries(v).filter(([key]) => key !== "value").every(([key, value]) => {
@@ -8,4 +9,5 @@ const compoundMapper = (config) => {
 		}))?.value ?? config.default;
 	};
 };
+//#endregion
 export { compoundMapper };