@povio/ui 2.3.0-rc.4 → 2.3.0-rc.40

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

@@ -56,7 +56,7 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 		...formFieldProps,
 		as,
 		labelProps,
-		className: clsx("w-full", containerClassName),
+		className: clsx("group w-full", containerClassName),
 		onMouseEnter,
 		onFocusCapture,
 		children: /* @__PURE__ */ jsxs(DialogTrigger, {
@@ -109,7 +109,8 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 						inputClassName,
 						className: "mb-list-height-title-bottom px-list-side-title",
 						leadingIcon: !hideSearchIcon ? /* @__PURE__ */ jsx(SearchIcon, { className: "size-6" }) : void 0,
-						size: "default"
+						size: "default",
+						isClearable
 					}), /* @__PURE__ */ jsx(SelectListBox, {
 						...props,
 						autoFocus: !isSearchable,

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

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { InputVariantProps } from '../../shared/input.cva';
+interface StaticSelectTrailingContentProps extends Pick<InputVariantProps, "size"> {
+    trailingContent?: ReactNode;
+    hideDropdownIcon?: boolean;
+    isDisabled?: boolean;
+}
+export declare const StaticSelectTrailingContent: ({ trailingContent, hideDropdownIcon, isDisabled, size, }: StaticSelectTrailingContentProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

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/querySelect.utils.d.ts

@@ -3,4 +3,5 @@ import { Key } from 'react-aria-components';
 import { SelectItem } from './select.types';
 export type QueryFn<TData = any> = (...args: any[]) => UseQueryResult<TData> | UseInfiniteQueryResult<TData>;
 export type QueryDataType<TQueryFn extends QueryFn> = Exclude<ReturnType<TQueryFn>["data"], undefined>;
+export declare const isInitialSelectionLabelMissing: <TInitialSelectItem>(initialSelection: TInitialSelectItem | TInitialSelectItem[] | null | undefined, mapInitialToSelectItem?: (item: TInitialSelectItem) => SelectItem) => boolean;
 export declare const getQueryItems: <TQueryFn extends QueryFn, TKey extends Key = Key>(data: QueryDataType<TQueryFn> | undefined, queryMap?: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[]) => SelectItem<TKey>[];

package/dist/components/inputs/Selection/shared/querySelect.utils.js

@@ -1,4 +1,15 @@
 //#region src/components/inputs/Selection/shared/querySelect.utils.ts
+var getDefaultInitialSelectionLabel = (initialSelection) => {
+	if (typeof initialSelection !== "object" || initialSelection === null) return "";
+	if ("label" in initialSelection && typeof initialSelection.label === "string") return initialSelection.label;
+	if ("name" in initialSelection && typeof initialSelection.name === "string") return initialSelection.name;
+	return "";
+};
+var isInitialSelectionLabelMissing = (initialSelection, mapInitialToSelectItem) => {
+	return (Array.isArray(initialSelection) ? initialSelection : initialSelection != null ? [initialSelection] : []).some((item) => {
+		return (mapInitialToSelectItem?.(item).label ?? getDefaultInitialSelectionLabel(item)) === "";
+	});
+};
 var getQueryItems = (data, queryMap) => {
 	if (!data) return [];
 	if (queryMap) return queryMap(data);
@@ -10,4 +21,4 @@ var getQueryItems = (data, queryMap) => {
 	return [];
 };
 //#endregion
-export { getQueryItems };
+export { getQueryItems, isInitialSelectionLabelMissing };

package/dist/components/inputs/Selection/shared/select.context.d.ts

@@ -24,8 +24,8 @@ export declare namespace SelectContext {
         selectedIds: Key[];
         isMultiple: boolean;
     } & Pick<SelectBaseProps, "onInputChange" | "isLoading" | "hasLoadMore">;
-    export type ProviderProps = GroupedSelectProps & Pick<SelectBaseProps, "items" | "onInputChange" | "onSearchChange" | "showSelectAllOption" | "showNewItemOption" | "newItemMinLength" | "onNewItemOption" | "isLoading" | "hasLoadMore" | "mapInitialToSelectItem" | "isSearchable" | "isClientSearchDisabled" | "ignoreInputValueFiltering">;
-    export const Provider: ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, ignoreInputValueFiltering, children, mapInitialToSelectItem, ...props }: PropsWithChildren<ProviderProps>) => import("react/jsx-runtime").JSX.Element;
+    export type ProviderProps = GroupedSelectProps & Pick<SelectBaseProps, "items" | "onInputChange" | "onSearchChange" | "showSelectAllOption" | "showNewItemOption" | "newItemMinLength" | "onNewItemOption" | "isLoading" | "hasLoadMore" | "mapInitialToSelectItem" | "isSearchable" | "isClientSearchDisabled" | "ignoreInputValueFiltering" | "fireBlurOnChange" | "onBlur">;
+    export const Provider: ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, ignoreInputValueFiltering, fireBlurOnChange, onBlur: fieldOnBlur, children, mapInitialToSelectItem, ...props }: PropsWithChildren<ProviderProps>) => import("react/jsx-runtime").JSX.Element;
     export const useSelect: () => Type;
     export {};
 }

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

