@povio/ui 2.2.9-rc.34 → 2.2.9-rc.36

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/Skeleton/InputFrame.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactElement, ReactNode, Ref, SVGProps } from 'react';
+import { FC, FocusEventHandler, MouseEventHandler, ReactElement, ReactNode, Ref, SVGProps } from 'react';
 import { InlineIconButtonProps } from '../../buttons/InlineIconButton/InlineIconButton';
 import { FormFieldProps } from '../FormField/FormField';
 import { FormFieldHeaderProps } from '../FormField/FormFieldHeader';
@@ -43,6 +43,8 @@ export interface InputFrameProps extends InputVariantProps, Partial<FormFieldPro
     ref?: Ref<HTMLDivElement>;
     children: InputFrameChildren;
     formFieldRef?: Ref<HTMLDivElement>;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onFocusCapture?: FocusEventHandler<HTMLDivElement>;
     labelProps?: FormFieldHeaderProps["labelProps"];
     headerProps?: FormFieldHeaderProps;
     leadingContent?: ReactNode;

package/dist/components/inputs/Skeleton/InputFrame.js

@@ -19,7 +19,7 @@ var InputFrame = (props) => {
 	const inputContentWrapperCva = UIStyle.useCva("input.contentWrapperCva", inputContentWrapper);
 	const typographyCva = UIStyle.useCva("typography.cva", typography);
 	const generatedInputId = useId();
-	const { ref, children, formFieldRef, labelProps: labelPropsProp, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel: hideLabelProp, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, actionContentPlacement = "content-wrapper", trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable: isClearableProp, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, id: idProp, inputClassName, contentClassName, contentWrapperClassName, labelPlacement = "content-wrapper", trailingClassName, variant: variantProp, as: asProp, size: sizeProp } = props;
+	const { ref, children, formFieldRef, labelProps: labelPropsProp, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel: hideLabelProp, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, actionContentPlacement = "content-wrapper", trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable: isClearableProp, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, id: idProp, inputClassName, contentClassName, contentWrapperClassName, labelPlacement = "content-wrapper", trailingClassName, onMouseEnter, onFocusCapture, variant: variantProp, as: asProp, size: sizeProp } = props;
 	const as = asProp ?? ui.input.as;
 	const size = sizeProp ?? ui.input.size;
 	const variant = variantProp ?? ui.input.variant;
@@ -81,10 +81,12 @@ var InputFrame = (props) => {
 			as,
 			labelProps,
 			tabIndex: as === "inline" ? -1 : void 0,
-			onMouseEnter: () => {
+			onMouseEnter: (event) => {
+				onMouseEnter?.(event);
 				if (renderStatic) onStaticInteract?.(false);
 			},
-			onFocusCapture: () => {
+			onFocusCapture: (event) => {
+				onFocusCapture?.(event);
 				if (renderStatic) onStaticInteract?.(true);
 			},
 			children: /* @__PURE__ */ jsxs("div", {

package/dist/hooks/useQueryAutocomplete.js

@@ -10,10 +10,10 @@ var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initia
 		...queryParams,
 		limit: queryParams?.limit ?? ApiQueryUtils.DEFAULT_LIMIT,
 		search,
-		...isFilterSearchParams(queryParams) ? { filter: {
-			...queryParams.filter,
+		filter: {
+			...isFilterSearchParams(queryParams) ? queryParams.filter : {},
 			search
-		} } : {}
+		}
 	}, {
 		...queryOptions,
 		enabled: isQueryEnabled && (queryOptions?.enabled ?? true)
@@ -27,14 +27,19 @@ var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initia
 		setIsQueryEnabled(true);
 	};
 	const infiniteQueryResult = isInfiniteQueryResult(queryResult) ? queryResult : void 0;
+	const isInfiniteQuery = infiniteQueryResult !== void 0;
 	const hasNextPage = infiniteQueryResult?.hasNextPage ?? false;
 	const fetchNextPage = infiniteQueryResult?.fetchNextPage;
 	const isFetchingNextPage = infiniteQueryResult?.isFetchingNextPage ?? false;
 	const totalItems = infiniteQueryResult?.data?.pages?.[0]?.totalItems;
 	const items = useMemo(() => {
 		if (!data) return [];
-		return mapItems(data);
-	}, [data, mapItems]);
+		return mapItems(isInfiniteQuery ? data.pages?.flatMap((page) => page?.items ?? []) : data);
+	}, [
+		data,
+		isInfiniteQuery,
+		mapItems
+	]);
 	return {
 		data,
 		isLoading: isLoading || isFetchingNextPage,

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.34",
+  "version": "2.2.9-rc.36",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",