@povio/ui 2.2.1 → 2.2.3

package/dist/components/inputs/FormField/FormFieldError.js

@@ -1,10 +1,10 @@
-import { Typography } from "../../text/Typography/Typography.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { typography } from "../../text/Typography/typography.cva.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 const FormFieldError = ({ error, isDisabled, isHidden, className }) => {
-	return /* @__PURE__ */ jsx(Typography, {
-		className: clsx("text-text-error-1", !error || isDisabled || isHidden ? "sr-only" : "mt-1-5", className),
-		size: "label-3",
+	return /* @__PURE__ */ jsx("p", {
+		className: clsx(UIStyle.useCva("typography.cva", typography)({ size: "label-3" }), "text-text-error-1", !error || isDisabled || isHidden ? "sr-only" : "mt-1-5", className),
 		children: error
 	});
 };

package/dist/components/inputs/FormField/FormFieldLabel.d.ts

@@ -8,5 +8,6 @@ export interface FormFieldLabelProps extends LabelBaseProps, InputSizeProps {
     isDisabled?: boolean;
     ref?: RefCallback<HTMLOrSVGElement>;
     labelProps?: DOMAttributes<HTMLLabelElement>;
+    className?: string;
 }
-export declare const FormFieldLabel: ({ ref, as, label, isRequired, isDisabled, labelProps, size }: FormFieldLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormFieldLabel: ({ ref, as, label, isRequired, isDisabled, labelProps, className, }: FormFieldLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/FormField/FormFieldLabel.js

@@ -1,32 +1,25 @@
 import { UIStyle } from "../../../config/uiStyle.context.js";
-import { Typography } from "../../text/Typography/Typography.js";
-import { inputSide } from "../shared/input.cva.js";
+import { typography } from "../../text/Typography/typography.cva.js";
 import { labelBase, labelTypography } from "../shared/label.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Label } from "react-aria-components";
-const FormFieldLabel = ({ ref, as, label, isRequired, isDisabled, labelProps, size }) => {
-	const uiStyle = UIStyle.useConfig();
-	const labelTypographyMap = uiStyle?.label?.typography ?? labelTypography;
-	const labelBaseCva = uiStyle?.label?.cva ?? labelBase;
-	const inputSideCva = uiStyle?.input?.sideCva ?? inputSide;
-	return /* @__PURE__ */ jsx(Label, {
+const FormFieldLabel = ({ ref, as, label, isRequired, isDisabled, labelProps, className }) => {
+	const typographyCva = UIStyle.useCva("typography.cva", typography);
+	const labelTypographyMap = UIStyle.useMapper("label.typography", labelTypography);
+	const labelBaseCva = UIStyle.useCva("label.cva", labelBase);
+	return /* @__PURE__ */ jsxs(Label, {
 		...labelProps,
-		children: /* @__PURE__ */ jsxs(Typography, {
-			ref,
-			as: "span",
+		ref,
+		className: clsx(typographyCva({
 			size: "label-2",
 			variant: "prominent-1",
-			...labelTypographyMap({ as }),
-			className: clsx(labelBaseCva({ as }), as && ["filter", "floating"].includes(as) && inputSideCva({
-				size,
-				type: "left"
-			}), labelProps?.className),
-			children: [label, isRequired && /* @__PURE__ */ jsx("span", {
-				className: clsx(!isDisabled && "text-text-error-1"),
-				children: "*"
-			})]
-		})
+			...labelTypographyMap({ as })
+		}), labelBaseCva({ as }), className, labelProps?.className),
+		children: [label, isRequired && /* @__PURE__ */ jsx("span", {
+			className: clsx(!isDisabled && "text-text-error-1"),
+			children: "*"
+		})]
 	});
 };
 export { FormFieldLabel };

package/dist/components/inputs/Input/NumberInput/NumberInput.js

@@ -1,5 +1,6 @@
+import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
-import { useInputCva } from "../../shared/input.cva.js";
+import { inputBase } from "../../shared/input.cva.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { InputContent } from "../shared/InputContent.js";
@@ -13,7 +14,8 @@ import { Controller } from "react-hook-form";
 import { useNumberFieldState } from "react-stately";
 var NumberInputBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const inputCva = useInputCva();
+	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
+	const inputRef = useRef(null);
 	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, formatOptions = ui.numberInput.formatOptions, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable, ...rest } = props;
 	const numberFieldRef = useRef(null);
 	const { isFocusVisible } = useFocusVisible();
@@ -80,30 +82,31 @@ var NumberInputBase = (props) => {
 			labelProps,
 			className: clsx("group w-full", className),
 			tabIndex: as === "inline" ? -1 : void 0,
-			children: /* @__PURE__ */ jsx(InputContent, {
-				...inputContentProps,
-				headerProps,
-				as,
-				size,
-				children: (style) => /* @__PURE__ */ jsx(Input, {
-					...inputProps,
-					ref,
-					"data-is-dirty": isDirty || void 0,
-					"data-is-required": isRequired || void 0,
-					"data-is-empty": value === null || value === void 0 || void 0,
-					placeholder: as === "floating" ? "" : inputProps.placeholder,
-					className: inputCva({
-						variant,
-						as,
-						size,
-						...rest,
-						className: inputClassName
-					}),
-					style,
-					onFocus: (e) => {
-						inputProps.onFocus?.(e);
-						if (isFocusVisible) e.target.select();
-					}
+			children: /* @__PURE__ */ jsx("div", {
+				className: clsx("relative flex cursor-text has-disabled:cursor-default", inputBaseCva({
+					variant,
+					as,
+					...rest
+				}), inputClassName),
+				onClick: () => inputRef.current?.focus(),
+				children: /* @__PURE__ */ jsx(InputContent, {
+					...inputContentProps,
+					headerProps,
+					as,
+					size,
+					children: /* @__PURE__ */ jsx(Input, {
+						...inputProps,
+						ref: mergeRefs(ref, inputRef),
+						"data-is-dirty": isDirty || void 0,
+						"data-is-required": isRequired || void 0,
+						"data-is-empty": value === null || value === void 0 || void 0,
+						placeholder: as === "floating" ? "" : inputProps.placeholder,
+						className: "w-full outline-none",
+						onFocus: (e) => {
+							inputProps.onFocus?.(e);
+							if (isFocusVisible) e.target.select();
+						}
+					})
 				})
 			})
 		})

package/dist/components/inputs/Input/TextArea/TextArea.js

@@ -1,8 +1,8 @@
 import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
-import { inputSize, useInputCva } from "../../shared/input.cva.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
+import { inputSide, inputSize, useInputCva } from "../../shared/input.cva.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -15,7 +15,8 @@ import { Controller } from "react-hook-form";
 var TextAreaBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const inputCva = useInputCva();
-	const inputSizeCva = UIStyle.useConfig()?.input?.sizeCva ?? inputSize;
+	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
+	const inputSideCva = UIStyle.useCva("input.sideCva", inputSide);
 	const { ref, className, inputClassName, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, value, onChange, onBlur, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, isClearable = ui.input.isClearable, ...rest } = props;
 	const textFieldRef = useRef(null);
 	const { labelProps, inputProps } = useTextField({
@@ -69,7 +70,11 @@ var TextAreaBase = (props) => {
 				children: [
 					as === "floating" && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
 						as,
-						...headerProps
+						...headerProps,
+						className: clsx(headerProps.className, inputSideCva({
+							size: "default",
+							type: "left"
+						}))
 					}),
 					/* @__PURE__ */ jsx(TextArea, {
 						...inputProps,
@@ -87,10 +92,13 @@ var TextAreaBase = (props) => {
 					}),
 					showClear && /* @__PURE__ */ jsx("span", {
 						className: clsx("absolute top-0 right-0", inputSizeCva({ size: "default" })),
-						children: /* @__PURE__ */ jsx(InputClear, { onClear: () => {
-							onChange?.("");
-							onBlur?.(null);
-						} })
+						children: /* @__PURE__ */ jsx(InputClear, {
+							onClear: () => {
+								onChange?.("");
+								onBlur?.(null);
+							},
+							show: true
+						})
 					})
 				]
 			})

package/dist/components/inputs/Input/TextInput/TextInput.js

@@ -1,5 +1,6 @@
+import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
-import { useInputCva } from "../../shared/input.cva.js";
+import { inputBase } from "../../shared/input.cva.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { InputContent } from "../shared/InputContent.js";
@@ -12,7 +13,8 @@ import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 var TextInputBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const inputCva = useInputCva();
+	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
+	const inputRef = useRef(null);
 	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, ...rest } = props;
 	const textFieldRef = useRef(null);
 	const { isFocusVisible } = useFocusVisible();
@@ -72,31 +74,32 @@ var TextInputBase = (props) => {
 			labelProps,
 			className: clsx("group w-full", as === "inline" && "h-full", className),
 			tabIndex: as === "inline" ? -1 : void 0,
-			children: /* @__PURE__ */ jsx(InputContent, {
-				...inputContentProps,
-				headerProps,
-				as,
-				size,
-				children: (style) => /* @__PURE__ */ jsx(Input, {
-					...inputProps,
-					ref,
-					"data-is-empty": value === "" || value === null || value === void 0 || void 0,
-					"data-is-dirty": isDirty || void 0,
-					"data-is-required": isRequired || void 0,
-					"data-is-disabled": isDisabled || void 0,
-					placeholder: as === "floating" ? "" : inputProps.placeholder,
-					className: inputCva({
-						variant,
-						as,
-						size,
-						...rest,
-						className: inputClassName
-					}),
-					style,
-					onFocus: (e) => {
-						inputProps.onFocus?.(e);
-						if (isFocusVisible) e.target.select();
-					}
+			children: /* @__PURE__ */ jsx("div", {
+				className: clsx("relative flex cursor-text has-disabled:cursor-default", inputBaseCva({
+					variant,
+					as,
+					...rest
+				}), inputClassName),
+				onClick: () => inputRef.current?.focus(),
+				children: /* @__PURE__ */ jsx(InputContent, {
+					...inputContentProps,
+					headerProps,
+					as,
+					size,
+					children: /* @__PURE__ */ jsx(Input, {
+						...inputProps,
+						ref: mergeRefs(ref, inputRef),
+						"data-is-empty": value === "" || value === null || value === void 0 || void 0,
+						"data-is-dirty": isDirty || void 0,
+						"data-is-required": isRequired || void 0,
+						"data-is-disabled": isDisabled || void 0,
+						placeholder: as === "floating" ? "" : inputProps.placeholder,
+						className: "w-full outline-none",
+						onFocus: (e) => {
+							inputProps.onFocus?.(e);
+							if (isFocusVisible) e.target.select();
+						}
+					})
 				})
 			})
 		})

package/dist/components/inputs/Input/shared/InputContent.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, FC, FocusEvent, ReactElement, ReactNode, SVGProps } from 'react';
+import { FC, FocusEvent, ReactElement, ReactNode, SVGProps } from 'react';
 import { InlineIconButtonProps } from '../../../buttons/InlineIconButton/InlineIconButton';
 import { FormFieldHeaderProps } from '../../FormField/FormFieldHeader';
 import { InputVariantProps } from '../../shared/input.cva';
@@ -22,7 +22,7 @@ export interface InputContentProps {
     headerProps?: FormFieldHeaderProps;
 }
 interface InputContentComponentProps extends InputContentProps, InputVariantProps {
-    children: (style: CSSProperties) => ReactNode;
+    children: ReactNode;
 }
 export declare const InputContent: ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, unit, isLoading, isDisabled, action, isClearable, value, onChange, onBlur, children, headerProps, as, size, }: InputContentComponentProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/Input/shared/InputContent.js

@@ -1,94 +1,74 @@
 import { UIStyle } from "../../../../config/uiStyle.context.js";
-import { Typography } from "../../../text/Typography/Typography.js";
+import { typography } from "../../../text/Typography/typography.cva.js";
 import { Loader } from "../../../status/Loader/Loader.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
-import { inputSide } from "../../shared/input.cva.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
+import { inputSize } from "../../shared/input.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { isValidElement, useMemo } from "react";
-import useMeasure from "react-use-measure";
+import { isValidElement } from "react";
 const InputContent = ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, unit, isLoading, isDisabled, action, isClearable, value, onChange, onBlur, children, headerProps, as, size }) => {
-	const inputSideCva = UIStyle.useConfig()?.input?.sideCva ?? inputSide;
-	const [leadingContentRef, { width: leadingWidth }] = useMeasure();
-	const [trailingContentRef, { width: trailingWidth }] = useMeasure();
-	const [labelContentRef, { width: labelWidth }] = useMeasure();
+	const typographyCva = UIStyle.useCva("typography.cva", typography);
+	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const isLeadingIconElement = LeadingIcon && isValidElement(LeadingIcon);
 	const isTrailingIconElement = TrailingIcon && isValidElement(TrailingIcon);
-	const showClear = isClearable && value != null && value !== "";
-	const style = useMemo(() => {
-		const leftPadding = as === "filter" ? labelWidth + leadingWidth : leadingWidth;
-		return {
-			paddingLeft: `calc(var(${inputSideCva({
-				size,
-				type: "var"
-			})}) + ${leftPadding}px + ${leftPadding > 0 ? "var(--spacing-2)" : "0px"})`,
-			paddingRight: `calc(var(${inputSideCva({
-				size,
-				type: "var"
-			})}) + ${trailingWidth}px + ${trailingWidth > 0 ? "var(--spacing-2)" : "0px"})`
-		};
-	}, [
-		leadingWidth,
-		trailingWidth,
-		labelWidth,
-		as,
-		size,
-		inputSideCva
-	]);
+	const showClear = value != null && value !== "" && !isDisabled;
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("group/input-content relative", as === "inline" && "h-full"),
-		children: [
-			as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
-				ref: labelContentRef,
-				as,
-				...headerProps
-			}),
-			children(style),
-			LeadingIcon && /* @__PURE__ */ jsx("div", {
-				ref: leadingContentRef,
-				className: clsx("absolute top-1/2 -translate-y-1/2", !isLeadingIconElement && "pointer-events-none", inputSideCva({
-					size,
-					type: "left"
-				})),
+		className: "flex w-full items-center gap-input-gap-input-text-to-elements",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: clsx(inputSizeCva({
+				size,
+				as
+			}), "group/input-content flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", as === "inline" && "h-full"),
+			children: [LeadingIcon && /* @__PURE__ */ jsx("div", {
+				className: clsx(!isLeadingIconElement && "pointer-events-none"),
 				children: isLeadingIconElement ? LeadingIcon : /* @__PURE__ */ jsx(LeadingIcon, { className: "size-6 text-interactive-text-secondary-idle" })
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				ref: trailingContentRef,
-				className: clsx("absolute top-1/2 flex -translate-y-1/2 items-center gap-2", !isTrailingIconElement && !action && !showClear && "pointer-events-none", inputSideCva({
+			}), /* @__PURE__ */ jsxs("div", {
+				className: clsx("flex w-full", as === "floating" && "flex-col", as === "filter" && "gap-input-gap-input-text-to-elements"),
+				children: [as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+					as,
 					size,
-					type: "right"
-				})),
-				children: [
-					showClear && !isDisabled && /* @__PURE__ */ jsx(InputClear, { onClear: () => {
+					...headerProps
+				}), children]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: clsx(inputSizeCva({
+				size,
+				as
+			}), "flex items-center gap-input-gap-trailing-elements py-0! pl-0!", !isTrailingIconElement && !action && !(isClearable && showClear) && "pointer-events-none"),
+			children: [
+				isClearable && /* @__PURE__ */ jsx(InputClear, {
+					onClear: () => {
 						onChange?.("");
 						onBlur?.({ target: { value: "" } });
-					} }),
-					unit && /* @__PURE__ */ jsx(Typography, {
-						as: "span",
+					},
+					show: showClear
+				}),
+				unit && /* @__PURE__ */ jsx("span", {
+					className: typographyCva({
 						size: "label-2",
 						variant: "prominent-1",
-						className: "text-text-default-3",
-						children: unit
-					}),
-					isLoading && /* @__PURE__ */ jsx("div", {
-						className: "inline-flex",
-						children: /* @__PURE__ */ jsx(Loader, {})
-					}),
-					!isLoading && action && /* @__PURE__ */ jsx(InlineIconButton, {
-						color: "secondary",
-						icon: action.icon,
-						isDisabled,
-						onPress: action.onClick,
-						excludeFromTabOrder: true,
-						label: action.altText,
-						className: action.className
+						className: "text-text-default-3"
 					}),
-					!isLoading && !action && TrailingIcon && (isTrailingIconElement ? TrailingIcon : /* @__PURE__ */ jsx(TrailingIcon, { className: "size-6 text-interactive-text-secondary-idle" }))
-				]
-			})
-		]
+					children: unit
+				}),
+				isLoading && /* @__PURE__ */ jsx("div", {
+					className: "inline-flex",
+					children: /* @__PURE__ */ jsx(Loader, {})
+				}),
+				!isLoading && action && /* @__PURE__ */ jsx(InlineIconButton, {
+					color: "secondary",
+					icon: action.icon,
+					isDisabled,
+					onPress: action.onClick,
+					excludeFromTabOrder: true,
+					label: action.altText,
+					className: clsx("border-0!", action.className)
+				}),
+				!isLoading && !action && TrailingIcon && (isTrailingIconElement ? TrailingIcon : /* @__PURE__ */ jsx(TrailingIcon, { className: "size-6 text-interactive-text-secondary-idle" }))
+			]
+		})]
 	});
 };
 export { InputContent };

package/dist/components/inputs/RadioGroup/RadioGroup.js

@@ -1,6 +1,6 @@
 import { UIStyle } from "../../../config/uiStyle.context.js";
-import { CheckContent } from "../shared/CheckContent.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
+import { CheckContent } from "../shared/CheckContent.js";
 import { FormField } from "../FormField/FormField.js";
 import { radio, radioIndicatorClass, radioTypography } from "./radio.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -10,9 +10,8 @@ import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 var RadioGroupBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const uiStyle = UIStyle.useConfig();
-	const radioCva = uiStyle?.radio?.cva ?? radio;
-	const radioTypographyMap = uiStyle?.radio?.typography ?? radioTypography;
+	const radioCva = UIStyle.useCva("radio.cva", radio);
+	const radioTypographyMap = UIStyle.useMapper("radio.typography", radioTypography);
 	const { label, tooltipText, helperText, isDirty, isRequired, rightContent, isDisabled, headerClassName, errorClassName, labelClassName, inputClassName, isHeaderHidden, error, className, options, variant = ui.radioGroup.variant, hideLabel = ui.radioGroup.hideLabel, ...rest } = props;
 	const formFieldProps = {
 		className,

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

@@ -1,5 +1,5 @@
-import { useBreakpoint } from "../../../../hooks/useBreakpoint.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { useBreakpoint } from "../../../../hooks/useBreakpoint.js";
 import { SelectContext } from "./select.context.js";
 import { SelectDesktop } from "./SelectDesktop.js";
 import { SelectMobile } from "./SelectMobile.js";

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

@@ -6,11 +6,10 @@ import { SelectInput } from "./SelectInput.js";
 import { SelectListBox } from "./SelectListBox.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { Fragment as Fragment$1, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { ComboBox, DialogTrigger, Popover } from "react-aria-components";
 import { useLabel, usePreventScroll } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-import useMeasure from "react-use-measure";
 const 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;
 	const formFieldProps = {
@@ -29,9 +28,21 @@ const SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, i
 	const { labelProps, fieldProps } = useLabel({ label });
 	const triggerRef = useRef(null);
 	const closeComboBoxRef = useRef(null);
-	const [wrapperRef, { width }] = useMeasure();
+	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();
+		};
+	}, [isOpen]);
 	const onSelectionChange = (value) => {
 		if (!value) return;
 		if (value === "all-item-id") {
@@ -133,7 +144,7 @@ const SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, i
 					isOpen,
 					onOpenChange: setIsOpen,
 					className: "my-4 outline-none",
-					style: { width: !ignoreTriggerWidth ? width : void 0 },
+					style: { width: !ignoreTriggerWidth ? popoverWidth : void 0 },
 					offset: 0,
 					children: /* @__PURE__ */ jsx(SelectListBox, {
 						...props,