@povio/ui 2.3.2-rc.3 → 2.3.3

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

@@ -13,8 +13,8 @@ import { useRef } from "react";
 import { DialogTrigger } from "react-aria-components";
 import { useLabel } from "react-aria";
 //#region src/components/inputs/Selection/shared/SelectMobile.tsx
-var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containerClassName, leadingContent, trailingContent, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }) => {
-	const { label, tooltipText, helperText, isDirty, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, hideSearchIcon, isSearchable, isClearable, as, size, collapseAfter, selectedTagsType } = props;
+var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }) => {
+	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, hideSearchIcon, isSearchable, isClearable, as, size, collapseAfter, selectedTagsType } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -57,8 +57,6 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 		as,
 		labelProps,
 		className: clsx("group w-full", containerClassName),
-		onMouseEnter,
-		onFocusCapture,
 		children: /* @__PURE__ */ jsxs(DialogTrigger, {
 			...dialogTriggerProps,
 			children: [customTrigger ? /* @__PURE__ */ jsx("div", {
@@ -81,12 +79,8 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 				onBlur: void 0,
 				fieldProps,
 				headerProps,
-				leadingContent,
-				trailingContent,
 				collapseAfter,
-				selectedTagsType,
-				isRequired,
-				isDirty
+				selectedTagsType
 			}), /* @__PURE__ */ jsx(BottomSheet, {
 				isOpen,
 				onOpenChange: handleOpenChange,

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

@@ -17,15 +17,14 @@ export declare namespace SelectContext {
         onClear: () => void;
         onSelectAll: () => void;
         onRemove: (val: Key) => void;
-        onBlur: () => void;
         listItems: ExtendedSelectItem[];
         selectableListItems: SelectItem[];
         selectedItems: SelectItem[];
         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" | "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 type ProviderProps = GroupedSelectProps & Pick<SelectBaseProps, "items" | "onInputChange" | "onSearchChange" | "showSelectAllOption" | "showNewItemOption" | "newItemMinLength" | "onNewItemOption" | "isLoading" | "hasLoadMore" | "mapInitialToSelectItem" | "isSearchable" | "isClientSearchDisabled">;
+    export const Provider: ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, 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 { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
 import { useSelectItems } from "./useSelectItems.js";
+import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.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, fireBlurOnChange, onBlur: fieldOnBlur, children, mapInitialToSelectItem = defaultMapInitialToSelectItem, ...props }) => {
+	_SelectContext.Provider = ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, children, mapInitialToSelectItem = defaultMapInitialToSelectItem, ...props }) => {
 		const isMultiple = props.selectionMode === "multiple";
 		const initialSelectedItems = useMemo(() => {
 			if (!props.initialSelection) return null;
@@ -42,31 +42,24 @@ var SelectContext;
 			newItemMinLength,
 			isLoading,
 			hasLoadMore,
-			isClientSearchDisabled: ignoreInputValueFiltering ?? isClientSearchDisabled
+			isClientSearchDisabled
 		});
-		const selectedItems = useMemo(() => {
-			const getItem = (id) => allItems.find((item) => item.id === id) ?? 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_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 selectedItems = useMemo(() => allItems.filter(({ id }) => Array.isArray(fieldState.value) ? fieldState.value.includes(id) : id === fieldState.value), [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 emitStateChanges = useCallback((changes, skipSelectionChange) => {
-			const valueChanged = JSON.stringify(changes.value) !== JSON.stringify(getValueIds());
-			if (valueChanged) {
+			if (JSON.stringify(changes.value) !== JSON.stringify(getValueIds())) {
 				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,
@@ -75,13 +68,10 @@ var SelectContext;
 			onSearchChangeDebounced,
 			updateValue
 		]);
-		const triggerBlurOnChange = useCallback(() => {
-			if (fireBlurOnChange) fieldOnBlur?.({});
-		}, [fireBlurOnChange, fieldOnBlur]);
-		const syncFieldState = (value_1) => {
+		const syncFieldState = (value) => {
 			const newFieldState = {
-				value: value_1,
-				inputValue: isMultiple || Array.isArray(value_1) ? fieldState.inputValue : getItem_0(value_1)?.label ?? "",
+				value,
+				inputValue: isMultiple || Array.isArray(value) ? fieldState.inputValue : getItem(value)?.label ?? "",
 				searchValue: ""
 			};
 			setFieldState(newFieldState);
@@ -89,21 +79,21 @@ var SelectContext;
 			if (!isMultiple) setShowAll(true);
 		};
 		useEffect(() => {
-			const value_2 = props.value ?? null;
-			if (JSON.stringify(value_2) !== JSON.stringify(fieldState.value)) syncFieldState(value_2);
-			else updateValue(value_2);
+			const value = props.value ?? null;
+			if (JSON.stringify(value) !== JSON.stringify(fieldState.value)) syncFieldState(value);
+			else updateValue(value);
 		}, [props.value]);
 		useEffect(() => {
-			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);
+			if (!isMultiple && fieldState.value && fieldState.inputValue === "" && getItem(fieldState.value)?.label) syncFieldState(fieldState.value);
 		}, [allListItems]);
 		const handleInputChange = useCallback((inputValue) => {
-			const newFieldState_0 = {
+			const newFieldState = {
 				value: isMultiple || inputValue !== "" ? fieldState.value : null,
 				inputValue,
 				searchValue: inputValue
 			};
-			setFieldState(newFieldState_0);
-			emitStateChanges(newFieldState_0);
+			setFieldState(newFieldState);
+			emitStateChanges(newFieldState);
 			setShowAll(false);
 			if (!isOpen && inputValue !== "" && props.isSearchable) setIsOpen(true);
 		}, [
@@ -111,16 +101,16 @@ var SelectContext;
 			fieldState.value,
 			isMultiple
 		]);
-		const onChange = useCallback((value_3) => {
-			if (value_3 === "new-item-id") onNewItemOption?.(fieldState.inputValue);
+		const onChange = useCallback((value) => {
+			if (value === "new-item-id") onNewItemOption?.(fieldState.inputValue);
 			else {
-				const newFieldState_1 = {
-					value: value_3,
-					inputValue: isMultiple || Array.isArray(value_3) ? "" : getItem_0(value_3)?.label ?? "",
+				const newFieldState = {
+					value,
+					inputValue: isMultiple || Array.isArray(value) ? "" : getItem(value)?.label ?? "",
 					searchValue: ""
 				};
-				setFieldState(newFieldState_1);
-				if (emitStateChanges(newFieldState_1)) triggerBlurOnChange();
+				setFieldState(newFieldState);
+				emitStateChanges(newFieldState);
 			}
 			if (!isMultiple) {
 				setIsOpen(false);
@@ -130,9 +120,8 @@ var SelectContext;
 			emitStateChanges,
 			onNewItemOption,
 			fieldState.inputValue,
-			getItem_0,
-			isMultiple,
-			triggerBlurOnChange
+			getItem,
+			isMultiple
 		]);
 		const onClear = useCallback(() => {
 			if (!valueRef.current || Array.isArray(valueRef.current) && valueRef.current.length === 0) {
@@ -146,34 +135,16 @@ var SelectContext;
 			else onChange(null);
 		}, [isMultiple, onChange]);
 		const onSelectAll = useCallback(() => {
-			onChange(selectableListItems.map(({ id: id_4 }) => id_4));
+			onChange(selectableListItems.map(({ id }) => id));
 		}, [selectableListItems, onChange]);
-		const onRemove = useCallback((value_4) => {
-			if (isMultiple && Array.isArray(fieldState.value)) onChange(fieldState.value.filter((id_5) => id_5 !== value_4));
+		const onRemove = useCallback((value) => {
+			if (isMultiple && Array.isArray(fieldState.value)) onChange(fieldState.value.filter((id) => id !== value));
 		}, [
 			isMultiple,
 			fieldState.value,
 			onChange
 		]);
-		const onBlur = useCallback(() => {
-			if (props.isSearchable && isMultiple && fieldState.searchValue !== "") {
-				const newFieldState_2 = {
-					...fieldState,
-					inputValue: "",
-					searchValue: ""
-				};
-				setFieldState(newFieldState_2);
-				emitStateChanges(newFieldState_2);
-				setShowAll(true);
-			}
-			fieldOnBlur?.({});
-		}, [
-			props.isSearchable,
-			isMultiple,
-			fieldState,
-			fieldOnBlur
-		]);
-		const value_5 = useMemo(() => ({
+		const value = useMemo(() => ({
 			fieldState,
 			isOpen,
 			setIsOpen,
@@ -183,7 +154,6 @@ var SelectContext;
 			onClear,
 			onSelectAll,
 			onRemove,
-			onBlur,
 			listItems,
 			selectableListItems,
 			selectedItems,
@@ -201,7 +171,6 @@ var SelectContext;
 			onClear,
 			onSelectAll,
 			onRemove,
-			onBlur,
 			listItems,
 			selectableListItems,
 			selectedIds,
@@ -211,7 +180,7 @@ var SelectContext;
 			hasLoadMore
 		]);
 		return /* @__PURE__ */ jsx(Context.Provider, {
-			value: value_5,
+			value,
 			children
 		});
 	};

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

@@ -1,11 +1,11 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactElement } from 'react';
 import { Key } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
 import { ControlProps } from '../../shared/form.types';
 export interface SelectItem<TKey extends Key = Key> {
     id: TKey;
     label: string;
-    content?: string | ReactNode;
+    content?: string | ReactElement;
     isDisabled?: boolean;
 }
 export interface ExtendedSelectItem<TKey extends Key = Key> extends SelectItem<TKey> {
@@ -54,7 +54,6 @@ export interface SelectAsyncProps {
     onLoadMore?: () => void;
 }
 export interface SelectVirtualizationProps {
-    totalItems?: number;
     virtualizerOptions?: {
         rowHeight?: number;
         estimatedRowHeight?: number;

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

@@ -1,4 +1,4 @@
-import { c } from "react/compiler-runtime";
+import { useMemo } from "react";
 import { useFilter } from "react-aria-components";
 //#region src/components/inputs/Selection/shared/useSelectItems.tsx
 var SelectAllItemId = "all-item-id";
@@ -24,121 +24,61 @@ var ReservedItemIds = [
 	NewItemId,
 	LoadingItemId
 ];
-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,
+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)] : [],
 			...cachedItems,
-			...t5,
-			...t6
+			...showNewItem ? [NewItem(inputValue)] : [],
+			...showLoadingItem ? [LoadingItem(inputValue)] : []
 		];
-		$[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) {
+	}, [
+		isMultiple,
+		showNewItemOption,
+		inputValue,
+		newItemMinLength,
+		cachedItems,
+		contains,
+		isLoading,
+		hasLoadMore,
+		showSelectAllOption
+	]);
+	const allItems = useMemo(() => {
 		const items = [
 			...Array.isArray(initialSelectedItems) ? initialSelectedItems : [initialSelectedItems],
 			...Array.isArray(selectedItems) ? selectedItems : [selectedItems],
 			...allListItems
-		].filter(_temp);
+		].filter((item) => !!item);
 		const allItemsMap = /* @__PURE__ */ new Map();
-		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;
+		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])
+	};
 }
 //#endregion
 export { NewItemId, SelectAllItemId, useSelectItems };

package/dist/components/inputs/Slider/Slider.d.ts

@@ -1,4 +1,4 @@
-import { FocusEvent, Ref } from 'react';
+import { Ref } from 'react';
 import { SliderProps as AriaSliderProps } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
 import { FormFieldProps } from '../FormField/FormField';
@@ -10,7 +10,6 @@ interface SliderBaseProps<IsRange extends boolean = false> extends FormFieldProp
     isRange?: IsRange;
     defaultValue?: SliderValue<IsRange>;
     value?: SliderValue<IsRange>;
-    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     onChange?: (value: SliderValue<IsRange>) => void;
 }
 export type SliderProps<IsRange extends boolean = false> = SliderBaseProps<IsRange>;