@povio/ui 2.2.9-rc.33 → 2.2.9-rc.35

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

@@ -97,6 +97,8 @@ var NumberInputBase = (props) => {
 					...rest
 				}), inputClassName),
 				onClick: () => inputRef.current?.focus(),
+				"data-is-empty": value === null || value === void 0 || void 0,
+				"data-is-required": isRequired || void 0,
 				children: /* @__PURE__ */ jsx(InputContent, {
 					...inputContentProps,
 					headerProps,
@@ -164,6 +166,7 @@ var NumberInput = ({ renderStaticInput, ...props }) => {
 			onStaticInteract: renderRealInput,
 			inputClassName: props.inputClassName,
 			children: (dataAttributeProps) => /* @__PURE__ */ jsx("input", {
+				type: "number",
 				ref: inputRef,
 				disabled: isDisabled,
 				tabIndex: -1,

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

@@ -4,7 +4,8 @@ import { FieldValues } from 'react-hook-form';
 import { FormFieldProps } from '../FormField/FormField';
 import { RadioVariantProps } from './radio.cva';
 import { ControlProps } from '../shared/form.types';
-interface RadioGroupBaseProps extends Omit<FormFieldProps, "variant">, RadioVariantProps, Omit<AriaRadioGroupProps, "className"> {
+import { InputVariantProps } from '../shared/input.cva';
+interface RadioGroupBaseProps extends Omit<FormFieldProps, "variant">, RadioVariantProps, Omit<InputVariantProps, "variant">, Omit<AriaRadioGroupProps, "className"> {
     ref?: Ref<HTMLDivElement>;
     options: {
         label: string | ReactElement;

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

@@ -1,20 +1,30 @@
 import { UIStyle } from "../../../config/uiStyle.context.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import { CheckContent } from "../shared/CheckContent.js";
+import { FormFieldLabel } from "../FormField/FormFieldLabel.js";
+import { inputBase, inputSize } from "../shared/input.cva.js";
 import { FormField } from "../FormField/FormField.js";
+import { TooltipWrapper } from "../shared/TooltipWrapper.js";
 import { radio, radioContentClassName, radioIndicatorClass, radioTypography } from "./radio.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Radio, RadioGroup } from "react-aria-components";
+import { useLabel } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 //#region src/components/inputs/RadioGroup/RadioGroup.tsx
 var RadioGroupBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const radioCva = UIStyle.useCva("radio.cva", radio);
+	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
+	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const radioTypographyMap = UIStyle.useMapper("radio.typography", radioTypography);
 	const radioContentClassNameMap = UIStyle.useMapper("radio.contentClassName", radioContentClassName);
-	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 { ref, label, tooltipText, helperText, isDirty, isRequired, rightContent, isDisabled, headerClassName, errorClassName, labelClassName, inputClassName, isHeaderHidden, error, className, options, value, defaultValue, as: asProp, size: sizeProp, variant: variantProp, hideLabel: hideLabelProp, ...rest } = props;
+	const as = asProp ?? ui.input.as;
+	const size = sizeProp ?? ui.input.size;
+	const variant = variantProp ?? ui.radioGroup.variant;
+	const hideLabel = hideLabelProp ?? ui.radioGroup.hideLabel;
 	const radioClassName = radioCva({
 		variant,
 		...rest
@@ -35,32 +45,80 @@ var RadioGroupBase = (props) => {
 		helperText,
 		isRequired,
 		rightContent,
-		isHeaderHidden,
+		isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
 		hideLabel,
 		isDisabled,
 		headerClassName,
 		errorClassName
 	};
-	return /* @__PURE__ */ jsx(RadioGroup, {
-		...rest,
+	const { labelProps, fieldProps } = useLabel({ label });
+	const headerProps = {
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
 		isDisabled,
-		isInvalid: !!error,
-		"data-is-dirty": isDirty || void 0,
-		"data-is-required": isRequired || void 0,
-		children: /* @__PURE__ */ jsx(FormField, {
-			...formFieldProps,
-			children: /* @__PURE__ */ jsx("div", {
-				className: clsx("flex flex-col", inputClassName),
-				children: options.map((option) => /* @__PURE__ */ jsxs(Radio, {
-					value: option.value,
-					className: clsx("relative", radioIndicatorClass),
-					children: [/* @__PURE__ */ jsx("div", { className: radioClassName }), /* @__PURE__ */ jsx(CheckContent, {
-						typography: radioTypographyProps,
-						contentClassName: radioContentClassNameValue,
-						className: labelClassName,
-						children: option.label
-					})]
-				}, option.value))
+		className: headerClassName,
+		labelProps
+	};
+	const selectedValue = value ?? defaultValue;
+	const shouldRenderInputFrame = as !== "default";
+	return /* @__PURE__ */ jsx(TooltipWrapper, {
+		as,
+		error,
+		triggerTabIndex: as === "inline" ? -1 : void 0,
+		children: /* @__PURE__ */ jsx(RadioGroup, {
+			...rest,
+			...fieldProps,
+			ref,
+			value,
+			defaultValue,
+			isDisabled,
+			isInvalid: !!error,
+			"data-is-dirty": isDirty || void 0,
+			"data-is-required": isRequired || void 0,
+			children: /* @__PURE__ */ jsx(FormField, {
+				...formFieldProps,
+				as,
+				labelProps,
+				className: clsx("w-full", as === "inline" && "h-full", className),
+				tabIndex: as === "inline" ? -1 : void 0,
+				children: /* @__PURE__ */ jsx("div", {
+					className: clsx("group/radio-group-content relative", shouldRenderInputFrame && inputBaseCva({
+						variant: ui.input.variant,
+						as
+					}), inputClassName),
+					"data-rac": "",
+					"data-disabled": isDisabled || void 0,
+					"data-is-disabled": isDisabled || void 0,
+					"data-invalid": !!error || void 0,
+					"data-has-selection": selectedValue != null && selectedValue !== "" ? true : void 0,
+					"data-radio-group-content": "",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: clsx("relative flex", as === "inline" || as === "filter" ? "flex-row flex-wrap items-center gap-2" : "flex-col", shouldRenderInputFrame && clsx("gap-2", inputSizeCva({
+							as,
+							size
+						}))),
+						"data-is-dirty": isDirty || void 0,
+						"data-is-required": isRequired || void 0,
+						children: [as && ["filter", "floating"].includes(as) && /* @__PURE__ */ jsx(FormFieldLabel, {
+							as,
+							size,
+							...headerProps
+						}), options.map((option) => /* @__PURE__ */ jsxs(Radio, {
+							value: option.value,
+							className: clsx("relative", radioIndicatorClass),
+							children: [/* @__PURE__ */ jsx("div", { className: radioClassName }), /* @__PURE__ */ jsx(CheckContent, {
+								typography: radioTypographyProps,
+								contentClassName: radioContentClassNameValue,
+								className: labelClassName,
+								children: option.label
+							})]
+						}, option.value))]
+					})
+				})
 			})
 		})
 	});

package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js

@@ -21,12 +21,16 @@ var QueryAutocomplete = ({ query, queryParams, queryOptions, queryMap, leadingCo
 		onChange?.(value);
 		props.onBlur?.({ target: { value: null } });
 	};
+	const handleSearchChange = (value) => {
+		setSearch(value);
+		handleEnableQuery();
+	};
 	const { isInitialQueryDisabled: _, ...autocompleteProps } = restProps;
 	return /* @__PURE__ */ jsx(Autocomplete, {
 		...autocompleteProps,
 		items,
 		totalItems,
-		onSearchChange: setSearch,
+		onSearchChange: handleSearchChange,
 		isClientSearchDisabled: true,
 		isLoading,
 		onChange: handleChange,

package/dist/components/inputs/shared/useStaticInputHandoff.js

@@ -1,20 +1,24 @@
-import { useEffect, useRef, useState } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 //#region src/components/inputs/shared/useStaticInputHandoff.ts
 var useStaticInputHandoff = ({ inputRef, renderInput, setRenderInput, getFocusTarget }) => {
 	const [shouldFocus, setShouldFocus] = useState(false);
 	const pendingStaticChangeRef = useRef(null);
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (!renderInput || !shouldFocus) return;
-		const frame = requestAnimationFrame(() => {
+		const focusRealInput = (replayPendingChange) => {
 			const input = inputRef.current;
 			const pendingValue = pendingStaticChangeRef.current;
 			const focusTarget = input ? getFocusTarget?.(input) ?? input : null;
-			if (focusTarget instanceof HTMLInputElement && pendingValue != null) {
+			if (replayPendingChange && focusTarget instanceof HTMLInputElement && pendingValue != null) {
 				(Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set)?.call(focusTarget, pendingValue);
 				focusTarget.dispatchEvent(new Event("input", { bubbles: true }));
 				pendingStaticChangeRef.current = null;
 			}
 			focusTarget?.focus();
+		};
+		focusRealInput(true);
+		const frame = requestAnimationFrame(() => {
+			focusRealInput(false);
 			setShouldFocus(false);
 		});
 		return () => {

package/dist/tw-ui-plugin.js

@@ -7,6 +7,7 @@ var uiPlugin = plugin(({ addVariant }) => {
 		"&:is(:where(.group\\/select-content)[data-has-selection] *)",
 		"&:is(:where(.group\\/select-content)[data-has-search] *)",
 		"&:is(:where(.group\\/select-content)[data-searchable-focus-within] *)",
+		"&:is(:where(.group\\/radio-group-content)[data-radio-group-content] *)",
 		"&:is(:where(.group\\/date-picker-content)[data-has-selection] *)",
 		"&:is(:where(.group\\/date-picker-content)[data-focus-within] *)"
 	].join(", "));
@@ -14,6 +15,7 @@ var uiPlugin = plugin(({ addVariant }) => {
 		"&:is(:where(.group\\/input-content):has(*:is(input:disabled)) *)",
 		"&:is(:where(.group\\/select-content)[data-disabled] *)",
 		"&:is(:where(.group\\/select-content):has(*:is(input:disabled)) *)",
+		"&:is(:where(.group\\/radio-group-content)[data-disabled] *)",
 		"&:is(:where(.group\\/text-area):has(*:is(textarea:disabled)) *)",
 		"&:is(:where(.group\\/text-editor):where([data-rac])[data-disabled] *)",
 		"&:is(:where(.group\\/date-picker-content):where([data-rac])[data-disabled] *)"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "2.2.9-rc.33",
+  "version": "2.2.9-rc.35",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",