@povio/ui 2.3.0-rc.5 → 2.3.0-rc.7

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

@@ -0,0 +1,47 @@
+import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
+import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { inputSize } from "../../shared/input.cva.js";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+//#region src/components/inputs/Selection/shared/StaticSelectTrailingContent.tsx
+var StaticSelectTrailingContent = (t0) => {
+	const $ = c(10);
+	const { trailingContent, hideDropdownIcon, isDisabled, size } = t0;
+	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
+	if (!trailingContent && hideDropdownIcon) return null;
+	let t1;
+	if ($[0] !== trailingContent) {
+		t1 = trailingContent && /* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0 items-center",
+			children: trailingContent
+		});
+		$[0] = trailingContent;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== hideDropdownIcon || $[3] !== inputSizeCva || $[4] !== isDisabled || $[5] !== size) {
+		t2 = !hideDropdownIcon ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			tabIndex: -1,
+			className: clsx("self-stretch border-0! pl-1-5 outline-none", inputSizeCva({ size })),
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(ArrowDropDownIcon, { className: clsx("size-6 shrink-0", isDisabled ? "text-interactive-text-secondary-disabled" : "text-interactive-text-secondary-idle") })
+		}) : void 0;
+		$[2] = hideDropdownIcon;
+		$[3] = inputSizeCva;
+		$[4] = isDisabled;
+		$[5] = size;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== t1 || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Fragment, { children: [t1, t2] });
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
+};
+//#endregion
+export { StaticSelectTrailingContent };

package/dist/components/inputs/Selection/shared/select.context.js

@@ -46,17 +46,17 @@ var SelectContext;
 		});
 		const selectedItems = useMemo(() => {
 			const getItem = (id) => allItems.find((item) => item.id === id) ?? null;
-			if (Array.isArray(fieldState.value)) return fieldState.value.map((id) => getItem(id)).filter((item) => item !== null);
+			if (Array.isArray(fieldState.value)) return fieldState.value.map((id_0) => getItem(id_0)).filter((item_0) => item_0 !== null);
 			const selectedItem = fieldState.value != null ? getItem(fieldState.value) : null;
 			return selectedItem ? [selectedItem] : [];
 		}, [allItems, fieldState.value]);
-		const selectedIds = useMemo(() => selectedItems.map(({ id }) => id), [selectedItems]);
-		const getItem = useCallback((value) => allItems.find((item) => item && item.id === value) ?? null, [allItems]);
-		const updateValue = useCallback((value) => {
-			if (Array.isArray(value)) valueRef.current = value.map((id) => getItem(id)).filter((item) => item !== null);
-			else valueRef.current = getItem(value);
-		}, [getItem]);
-		const getValueIds = () => Array.isArray(valueRef.current) ? valueRef.current.map(({ id }) => id) : valueRef.current?.id ?? null;
+		const selectedIds = useMemo(() => selectedItems.map(({ id: id_1 }) => id_1), [selectedItems]);
+		const getItem_0 = useCallback((value) => allItems.find((item_1) => item_1 && item_1.id === value) ?? null, [allItems]);
+		const updateValue = useCallback((value_0) => {
+			if (Array.isArray(value_0)) valueRef.current = value_0.map((id_2) => getItem_0(id_2)).filter((item_2) => item_2 !== null);
+			else valueRef.current = getItem_0(value_0);
+		}, [getItem_0]);
+		const getValueIds = () => Array.isArray(valueRef.current) ? valueRef.current.map(({ id: id_3 }) => id_3) : valueRef.current?.id ?? null;
 		const emitStateChanges = useCallback((changes, skipSelectionChange) => {
 			if (JSON.stringify(changes.value) !== JSON.stringify(getValueIds())) {
 				updateValue(changes.value);
@@ -73,10 +73,10 @@ var SelectContext;
 			onSearchChangeDebounced,
 			updateValue
 		]);
-		const syncFieldState = (value) => {
+		const syncFieldState = (value_1) => {
 			const newFieldState = {
-				value,
-				inputValue: isMultiple || Array.isArray(value) ? fieldState.inputValue : getItem(value)?.label ?? "",
+				value: value_1,
+				inputValue: isMultiple || Array.isArray(value_1) ? fieldState.inputValue : getItem_0(value_1)?.label ?? "",
 				searchValue: ""
 			};
 			setFieldState(newFieldState);
@@ -84,21 +84,21 @@ var SelectContext;
 			if (!isMultiple) setShowAll(true);
 		};
 		useEffect(() => {
-			const value = props.value ?? null;
-			if (JSON.stringify(value) !== JSON.stringify(fieldState.value)) syncFieldState(value);
-			else updateValue(value);
+			const value_2 = props.value ?? null;
+			if (JSON.stringify(value_2) !== JSON.stringify(fieldState.value)) syncFieldState(value_2);
+			else updateValue(value_2);
 		}, [props.value]);
 		useEffect(() => {
-			if (!isMultiple && props.value !== null && props.value !== void 0 && fieldState.value !== null && fieldState.value !== void 0 && fieldState.inputValue === "" && getItem(fieldState.value)?.label) syncFieldState(fieldState.value);
+			if (!isMultiple && props.value !== null && props.value !== void 0 && fieldState.value !== null && fieldState.value !== void 0 && fieldState.inputValue === "" && getItem_0(fieldState.value)?.label) syncFieldState(fieldState.value);
 		}, [allListItems]);
 		const handleInputChange = useCallback((inputValue) => {
-			const newFieldState = {
+			const newFieldState_0 = {
 				value: isMultiple || inputValue !== "" ? fieldState.value : null,
 				inputValue,
 				searchValue: inputValue
 			};
-			setFieldState(newFieldState);
-			emitStateChanges(newFieldState);
+			setFieldState(newFieldState_0);
+			emitStateChanges(newFieldState_0);
 			setShowAll(false);
 			if (!isOpen && inputValue !== "" && props.isSearchable) setIsOpen(true);
 		}, [
@@ -106,16 +106,16 @@ var SelectContext;
 			fieldState.value,
 			isMultiple
 		]);
-		const onChange = useCallback((value) => {
-			if (value === "new-item-id") onNewItemOption?.(fieldState.inputValue);
+		const onChange = useCallback((value_3) => {
+			if (value_3 === "new-item-id") onNewItemOption?.(fieldState.inputValue);
 			else {
-				const newFieldState = {
-					value,
-					inputValue: isMultiple || Array.isArray(value) ? "" : getItem(value)?.label ?? "",
+				const newFieldState_1 = {
+					value: value_3,
+					inputValue: isMultiple || Array.isArray(value_3) ? "" : getItem_0(value_3)?.label ?? "",
 					searchValue: ""
 				};
-				setFieldState(newFieldState);
-				emitStateChanges(newFieldState);
+				setFieldState(newFieldState_1);
+				emitStateChanges(newFieldState_1);
 			}
 			if (!isMultiple) {
 				setIsOpen(false);
@@ -125,7 +125,7 @@ var SelectContext;
 			emitStateChanges,
 			onNewItemOption,
 			fieldState.inputValue,
-			getItem,
+			getItem_0,
 			isMultiple
 		]);
 		const onClear = useCallback(() => {
@@ -140,10 +140,10 @@ var SelectContext;
 			else onChange(null);
 		}, [isMultiple, onChange]);
 		const onSelectAll = useCallback(() => {
-			onChange(selectableListItems.map(({ id }) => id));
+			onChange(selectableListItems.map(({ id: id_4 }) => id_4));
 		}, [selectableListItems, onChange]);
-		const onRemove = useCallback((value) => {
-			if (isMultiple && Array.isArray(fieldState.value)) onChange(fieldState.value.filter((id) => id !== value));
+		const onRemove = useCallback((value_4) => {
+			if (isMultiple && Array.isArray(fieldState.value)) onChange(fieldState.value.filter((id_5) => id_5 !== value_4));
 		}, [
 			isMultiple,
 			fieldState.value,
@@ -151,13 +151,13 @@ var SelectContext;
 		]);
 		const onBlur = useCallback(() => {
 			if (props.isSearchable && isMultiple && fieldState.searchValue !== "") {
-				const newFieldState = {
+				const newFieldState_2 = {
 					...fieldState,
 					inputValue: "",
 					searchValue: ""
 				};
-				setFieldState(newFieldState);
-				emitStateChanges(newFieldState);
+				setFieldState(newFieldState_2);
+				emitStateChanges(newFieldState_2);
 				setShowAll(true);
 			}
 		}, [
@@ -165,7 +165,7 @@ var SelectContext;
 			isMultiple,
 			fieldState
 		]);
-		const value = useMemo(() => ({
+		const value_5 = useMemo(() => ({
 			fieldState,
 			isOpen,
 			setIsOpen,
@@ -203,7 +203,7 @@ var SelectContext;
 			hasLoadMore
 		]);
 		return /* @__PURE__ */ jsx(Context.Provider, {
-			value,
+			value: value_5,
 			children
 		});
 	};

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

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { c } from "react/compiler-runtime";
 import { useFilter } from "react-aria-components";
 //#region src/components/inputs/Selection/shared/useSelectItems.tsx
 var SelectAllItemId = "all-item-id";
@@ -24,61 +24,121 @@ var ReservedItemIds = [
 	NewItemId,
 	LoadingItemId
 ];
-function useSelectItems({ initialSelectedItems, selectedItems, cachedItems, inputValue, showAll, isMultiple, showSelectAllOption, showNewItemOption, newItemMinLength = 3, isLoading, hasLoadMore, isClientSearchDisabled }) {
-	const { contains } = useFilter({ sensitivity: "base" });
-	const allListItems = useMemo(() => {
-		const showSelectAllItem = isMultiple && showSelectAllOption && inputValue.length === 0 && !hasLoadMore;
-		const showNewItem = showNewItemOption && inputValue.length >= newItemMinLength && !cachedItems.find((item) => contains(item.label, inputValue));
-		const showLoadingItem = isLoading || hasLoadMore;
-		return [
-			...showSelectAllItem ? [SelectAllItem(inputValue)] : [],
+function useSelectItems(t0) {
+	const $ = c(37);
+	const { initialSelectedItems, selectedItems, cachedItems, inputValue, showAll, isMultiple, showSelectAllOption, showNewItemOption, newItemMinLength: t1, isLoading, hasLoadMore, isClientSearchDisabled } = t0;
+	const newItemMinLength = t1 === void 0 ? 3 : t1;
+	let t2;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { sensitivity: "base" };
+		$[0] = t2;
+	} else t2 = $[0];
+	const { contains } = useFilter(t2);
+	const showSelectAllItem = isMultiple && showSelectAllOption && inputValue.length === 0 && !hasLoadMore;
+	let t3;
+	if ($[1] !== cachedItems || $[2] !== contains || $[3] !== inputValue || $[4] !== newItemMinLength || $[5] !== showNewItemOption) {
+		t3 = showNewItemOption && inputValue.length >= newItemMinLength && !cachedItems.find((item) => contains(item.label, inputValue));
+		$[1] = cachedItems;
+		$[2] = contains;
+		$[3] = inputValue;
+		$[4] = newItemMinLength;
+		$[5] = showNewItemOption;
+		$[6] = t3;
+	} else t3 = $[6];
+	const showNewItem = t3;
+	const showLoadingItem = isLoading || hasLoadMore;
+	let t4;
+	if ($[7] !== inputValue || $[8] !== showSelectAllItem) {
+		t4 = showSelectAllItem ? [SelectAllItem(inputValue)] : [];
+		$[7] = inputValue;
+		$[8] = showSelectAllItem;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== inputValue || $[11] !== showNewItem) {
+		t5 = showNewItem ? [NewItem(inputValue)] : [];
+		$[10] = inputValue;
+		$[11] = showNewItem;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== inputValue || $[14] !== showLoadingItem) {
+		t6 = showLoadingItem ? [LoadingItem(inputValue)] : [];
+		$[13] = inputValue;
+		$[14] = showLoadingItem;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] !== cachedItems || $[17] !== t4 || $[18] !== t5 || $[19] !== t6) {
+		t7 = [
+			...t4,
 			...cachedItems,
-			...showNewItem ? [NewItem(inputValue)] : [],
-			...showLoadingItem ? [LoadingItem(inputValue)] : []
+			...t5,
+			...t6
 		];
-	}, [
-		isMultiple,
-		showNewItemOption,
-		inputValue,
-		newItemMinLength,
-		cachedItems,
-		contains,
-		isLoading,
-		hasLoadMore,
-		showSelectAllOption
-	]);
-	const allItems = useMemo(() => {
+		$[16] = cachedItems;
+		$[17] = t4;
+		$[18] = t5;
+		$[19] = t6;
+		$[20] = t7;
+	} else t7 = $[20];
+	const allListItems = t7;
+	let t8;
+	if ($[21] !== allListItems || $[22] !== initialSelectedItems || $[23] !== selectedItems) {
 		const items = [
 			...Array.isArray(initialSelectedItems) ? initialSelectedItems : [initialSelectedItems],
 			...Array.isArray(selectedItems) ? selectedItems : [selectedItems],
 			...allListItems
-		].filter((item) => !!item);
+		].filter(_temp);
 		const allItemsMap = /* @__PURE__ */ new Map();
-		items.forEach((item) => allItemsMap.set(item.id, item));
-		return Array.from(allItemsMap.values());
-	}, [
-		allListItems,
-		initialSelectedItems,
-		selectedItems
-	]);
-	const filteredListItems = useMemo(() => allListItems.filter((item) => contains(item.label, inputValue)), [
-		allListItems,
-		contains,
-		inputValue
-	]);
-	const listItems = useMemo(() => showAll || isClientSearchDisabled ? allListItems : filteredListItems, [
-		showAll,
-		isClientSearchDisabled,
-		allListItems,
-		filteredListItems
-	]);
-	return {
-		allItems,
-		allListItems,
-		filteredListItems,
-		listItems,
-		selectableListItems: useMemo(() => listItems.filter((item) => !item.isDisabled && !ReservedItemIds.includes(String(item.id))), [listItems])
-	};
+		items.forEach((item_1) => allItemsMap.set(item_1.id, item_1));
+		t8 = Array.from(allItemsMap.values());
+		$[21] = allListItems;
+		$[22] = initialSelectedItems;
+		$[23] = selectedItems;
+		$[24] = t8;
+	} else t8 = $[24];
+	const allItems = t8;
+	let t9;
+	if ($[25] !== allListItems || $[26] !== contains || $[27] !== inputValue) {
+		t9 = allListItems.filter((item_2) => contains(item_2.label, inputValue));
+		$[25] = allListItems;
+		$[26] = contains;
+		$[27] = inputValue;
+		$[28] = t9;
+	} else t9 = $[28];
+	const filteredListItems = t9;
+	const listItems = showAll || isClientSearchDisabled ? allListItems : filteredListItems;
+	let t10;
+	if ($[29] !== listItems) {
+		t10 = listItems.filter(_temp2);
+		$[29] = listItems;
+		$[30] = t10;
+	} else t10 = $[30];
+	const selectableListItems = t10;
+	let t11;
+	if ($[31] !== allItems || $[32] !== allListItems || $[33] !== filteredListItems || $[34] !== listItems || $[35] !== selectableListItems) {
+		t11 = {
+			allItems,
+			allListItems,
+			filteredListItems,
+			listItems,
+			selectableListItems
+		};
+		$[31] = allItems;
+		$[32] = allListItems;
+		$[33] = filteredListItems;
+		$[34] = listItems;
+		$[35] = selectableListItems;
+		$[36] = t11;
+	} else t11 = $[36];
+	return t11;
+}
+function _temp2(item_3) {
+	return !item_3.isDisabled && !ReservedItemIds.includes(String(item_3.id));
+}
+function _temp(item_0) {
+	return !!item_0;
 }
 //#endregion
 export { NewItemId, SelectAllItemId, useSelectItems };

package/dist/components/inputs/Skeleton/InputFrame.d.ts

@@ -71,6 +71,7 @@ export interface InputFrameProps extends InputVariantProps, Partial<FormFieldPro
     contentWrapperClassName?: string;
     contentAndTrailingClassName?: string;
     wrapContentAndTrailing?: boolean;
+    wrapTrailingContent?: boolean;
     labelPlacement?: InputFrameLabelPlacement;
     trailingClassName?: string;
 }