@povio/ui 2.3.0 → 2.3.2-rc.1

package/dist/components/table/Table.js

@@ -1,3 +1,4 @@
+"use no memo";
 import { ChevronDownIcon } from "../../assets/icons/ChevronDown.js";
 import { ChevronUpIcon } from "../../assets/icons/ChevronUp.js";
 import { UIStyle } from "../../config/uiStyle.context.js";
@@ -26,8 +27,8 @@ var CustomCellContext = (context) => {
 		value: context.getValue()
 	};
 };
-var CellRender = (Comp, props) => {
-	const rendered = typeof Comp === "function" ? Comp(props) : Comp;
+var renderCell = (Comp, props) => {
+	const rendered = flexRender(Comp, props);
 	return typeof rendered === "string" ? /* @__PURE__ */ jsx(CellText, { children: rendered }) : rendered;
 };
 var RowDragHandleCell = ({ rowId }) => {
@@ -68,7 +69,7 @@ var DraggableRow = ({ row, showCellBorder, onRowClick, onDoubleClick, tableRowCv
 			return /* @__PURE__ */ jsx("td", {
 				tabIndex: -1,
 				className: clsx(tableDataCva({ hasRightBorder: cellIndex > 0 && showCellBorder }), columnMeta.cellClass, columnMeta.width),
-				children: CellRender(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
+				children: renderCell(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
 			}, cell.id);
 		})
 	});
@@ -154,8 +155,8 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 		if (!active || !over || active.id === over.id) return;
 		if (getRowId && (onReorder || onDragEnd)) {
 			if (onReorder) {
-				const oldIndex = items.findIndex((item) => getRowId(item) === active.id);
-				const newIndex = items.findIndex((item) => getRowId(item) === over.id);
+				const oldIndex = items.findIndex((item_0) => getRowId(item_0) === active.id);
+				const newIndex = items.findIndex((item_1) => getRowId(item_1) === over.id);
 				if (oldIndex !== -1 && newIndex !== -1) onReorder(arrayMove(items, oldIndex, newIndex));
 			}
 			onDragEnd?.(event);
@@ -185,18 +186,18 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 				children: headerGroup.headers.filter((header) => {
 					if (isAnyRowSelected && header.index > 0) return false;
 					return header.column.getIsVisible();
-				}).map((header, index) => {
-					const columnMeta = header.column.columnDef.meta ?? {};
+				}).map((header_0, index) => {
+					const columnMeta = header_0.column.columnDef.meta ?? {};
 					return /* @__PURE__ */ jsx("th", {
-						colSpan: isAnyRowSelected ? columnCount : header.colSpan,
+						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.column.getCanSort() ? "h-6 cursor-pointer rounded-xs px-1 hover:bg-elevation-fill-default-2" : "cursor-default", columnMeta.sortClass),
-							onClick: header.column.getToggleSortingHandler(),
-							children: [typeof header.column.columnDef.header === "function" ? flexRender(header.column.columnDef.header, header.getContext()) : /* @__PURE__ */ jsx(HeaderText, { children: header.column.columnDef.header }), {
+							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
@@ -205,9 +206,9 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 									width: 18,
 									height: 18
 								})
-							}[header.column.getIsSorted()] ?? null]
+							}[header_0.column.getIsSorted()] ?? null]
 						})
