@povio/ui 2.2.9-rc.29 → 2.2.9-rc.30

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

@@ -175,7 +175,7 @@ var NumberInput = ({ renderStaticInput, ...props }) => {
 			as,
 			size,
 			variant,
-			children: /* @__PURE__ */ jsx("input", {
+			children: (dataAttributeProps) => /* @__PURE__ */ jsx("input", {
 				ref: inputRef,
 				readOnly: true,
 				disabled: isDisabled,
@@ -183,14 +183,7 @@ var NumberInput = ({ renderStaticInput, ...props }) => {
 				value: displayValue,
 				placeholder: as === "floating" ? "" : props.placeholder,
 				className: "w-full bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled",
-				"data-is-empty": dataAttributes.dataIsEmpty || void 0,
-				"data-is-filled": dataAttributes.dataIsFilled || void 0,
-				"data-is-dirty": dataAttributes.dataIsDirty || void 0,
-				"data-is-required": dataAttributes.dataIsRequired || void 0,
-				"data-is-disabled": dataAttributes.dataIsDisabled || void 0,
-				"data-disabled": dataAttributes.dataDisabled || void 0,
-				"data-invalid": dataAttributes.dataInvalid || void 0,
-				"data-has-selection": dataAttributes.dataHasSelection || void 0,
+				...dataAttributeProps,
 				"data-rac": true
 			})
 		});

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

@@ -172,7 +172,7 @@ var TextInput = ({ renderStaticInput, ...props }) => {
 			as,
 			size,
 			variant,
-			children: /* @__PURE__ */ jsx("input", {
+			children: (dataAttributeProps) => /* @__PURE__ */ jsx("input", {
 				ref: inputRef,
 				type: inputType === "hidden" ? "password" : inputType,
 				readOnly: true,
@@ -181,14 +181,7 @@ var TextInput = ({ renderStaticInput, ...props }) => {
 				value: displayValue,
 				placeholder: as === "floating" ? "" : props.placeholder,
 				className: "w-full bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled",
-				"data-is-empty": dataAttributes.dataIsEmpty || void 0,
-				"data-is-filled": dataAttributes.dataIsFilled || void 0,
-				"data-is-dirty": dataAttributes.dataIsDirty || void 0,
-				"data-is-required": dataAttributes.dataIsRequired || void 0,
-				"data-is-disabled": dataAttributes.dataIsDisabled || void 0,
-				"data-disabled": dataAttributes.dataDisabled || void 0,
-				"data-invalid": dataAttributes.dataInvalid || void 0,
-				"data-has-selection": dataAttributes.dataHasSelection || void 0,
+				...dataAttributeProps,
 				"data-rac": true
 			})
 		});

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

@@ -58,7 +58,7 @@ function Autocomplete({ renderStaticInput, ...props }) {
 		let isDisabled = !!props.isDisabled;
 		if (isFormControlDisabled) isDisabled = true;
 		const mode = props.selectionMode ?? ui.select.selectionMode;
-		const { displayValue, isEmpty } = getStaticSelectValue({
+		const { selectedItem, displayValue, isEmpty } = getStaticSelectValue({
 			items: props.items,
 			value: currentValue,
 			selectionMode: mode,
@@ -69,10 +69,23 @@ function Autocomplete({ renderStaticInput, ...props }) {
 			collapseAfter: props.collapseAfter ?? ui.select.collapseAfter,
 			selectedTagsType: props.selectedTagsType ?? ui.select.selectedTagsType
 		});
+		const isMultiple = mode === "multiple";
 		const trailingContent = props.trailingContent || !props.hideDropdownIcon ? /* @__PURE__ */ jsxs(Fragment, { children: [props.trailingContent, !props.hideDropdownIcon ? /* @__PURE__ */ jsx(ArrowDropDownIcon, { className: "size-6 shrink-0 text-interactive-text-secondary-idle" }) : void 0] }) : void 0;
 		const placeholder = as === "floating" ? null : props.placeholder;
 		const shouldRenderPlaceholderAfterValue = mode !== "single" && props.placeholder && !isEmpty;
-		return /* @__PURE__ */ jsxs(InputFrame, {
+		const inputValue = !isMultiple && selectedItem ? selectedItem.label : "";
+		const dataAttributes = {
+			dataIsEmpty: isEmpty,
+			dataIsFilled: !isEmpty,
+			dataIsDirty: props.isDirty,
+			dataIsRequired: props.isRequired,
+			dataIsDisabled: isDisabled,
+			dataDisabled: isDisabled,
+			dataInvalid: !!props.error,
+			dataHasSelection: !isEmpty,
+			dataHasSearch: false
+		};
+		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
 			isHeaderHidden: props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
 			hideLabel: props.hideLabel ?? ui.input.hideLabel,
@@ -81,17 +94,7 @@ function Autocomplete({ renderStaticInput, ...props }) {
 			inputClassName: clsx(props.className, props.inputClassName),
 			contentWrapperClassName: "flex flex-1 flex-wrap gap-input-gap-input-text-to-elements truncate",
 			labelPlacement: "content-row",
-			dataAttributes: {
-				dataIsEmpty: isEmpty,
-				dataIsFilled: !isEmpty,
-				dataIsDirty: props.isDirty,
-				dataIsRequired: props.isRequired,
-				dataIsDisabled: isDisabled,
-				dataDisabled: isDisabled,
-				dataInvalid: !!props.error,
-				dataHasSelection: !isEmpty,
-				dataHasSearch: false
-			},
+			dataAttributes,
 			renderStatic: true,
 			onStaticInteract: (focus) => {
 				setShouldFocus(focus);
@@ -105,13 +108,16 @@ function Autocomplete({ renderStaticInput, ...props }) {
 				children: props.leadingContent
 			}),
 			trailingContent,
-			children: [isEmpty ? /* @__PURE__ */ jsx("span", {
-				className: "text-text-default-3",
-				children: placeholder
-			}) : displayValue, shouldRenderPlaceholderAfterValue && /* @__PURE__ */ jsx("div", {
-				className: "shrink-0 text-text-default-3",
-				children: props.placeholder
-			})]
+			children: (dataAttributeProps) => /* @__PURE__ */ jsxs(Fragment, { children: [isMultiple && !isEmpty && displayValue, /* @__PURE__ */ jsx("input", {
+				readOnly: true,
+				disabled: isDisabled,
+				tabIndex: -1,
+				value: inputValue,
+				placeholder: isMultiple && shouldRenderPlaceholderAfterValue ? props.placeholder : placeholder ?? void 0,
+				className: clsx("w-full flex-1 bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled", props.inputClassName),
+				...dataAttributeProps,
+				"data-rac": true
+			})] })
 		});
 	}
 	return /* @__PURE__ */ jsx(_Autocomplete, {

package/dist/components/inputs/Selection/Select/Select.js

@@ -55,7 +55,8 @@ function Select({ renderStaticInput, ...props }) {
 		if (isFormControlDisabled) isDisabled = true;
 		const isClearable = props.isClearable ?? ui.input.isClearable;
 		const mode = props.selectionMode ?? ui.select.selectionMode;
-		const { displayValue, isEmpty } = getStaticSelectValue({
+		const isMultiple = mode === "multiple";
+		const { selectedItem, displayValue, isEmpty } = getStaticSelectValue({
 			items: props.items,
 			value: currentValue,
 			selectionMode: mode,
@@ -66,8 +67,26 @@ function Select({ renderStaticInput, ...props }) {
 			collapseAfter: props.collapseAfter ?? ui.select.collapseAfter,
 			selectedTagsType: props.selectedTagsType ?? ui.select.selectedTagsType
 		});
+		const isSearchable = props.isSearchable ?? ui.select.isSearchable;
 		const trailingContent = props.trailingContent || !props.hideDropdownIcon ? /* @__PURE__ */ jsxs(Fragment, { children: [props.trailingContent, !props.hideDropdownIcon ? /* @__PURE__ */ jsx(ArrowDropDownIcon, { className: `size-6 shrink-0 ${isDisabled ? "text-interactive-text-secondary-disabled" : "text-interactive-text-secondary-idle"}` }) : void 0] }) : void 0;
 		const placeholder = as === "floating" ? null : props.placeholder;
+		const inputValue = !isMultiple && selectedItem ? selectedItem.label : "";
+		const shouldRenderPlaceholderAfterValue = isMultiple && props.placeholder && !isEmpty;
+		const dataAttributes = {
+			dataIsEmpty: isEmpty,
+			dataIsFilled: !isEmpty,
+			dataIsDirty: props.isDirty,
+			dataIsRequired: props.isRequired,
+			dataIsDisabled: isDisabled,
+			dataDisabled: isDisabled,
+			dataInvalid: !!props.error,
+			dataHasSelection: !isEmpty,
+			dataHasSearch: false
+		};
+		const buttonContent = isMultiple && !isEmpty ? /* @__PURE__ */ jsx(Fragment, { children: "\xA0" }) : isEmpty ? /* @__PURE__ */ jsx("span", {
+			className: "text-text-default-3",
+			children: placeholder
+		}) : displayValue;
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
 			isHeaderHidden: props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
@@ -77,17 +96,7 @@ function Select({ renderStaticInput, ...props }) {
 			inputClassName: clsx(props.className, props.inputClassName),
 			typographySize: "label-1",
 			labelPlacement: "content-row",
-			dataAttributes: {
-				dataIsEmpty: isEmpty,
-				dataIsFilled: !isEmpty,
-				dataIsDirty: props.isDirty,
-				dataIsRequired: props.isRequired,
-				dataIsDisabled: isDisabled,
-				dataDisabled: isDisabled,
-				dataInvalid: !!props.error,
-				dataHasSelection: !isEmpty,
-				dataHasSearch: false
-			},
+			dataAttributes,
 			renderStatic: true,
 			onStaticInteract: (focus) => {
 				setShouldFocus(focus);
@@ -103,10 +112,25 @@ function Select({ renderStaticInput, ...props }) {
 			isClearable,
 			showClear: false,
 			trailingContent,
-			children: isEmpty ? /* @__PURE__ */ jsx("span", {
-				className: "text-text-default-3",
-				children: placeholder
-			}) : displayValue
+			children: (dataAttributeProps) => /* @__PURE__ */ jsxs(Fragment, { children: [isMultiple && !isEmpty && displayValue, isSearchable ? /* @__PURE__ */ jsx("input", {
+				readOnly: true,
+				disabled: isDisabled,
+				tabIndex: -1,
+				value: inputValue,
+				placeholder: shouldRenderPlaceholderAfterValue ? props.placeholder : placeholder ?? void 0,
+				className: clsx("w-full flex-1 bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled", props.inputClassName),
+				...dataAttributeProps,
+				"data-rac": true
+			}) : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: isDisabled,
+				tabIndex: -1,
+				"data-type": "select-trigger",
+				className: clsx("w-full truncate bg-transparent text-start outline-none disabled:text-interactive-text-secondary-disabled", isMultiple && !isEmpty && "absolute inset-0 z-0"),
+				...dataAttributeProps,
+				"data-rac": true,
+				children: buttonContent
+			})] })
 		});
 	}
 	return /* @__PURE__ */ jsx(_Select, {

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

@@ -22,10 +22,22 @@ interface InputFrameDataAttributes {
     dataIsFilled?: boolean;
     dataIsRequired?: boolean;
 }
+type InputFrameDataAttributeProps = {
+    "data-disabled"?: boolean;
+    "data-has-search"?: boolean;
+    "data-has-selection"?: boolean;
+    "data-invalid"?: boolean;
+    "data-is-dirty"?: boolean;
+    "data-is-disabled"?: boolean;
+    "data-is-empty"?: boolean;
+    "data-is-filled"?: boolean;
+    "data-is-required"?: boolean;
+};
+type InputFrameChildren = ReactNode | ((dataAttributeProps: InputFrameDataAttributeProps) => ReactNode);
 type InputFrameLabelPlacement = "content-wrapper" | "content-row";
 export interface InputFrameProps extends InputVariantProps, Partial<FormFieldProps> {
     ref?: Ref<HTMLDivElement>;
-    children: ReactNode;
+    children: InputFrameChildren;
     formFieldRef?: Ref<HTMLDivElement>;
     labelProps?: FormFieldHeaderProps["labelProps"];
     headerProps?: FormFieldHeaderProps;

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

@@ -52,6 +52,7 @@ var InputFrame = ({ ref, children, formFieldRef, labelProps, headerProps, error,
 		size,
 		...resolvedHeaderProps
 	}) : null;
+	const resolvedContentWrapperClassName = contentWrapperClassName ?? inputContentWrapperCva({ as });
 	return /* @__PURE__ */ jsx(TooltipWrapper, {
 		as,
 		error,
@@ -86,6 +87,7 @@ var InputFrame = ({ ref, children, formFieldRef, labelProps, headerProps, error,
 				onPointerDown: () => {
 					if (renderStatic) onStaticInteract?.(true);
 				},
+				"data-rac": "",
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: clsx("group/input-frame flex min-w-0 w-full items-center gap-input-gap-input-text-to-elements pr-0!", as === "inline" && "h-full", inputSizeCva({
 						size,
@@ -99,14 +101,11 @@ var InputFrame = ({ ref, children, formFieldRef, labelProps, headerProps, error,
 						}),
 						labelPlacement === "content-row" && labelContent,
 						/* @__PURE__ */ jsxs("div", {
-							className: inputContentWrapperCva({
-								as,
-								className: contentWrapperClassName
-							}),
+							className: resolvedContentWrapperClassName,
 							children: [
 								labelPlacement === "content-wrapper" && labelContent,
 								actionContent,
-								children
+								typeof children === "function" ? children(dataAttributeProps) : children
 							]
 						})
 					]

package/package.json

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