@povio/ui 3.0.0-rc.3 → 3.1.0

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

@@ -1,4 +1,4 @@
-import { PropsWithChildren, ReactElement } from 'react';
+import { PropsWithChildren } from 'react';
 import { ButtonProps } from '../components/buttons/Button/Button';
 import { CheckboxProps } from '../components/inputs/Checkbox/Checkbox';
 import { DatePickerProps } from '../components/inputs/DateTime/DatePicker/DatePicker';
@@ -11,6 +11,7 @@ import { ToggleProps } from '../components/inputs/Toggle/Toggle';
 import { ActionModalProps } from '../components/overlays/ActionModal/ActionModal';
 import { BottomSheetProps } from '../components/overlays/BottomSheet/BottomSheet';
 import { ToastProps } from '../components/status/Toast/Toast';
+import { ToastPosition } from 'react-toastify';
 import { CellTextProps } from '../components/table/CellText';
 import { HeaderTextProps } from '../components/table/HeaderText';
 import { TagProps } from '../components/text/Tag/Tag';
@@ -19,37 +20,25 @@ export declare namespace UIConfig {
         [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : Exclude<T[P], null | undefined>;
     };
     export interface Options {
-        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" | "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">;
+        radioGroup: Pick<RadioGroupProps, "variant" | "hideLabel">;
+        checkbox: Pick<CheckboxProps, "variant">;
+        select: Pick<SelectBaseProps, "selectionMode" | "isSearchable" | "collapseAfter" | "selectedTagsType" | "hideSearchIcon">;
+        toggle: Pick<ToggleProps, "variant">;
         slider: Pick<SliderProps, "minValue" | "maxValue">;
-        dateInput: Pick<DatePickerProps, "todayIcon" | "todayIconButtonSize" | "todayIconPlacement" | "shouldForceLeadingZeros" | "disableManualEntry" | "shouldUpdateDateOnMonthYearChange" | "granularity" | "autoFixYear" | "fireBlurOnChange"> & {
-            calendarIcon?: ReactElement;
-            dateTimeIcon?: ReactElement;
-            timeIcon?: ReactElement;
-            setDateValueOnDateSelection?: boolean;
-            timeZone?: string;
-            todayIconButtonComponent?: DatePickerProps["todayIconButtonComponent"];
-        };
+        dateInput: Pick<DatePickerProps, "todayIcon" | "shouldForceLeadingZeros" | "disableManualEntry" | "shouldUpdateDateOnMonthYearChange" | "granularity" | "autoFixYear">;
         actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;
         bottomSheet: Pick<BottomSheetProps, "closeDragThreshold" | "closeVelocityThreshold" | "hideThumb" | "headerTypography">;
         tableHeaderText: Pick<HeaderTextProps, "variant" | "size">;
         tableCellText: Pick<CellTextProps, "variant" | "size">;
         tag: Pick<TagProps, "textVariant" | "textSize">;
-        toast: Pick<ToastProps, "variant">;
+        toast: Pick<ToastProps, "variant"> & {
+            position: ToastPosition;
+        };
     }
     interface ProviderProps {
         config?: Partial<Options>;

package/dist/config/uiConfig.context.js

@@ -1,16 +1,11 @@
-import { CalendarIcon } from "../assets/icons/Calendar.js";
-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
 var UIConfig;
 (function(_UIConfig) {
 	const DEFAULT_CONFIG = {
-		renderStaticInput: true,
 		input: {
 			variant: "outlined",
 			as: "default",
@@ -29,47 +24,28 @@ var UIConfig;
 		} },
 		radioGroup: {
 			variant: "default",
-			hideLabel: false,
-			fireBlurOnChange: false
-		},
-		checkbox: {
-			variant: "default",
-			fireBlurOnChange: false
+			hideLabel: false
 		},
+		checkbox: { variant: "default" },
 		select: {
 			selectionMode: "single",
 			isSearchable: false,
 			selectedTagsType: "list",
 			collapseAfter: 3,
-			hideSearchIcon: false,
-			fireBlurOnChange: false
-		},
-		queryAutocomplete: { isInitialQueryDisabled: false },
-		querySelect: { isInitialQueryDisabled: false },
-		toggle: {
-			variant: "default",
-			fireBlurOnChange: false
+			hideSearchIcon: false
 		},
+		toggle: { variant: "default" },
 		slider: {
 			minValue: 0,
 			maxValue: 100
 		},
 		dateInput: {
 			todayIcon: false,
-			todayIconButtonSize: "none",
-			todayIconButtonComponent: "iconButton",
-			todayIconPlacement: "content",
 			shouldForceLeadingZeros: false,
 			disableManualEntry: false,
-			autoFixYear: false,
-			fireBlurOnChange: false,
-			calendarIcon: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-5" }),
-			dateTimeIcon: /* @__PURE__ */ jsx(DateTimeIcon, { className: "size-5" }),
-			timeIcon: /* @__PURE__ */ jsx(ClockIcon, { className: "size-6 text-interactive-text-secondary-idle" }),
-			setDateValueOnDateSelection: false,
-			timeZone: "clientLocal",
+			shouldUpdateDateOnMonthYearChange: false,
 			granularity: "day",
-			shouldUpdateDateOnMonthYearChange: false
+			autoFixYear: false
 		},
 		actionModal: {
 			titleTypography: {
@@ -99,45 +75,21 @@ var UIConfig;
 			textVariant: "default",
 			textSize: "label-2"
 		},
-		toast: { variant: "outlined" }
+		toast: {
+			variant: "outlined",
+			position: "top-right"
+		}
 	};
 	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);
@@ -145,8 +97,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

@@ -1,7 +1,7 @@
 import { ClassProp } from 'class-variance-authority/types';
 import { PropsWithChildren } from 'react';
 import { ButtonConfig, ButtonContentConfig, ButtonIconSizeConfig, ButtonSizeConfig } from '../components/buttons/Button/button.cva';
-import { StatusIconConfig, StatusSeparatorConfig, ToastConfig } from '../components/status/Toast/toast.cva';
+import { StatusIconConfig, StatusSeparatorConfig, ToastConfig, ToastContainerConfig } from '../components/status/Toast/toast.cva';
 import { CompoundMapper, ConfigSchema } from '../utils/compoundMapper';
 import { StyleMergeUtils } from '../utils/style-merge.util';
 export declare namespace UIOverrides {
@@ -41,14 +41,10 @@ export declare namespace UIOverrides {
             cva?: GenericCvaOption;
             iconCva?: GenericCvaOption;
             typography?: Mapper;
-            contentClassName?: Mapper;
         };
         radio: {
             cva?: GenericCvaOption;
-            contentWrapperCva?: GenericCvaOption;
-            contentRowCva?: GenericCvaOption;
             typography?: Mapper;
-            contentClassName?: Mapper;
         };
         status: {
             iconCva?: CvaOption<StatusIconConfig>;
@@ -56,6 +52,7 @@ export declare namespace UIOverrides {
         };
         toast: {
             cva?: CvaOption<ToastConfig>;
+            containerCva?: CvaOption<ToastContainerConfig>;
             buttonColor?: Mapper;
         };
         alert: {
@@ -63,20 +60,9 @@ export declare namespace UIOverrides {
         };
         input: {
             baseCva?: GenericCvaOption;
-            clearClassCva?: GenericCvaOption;
-            contentWrapperCva?: GenericCvaOption;
             sizeCva?: GenericCvaOption;
             sideCva?: GenericCvaOption;
         };
-        textArea: {
-            wrapperCva?: GenericCvaOption;
-        };
-        tooltipWrapper: {
-            triggerCva?: GenericCvaOption;
-        };
-        datePickerInput: {
-            contentRowCva?: GenericCvaOption;
-        };
         label: {
             cva?: GenericCvaOption;
             typography?: Mapper;
@@ -84,7 +70,6 @@ export declare namespace UIOverrides {
         toggle: {
             cva?: GenericCvaOption;
             typography?: Mapper;
-            contentClassName?: Mapper;
         };
         typography: {
             cva?: GenericCvaOption;
@@ -96,6 +81,7 @@ export declare namespace UIOverrides {
             cva?: GenericCvaOption;
         };
         table: {
+            theadCva?: GenericCvaOption;
             headRowCva?: GenericCvaOption;
             headDataCva?: GenericCvaOption;
             rowCva?: GenericCvaOption;
@@ -156,14 +142,18 @@ export declare namespace UIOverrides {
             cva?: GenericCvaOption;
         };
         formField: {
-            headerCva?: GenericCvaOption;
             errorLabelCva?: GenericCvaOption;
             helperLabelCva?: GenericCvaOption;
         };
         select: {
             listBoxItemCva?: GenericCvaOption;
-            popoverCva?: GenericCvaOption;
-            tagsContentWrapperCva?: GenericCvaOption;
+        };
+        progressBar: {
+            cva?: GenericCvaOption;
+            trackWrapperCva?: GenericCvaOption;
+            trackCva?: GenericCvaOption;
+            fillCva?: GenericCvaOption;
+            valueCva?: GenericCvaOption;
         };
     }
     export type Config = Partial<Options>;

package/dist/config/uiOverrides.context.js

@@ -1,27 +1,17 @@
 import { StyleMergeUtils } from "../utils/style-merge.util.js";
-import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { createContext, use } from "react";
+import { createContext, use, useMemo } from "react";
 import { cva } from "class-variance-authority";
 //#region src/config/uiOverrides.context.tsx
 var UIOverrides;
 (function(_UIOverrides) {
 	const Context = createContext(null);
-	_UIOverrides.Provider = (t0) => {
-		const $ = c(3);
-		const { children, config } = t0;
-		let t1;
-		if ($[0] !== children || $[1] !== config) {
-			t1 = /* @__PURE__ */ jsx(Context.Provider, {
-				value: config,
-				children
-			});
-			$[0] = children;
-			$[1] = config;
-			$[2] = t1;
-		} else t1 = $[2];
-		return t1;
+	_UIOverrides.Provider = ({ children, config }) => {
+		return /* @__PURE__ */ jsx(Context.Provider, {
+			value: config,
+			children
+		});
 	};
 	const useConfig = () => {
 		return use(Context);
@@ -55,51 +45,21 @@ var UIOverrides;
 		return "base" in item;
 	};
 	function useCva(key, fallback) {
-		const $ = c(6);
 		const override = useCvaOverride(key);
-		let t0;
-		bb0: {
-			if (isCvaFunction(override)) {
-				t0 = override;
-				break bb0;
-			}
-			if (isCvaFunction(fallback)) {
-				t0 = fallback;
-				break bb0;
-			}
-			if (!isDefinition(fallback)) {
-				t0 = _temp;
-				break bb0;
-			}
+		return useMemo(() => {
+			if (isCvaFunction(override)) return override;
+			if (isCvaFunction(fallback)) return fallback;
+			if (!isDefinition(fallback)) return (() => "");
 			const definition = fallback;
 			const typedOverride = override;
 			if (isCvaOverrideConfig(typedOverride)) {
-				let t1;
-				if ($[0] !== definition || $[1] !== typedOverride) {
-					const mergedDefinition = StyleMergeUtils.mergeCvaDefinition(definition, typedOverride);
-					t1 = cva(clsx(mergedDefinition.base), mergedDefinition.config);
-					$[0] = definition;
-					$[1] = typedOverride;
-					$[2] = t1;
-				} else t1 = $[2];
-				t0 = t1;
-				break bb0;
+				const mergedDefinition = StyleMergeUtils.mergeCvaDefinition(definition, typedOverride);
+				return cva(clsx(mergedDefinition.base), mergedDefinition.config);
 			}
-			let t1;
-			if ($[3] !== definition.base || $[4] !== definition.config) {
-				t1 = cva(clsx(definition.base), definition.config);
-				$[3] = definition.base;
-				$[4] = definition.config;
-				$[5] = t1;
-			} else t1 = $[5];
-			t0 = t1;
-		}
-		return t0;
+			return cva(clsx(definition.base), definition.config);
+		}, [fallback, override]);
 	}
 	_UIOverrides.useCva = useCva;
-	function _temp() {
-		return "";
-	}
 	_UIOverrides.useMapper = (key, fallback) => {
 		const uiOverrides = useConfig();
 		if (!uiOverrides) return fallback;

package/dist/helpers/dynamicInputs.d.ts

@@ -21,14 +21,14 @@ export type AllowedComponentType<TZodType extends z.ZodType> = ZodUtils.ZodTypeS
     datetime: "datePicker" | "dateTimePicker" | "timePicker";
     dateRange: "dateRangePicker";
     boolean: "toggle" | "checkbox";
-    number: "numberInput" | "slider" | "select" | "querySelect" | "autocomplete" | "queryAutocomplete" | "segment";
-    enum: "select" | "querySelect" | "autocomplete" | "segment";
-    string: "textInput" | "passwordInput" | "textArea" | "select" | "querySelect" | "autocomplete" | "queryAutocomplete" | "segment";
+    number: "numberInput" | "slider" | "select" | "autocomplete" | "queryAutocomplete" | "segment";
+    enum: "select" | "autocomplete" | "segment";
+    string: "textInput" | "passwordInput" | "textArea" | "select" | "autocomplete" | "queryAutocomplete" | "segment";
     email: "textInput";
-    array: "select" | "querySelect" | "autocomplete" | "queryAutocomplete" | "segment";
+    array: "select" | "autocomplete" | "queryAutocomplete" | "segment";
     object: InputComponentType;
     unknown: InputComponentType;
-    uuid: "select" | "querySelect" | "autocomplete" | "queryAutocomplete" | "segment";
+    uuid: "select" | "autocomplete" | "queryAutocomplete" | "segment";
 }>;
 interface DynamicInputDefBase<TProps> {
     label?: string;

package/dist/helpers/dynamicInputs.js

@@ -81,7 +81,6 @@ var getDefaultProps = (componentType, keyType) => {
 	].includes(componentType)) props.items = getDefaultSelectionItems(unwrappedType);
 	if ([
 		"select",
-		"querySelect",
 		"autocomplete",
 		"queryAutocomplete",
 		"segment"
@@ -147,8 +146,6 @@ var populateInputDef = (schema, schemaKey, value, options) => {
 	const inputWrapper = value.inputWrapper ?? options.globalInputWrapper;
 	if ("render" in value) return {
 		name,
-		label,
-		placeholder,
 		render: value.render
 	};
 	const schemaKeyType = schema.shape[schemaKey];

package/dist/hooks/useAutosave.d.ts

@@ -3,8 +3,7 @@ export interface UseAutosaveProps<TFieldValues extends FieldValues = FieldValues
     form: UseFormReturn<TFieldValues, TContext, TTransformedValues>;
     delay?: number;
     enabled?: boolean;
-    trigger?: "change" | "blur";
     onSave: (data: Partial<TTransformedValues>) => Promise<TResponse>;
     onSaveSuccess?: () => void;
 }
-export declare function useAutosave<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues, TResponse = unknown>({ form, delay, enabled, trigger, onSave, onSaveSuccess, }: UseAutosaveProps<TFieldValues, TContext, TTransformedValues, TResponse>): void;
+export declare function useAutosave<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues, TResponse = unknown>({ form, delay, enabled, onSave, onSaveSuccess, }: UseAutosaveProps<TFieldValues, TContext, TTransformedValues, TResponse>): void;

package/dist/hooks/useAutosave.js

@@ -22,19 +22,12 @@ function diffLeftOnly(left, right, shallowKeys) {
 	}, {});
 	return ObjectUtils.isEmpty(result) ? void 0 : result;
 }
-function useAutosave({ form, delay = 500, enabled = true, trigger = "change", onSave, onSaveSuccess }) {
+function useAutosave({ form, delay = 500, enabled = true, onSave, onSaveSuccess }) {
 	const timeoutRef = useRef(void 0);
-	const previousBlurTriggerFieldsRef = useRef(void 0);
 	const { control, reset, handleSubmit } = form;
-	const { dirtyFields, touchedFields, defaultValues } = useFormState({ control });
-	const formData = useWatch({ control });
+	const { dirtyFields, defaultValues } = useFormState({ control });
 	useEffect(() => {
 		if (!enabled || Object.keys(dirtyFields).length === 0) return;
-		if (trigger === "blur") {
-			const blurTriggerFields = JSON.stringify(touchedFields);
-			if (Object.keys(touchedFields).length === 0 || previousBlurTriggerFieldsRef.current === blurTriggerFields) return;
-			previousBlurTriggerFieldsRef.current = blurTriggerFields;
-		}
 		if (timeoutRef.current) clearTimeout(timeoutRef.current);
 		timeoutRef.current = setTimeout(() => {
 			handleSubmit(async (data) => {
@@ -59,13 +52,12 @@ function useAutosave({ form, delay = 500, enabled = true, trigger = "change", on
 	}, [
 		defaultValues,
 		dirtyFields,
-		trigger === "change" ? formData : touchedFields,
+		useWatch({ control }),
 		delay,
 		onSave,
 		handleSubmit,
 		enabled,
-		reset,
-		trigger
+		reset
 	]);
 }
 //#endregion

package/dist/hooks/useBreakpoint.js

@@ -1,4 +1,4 @@
-import { c } from "react/compiler-runtime";
+import { useMemo } from "react";
 import { useMediaQuery } from "react-responsive";
 //#region src/hooks/useBreakpoint.ts
 var breakpoints = null;
@@ -22,22 +22,9 @@ function getBreakpoints() {
 	return breakpoints;
 }
 function useBreakpoint(breakpointKey) {
-	const $ = c(3);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = getBreakpoints();
-		$[0] = t0;
-	} else t0 = $[0];
-	const breakpoints = t0;
+	const breakpoints = useMemo(() => getBreakpoints(), []);
 	if (!breakpoints) throw new Error("Tailwind config is missing theme.screens");
-	const t1 = `(min-width: ${breakpoints[breakpointKey]})`;
-	let t2;
-	if ($[1] !== t1) {
-		t2 = { query: t1 };
-		$[1] = t1;
-		$[2] = t2;
-	} else t2 = $[2];
-	return useMediaQuery(t2);
+	return useMediaQuery({ query: `(min-width: ${breakpoints[breakpointKey]})` });
 }
 //#endregion
 export { useBreakpoint };

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 };