-					}, header.id);
+					}, header_0.id);
 				})
 			}, headerGroup.id))]
 		}), /* @__PURE__ */ jsx("tbody", {
@@ -216,8 +217,8 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 			children: enableDragDrop ? /* @__PURE__ */ jsx(SortableContext, {
 				items: dataIds,
 				strategy: verticalListSortingStrategy,
-				children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(DraggableRow, {
-					row,
+				children: table.getRowModel().rows.map((row_0) => /* @__PURE__ */ jsx(DraggableRow, {
+					row: row_0,
 					showCellBorder,
 					onRowClick,
 					onDoubleClick,
@@ -226,29 +227,29 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 					tableDataCva,
 					hasOnClick,
 					...props
-				}, row.id))
-			}) : table.getRowModel().rows.map((row) => {
+				}, row_0.id))
+			}) : table.getRowModel().rows.map((row_1) => {
 				return /* @__PURE__ */ jsx("tr", {
 					className: clsx(tableRowCva({ ...props })),
 					onClick: () => {
 						if (onRowClick) {
-							onRowClick(row.original);
+							onRowClick(row_1.original);
 							return;
 						}
-						if (row.getCanSelect()) row.toggleSelected();
+						if (row_1.getCanSelect()) row_1.toggleSelected();
 					},
-					onDoubleClick: () => onDoubleClick?.(row.original),
-					"data-clickable": hasOnClick || row.getCanSelect() || void 0,
-					"data-selected": row.getIsSelected() || void 0,
-					children: row.getVisibleCells().map((cell, cellIndex) => {
-						const columnMeta = cell.column.columnDef.meta ?? {};
+					onDoubleClick: () => onDoubleClick?.(row_1.original),
+					"data-clickable": hasOnClick || row_1.getCanSelect() || void 0,
+					"data-selected": row_1.getIsSelected() || void 0,
+					children: row_1.getVisibleCells().map((cell, cellIndex) => {
+						const columnMeta_0 = cell.column.columnDef.meta ?? {};
 						return /* @__PURE__ */ jsx("td", {
 							tabIndex: -1,
-							className: clsx(tableDataCva({ hasRightBorder: cellIndex > 0 && showCellBorder }), columnMeta.cellClass, columnMeta.width),
-							children: CellRender(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
+							className: clsx(tableDataCva({ hasRightBorder: cellIndex > 0 && showCellBorder }), columnMeta_0.cellClass, columnMeta_0.width),
+							children: renderCell(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
 						}, cell.id);
 					})
-				}, row.id);
+				}, row_1.id);
 			})
 		})]
 	});

package/dist/components/text/Link/Link.js

@@ -1,21 +1,33 @@
 import { UIStyle } from "../../../config/uiStyle.context.js";
 import { LinkContext } from "../../../config/link.context.js";
 import { link } from "./link.cva.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { Link } from "react-aria-components";
 //#region src/components/text/Link/Link.tsx
