@povio/ui 3.3.0-rc.3 → 3.3.0

package/dist/components/table/Table.js

@@ -8,7 +8,6 @@ import { tableDataDefinition, tableHeadDataDefinition, tableHeadRowDefinition, t
 import { CellText } from "./CellText.js";
 import { DragIndicatorIcon } from "../../assets/icons/DragIndicator.js";
 import { HeaderText } from "./HeaderText.js";
-import { TableColumnFilterRow } from "./TableColumnFilterRow.js";
 import { useTableNav } from "../../hooks/useTableNav.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -75,7 +74,7 @@ var DraggableRow = ({ row, showCellBorder, onRowClick, onDoubleClick, tableRowCv
 		})
 	});
 };
-var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, className, sorting, setSorting, columnOrder, setColumnOrder, columnVisibility, setColumnVisibility, bulkSelectionActions: ActionHeader, enableDragDrop = false, onDragEnd, onReorder, getRowId, enableRowSelection, enableMultiRowSelection = false, defaultSelectedRows, onRowSelectionChange, filterForm, filterDefs, headerFilterCellClassName, emptyContent, ...props }) => {
+var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, className, sorting, setSorting, columnOrder, setColumnOrder, columnVisibility, setColumnVisibility, bulkSelectionActions: ActionHeader, enableDragDrop = false, onDragEnd, onReorder, getRowId, enableRowSelection, enableMultiRowSelection = false, defaultSelectedRows, onRowSelectionChange, ...props }) => {
 	const tableRowCva = UIOverrides.useCva("table.rowCva", tableRowDefinition);
 	const theadCva = UIOverrides.useCva("table.theadCva", theadDefinition);
 	const tableHeadRowCva = UIOverrides.useCva("table.headRowCva", tableHeadRowDefinition);
@@ -173,71 +172,50 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 	const selectedRows = table.getSelectedRowModel().rows;
 	const columnCount = table.getHeaderGroups()[0].headers.length;
 	const isAnyRowSelected = selectedRows.length > 0 && !!ActionHeader;
-	const showFilterRow = !!filterForm && !!filterDefs?.length && !isAnyRowSelected;
 	const hasOnClick = !!onRowClick || !!onDoubleClick;
 	const tableElement = /* @__PURE__ */ jsxs("table", {
-		className: clsx("w-full", showFilterRow && "table-fixed", className),
+		className: clsx("w-full", className),
 		...listeners,
 		children: [/* @__PURE__ */ jsxs("thead", {
 			className: clsx(theadCva({})),
 			"data-is-sticky": isSticky || void 0,
-			children: [
-				/* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("th", {
-					ref: stickyRef,
-					className: "-mt-px block"
-				}) }),
-				table.getHeaderGroups().map((headerGroup) => {
-					const visibleHeaders = headerGroup.headers.filter((header) => {
-						if (isAnyRowSelected && header.index > 0) return false;
-						return header.column.getIsVisible();
-					});
-					return /* @__PURE__ */ jsx("tr", {
-						className: clsx(tableHeadRowCva({})),
-						children: visibleHeaders.map((header_0, index) => {
-							const columnMeta = header_0.column.columnDef.meta ?? {};
-							return /* @__PURE__ */ jsx("th", {
-								colSpan: isAnyRowSelected ? columnCount : header_0.colSpan,
-								tabIndex: -1,
-								className: clsx(tableHeadDataCva({ hasRightBorder: index > 0 && showCellBorder }), columnMeta.headerClass, columnMeta.width),
-								children: isAnyRowSelected ? /* @__PURE__ */ jsx(ActionHeader, { table }) : /* @__PURE__ */ jsxs("button", {
-									type: "button",
-									"aria-label": "Sort column",
-									className: clsx("flex select-none items-center gap-1 text-text-default-1", header_0.column.getCanSort() ? "h-6 cursor-pointer rounded-xs px-1 hover:bg-elevation-fill-default-2" : "cursor-default", columnMeta.sortClass),
-									onClick: header_0.column.getToggleSortingHandler(),
-									children: [typeof header_0.column.columnDef.header === "function" ? flexRender(header_0.column.columnDef.header, header_0.getContext()) : /* @__PURE__ */ jsx(HeaderText, { children: header_0.column.columnDef.header }), {
-										asc: /* @__PURE__ */ jsx(ChevronUpIcon, {
-											width: 18,
-											height: 18
-										}),
-										desc: /* @__PURE__ */ jsx(ChevronDownIcon, {
-											width: 18,
-											height: 18
-										})
-									}[header_0.column.getIsSorted()] ?? null]
+			children: [/* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("th", {
+				ref: stickyRef,
+				className: "-mt-px block"
+			}) }), table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", {
+				className: clsx(tableHeadRowCva({})),
+				children: headerGroup.headers.filter((header) => {
+					if (isAnyRowSelected && header.index > 0) return false;
+					return header.column.getIsVisible();
+				}).map((header_0, index) => {
+					const columnMeta = header_0.column.columnDef.meta ?? {};
+					return /* @__PURE__ */ jsx("th", {
+						colSpan: isAnyRowSelected ? columnCount : header_0.colSpan,
+						tabIndex: -1,
+						className: clsx(tableHeadDataCva({ hasRightBorder: index > 0 && showCellBorder }), columnMeta.headerClass, columnMeta.width),
+						children: isAnyRowSelected ? /* @__PURE__ */ jsx(ActionHeader, { table }) : /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							"aria-label": "Sort column",
+							className: clsx("flex select-none items-center gap-1 text-text-default-1", header_0.column.getCanSort() ? "h-6 cursor-pointer rounded-xs px-1 hover:bg-elevation-fill-default-2" : "cursor-default", columnMeta.sortClass),
+							onClick: header_0.column.getToggleSortingHandler(),
+							children: [typeof header_0.column.columnDef.header === "function" ? flexRender(header_0.column.columnDef.header, header_0.getContext()) : /* @__PURE__ */ jsx(HeaderText, { children: header_0.column.columnDef.header }), {
+								asc: /* @__PURE__ */ jsx(ChevronUpIcon, {
+									width: 18,
+									height: 18
+								}),
+								desc: /* @__PURE__ */ jsx(ChevronDownIcon, {
+									width: 18,
+									height: 18
 								})
-							}, header_0.id);
+							}[header_0.column.getIsSorted()] ?? null]
 						})
-					}, headerGroup.id);
-				}),
-				showFilterRow && table.getHeaderGroups().map((headerGroup_0) => {
-					return /* @__PURE__ */ jsx(TableColumnFilterRow, {
-						headers: headerGroup_0.headers.filter((header_1) => header_1.column.getIsVisible()),
-						filterForm,
-						filterDefs,
-						tableHeadDataCva,
-						rowClassName: clsx(tableHeadRowCva({})),
-						cellClassName: headerFilterCellClassName,
-						showCellBorder
-					}, `${headerGroup_0.id}-filters`);
+					}, header_0.id);
 				})
-			]
+			}, headerGroup.id))]
 		}), /* @__PURE__ */ jsx("tbody", {
 			ref,
 			className: "relative",
-			children: table.getRowModel().rows.length === 0 && emptyContent ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
-				colSpan: columnCount,
-				children: emptyContent
-			}) }) : enableDragDrop ? /* @__PURE__ */ jsx(SortableContext, {
+			children: enableDragDrop ? /* @__PURE__ */ jsx(SortableContext, {
 				items: dataIds,
 				strategy: verticalListSortingStrategy,
 				children: table.getRowModel().rows.map((row_0) => /* @__PURE__ */ jsx(DraggableRow, {

package/dist/components/text/Typography/Typography.js

@@ -1,31 +1,16 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { typographyDefinition } from "./typography.cva.js";
-import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/text/Typography/Typography.tsx
-var Typography = (t0) => {
-	const $ = c(4);
-	const { as: t1, className, ...props } = t0;
-	const as = t1 === void 0 ? "p" : t1;
-	const typographyCva = UIOverrides.useCva("typography.cva", typographyDefinition);
-	const Tag = as;
-	const t2 = typographyCva({
-		...props,
-		sizeMobile: props.sizeMobile ?? props.size,
-		className
+var Typography = ({ as = "p", className, ...props }) => {
+	return /* @__PURE__ */ jsx(as, {
+		className: UIOverrides.useCva("typography.cva", typographyDefinition)({
+			...props,
+			sizeMobile: props.sizeMobile ?? props.size,
+			className
+		}),
+		...props
 	});
-	let t3;
-	if ($[0] !== Tag || $[1] !== props || $[2] !== t2) {
-		t3 = /* @__PURE__ */ jsx(Tag, {
-			className: t2,
-			...props
-		});
-		$[0] = Tag;
-		$[1] = props;
-		$[2] = t2;
-		$[3] = t3;
-	} else t3 = $[3];
-	return t3;
 };
 //#endregion
 export { Typography };

package/dist/config/confirmation.context.js

@@ -24,7 +24,7 @@ var Confirmation;
 		const [state, setState] = useState(DEFAULT_STATE);
 		const { t } = useTranslation("ui");
 		const onCancel = () => setState(DEFAULT_STATE);
-		const confirm = useCallback(async ({ heading, description, buttonSize, textAlign, modalClassName, cancelLabel = t(($) => $.ui.confirmation.cancel), confirmLabel = t(($_0) => $_0.ui.confirmation.confirm), confirmVariant, confirmColor, cancelVariant, cancelColor }) => {
+		const confirm = useCallback(async ({ heading, description, buttonSize, textAlign, modalClassName, cancelLabel = t(($) => $.ui.confirmation.cancel), confirmLabel = t(($) => $.ui.confirmation.confirm), confirmVariant, confirmColor, cancelVariant, cancelColor }) => {
 			return new Promise((resolve) => {
 				setState({
 					heading,

package/dist/config/theme.context.js

@@ -1,7 +1,6 @@
 import { useLocalStorage } from "../hooks/useLocalStorage.js";
-import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import { createContext, use, useEffect, useState } from "react";
+import { createContext, use, useCallback, useEffect, useMemo, useState } from "react";
 import { z } from "zod";
 //#region src/config/theme.context.tsx
 var ThemeContext;
@@ -13,108 +12,56 @@ var ThemeContext;
 		"system"
 	]);
 	const ThemeContext = createContext(null);
-	_ThemeContext.ThemeContextProvider = (t0) => {
-		const $ = c(17);
-		const { children, storageKey: t1 } = t0;
-		const storageKey = t1 === void 0 ? DEFAULT_STORAGE_KEY : t1;
-		const [systemTheme, setSystemTheme] = useState(_temp);
-		let t2;
-		if ($[0] !== storageKey) {
-			t2 = {
-				key: storageKey,
-				schema: ThemeSchema
+	_ThemeContext.ThemeContextProvider = ({ children, storageKey = DEFAULT_STORAGE_KEY }) => {
+		const [systemTheme, setSystemTheme] = useState(() => {
+			if (typeof window === "undefined") return;
+			return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+		});
+		const { value: theme, set } = useLocalStorage({
+			key: storageKey,
+			schema: ThemeSchema
+		});
+		const updateTheme = useCallback((theme_0) => {
+			set(theme_0);
+		}, [set]);
+		useEffect(() => {
+			if (typeof window === "undefined") return;
+			const onChange = (event) => {
+				setSystemTheme(event.matches ? "dark" : "light");
 			};
-			$[0] = storageKey;
-			$[1] = t2;
-		} else t2 = $[1];
-		const { value: theme, set } = useLocalStorage(t2);
-		let t3;
-		if ($[2] !== set) {
-			t3 = (theme_0) => {
-				set(theme_0);
+			const media_0 = window.matchMedia("(prefers-color-scheme: dark)");
+			media_0.addEventListener("change", onChange);
+			return () => {
+				media_0.removeEventListener("change", onChange);
 			};
-			$[2] = set;
-			$[3] = t3;
-		} else t3 = $[3];
-		const updateTheme = t3;
-		let t4;
-		let t5;
-		if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-			t4 = () => {
-				if (typeof window === "undefined") return;
-				const onChange = (event) => {
-					setSystemTheme(event.matches ? "dark" : "light");
-				};
-				const media_0 = window.matchMedia("(prefers-color-scheme: dark)");
-				media_0.addEventListener("change", onChange);
-				return () => {
-					media_0.removeEventListener("change", onChange);
-				};
-			};
-			t5 = [];
-			$[4] = t4;
-			$[5] = t5;
-		} else {
-			t4 = $[4];
-			t5 = $[5];
-		}
-		useEffect(t4, t5);
-		let t6;
-		let t7;
-		if ($[6] !== systemTheme || $[7] !== theme) {
-			t6 = () => {
-				document.documentElement.classList.remove("dark");
-				if ((!theme || theme === "system") && systemTheme === "dark" || theme === "dark") {
-					document.documentElement.classList.add("dark");
-					document.documentElement.style.colorScheme = "dark";
-				} else if (theme === "light") {
-					document.documentElement.classList.add("light");
-					document.documentElement.style.colorScheme = "light";
-				} else document.documentElement.style.colorScheme = "light";
-			};
-			t7 = [theme, systemTheme];
-			$[6] = systemTheme;
-			$[7] = theme;
-			$[8] = t6;
-			$[9] = t7;
-		} else {
-			t6 = $[8];
-			t7 = $[9];
-		}
-		useEffect(t6, t7);
-		const t8 = theme ?? "system";
-		let t9;
-		if ($[10] !== systemTheme || $[11] !== t8 || $[12] !== updateTheme) {
-			t9 = {
-				theme: t8,
-				systemTheme,
-				updateTheme
-			};
-			$[10] = systemTheme;
-			$[11] = t8;
-			$[12] = updateTheme;
-			$[13] = t9;
-		} else t9 = $[13];
-		const contextValue = t9;
-		let t10;
-		if ($[14] !== children || $[15] !== contextValue) {
-			t10 = /* @__PURE__ */ jsx(ThemeContext.Provider, {
-				value: contextValue,
-				children
-			});
-			$[14] = children;
-			$[15] = contextValue;
-			$[16] = t10;
-		} else t10 = $[16];
-		return t10;
+		}, []);
+		useEffect(() => {
+			document.documentElement.classList.remove("dark");
+			if ((!theme || theme === "system") && systemTheme === "dark" || theme === "dark") {
+				document.documentElement.classList.add("dark");
+				document.documentElement.style.colorScheme = "dark";
+			} else if (theme === "light") {
+				document.documentElement.classList.add("light");
+				document.documentElement.style.colorScheme = "light";
+			} else document.documentElement.style.colorScheme = "light";
+		}, [theme, systemTheme]);
+		const contextValue = useMemo(() => ({
+			theme: theme ?? "system",
+			systemTheme,
+			updateTheme
+		}), [
+			theme,
+			systemTheme,
+			updateTheme
+		]);
+		return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+			value: contextValue,
+			children
+		});
 	};
 	_ThemeContext.useTheme = () => {
 		return use(ThemeContext);
 	};
 })(ThemeContext || (ThemeContext = {}));
-function _temp() {
-	if (typeof window === "undefined") return;
-	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
 //#endregion
 export { ThemeContext };

package/dist/config/uiConfig.context.d.ts

@@ -48,6 +48,7 @@ export declare namespace UIConfig {
             setDateValueOnDateSelection?: boolean;
             timeZone?: string;
             todayIconButtonComponent?: DatePickerProps["todayIconButtonComponent"];
+            allowPartialRange?: boolean;
         };
         actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;
         bottomSheet: Pick<BottomSheetProps, "closeDragThreshold" | "closeVelocityThreshold" | "hideThumb" | "headerTypography">;

package/dist/config/uiConfig.context.js

@@ -3,7 +3,6 @@ import { ClockIcon } from "../assets/icons/Clock.js";
 import { DateTimeIcon } from "../assets/icons/DateTime.js";
 import { ObjectUtils } from "../utils/object.utils.js";
 import { useDeepCompareMemo } from "../hooks/useDeepCompare.js";
-import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { createContext, use } from "react";
 //#region src/config/uiConfig.context.tsx
@@ -78,7 +77,8 @@ var UIConfig;
 			setDateValueOnDateSelection: false,
 			timeZone: "clientLocal",
 			granularity: "day",
-			shouldUpdateDateOnMonthYearChange: false
+			shouldUpdateDateOnMonthYearChange: false,
+			allowPartialRange: false
 		},
 		actionModal: {
 			titleTypography: {
@@ -114,42 +114,15 @@ var UIConfig;
 		}
 	};
 	const Context = createContext(DEFAULT_CONFIG);
-	_UIConfig.Provider = (t0) => {
-		const $ = c(9);
-		const { config: t1, children } = t0;
-		let t2;
-		if ($[0] !== t1) {
-			t2 = t1 === void 0 ? {} : t1;
-			$[0] = t1;
-			$[1] = t2;
-		} else t2 = $[1];
-		const config = t2;
+	_UIConfig.Provider = ({ config = {}, children }) => {
 		const parentConfig = use(Context) || DEFAULT_CONFIG;
-		let t3;
-		let t4;
-		if ($[2] !== config || $[3] !== parentConfig) {
-			t3 = () => ObjectUtils.deepConditionalMerge(parentConfig, config, _temp);
-			t4 = [config, parentConfig];
-			$[2] = config;
-			$[3] = parentConfig;
-			$[4] = t3;
-			$[5] = t4;
-		} else {
-			t3 = $[4];
-			t4 = $[5];
-		}
-		const value = useDeepCompareMemo(t3, t4);
-		let t5;
-		if ($[6] !== children || $[7] !== value) {
-			t5 = /* @__PURE__ */ jsx(Context.Provider, {
-				value,
-				children
-			});
-			$[6] = children;
-			$[7] = value;
-			$[8] = t5;
-		} else t5 = $[8];
-		return t5;
+		const value = useDeepCompareMemo(() => {
+			return ObjectUtils.deepConditionalMerge(parentConfig, config, (val) => val !== null && val !== void 0);
+		}, [config, parentConfig]);
+		return /* @__PURE__ */ jsx(Context.Provider, {
+			value,
+			children
+		});
 	};
 	_UIConfig.useConfig = () => {
 		const context = use(Context);
@@ -157,8 +130,5 @@ var UIConfig;
 		return context;
 	};
 })(UIConfig || (UIConfig = {}));
-function _temp(val) {
-	return val !== null && val !== void 0;
-}
 //#endregion
 export { UIConfig };

package/dist/config/uiOverrides.context.d.ts

@@ -158,7 +158,6 @@ export declare namespace UIOverrides {
             cva?: GenericCvaOption;
         };
         formField: {
-            cva?: GenericCvaOption;
             headerCva?: GenericCvaOption;
             errorLabelCva?: GenericCvaOption;
             helperLabelCva?: GenericCvaOption;

package/dist/helpers/dynamicColumns.js

@@ -1,3 +1,4 @@
+import { IntlUtils } from "../utils/intl.utils.js";
 import { StringUtils } from "../utils/string.utils.js";
 import { ZodUtils } from "../utils/zod.utils.js";
 import { DateUtils } from "../utils/date.utils.js";
@@ -11,7 +12,7 @@ var FORMAT_MAP = {
 		return `${DateUtils.formatDate(new Date(value.start))} - ${DateUtils.formatDate(new Date(value.end))}`;
 	},
 	enum: (value) => StringUtils.capitalize(value),
-	number: (value) => value.toLocaleString(i18next.language),
+	number: (value) => IntlUtils.getNumberFormatter(i18next.language).format(value),
 	string: (value) => String(value),
 	boolean: (value) => {
 		const key = `${DEFAULT_NAMESPACE}.${value ? "yes" : "no"}`;

package/dist/hooks/useDebounceCallback.js

@@ -1,59 +1,25 @@
-import { c } from "react/compiler-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 //#region src/hooks/useDebounceCallback.ts
-function useDebounceCallback(callback, t0) {
-	const $ = c(10);
-	let t1;
-	if ($[0] !== t0) {
-		t1 = t0 === void 0 ? {} : t0;
-		$[0] = t0;
-		$[1] = t1;
-	} else t1 = $[1];
-	const { delay: t2 } = t1;
-	const delay = t2 === void 0 ? 500 : t2;
+function useDebounceCallback(callback, { delay = 500 } = {}) {
 	const timeoutRef = useRef(null);
 	const [isDebouncing, setIsDebouncing] = useState(false);
-	let t3;
-	if ($[2] !== callback || $[3] !== delay) {
-		t3 = (...t4) => {
-			const args = t4;
+	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);
-			setIsDebouncing(true);
-			timeoutRef.current = setTimeout(() => {
-				setIsDebouncing(false);
-				callback?.(...args);
-			}, delay);
 		};
-		$[2] = callback;
-		$[3] = delay;
-		$[4] = t3;
-	} else t3 = $[4];
-	const debouncedCallback = t3;
-	let t4;
-	let t5;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = () => () => {
-			if (timeoutRef.current) clearTimeout(timeoutRef.current);
-		};
-		t5 = [];
-		$[5] = t4;
-		$[6] = t5;
-	} else {
-		t4 = $[5];
-		t5 = $[6];
-	}
-	useEffect(t4, t5);
-	let t6;
-	if ($[7] !== debouncedCallback || $[8] !== isDebouncing) {
-		t6 = {
-			callback: debouncedCallback,
-			isDebouncing
-		};
-		$[7] = debouncedCallback;
-		$[8] = isDebouncing;
-		$[9] = t6;
-	} else t6 = $[9];
-	return t6;
+	}, []);
+	return {
+		callback: debouncedCallback,
+		isDebouncing
+	};
 }
 //#endregion
 export { useDebounceCallback };