@@ -1,5 +1,5 @@
-import { useSelectItems } from "./useSelectItems.js";
 import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
+import { useSelectItems } from "./useSelectItems.js";
 import { jsx } from "react/jsx-runtime";
 import { createContext, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
 //#region src/components/inputs/Selection/shared/select.context.tsx
@@ -10,7 +10,7 @@ var SelectContext;
 		id: item.id,
 		label: item.label ?? item.name ?? ""
 	});
-	_SelectContext.Provider = ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, ignoreInputValueFiltering, children, mapInitialToSelectItem = defaultMapInitialToSelectItem, ...props }) => {
+	_SelectContext.Provider = ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, ignoreInputValueFiltering, fireBlurOnChange, onBlur: fieldOnBlur, children, mapInitialToSelectItem = defaultMapInitialToSelectItem, ...props }) => {
 		const isMultiple = props.selectionMode === "multiple";
 		const initialSelectedItems = useMemo(() => {
 			if (!props.initialSelection) return null;
@@ -46,25 +46,27 @@ 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())) {
+			const valueChanged = JSON.stringify(changes.value) !== JSON.stringify(getValueIds());
+			if (valueChanged) {
 				updateValue(changes.value);
 				if (!skipSelectionChange) if (isMultiple) props.onChange?.(changes.value);
 				else props.onChange?.(changes.value);
 			}
 			if (changes.inputValue !== fieldState.inputValue) onInputChange?.(changes.inputValue);
 			if (changes.searchValue !== fieldState.searchValue) onSearchChangeDebounced?.(changes.searchValue);
+			return valueChanged;
 		}, [
 			fieldState,
 			isMultiple,
@@ -73,10 +75,13 @@ var SelectContext;
 			onSearchChangeDebounced,
 			updateValue
 		]);
-		const syncFieldState = (value) => {
+		const triggerBlurOnChange = useCallback(() => {
+			if (fireBlurOnChange) fieldOnBlur?.({});
+		}, [fireBlurOnChange, fieldOnBlur]);
+		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 +89,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 +111,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);
+				if (emitStateChanges(newFieldState_1)) triggerBlurOnChange();
 			}
 			if (!isMultiple) {
 				setIsOpen(false);
@@ -125,8 +130,9 @@ var SelectContext;
 			emitStateChanges,
 			onNewItemOption,
 			fieldState.inputValue,
-			getItem,
-			isMultiple
+			getItem_0,
+			isMultiple,
+			triggerBlurOnChange
 		]);
 		const onClear = useCallback(() => {
 			if (!valueRef.current || Array.isArray(valueRef.current) && valueRef.current.length === 0) {
@@ -140,10 +146,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,21 +157,23 @@ 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);
 			}
+			fieldOnBlur?.({});
 		}, [
 			props.isSearchable,
 			isMultiple,
-			fieldState
+			fieldState,
+			fieldOnBlur
 		]);
-		const value = useMemo(() => ({
+		const value_5 = useMemo(() => ({
 			fieldState,
 			isOpen,
 			setIsOpen,
@@ -203,7 +211,7 @@ var SelectContext;
 			hasLoadMore
 		]);
 		return /* @__PURE__ */ jsx(Context.Provider, {
-			value,
+			value: value_5,
 			children
 		});
 	};

package/dist/components/inputs/Selection/shared/selectInput.cva.d.ts

@@ -0,0 +1,5 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const selectInputTagsContentWrapperCva: (props?: ({
+    isSearchable?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type SelectInputTagsContentWrapperCva = VariantProps<typeof selectInputTagsContentWrapperCva>;

package/dist/components/inputs/Selection/shared/selectInput.cva.js

@@ -0,0 +1,5 @@
+import { cva } from "class-variance-authority";
+//#region src/components/inputs/Selection/shared/selectInput.cva.ts
+var selectInputTagsContentWrapperCva = cva("flex flex-1 flex-wrap gap-input-gap-input-text-to-elements truncate", { variants: { isSearchable: { false: "pointer-events-none z-1" } } });
+//#endregion
+export { selectInputTagsContentWrapperCva };

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

@@ -69,7 +69,10 @@ export interface InputFrameProps extends InputVariantProps, Partial<FormFieldPro
     inputClassName?: string;
     contentClassName?: string;
     contentWrapperClassName?: string;
+    contentAndTrailingClassName?: string;
     wrapContentAndTrailing?: boolean;
+    wrapTrailingContent?: boolean;
+    reserveTrailingContent?: boolean;
     labelPlacement?: InputFrameLabelPlacement;
     trailingClassName?: string;
 }