@povio/ui 3.1.0 → 3.2.0

package/dist/components/inputs/Selection/shared/SelectDesktop.js

@@ -6,159 +6,414 @@ import "./useSelectItems.js";
 import { SelectContext } from "./select.context.js";
 import { SelectInput } from "./SelectInput.js";
 import { SelectListBox } from "./SelectListBox.js";
+import { selectPopoverDefinition } from "./selectDesktop.cva.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { Fragment as Fragment$1, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, useLayoutEffect, useRef, useState } from "react";
 import { ComboBox, DialogTrigger, Popover } from "react-aria-components";
 import { useLabel, usePreventScroll } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 //#region src/components/inputs/Selection/shared/SelectDesktop.tsx
-var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }) => {
-	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, isSearchable, isClearable, isLoading, as, size, collapseAfter, selectedTagsType } = props;
+var SelectDesktop = (t0) => {
+	const $ = c(129);
+	let containerClassName;
+	let customTrigger;
+	let error;
+	let ignoreTriggerWidth;
+	let inputClassName;
+	let leadingContent;
+	let onBlur;
+	let onFocusCapture;
+	let onMouseEnter;
+	let props;
+	let ref;
+	let showSelectionContent;
+	let trailingContent;
+	if ($[0] !== t0) {
+		({ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, leadingContent, trailingContent, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props} = t0);
+		$[0] = t0;
+		$[1] = containerClassName;
+		$[2] = customTrigger;
+		$[3] = error;
+		$[4] = ignoreTriggerWidth;
+		$[5] = inputClassName;
+		$[6] = leadingContent;
+		$[7] = onBlur;
+		$[8] = onFocusCapture;
+		$[9] = onMouseEnter;
+		$[10] = props;
+		$[11] = ref;
+		$[12] = showSelectionContent;
+		$[13] = trailingContent;
+	} else {
+		containerClassName = $[1];
+		customTrigger = $[2];
+		error = $[3];
+		ignoreTriggerWidth = $[4];
+		inputClassName = $[5];
+		leadingContent = $[6];
+		onBlur = $[7];
+		onFocusCapture = $[8];
+		onMouseEnter = $[9];
+		props = $[10];
+		ref = $[11];
+		showSelectionContent = $[12];
+		trailingContent = $[13];
+	}
+	const { label, tooltipText, helperText, isDirty, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, isSearchable, isClearable, isLoading, as, size, collapseAfter, selectedTagsType } = props;
 	const popoverCva = UIOverrides.useCva("popover.cva", popoverDefinition);
-	const formFieldProps = {
-		error,
-		label,
-		tooltipText,
-		helperText,
-		isRequired,
-		rightContent,
-		isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
-		hideLabel,
-		isDisabled,
-		headerClassName,
-		errorClassName
-	};
-	const { labelProps, fieldProps } = useLabel({ label });
+	const selectPopoverCva = UIOverrides.useCva("select.popoverCva", selectPopoverDefinition);
+	const t1 = isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
+	let t2;
+	if ($[14] !== error || $[15] !== errorClassName || $[16] !== headerClassName || $[17] !== helperText || $[18] !== hideLabel || $[19] !== isDisabled || $[20] !== isRequired || $[21] !== label || $[22] !== rightContent || $[23] !== t1 || $[24] !== tooltipText) {
+		t2 = {
+			error,
+			label,
+			tooltipText,
+			helperText,
+			isRequired,
+			rightContent,
+			isHeaderHidden: t1,
+			hideLabel,
+			isDisabled,
+			headerClassName,
+			errorClassName
+		};
+		$[14] = error;
+		$[15] = errorClassName;
+		$[16] = headerClassName;
+		$[17] = helperText;
+		$[18] = hideLabel;
+		$[19] = isDisabled;
+		$[20] = isRequired;
+		$[21] = label;
+		$[22] = rightContent;
+		$[23] = t1;
+		$[24] = tooltipText;
+		$[25] = t2;
+	} else t2 = $[25];
+	const formFieldProps = t2;
+	let t3;
+	if ($[26] !== label) {
+		t3 = { label };
+		$[26] = label;
+		$[27] = t3;
+	} else t3 = $[27];
+	const { labelProps, fieldProps } = useLabel(t3);
 	const triggerRef = useRef(null);
 	const closeComboBoxRef = useRef(null);
 	const wrapperRef = useRef(null);
 	const [popoverWidth, setPopoverWidth] = useState(void 0);
 	const { fieldState, isOpen, setIsOpen, onInputChange, onChange, onClear, onSelectAll, listItems, selectableListItems, selectedIds, isMultiple } = SelectContext.useSelect();
-	usePreventScroll({ isDisabled: !isOpen });
-	useLayoutEffect(() => {
-		if (!isOpen || !wrapperRef.current) return;
-		setPopoverWidth(wrapperRef.current.getBoundingClientRect().width);
-		const observer = new ResizeObserver((entries) => {
-			setPopoverWidth(entries[0].contentRect.width);
-		});
-		observer.observe(wrapperRef.current);
-		return () => {
-			observer.disconnect();
+	const t4 = !isOpen;
+	let t5;
+	if ($[28] !== t4) {
+		t5 = { isDisabled: t4 };
+		$[28] = t4;
+		$[29] = t5;
+	} else t5 = $[29];
+	usePreventScroll(t5);
+	let t6;
+	let t7;
+	if ($[30] !== isOpen) {
+		t6 = () => {
+			if (!isOpen || !wrapperRef.current) return;
+			setPopoverWidth(wrapperRef.current.getBoundingClientRect().width);
+			const observer = new ResizeObserver((entries) => {
+				setPopoverWidth(entries[0].contentRect.width);
+			});
+			observer.observe(wrapperRef.current);
+			return () => {
+				observer.disconnect();
+			};
+		};
+		t7 = [isOpen];
+		$[30] = isOpen;
+		$[31] = t6;
+		$[32] = t7;
+	} else {
+		t6 = $[31];
+		t7 = $[32];
+	}
+	useLayoutEffect(t6, t7);
+	let t8;
+	if ($[33] !== fieldState.value || $[34] !== isMultiple || $[35] !== onChange || $[36] !== onClear || $[37] !== onSelectAll || $[38] !== selectableListItems || $[39] !== selectedIds) {
+		t8 = (value) => {
+			if (!value) return;
+			if (value === "all-item-id") {
+				if (selectedIds.length === selectableListItems.length) onClear();
+				else onSelectAll();
+				return;
+			}
+			if (!isMultiple) {
+				onChange(value);
+				return;
+			}
+			if (!Array.isArray(fieldState.value)) {
+				onChange([value]);
+				return;
+			}
+			if (fieldState.value.includes(value)) onChange(fieldState.value.filter((id) => id !== value));
+			else onChange(fieldState.value.concat(value));
+		};
+		$[33] = fieldState.value;
+		$[34] = isMultiple;
+		$[35] = onChange;
+		$[36] = onClear;
+		$[37] = onSelectAll;
+		$[38] = selectableListItems;
+		$[39] = selectedIds;
+		$[40] = t8;
+	} else t8 = $[40];
+	const onSelectionChange = t8;
+	let t9;
+	if ($[41] !== setIsOpen) {
+		t9 = (value_0) => {
+			if (closeComboBoxRef.current && value_0) {
+				closeComboBoxRef.current.setOpen(false);
+				closeComboBoxRef.current = null;
+			} else setIsOpen(value_0);
 		};
-	}, [isOpen]);
-	const onSelectionChange = (value) => {
-		if (!value) return;
-		if (value === "all-item-id") {
-			if (selectedIds.length === selectableListItems.length) onClear();
-			else onSelectAll();
-			return;
-		}
-		if (!isMultiple) {
-			onChange(value);
-			return;
-		}
-		if (!Array.isArray(fieldState.value)) {
-			onChange([value]);
-			return;
-		}
-		if (fieldState.value.includes(value)) onChange(fieldState.value.filter((id) => id !== value));
-		else onChange(fieldState.value.concat(value));
-	};
-	const openChangeHandler = (value) => {
-		if (closeComboBoxRef.current && value) {
-			closeComboBoxRef.current.setOpen(false);
-			closeComboBoxRef.current = null;
-		} else setIsOpen(value);
-	};
+		$[41] = setIsOpen;
+		$[42] = t9;
+	} else t9 = $[42];
+	const openChangeHandler = t9;
 	const WrapperComponent = isSearchable ? ComboBox : Fragment$1;
-	const comboBoxProps = {
-		items: listItems,
-		selectedKey: isMultiple ? null : fieldState.value,
-		onSelectionChange,
-		inputValue: fieldState.inputValue,
-		onInputChange,
-		onOpenChange: openChangeHandler,
-		allowsEmptyCollection: true,
-		isDisabled,
-		isInvalid: !!error,
-		menuTrigger: "focus",
-		className: clsx("group w-full", containerClassName)
-	};
-	const headerProps = {
-		label,
-		tooltipText,
-		helperText,
-		isRequired,
-		rightContent,
-		isHeaderHidden: hideLabel || isHeaderHidden,
-		isDisabled,
-		className: headerClassName,
-		labelProps
-	};
-	const dialogTriggerProps = {
-		isOpen,
-		onOpenChange: setIsOpen
-	};
-	const showPopover = useMemo(() => listItems.filter((item) => !item.isSelectAllItem).length > 0 || isLoading, [listItems, isLoading]);
-	return /* @__PURE__ */ jsx(TooltipWrapper, {
-		as,
-		error,
-		children: /* @__PURE__ */ jsx(WrapperComponent, {
-			...isSearchable ? comboBoxProps : {},
-			children: /* @__PURE__ */ jsxs(FormField, {
-				...formFieldProps,
-				...!isSearchable && {
-					labelProps,
-					className: clsx("group w-full", containerClassName)
-				},
-				as,
-				ref: wrapperRef,
-				children: [customTrigger ? /* @__PURE__ */ jsx(DialogTrigger, {
-					...dialogTriggerProps,
-					children: /* @__PURE__ */ jsx("div", {
-						...fieldProps,
-						ref: mergeRefs(ref, triggerRef),
-						children: customTrigger
-					})
-				}) : /* @__PURE__ */ jsx(SelectInput, {
-					ref: mergeRefs(ref, triggerRef),
-					placeholder,
-					variant,
-					as,
-					size,
-					isDisabled,
-					isInvalid: !!error,
-					className,
-					hideDropdownIcon,
-					isSearchable,
-					isClearable,
-					showSelectionContent,
-					inputClassName,
-					collapseAfter,
-					selectedTagsType,
-					onBlur,
-					onCloseComboBox: (state) => {
-						if (isSearchable) closeComboBoxRef.current = state;
-					},
-					fieldProps,
-					headerProps
-				}), (!isSearchable || showPopover) && /* @__PURE__ */ jsx(Popover, {
-					triggerRef,
-					isOpen,
-					onOpenChange: setIsOpen,
-					className: "my-4 outline-none",
-					style: { width: !ignoreTriggerWidth ? popoverWidth : void 0 },
-					offset: 0,
-					children: /* @__PURE__ */ jsx(SelectListBox, {
-						...props,
-						className: clsx(popoverCva({}), "max-h-80! [scrollbar-width:thin]"),
-						autoFocus: !isSearchable
-					})
-				})]
+	const t10 = isMultiple ? null : fieldState.value;
+	const t11 = fieldState.inputValue;
+	const t12 = !!error;
+	let t13;
+	if ($[43] !== containerClassName) {
+		t13 = clsx("group w-full", containerClassName);
+		$[43] = containerClassName;
+		$[44] = t13;
+	} else t13 = $[44];
+	let t14;
+	if ($[45] !== fieldState.inputValue || $[46] !== isDisabled || $[47] !== listItems || $[48] !== onInputChange || $[49] !== onSelectionChange || $[50] !== openChangeHandler || $[51] !== t10 || $[52] !== t12 || $[53] !== t13) {
+		t14 = {
+			items: listItems,
+			selectedKey: t10,
+			onSelectionChange,
+			inputValue: t11,
+			onInputChange,
+			onOpenChange: openChangeHandler,
+			allowsEmptyCollection: true,
+			isDisabled,
+			isInvalid: t12,
+			menuTrigger: "focus",
+			className: t13
+		};
+		$[45] = fieldState.inputValue;
+		$[46] = isDisabled;
+		$[47] = listItems;
+		$[48] = onInputChange;
+		$[49] = onSelectionChange;
+		$[50] = openChangeHandler;
+		$[51] = t10;
+		$[52] = t12;
+		$[53] = t13;
+		$[54] = t14;
+	} else t14 = $[54];
+	const comboBoxProps = t14;
+	const t15 = hideLabel || isHeaderHidden;
+	let t16;
+	if ($[55] !== headerClassName || $[56] !== helperText || $[57] !== isDisabled || $[58] !== isRequired || $[59] !== label || $[60] !== labelProps || $[61] !== rightContent || $[62] !== t15 || $[63] !== tooltipText) {
+		t16 = {
+			label,
+			tooltipText,
+			helperText,
+			isRequired,
+			rightContent,
+			isHeaderHidden: t15,
+			isDisabled,
+			className: headerClassName,
+			labelProps
+		};
+		$[55] = headerClassName;
+		$[56] = helperText;
+		$[57] = isDisabled;
+		$[58] = isRequired;
+		$[59] = label;
+		$[60] = labelProps;
+		$[61] = rightContent;
+		$[62] = t15;
+		$[63] = tooltipText;
+		$[64] = t16;
+	} else t16 = $[64];
+	const headerProps = t16;
+	let t17;
+	if ($[65] !== isOpen || $[66] !== setIsOpen) {
+		t17 = {
+			isOpen,
+			onOpenChange: setIsOpen
+		};
+		$[65] = isOpen;
+		$[66] = setIsOpen;
+		$[67] = t17;
+	} else t17 = $[67];
+	const dialogTriggerProps = t17;
+	let t18;
+	if ($[68] !== isLoading || $[69] !== listItems) {
+		t18 = listItems.filter(_temp).length > 0 || isLoading;
+		$[68] = isLoading;
+		$[69] = listItems;
+		$[70] = t18;
+	} else t18 = $[70];
+	const showPopover = t18;
+	let t19;
+	if ($[71] !== comboBoxProps || $[72] !== isSearchable) {
+		t19 = isSearchable ? comboBoxProps : {};
+		$[71] = comboBoxProps;
+		$[72] = isSearchable;
+		$[73] = t19;
+	} else t19 = $[73];
+	let t20;
+	if ($[74] !== containerClassName || $[75] !== isSearchable || $[76] !== labelProps) {
+		t20 = !isSearchable && {
+			labelProps,
+			className: clsx("group w-full", containerClassName)
+		};
+		$[74] = containerClassName;
+		$[75] = isSearchable;
+		$[76] = labelProps;
+		$[77] = t20;
+	} else t20 = $[77];
+	let t21;
+	if ($[78] !== as || $[79] !== className || $[80] !== collapseAfter || $[81] !== customTrigger || $[82] !== dialogTriggerProps || $[83] !== error || $[84] !== fieldProps || $[85] !== headerProps || $[86] !== hideDropdownIcon || $[87] !== inputClassName || $[88] !== isClearable || $[89] !== isDirty || $[90] !== isDisabled || $[91] !== isRequired || $[92] !== isSearchable || $[93] !== leadingContent || $[94] !== onBlur || $[95] !== placeholder || $[96] !== ref || $[97] !== selectedTagsType || $[98] !== showSelectionContent || $[99] !== size || $[100] !== trailingContent || $[101] !== variant) {
+		t21 = customTrigger ? /* @__PURE__ */ jsx(DialogTrigger, {
+			...dialogTriggerProps,
+			children: /* @__PURE__ */ jsx("div", {
+				...fieldProps,
+				ref: mergeRefs(ref, triggerRef),
+				children: customTrigger
+			})
+		}) : /* @__PURE__ */ jsx(SelectInput, {
+			ref: mergeRefs(ref, triggerRef),
+			placeholder,
+			variant,
+			as,
+			size,
+			isDisabled,
+			isInvalid: !!error,
+			className,
+			hideDropdownIcon,
+			isSearchable,
+			isClearable,
+			showSelectionContent,
+			inputClassName,
+			leadingContent,
+			trailingContent,
+			collapseAfter,
+			selectedTagsType,
+			isRequired,
+			isDirty,
+			onBlur,
+			onCloseComboBox: (state) => {
+				if (isSearchable) closeComboBoxRef.current = state;
+			},
+			fieldProps,
+			headerProps
+		});
+		$[78] = as;
+		$[79] = className;
+		$[80] = collapseAfter;
+		$[81] = customTrigger;
+		$[82] = dialogTriggerProps;
+		$[83] = error;
+		$[84] = fieldProps;
+		$[85] = headerProps;
+		$[86] = hideDropdownIcon;
+		$[87] = inputClassName;
+		$[88] = isClearable;
+		$[89] = isDirty;
+		$[90] = isDisabled;
+		$[91] = isRequired;
+		$[92] = isSearchable;
+		$[93] = leadingContent;
+		$[94] = onBlur;
+		$[95] = placeholder;
+		$[96] = ref;
+		$[97] = selectedTagsType;
+		$[98] = showSelectionContent;
+		$[99] = size;
+		$[100] = trailingContent;
+		$[101] = variant;
+		$[102] = t21;
+	} else t21 = $[102];
+	let t22;
+	if ($[103] !== ignoreTriggerWidth || $[104] !== isOpen || $[105] !== isSearchable || $[106] !== popoverCva || $[107] !== popoverWidth || $[108] !== props || $[109] !== selectPopoverCva || $[110] !== setIsOpen || $[111] !== showPopover) {
+		t22 = (!isSearchable || showPopover) && /* @__PURE__ */ jsx(Popover, {
+			triggerRef,
+			isOpen,
+			onOpenChange: setIsOpen,
+			className: selectPopoverCva({}),
+			style: { width: !ignoreTriggerWidth ? popoverWidth : void 0 },
+			offset: 0,
+			children: /* @__PURE__ */ jsx(SelectListBox, {
+				...props,
+				className: clsx(popoverCva({}), "max-h-80! [scrollbar-width:thin]"),
+				autoFocus: !isSearchable
 			})
-		})
-	});
+		});
+		$[103] = ignoreTriggerWidth;
+		$[104] = isOpen;
+		$[105] = isSearchable;
+		$[106] = popoverCva;
+		$[107] = popoverWidth;
+		$[108] = props;
+		$[109] = selectPopoverCva;
+		$[110] = setIsOpen;
+		$[111] = showPopover;
+		$[112] = t22;
+	} else t22 = $[112];
+	let t23;
+	if ($[113] !== as || $[114] !== formFieldProps || $[115] !== onFocusCapture || $[116] !== onMouseEnter || $[117] !== t20 || $[118] !== t21 || $[119] !== t22) {
+		t23 = /* @__PURE__ */ jsxs(FormField, {
+			...formFieldProps,
+			...t20,
+			as,
+			onMouseEnter,
+			onFocusCapture,
+			ref: wrapperRef,
+			children: [t21, t22]
+		});
+		$[113] = as;
+		$[114] = formFieldProps;
+		$[115] = onFocusCapture;
+		$[116] = onMouseEnter;
+		$[117] = t20;
+		$[118] = t21;
+		$[119] = t22;
+		$[120] = t23;
+	} else t23 = $[120];
+	let t24;
+	if ($[121] !== WrapperComponent || $[122] !== t19 || $[123] !== t23) {
+		t24 = /* @__PURE__ */ jsx(WrapperComponent, {
+			...t19,
+			children: t23
+		});
+		$[121] = WrapperComponent;
+		$[122] = t19;
+		$[123] = t23;
+		$[124] = t24;
+	} else t24 = $[124];
+	let t25;
+	if ($[125] !== as || $[126] !== error || $[127] !== t24) {
+		t25 = /* @__PURE__ */ jsx(TooltipWrapper, {
+			as,
+			error,
+			children: t24
+		});
+		$[125] = as;
+		$[126] = error;
+		$[127] = t24;
+		$[128] = t25;
+	} else t25 = $[128];
+	return t25;
 };
+function _temp(item) {
+	return !item.isSelectAllItem;
+}
 //#endregion
 export { SelectDesktop };

package/dist/components/inputs/Selection/shared/SelectInput.d.ts

@@ -4,12 +4,12 @@ import { FormFieldHeaderProps } from '../../FormField/FormFieldHeader';
 import { SelectBaseProps } from './SelectBase';
 import { SelectItem } from './select.types';
 import { InputVariantProps } from '../../shared/input.cva';
-interface SelectInputProps extends InputVariantProps, Pick<SelectBaseProps, "ref" | "placeholder" | "isDisabled" | "hideDropdownIcon" | "isSearchable" | "isClearable" | "onBlur" | "showSelectionContent" | "inputClassName" | "selectedTagsType" | "collapseAfter"> {
+interface SelectInputProps extends InputVariantProps, Pick<SelectBaseProps, "ref" | "placeholder" | "isDisabled" | "hideDropdownIcon" | "isSearchable" | "isClearable" | "onBlur" | "showSelectionContent" | "inputClassName" | "selectedTagsType" | "collapseAfter" | "isRequired" | "isDirty" | "leadingContent" | "trailingContent" | "onMouseEnter" | "onFocusCapture"> {
     isInvalid?: boolean;
     className?: string;
     fieldProps?: AriaFieldProps;
     headerProps?: FormFieldHeaderProps;
     onCloseComboBox?: (state: ComboBoxState<SelectItem> | null) => void;
 }
-export declare const SelectInput: ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, onCloseComboBox, onBlur, ...props }: SelectInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectInput: ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onBlur, leadingContent, trailingContent, onMouseEnter, onFocusCapture, ...props }: SelectInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};