@povio/ui 2.3.0-rc.4 → 2.3.0-rc.5

package/dist/components/inputs/DateTime/DatePicker/DatePicker.js

@@ -12,6 +12,7 @@ import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
+import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
@@ -69,6 +70,7 @@ var DatePickerBase = (props) => {
 	const handleBlur = (val) => {
 		onBlur?.({ target: { value: val } });
 	};
+	const { callback: debouncedBlur } = useDebounceCallback(handleBlur, { delay: 500 });
 	const dialogState = useDatePickerState({
 		...rest,
 		defaultValue: value || rest.defaultValue,
@@ -88,6 +90,7 @@ var DatePickerBase = (props) => {
 			}
 			onChange?.(normalizedValue);
 			dialogState.setValue(normalizedValue);
+			debouncedBlur(normalizedValue);
 			if (normalizedValue) {
 				calendarState.setFocusedDate(normalizedValue);
 				return;
@@ -313,6 +316,8 @@ var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, ren
 			onStaticInteract: renderRealInput,
 			actionContent: staticTodayIcon,
 			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
+			wrapContentAndTrailing: true,
+			contentAndTrailingClassName: "gap-2!",
 			trailingClassName: "py-0! pl-0!",
 			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0,
 			children: staticSegments

package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js

@@ -661,6 +661,8 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 			onStaticInteract: renderRealInput,
 			actionContent: staticTodayIcon,
 			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
+			wrapContentAndTrailing: true,
+			contentAndTrailingClassName: "gap-2!",
 			trailingClassName: "py-0! pl-0!",
 			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0,
 			children: staticSegments

package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js

@@ -304,6 +304,8 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 			onStaticInteract: renderRealInput,
 			actionContent: staticTodayIcon,
 			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
+			wrapContentAndTrailing: true,
+			contentAndTrailingClassName: "gap-2!",
 			trailingClassName: "py-0! pl-0!",
 			trailingContent: showDropdown ? ui.dateInput.dateTimeIcon : void 0,
 			children: staticSegments

package/dist/components/inputs/DateTime/TimePicker/TimePicker.js

@@ -209,6 +209,7 @@ var TimePicker = ({ renderStaticInput, ...props }) => {
 			},
 			renderStatic: true,
 			onStaticInteract: renderRealInput,
+			wrapContentAndTrailing: true,
 			trailingClassName: "py-0! pl-0!",
 			trailingContent: showDropdown ? ui.dateInput.timeIcon : void 0,
 			children: staticSegments

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

@@ -1,4 +1,5 @@
 import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
+import { Typography } from "../../../text/Typography/Typography.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
@@ -81,10 +82,17 @@ function Select({ renderStaticInput, ...props }) {
 			dataHasSelection: !isEmpty,
 			dataHasSearch: false
 		};
-		const buttonContent = isMultiple && !isEmpty ? /* @__PURE__ */ jsx(Fragment, { children: "\xA0" }) : isEmpty ? /* @__PURE__ */ jsx("span", {
-			className: "text-text-default-3",
+		const buttonContent = isMultiple && !isEmpty ? /* @__PURE__ */ jsx(Fragment, { children: "\xA0" }) : isEmpty ? /* @__PURE__ */ jsx(Typography, {
+			size: "label-1",
+			as: "span",
+			className: "block truncate text-text-default-3",
 			children: placeholder
-		}) : displayValue;
+		}) : /* @__PURE__ */ jsx(Typography, {
+			size: "label-1",
+			as: "span",
+			className: "block truncate",
+			children: displayValue
+		});
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
 			isDisabled,
@@ -111,7 +119,7 @@ function Select({ renderStaticInput, ...props }) {
 				"aria-expanded": false,
 				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),
+				className: clsx("w-full flex-1 bg-transparent text-label-1 outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled", props.inputClassName),
 				onChange: (event) => replayStaticInputChange(event.target.value),
 				...dataAttributeProps,
 				"data-rac": true

package/dist/components/inputs/Selection/shared/querySelect.utils.d.ts

@@ -3,4 +3,4 @@ import { Key } from 'react-aria-components';
 import { SelectItem } from './select.types';
 export type QueryFn<TData = any> = (...args: any[]) => UseQueryResult<TData> | UseInfiniteQueryResult<TData>;
 export type QueryDataType<TQueryFn extends QueryFn> = Exclude<ReturnType<TQueryFn>["data"], undefined>;
-export declare const getQueryItems: <TQueryFn extends QueryFn, TKey extends Key = Key>(data: QueryDataType<TQueryFn> | undefined, queryMap?: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[]) => SelectItem<TKey>[];
+export declare const getQueryItems: <TQueryFn extends QueryFn, TKey extends Key = Key>(data: QueryDataType<TQueryFn> | undefined, queryMap?: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[]) => any;

package/dist/components/inputs/Selection/shared/querySelect.utils.js

@@ -1,8 +1,14 @@
 //#region src/components/inputs/Selection/shared/querySelect.utils.ts
+var isQueryItemsPage = (page) => {
+	return !!page && typeof page === "object" && "items" in page && Array.isArray(page.items);
+};
 var getQueryItems = (data, queryMap) => {
 	if (!data) return [];
 	if (queryMap) return queryMap(data);
-	if (Array.isArray(data)) return data;
+	if (Array.isArray(data)) {
+		if (data.every(isQueryItemsPage)) return data.flatMap((page) => page.items);
+		return data;
+	}
 	if (typeof data === "object" && data !== null) {
 		if ("items" in data && Array.isArray(data.items)) return data.items;
 		if ("pages" in data && Array.isArray(data.pages)) return data.pages.flatMap((page) => page && typeof page === "object" && "items" in page && Array.isArray(page.items) ? page.items : []);

package/dist/components/inputs/Selection/shared/select.context.js

@@ -1,5 +1,5 @@
-import { useSelectItems } from "./useSelectItems.js";
 import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
+import { useSelectItems } from "./useSelectItems.js";
 import { jsx } from "react/jsx-runtime";
 import { createContext, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
 //#region src/components/inputs/Selection/shared/select.context.tsx

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

@@ -69,6 +69,7 @@ export interface InputFrameProps extends InputVariantProps, Partial<FormFieldPro
     inputClassName?: string;
     contentClassName?: string;
     contentWrapperClassName?: string;
+    contentAndTrailingClassName?: string;
     wrapContentAndTrailing?: boolean;
     labelPlacement?: InputFrameLabelPlacement;
     trailingClassName?: string;

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, wrapContentAndTrailing, labelPlacement = "content-wrapper", trailingClassName, onMouseEnter, onFocusCapture, 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, contentAndTrailingClassName, wrapContentAndTrailing, 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;
@@ -136,7 +136,7 @@ var InputFrame = (props) => {
 		]
 	}) : null;
 	const inputFrameContent = wrapContentAndTrailing ? /* @__PURE__ */ jsxs("div", {
-		className: "flex w-full items-center gap-input-gap-input-text-to-elements",
+		className: clsx("flex w-full items-center gap-input-gap-input-text-to-elements", contentAndTrailingClassName),
 		children: [contentRow, trailingRow]
 	}) : /* @__PURE__ */ jsxs(Fragment, { children: [contentRow, trailingRow] });
 	return /* @__PURE__ */ jsx(TooltipWrapper, {

package/dist/hooks/useQueryAutocomplete.js

@@ -5,6 +5,7 @@ var isFilterSearchParams = (params) => {
 	return typeof params === "object" && params !== null && "filter" in params;
 };
 var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initialQueryState, search }) => {
+	"use no memo";
 	const [isQueryEnabled, setIsQueryEnabled] = useState(!initialQueryState);
 	const queryResult = query(search === void 0 ? queryParams : {
 		...queryParams,
@@ -34,7 +35,7 @@ var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initia
 	const totalItems = infiniteQueryResult?.data?.pages?.[0]?.totalItems;
 	const items = useMemo(() => {
 		if (!data) return [];
-		return mapItems(isInfiniteQuery ? data.pages?.flatMap((page) => page?.items ?? []) : data);
+		return mapItems(isInfiniteQuery ? data.pages : data);
 	}, [
 		data,
 		isInfiniteQuery,

package/dist/index.js

@@ -69,9 +69,9 @@ import { useLongPressRepeat } from "./hooks/useLongPressRepeat.js";
 import { useScrollableListBox } from "./hooks/useScrollableListBox.js";
 import { DateTimeUtils } from "./utils/date-time.utils.js";
 import { FormField } from "./components/inputs/FormField/FormField.js";
+import { useDebounceCallback } from "./hooks/useDebounceCallback.js";
 import { DatePicker } from "./components/inputs/DateTime/DatePicker/DatePicker.js";
 import { Tag } from "./components/text/Tag/Tag.js";
-import { useDebounceCallback } from "./hooks/useDebounceCallback.js";
 import { useIntersectionObserver } from "./hooks/useIntersectionObserver.js";
 import { TextInput } from "./components/inputs/Input/TextInput/TextInput.js";
 import { Select } from "./components/inputs/Selection/Select/Select.js";

package/package.json

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