-var Link$1 = ({ variant, ...props }) => {
+var Link$1 = (t0) => {
+	const $ = c(4);
+	const { variant, ...props } = t0;
 	const linkContext = LinkContext.useLinkContext();
 	const linkCva = UIStyle.useCva("link.cva", link);
 	const LinkComponent = linkContext?.LinkComponent ?? Link;
 	if (!props.to && props.href) props.to = props.href;
-	return /* @__PURE__ */ jsx(LinkComponent, {
-		...props,
-		className: linkCva({
-			variant,
-			className: props.className
-		})
+	const t1 = linkCva({
+		variant,
+		className: props.className
 	});
+	let t2;
+	if ($[0] !== LinkComponent || $[1] !== props || $[2] !== t1) {
+		t2 = /* @__PURE__ */ jsx(LinkComponent, {
+			...props,
+			className: t1
+		});
+		$[0] = LinkComponent;
+		$[1] = props;
+		$[2] = t1;
+		$[3] = t2;
+	} else t2 = $[3];
+	return t2;
 };
 //#endregion
 export { Link$1 as Link };

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

@@ -1,16 +1,31 @@
 import { UIStyle } from "../../../config/uiStyle.context.js";
 import { typography } 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 = ({ as = "p", className, ...props }) => {
-	return /* @__PURE__ */ jsx(as, {
-		className: UIStyle.useCva("typography.cva", typography)({
-			...props,
-			sizeMobile: props.sizeMobile ?? props.size,
-			className
-		}),
-		...props
+var Typography = (t0) => {
+	const $ = c(4);
+	const { as: t1, className, ...props } = t0;
+	const as = t1 === void 0 ? "p" : t1;
+	const typographyCva = UIStyle.useCva("typography.cva", typography);
+	const Tag = as;
+	const t2 = typographyCva({
+		...props,
+		sizeMobile: props.sizeMobile ?? props.size,
+		className
 	});
+	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(($) => $.ui.confirmation.confirm), confirmVariant, confirmColor, cancelVariant, cancelColor }) => {
+		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 }) => {
 			return new Promise((resolve) => {
 				setState({
 					heading,

package/dist/config/link.context.js

@@ -1,17 +1,31 @@
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import { createContext, use, useMemo } from "react";
+import { createContext, use } from "react";
 //#region src/config/link.context.tsx
 var LinkContext;
 (function(_LinkContext) {
 	const LinkContextInternal = createContext(null);
-	_LinkContext.LinkContextProvider = ({ children, LinkComponent }) => {
-		const value = useMemo(() => {
-			return { LinkComponent };
-		}, [LinkComponent]);
-		return /* @__PURE__ */ jsx(LinkContextInternal.Provider, {
-			value,
-			children
-		});
+	_LinkContext.LinkContextProvider = (t0) => {
+		const $ = c(5);
+		const { children, LinkComponent } = t0;
+		let t1;
+		if ($[0] !== LinkComponent) {
+			t1 = { LinkComponent };
+			$[0] = LinkComponent;
+			$[1] = t1;
+		} else t1 = $[1];
+		const value = t1;
+		let t2;
+		if ($[2] !== children || $[3] !== value) {
+			t2 = /* @__PURE__ */ jsx(LinkContextInternal.Provider, {
+				value,
+				children
+			});
+			$[2] = children;
+			$[3] = value;
+			$[4] = t2;
+		} else t2 = $[4];
+		return t2;
 	};
 	_LinkContext.useLinkContext = () => {
 		return use(LinkContextInternal);

package/dist/config/router.context.js

@@ -1,31 +1,57 @@
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import { createContext, use, useMemo } from "react";
+import { createContext, use } from "react";
 import { RouterProvider } from "react-aria";
 //#region src/config/router.context.tsx
 var UIRouter;
 (function(_UIRouter) {
 	const UIRouterContext = createContext(null);
-	_UIRouter.UIRouterProvider = ({ children, push, replace, searchString }) => {
-		const searchParams = useMemo(() => {
-			return new URLSearchParams(searchString);
-		}, [searchString]);
-		return /* @__PURE__ */ jsx(UIRouterContext, {
-			value: useMemo(() => ({
+	_UIRouter.UIRouterProvider = (t0) => {
+		const $ = c(13);
+		const { children, push, replace, searchString } = t0;
+		let t1;
+		if ($[0] !== searchString) {
+			t1 = new URLSearchParams(searchString);
+			$[0] = searchString;
+			$[1] = t1;
+		} else t1 = $[1];
+		const searchParams = t1;
+		let t2;
+		if ($[2] !== push || $[3] !== replace || $[4] !== searchParams || $[5] !== searchString) {
+			t2 = {
 				searchParams,
 				push,
 				searchString,
 				replace
-			}), [
-				searchParams,
-				push,
-				searchString,
-				replace
-			]),
-			children: /* @__PURE__ */ jsx(RouterProvider, {
+			};
+			$[2] = push;
+			$[3] = replace;
+			$[4] = searchParams;
+			$[5] = searchString;
+			$[6] = t2;
+		} else t2 = $[6];
+		const value = t2;
+		let t3;
+		if ($[7] !== children || $[8] !== push) {
+			t3 = /* @__PURE__ */ jsx(RouterProvider, {
 				navigate: push,
 				children
-			})
-		});
+			});
+			$[7] = children;
+			$[8] = push;
+			$[9] = t3;
+		} else t3 = $[9];
+		let t4;
+		if ($[10] !== t3 || $[11] !== value) {
+			t4 = /* @__PURE__ */ jsx(UIRouterContext, {
+				value,
+				children: t3
+			});
+			$[10] = t3;
+			$[11] = value;
+			$[12] = t4;
+		} else t4 = $[12];
+		return t4;
 	};
 	_UIRouter.useUIRouter = () => {
 		const context = use(UIRouterContext);

package/dist/config/theme.context.js

@@ -1,6 +1,7 @@
 import { useLocalStorage } from "../hooks/useLocalStorage.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import { createContext, use, useCallback, useEffect, useMemo, useState } from "react";
+import { createContext, use, useEffect, useState } from "react";
 import { z } from "zod";
 //#region src/config/theme.context.tsx
 var ThemeContext;
@@ -12,56 +13,108 @@ var ThemeContext;
 		"system"
 	]);
 	const ThemeContext = createContext(null);
-	_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) => {
-			set(theme);
-		}, [set]);
-		useEffect(() => {
-			if (typeof window === "undefined") return;
-			const onChange = (event) => {
-				setSystemTheme(event.matches ? "dark" : "light");
+	_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
 			};
-			const media = window.matchMedia("(prefers-color-scheme: dark)");
-			media.addEventListener("change", onChange);
-			return () => {
-				media.removeEventListener("change", onChange);
+			$[0] = storageKey;
+			$[1] = t2;
+		} else t2 = $[1];
+		const { value: theme, set } = useLocalStorage(t2);
+		let t3;
+		if ($[2] !== set) {
+			t3 = (theme_0) => {
+				set(theme_0);
 			};
-		}, []);
-		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
-		});
+			$[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;
 	};
 	_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

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactElement } from 'react';
 import { ButtonProps } from '../components/buttons/Button/Button';
 import { CheckboxProps } from '../components/inputs/Checkbox/Checkbox';
 import { DatePickerProps } from '../components/inputs/DateTime/DatePicker/DatePicker';
@@ -19,15 +19,29 @@ export declare namespace UIConfig {
         [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : Exclude<T[P], null | undefined>;
     };
     export interface Options {
-        input: Pick<TextInputProps, "variant" | "isClearable" | "hideLabel" | "as" | "size">;
+        renderStaticInput: boolean;
+        input: Pick<TextInputProps, "variant" | "isClearable" | "hideLabel" | "as" | "size"> & {
+            alwaysShowClear?: boolean;
+        };
         button: Pick<ButtonProps, "variant" | "size">;
         numberInput: Pick<NumberInputProps, "formatOptions">;
-        radioGroup: Pick<RadioGroupProps, "variant" | "hideLabel">;
-        checkbox: Pick<CheckboxProps, "variant">;
-        select: Pick<SelectBaseProps, "selectionMode" | "isSearchable" | "collapseAfter" | "selectedTagsType" | "hideSearchIcon">;
-        toggle: Pick<ToggleProps, "variant">;
+        radioGroup: Pick<RadioGroupProps, "variant" | "hideLabel" | "fireBlurOnChange">;
+        checkbox: Pick<CheckboxProps, "variant" | "fireBlurOnChange">;
+        select: Pick<SelectBaseProps, "selectionMode" | "isSearchable" | "collapseAfter" | "selectedTagsType" | "hideSearchIcon" | "fireBlurOnChange">;
+        queryAutocomplete: {
+            isInitialQueryDisabled?: boolean;
+        };
+        querySelect: {
+            isInitialQueryDisabled?: boolean;
+        };
+        toggle: Pick<ToggleProps, "variant" | "fireBlurOnChange">;
         slider: Pick<SliderProps, "minValue" | "maxValue">;
-        dateInput: Pick<DatePickerProps, "todayIcon" | "shouldForceLeadingZeros" | "disableManualEntry" | "shouldUpdateDateOnMonthYearChange" | "granularity" | "autoFixYear">;
+        dateInput: Pick<DatePickerProps, "todayIcon" | "todayIconButtonSize" | "todayIconPlacement" | "shouldForceLeadingZeros" | "disableManualEntry" | "shouldUpdateDateOnMonthYearChange" | "granularity" | "autoFixYear" | "fireBlurOnChange"> & {
+            calendarIcon?: ReactElement;
+            dateTimeIcon?: ReactElement;
+            timeIcon?: ReactElement;
+            setDateValueOnDateSelection?: boolean;
+        };
         actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;
         bottomSheet: Pick<BottomSheetProps, "closeDragThreshold" | "closeVelocityThreshold" | "hideThumb" | "headerTypography">;
         tableHeaderText: Pick<HeaderTextProps, "variant" | "size">;