@povio/ui 3.3.0 → 3.4.0-rc.10

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

@@ -7,16 +7,16 @@ 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, useRef, useState } from "react";
+import { Fragment, useLayoutEffect, useRef, useState } from "react";
 import { ComboBox, DialogTrigger, Popover } from "react-aria-components";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useLabel, usePreventScroll } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 //#region src/components/inputs/Selection/shared/SelectDesktop.tsx
 var SelectDesktop = (t0) => {
-	const $ = c(129);
+	const $ = c(130);
 	let containerClassName;
 	let customTrigger;
 	let error;
@@ -61,7 +61,7 @@ var SelectDesktop = (t0) => {
 		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 { label, tooltipText, helperText, isDirty, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, isSearchable, isClearable, isClearableIfDisabled, isLoading, as, size, collapseAfter, selectedTagsType } = props;
 	const popoverCva = UIOverrides.useCva("popover.cva", popoverDefinition);
 	const selectPopoverCva = UIOverrides.useCva("select.popoverCva", selectPopoverDefinition);
 	const t1 = isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
@@ -179,7 +179,7 @@ var SelectDesktop = (t0) => {
 		$[42] = t9;
 	} else t9 = $[42];
 	const openChangeHandler = t9;
-	const WrapperComponent = isSearchable ? ComboBox : Fragment$1;
+	const WrapperComponent = isSearchable ? ComboBox : Fragment;
 	const t10 = isMultiple ? null : fieldState.value;
 	const t11 = fieldState.inputValue;
 	const t12 = !!error;
@@ -280,7 +280,7 @@ var SelectDesktop = (t0) => {
 		$[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) {
+	if ($[78] !== as || $[79] !== className || $[80] !== collapseAfter || $[81] !== customTrigger || $[82] !== dialogTriggerProps || $[83] !== error || $[84] !== fieldProps || $[85] !== headerProps || $[86] !== hideDropdownIcon || $[87] !== inputClassName || $[88] !== isClearable || $[89] !== isClearableIfDisabled || $[90] !== isDirty || $[91] !== isDisabled || $[92] !== isRequired || $[93] !== isSearchable || $[94] !== leadingContent || $[95] !== onBlur || $[96] !== placeholder || $[97] !== ref || $[98] !== selectedTagsType || $[99] !== showSelectionContent || $[100] !== size || $[101] !== trailingContent || $[102] !== variant) {
 		t21 = customTrigger ? /* @__PURE__ */ jsx(DialogTrigger, {
 			...dialogTriggerProps,
 			children: /* @__PURE__ */ jsx("div", {
@@ -300,6 +300,7 @@ var SelectDesktop = (t0) => {
 			hideDropdownIcon,
 			isSearchable,
 			isClearable,
+			isClearableIfDisabled,
 			showSelectionContent,
 			inputClassName,
 			leadingContent,
@@ -326,23 +327,24 @@ var SelectDesktop = (t0) => {
 		$[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];
+		$[89] = isClearableIfDisabled;
+		$[90] = isDirty;
+		$[91] = isDisabled;
+		$[92] = isRequired;
+		$[93] = isSearchable;
+		$[94] = leadingContent;
+		$[95] = onBlur;
+		$[96] = placeholder;
+		$[97] = ref;
+		$[98] = selectedTagsType;
+		$[99] = showSelectionContent;
+		$[100] = size;
+		$[101] = trailingContent;
+		$[102] = variant;
+		$[103] = t21;
+	} else t21 = $[103];
 	let t22;
-	if ($[103] !== ignoreTriggerWidth || $[104] !== isOpen || $[105] !== isSearchable || $[106] !== popoverCva || $[107] !== popoverWidth || $[108] !== props || $[109] !== selectPopoverCva || $[110] !== setIsOpen || $[111] !== showPopover) {
+	if ($[104] !== ignoreTriggerWidth || $[105] !== isOpen || $[106] !== isSearchable || $[107] !== popoverCva || $[108] !== popoverWidth || $[109] !== props || $[110] !== selectPopoverCva || $[111] !== setIsOpen || $[112] !== showPopover) {
 		t22 = (!isSearchable || showPopover) && /* @__PURE__ */ jsx(Popover, {
 			triggerRef,
 			isOpen,
@@ -356,19 +358,19 @@ var SelectDesktop = (t0) => {
 				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];
+		$[104] = ignoreTriggerWidth;
+		$[105] = isOpen;
+		$[106] = isSearchable;
+		$[107] = popoverCva;
+		$[108] = popoverWidth;
+		$[109] = props;
+		$[110] = selectPopoverCva;
+		$[111] = setIsOpen;
+		$[112] = showPopover;
+		$[113] = t22;
+	} else t22 = $[113];
 	let t23;
-	if ($[113] !== as || $[114] !== formFieldProps || $[115] !== onFocusCapture || $[116] !== onMouseEnter || $[117] !== t20 || $[118] !== t21 || $[119] !== t22) {
+	if ($[114] !== as || $[115] !== formFieldProps || $[116] !== onFocusCapture || $[117] !== onMouseEnter || $[118] !== t20 || $[119] !== t21 || $[120] !== t22) {
 		t23 = /* @__PURE__ */ jsxs(FormField, {
 			...formFieldProps,
 			...t20,
@@ -378,38 +380,38 @@ var SelectDesktop = (t0) => {
 			ref: wrapperRef,
 			children: [t21, t22]
 		});
-		$[113] = as;
-		$[114] = formFieldProps;
-		$[115] = onFocusCapture;
-		$[116] = onMouseEnter;
-		$[117] = t20;
-		$[118] = t21;
-		$[119] = t22;
-		$[120] = t23;
-	} else t23 = $[120];
+		$[114] = as;
+		$[115] = formFieldProps;
+		$[116] = onFocusCapture;
+		$[117] = onMouseEnter;
+		$[118] = t20;
+		$[119] = t21;
+		$[120] = t22;
+		$[121] = t23;
+	} else t23 = $[121];
 	let t24;
-	if ($[121] !== WrapperComponent || $[122] !== t19 || $[123] !== t23) {
+	if ($[122] !== WrapperComponent || $[123] !== t19 || $[124] !== t23) {
 		t24 = /* @__PURE__ */ jsx(WrapperComponent, {
 			...t19,
 			children: t23
 		});
-		$[121] = WrapperComponent;
-		$[122] = t19;
-		$[123] = t23;
-		$[124] = t24;
-	} else t24 = $[124];
+		$[122] = WrapperComponent;
+		$[123] = t19;
+		$[124] = t23;
+		$[125] = t24;
+	} else t24 = $[125];
 	let t25;
-	if ($[125] !== as || $[126] !== error || $[127] !== t24) {
+	if ($[126] !== as || $[127] !== error || $[128] !== t24) {
 		t25 = /* @__PURE__ */ jsx(TooltipWrapper, {
 			as,
 			error,
 			children: t24
 		});
-		$[125] = as;
-		$[126] = error;
-		$[127] = t24;
-		$[128] = t25;
-	} else t25 = $[128];
+		$[126] = as;
+		$[127] = error;
+		$[128] = t24;
+		$[129] = t25;
+	} else t25 = $[129];
 	return t25;
 };
 function _temp(item) {

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" | "isRequired" | "isDirty" | "leadingContent" | "trailingContent" | "onMouseEnter" | "onFocusCapture"> {
+interface SelectInputProps extends InputVariantProps, Pick<SelectBaseProps, "ref" | "placeholder" | "isDisabled" | "hideDropdownIcon" | "isSearchable" | "isClearable" | "isClearableIfDisabled" | "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, isRequired, isDirty, onCloseComboBox, onBlur, leadingContent, trailingContent, onMouseEnter, onFocusCapture, ...props }: SelectInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectInput: ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, isClearableIfDisabled, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onBlur, leadingContent, trailingContent, onMouseEnter, onFocusCapture, ...props }: SelectInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,3 @@
-import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
 import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import "../../../../config/i18n.js";
@@ -9,17 +8,18 @@ import { SelectInputTags } from "./SelectInputTags.js";
 import { SelectContext } from "./select.context.js";
 import { selectInputTagsContentWrapperDefinition } from "./selectInput.cva.js";
 import { useKeyInteractions } from "../../../../hooks/useKeyInteractions.js";
-import { c } from "react/compiler-runtime";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
 import { clsx } from "clsx";
 import { use, useRef, useState } from "react";
 import { Button, ComboBoxStateContext, Input } from "react-aria-components";
+import { c } from "react/compiler-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/Selection/shared/SelectInput.tsx
 var SelectInput = (t0) => {
-	const $0 = c(136);
-	const { 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 } = t0;
+	const $0 = c(137);
+	const { ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, isClearableIfDisabled, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onBlur, leadingContent, trailingContent, onMouseEnter, onFocusCapture, ...props } = t0;
 	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
 	const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBaseDefinition);
 	const inputClearClassCva = UIOverrides.useCva("input.clearClassCva", inputClearClassDefinition);
@@ -311,7 +311,7 @@ var SelectInput = (t0) => {
 			className: clsx("group/select-trigger w-full truncate text-start outline-none disabled:text-text-default-3", showTags && "absolute inset-0 z-base"),
 			onKeyDown: onTriggerKeyDown,
 			...fieldProps,
-			children: [(as === "floating" && isEmpty || isMultiple && !isEmpty) && /* @__PURE__ */ jsx(Fragment, { children: "\xA0" }), (isEmpty || !isMultiple) && (as !== "floating" || !isEmpty) && /* @__PURE__ */ jsxs(Typography, {
+			children: [(as === "floating" && isEmpty || isMultiple && !isEmpty) && /* @__PURE__ */ jsx(Fragment$1, { children: "\xA0" }), (isEmpty || !isMultiple) && (as !== "floating" || !isEmpty) && /* @__PURE__ */ jsxs(Typography, {
 				size: "label-1",
 				as: "span",
 				className: clsx("truncate empty:before:inline-block empty:before:content-['']", isEmpty && "text-text-default-3 group-disabled/select-trigger:text-interactive-text-secondary-disabled"),
@@ -355,8 +355,8 @@ var SelectInput = (t0) => {
 		$0[92] = t38;
 	} else t38 = $0[92];
 	let t39;
-	if ($0[93] !== as || $0[94] !== inputClearClassCva || $0[95] !== isClearable || $0[96] !== isDisabled || $0[97] !== onClear || $0[98] !== showClearButton) {
-		t39 = isClearable && !isDisabled && /* @__PURE__ */ jsx(InputClear, {
+	if ($0[93] !== as || $0[94] !== inputClearClassCva || $0[95] !== isClearable || $0[96] !== isClearableIfDisabled || $0[97] !== isDisabled || $0[98] !== onClear || $0[99] !== showClearButton) {
+		t39 = isClearable && (!isDisabled || isClearableIfDisabled === true) && /* @__PURE__ */ jsx(InputClear, {
 			onClear: () => {
 				onClear();
 			},
@@ -366,22 +366,23 @@ var SelectInput = (t0) => {
 		$0[93] = as;
 		$0[94] = inputClearClassCva;
 		$0[95] = isClearable;
-		$0[96] = isDisabled;
-		$0[97] = onClear;
-		$0[98] = showClearButton;
-		$0[99] = t39;
-	} else t39 = $0[99];
+		$0[96] = isClearableIfDisabled;
+		$0[97] = isDisabled;
+		$0[98] = onClear;
+		$0[99] = showClearButton;
+		$0[100] = t39;
+	} else t39 = $0[100];
 	let t40;
-	if ($0[100] !== trailingContent) {
+	if ($0[101] !== trailingContent) {
 		t40 = trailingContent && /* @__PURE__ */ jsx("div", {
 			className: "flex shrink-0 items-center",
 			children: trailingContent
 		});
-		$0[100] = trailingContent;
-		$0[101] = t40;
-	} else t40 = $0[101];
+		$0[101] = trailingContent;
+		$0[102] = t40;
+	} else t40 = $0[102];
 	let t41;
-	if ($0[102] !== hideDropdownIcon || $0[103] !== inputSizeCva || $0[104] !== isDisabled || $0[105] !== isOpen || $0[106] !== isSearchable || $0[107] !== setIsOpen || $0[108] !== size || $0[109] !== t) {
+	if ($0[103] !== hideDropdownIcon || $0[104] !== inputSizeCva || $0[105] !== isDisabled || $0[106] !== isOpen || $0[107] !== isSearchable || $0[108] !== setIsOpen || $0[109] !== size || $0[110] !== t) {
 		t41 = !hideDropdownIcon && /* @__PURE__ */ jsx(Button, {
 			excludeFromTabOrder: true,
 			"aria-label": t(($) => isOpen ? $.ui.closeAlt : $.ui.openAlt),
@@ -390,23 +391,23 @@ var SelectInput = (t0) => {
 			onPress: () => {
 				if (!isSearchable) setIsOpen(!isOpen);
 			},
-			children: /* @__PURE__ */ jsx(ArrowDropDownIcon, {
+			children: /* @__PURE__ */ jsx(ChevronDown, {
 				className: clsx("size-6 shrink-0", isOpen && "rotate-180", isDisabled ? "text-interactive-text-secondary-disabled" : "text-interactive-text-secondary-idle"),
 				"aria-hidden": "true"
 			})
 		});
-		$0[102] = hideDropdownIcon;
-		$0[103] = inputSizeCva;
-		$0[104] = isDisabled;
-		$0[105] = isOpen;
-		$0[106] = isSearchable;
-		$0[107] = setIsOpen;
-		$0[108] = size;
-		$0[109] = t;
-		$0[110] = t41;
-	} else t41 = $0[110];
+		$0[103] = hideDropdownIcon;
+		$0[104] = inputSizeCva;
+		$0[105] = isDisabled;
+		$0[106] = isOpen;
+		$0[107] = isSearchable;
+		$0[108] = setIsOpen;
+		$0[109] = size;
+		$0[110] = t;
+		$0[111] = t41;
+	} else t41 = $0[111];
 	let t42;
-	if ($0[111] !== focusWithinProps || $0[112] !== hoverProps || $0[113] !== onFocusCapture || $0[114] !== onMouseEnter || $0[115] !== ref || $0[116] !== t16 || $0[117] !== t18 || $0[118] !== t19 || $0[119] !== t20 || $0[120] !== t21 || $0[121] !== t22 || $0[122] !== t23 || $0[123] !== t24 || $0[124] !== t25 || $0[125] !== t26 || $0[126] !== t27 || $0[127] !== t28 || $0[128] !== t29 || $0[129] !== t30 || $0[130] !== t31 || $0[131] !== t38 || $0[132] !== t39 || $0[133] !== t40 || $0[134] !== t41) {
+	if ($0[112] !== focusWithinProps || $0[113] !== hoverProps || $0[114] !== onFocusCapture || $0[115] !== onMouseEnter || $0[116] !== ref || $0[117] !== t16 || $0[118] !== t18 || $0[119] !== t19 || $0[120] !== t20 || $0[121] !== t21 || $0[122] !== t22 || $0[123] !== t23 || $0[124] !== t24 || $0[125] !== t25 || $0[126] !== t26 || $0[127] !== t27 || $0[128] !== t28 || $0[129] !== t29 || $0[130] !== t30 || $0[131] !== t31 || $0[132] !== t38 || $0[133] !== t39 || $0[134] !== t40 || $0[135] !== t41) {
 		t42 = /* @__PURE__ */ jsxs("div", {
 			ref,
 			className: t16,
@@ -437,32 +438,32 @@ var SelectInput = (t0) => {
 				t41
 			]
 		});
-		$0[111] = focusWithinProps;
-		$0[112] = hoverProps;
-		$0[113] = onFocusCapture;
-		$0[114] = onMouseEnter;
-		$0[115] = ref;
-		$0[116] = t16;
-		$0[117] = t18;
-		$0[118] = t19;
-		$0[119] = t20;
-		$0[120] = t21;
-		$0[121] = t22;
-		$0[122] = t23;
-		$0[123] = t24;
-		$0[124] = t25;
-		$0[125] = t26;
-		$0[126] = t27;
-		$0[127] = t28;
-		$0[128] = t29;
-		$0[129] = t30;
-		$0[130] = t31;
-		$0[131] = t38;
-		$0[132] = t39;
-		$0[133] = t40;
-		$0[134] = t41;
-		$0[135] = t42;
-	} else t42 = $0[135];
+		$0[112] = focusWithinProps;
+		$0[113] = hoverProps;
+		$0[114] = onFocusCapture;
+		$0[115] = onMouseEnter;
+		$0[116] = ref;
+		$0[117] = t16;
+		$0[118] = t18;
+		$0[119] = t19;
+		$0[120] = t20;
+		$0[121] = t21;
+		$0[122] = t22;
+		$0[123] = t23;
+		$0[124] = t24;
+		$0[125] = t25;
+		$0[126] = t26;
+		$0[127] = t27;
+		$0[128] = t28;
+		$0[129] = t29;
+		$0[130] = t30;
+		$0[131] = t31;
+		$0[132] = t38;
+		$0[133] = t39;
+		$0[134] = t40;
+		$0[135] = t41;
+		$0[136] = t42;
+	} else t42 = $0[136];
 	return t42;
 };
 //#endregion

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

@@ -3,9 +3,9 @@ import { SelectContext } from "./select.context.js";
 import { SelectListBoxItem } from "./SelectListBoxItem.js";
 import { SelectListBoxItemSelectAll } from "./SelectListBoxItemSelectAll.js";
 import { SelectListBoxLoadingItem } from "./SelectListBoxLoadingItem.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { ListBox, ListLayout, Virtualizer } from "react-aria-components";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/inputs/Selection/shared/SelectListBox.tsx
 var SelectListBox = ({ label, selectionMode, isSearchable, isScrollable = true, virtualizerOptions, totalItems, newItemRender, onLoadMore, className, onClose, ...props }) => {
 	const { fieldState, onChange, listItems, selectableListItems, selectedIds, isMultiple, onClear, onSelectAll, hasLoadMore } = SelectContext.useSelect();

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

@@ -3,10 +3,10 @@ import "../../../../config/i18n.js";
 import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
 import { SelectContext } from "./select.context.js";
 import { selectListBoxItemDefinition } from "./selectItem.cva.js";
-import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { ListBoxItem } from "react-aria-components";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/Selection/shared/SelectListBoxItem.tsx
 var SelectListBoxItem = (t0) => {

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

@@ -3,10 +3,10 @@ import "../../../../config/i18n.js";
 import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
 import { SelectContext } from "./select.context.js";
 import { selectListBoxItemDefinition } from "./selectItem.cva.js";
-import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { ListBoxItem } from "react-aria-components";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/Selection/shared/SelectListBoxItemSelectAll.tsx
 var SelectListBoxItemSelectAll = (t0) => {

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

@@ -4,9 +4,9 @@ import "../../../../config/i18n.js";
 import { SelectContext } from "./select.context.js";
 import { selectListBoxItemDefinition } from "./selectItem.cva.js";
 import { useIntersectionObserver } from "../../../../hooks/useIntersectionObserver.js";
+import { ListBoxItem } from "react-aria-components";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import { ListBoxItem } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/Selection/shared/SelectListBoxLoadingItem.tsx
 var SelectListBoxLoadingItem = (t0) => {

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

@@ -1,9 +1,9 @@
 import "../../../../config/i18n.js";
 import { TextButton } from "../../../buttons/TextButton/TextButton.js";
 import { SelectContext } from "./select.context.js";
+import { clsx } from "clsx";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/Selection/shared/SelectListBoxSelectionBar.tsx
 var SelectListBoxSelectionBar = (t0) => {

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

@@ -3,18 +3,18 @@ import { FormField } from "../../FormField/FormField.js";
 import { SelectContext } from "./select.context.js";
 import { SelectInput } from "./SelectInput.js";
 import { SelectListBox } from "./SelectListBox.js";
-import { SearchIcon } from "../../../../assets/icons/Search.js";
 import { FormFieldHeaderClose } from "../../FormField/FormFieldHeaderClose.js";
 import { TextInput } from "../../Input/TextInput/TextInput.js";
 import { SelectListBoxSelectionBar } from "./SelectListBoxSelectionBar.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Search } from "lucide-react";
 import { clsx } from "clsx";
 import { useRef } from "react";
 import { DialogTrigger } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 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, bottomSheetProps, ...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;
+	const { label, tooltipText, helperText, isDirty, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, hideSearchIcon, isSearchable, isClearable, isClearableIfDisabled, as, size, collapseAfter, selectedTagsType } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -77,6 +77,7 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 				hideDropdownIcon,
 				isSearchable: false,
 				isClearable,
+				isClearableIfDisabled,
 				showSelectionContent,
 				onBlur: void 0,
 				fieldProps,
@@ -109,7 +110,7 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 						rightContent: /* @__PURE__ */ jsx(FormFieldHeaderClose, { onClose: close }),
 						inputClassName,
 						className: "mb-list-height-title-bottom px-list-side-title",
-						leadingIcon: !hideSearchIcon ? /* @__PURE__ */ jsx(SearchIcon, { className: "size-6" }) : void 0,
+						leadingIcon: !hideSearchIcon ? /* @__PURE__ */ jsx(Search, { className: "size-6" }) : void 0,
 						size: "default",
 						isClearable
 					}), /* @__PURE__ */ jsx(SelectListBox, {

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

@@ -1,9 +1,9 @@
-import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
 import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { inputSizeDefinition } from "../../shared/input.cva.js";
+import { ChevronDown } from "lucide-react";
+import { clsx } from "clsx";
 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);
@@ -26,7 +26,7 @@ var StaticSelectTrailingContent = (t0) => {
 			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") })
+			children: /* @__PURE__ */ jsx(ChevronDown, { className: clsx("size-6 shrink-0", isDisabled ? "text-interactive-text-secondary-disabled" : "text-interactive-text-secondary-idle") })
 		}) : void 0;
 		$[2] = hideDropdownIcon;
 		$[3] = inputSizeCva;

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

@@ -25,8 +25,8 @@ export declare namespace SelectContext {
         isMultiple: boolean;
         multiSelectAutoConfirm: 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" | "searchDebounceDelay" | "multiSelectAutoConfirm" | "onBlur">;
-    export const Provider: ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, ignoreInputValueFiltering, fireBlurOnChange, searchDebounceDelay, multiSelectAutoConfirm, 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" | "ignoreInputValueFiltering" | "searchDebounceDelay" | "multiSelectAutoConfirm" | "onBlur">;
+    export const Provider: ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, ignoreInputValueFiltering, searchDebounceDelay, multiSelectAutoConfirm, 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,7 +1,7 @@
-import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
 import { useSelectItems } from "./useSelectItems.js";
-import { jsx } from "react/jsx-runtime";
+import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
 import { createContext, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/inputs/Selection/shared/select.context.tsx
 var SelectContext;
 (function(_SelectContext) {
@@ -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, searchDebounceDelay, multiSelectAutoConfirm = false, onBlur: fieldOnBlur, children, mapInitialToSelectItem = defaultMapInitialToSelectItem, ...props }) => {
+	_SelectContext.Provider = ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, ignoreInputValueFiltering, searchDebounceDelay, multiSelectAutoConfirm = false, onBlur: fieldOnBlur, children, mapInitialToSelectItem = defaultMapInitialToSelectItem, ...props }) => {
 		const isMultiple = props.selectionMode === "multiple";
 		const initialSelectedItems = useMemo(() => {
 			if (!props.initialSelection) return null;
@@ -75,9 +75,6 @@ var SelectContext;
 			onSearchChangeDebounced,
 			updateValue
 		]);
-		const triggerBlurOnChange = useCallback(() => {
-			if (fireBlurOnChange) fieldOnBlur?.({});
-		}, [fireBlurOnChange, fieldOnBlur]);
 		const syncFieldState = (value_1) => {
 			const newFieldState = {
 				value: value_1,
@@ -120,7 +117,7 @@ var SelectContext;
 					searchValue: ""
 				};
 				setFieldState(newFieldState_1);
-				if (emitStateChanges(newFieldState_1)) triggerBlurOnChange();
+				emitStateChanges(newFieldState_1);
 			}
 			if (!isMultiple) {
 				setIsOpen(false);
@@ -131,8 +128,7 @@ var SelectContext;
 			onNewItemOption,
 			fieldState.inputValue,
 			getItem_0,
-			isMultiple,
-			triggerBlurOnChange
+			isMultiple
 		]);
 		const onClear = useCallback(() => {
 			if (selectedIds.length === 0) {

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

@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
 import { Key } from 'react-aria-components';
-import { FieldValues } from 'react-hook-form';
+import { FieldValues } from '../../shared/form.binding';
 import { ControlProps } from '../../shared/form.types';
 export interface SelectItem<TKey extends Key = Key> {
     id: TKey;

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

@@ -59,6 +59,7 @@ export interface InputFrameProps extends InputVariantProps, Partial<FormFieldPro
     isLoading?: boolean;
     action?: InputFrameAction;
     isClearable?: boolean;
+    isClearableIfDisabled?: boolean;
     showClear?: boolean;
     onStaticInteract?: (shouldFocus: boolean, target?: EventTarget | null) => void;
     onStaticPress?: () => void;