@povio/ui 2.3.0-rc.3 → 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/Input/TextInput/TextInput.js

@@ -26,13 +26,14 @@ var TextInputBase = (props) => {
 	const isClearable = isClearableProp ?? ui.input.isClearable;
 	const textFieldRef = useRef(null);
 	const { isFocusVisible } = useFocusVisible();
+	const inputValue = value ?? "";
 	const { labelProps, inputProps } = useTextField({
 		...rest,
 		label,
 		isDisabled,
 		isInvalid: !!error,
 		isRequired,
-		value,
+		value: inputValue,
 		onChange,
 		onBlur
 	}, textFieldRef);
@@ -61,7 +62,7 @@ var TextInputBase = (props) => {
 		leadingIcon,
 		trailingIcon,
 		isClearable,
-		value,
+		value: inputValue,
 		onChange,
 		onBlur
 	};

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

@@ -6,6 +6,7 @@ import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
 //#region src/components/inputs/Selection/Autocomplete/QueryAutocomplete.tsx
 var QueryAutocomplete = ({ query, queryParams, queryOptions, queryMap, leadingContent, ...props }) => {
+	"use no memo";
 	const ui = UIConfig.useConfig();
 	const [search, setSearch] = useState("");
 	const { onChange, ...restProps } = props;

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";
@@ -34,7 +35,7 @@ function Select({ renderStaticInput, ...props }) {
 	const ui = UIConfig.useConfig();
 	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
 	const rootRef = useRef(null);
-	const { renderRealInput, replayStaticInputChange } = useStaticInputHandoff({
+	const { renderRealInput, replayStaticInputChange, replayStaticInputPress } = useStaticInputHandoff({
 		inputRef: rootRef,
 		renderInput,
 		setRenderInput,
@@ -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
@@ -121,6 +129,7 @@ function Select({ renderStaticInput, ...props }) {
 				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"),
+				onPointerDown: replayStaticInputPress,
 				...dataAttributeProps,
 				"data-rac": true,
 				children: buttonContent

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/components/inputs/shared/useStaticInputHandoff.d.ts

@@ -9,5 +9,6 @@ export declare const useStaticInputHandoff: <TElement extends HTMLElement = HTML
     shouldFocus: boolean;
     renderRealInput: (focus: boolean) => void;
     replayStaticInputChange: (value: string) => void;
+    replayStaticInputPress: () => void;
 };
 export {};

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

@@ -3,18 +3,23 @@ import { useLayoutEffect, useRef, useState } from "react";
 var useStaticInputHandoff = ({ inputRef, renderInput, setRenderInput, getFocusTarget }) => {
 	const [shouldFocus, setShouldFocus] = useState(false);
 	const pendingStaticChangeRef = useRef(null);
+	const shouldReplayStaticPressRef = useRef(false);
 	useLayoutEffect(() => {
 		if (!renderInput || !shouldFocus) return;
-		const focusRealInput = (replayPendingChange) => {
+		const focusRealInput = (replayPendingInteraction) => {
 			const input = inputRef.current;
 			const pendingValue = pendingStaticChangeRef.current;
 			const focusTarget = input ? getFocusTarget?.(input) ?? input : null;
-			if (replayPendingChange && focusTarget instanceof HTMLInputElement && pendingValue != null) {
+			if (replayPendingInteraction && 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();
+			if (replayPendingInteraction && shouldReplayStaticPressRef.current) {
+				shouldReplayStaticPressRef.current = false;
+				focusTarget?.click();
+			}
 		};
 		focusRealInput(true);
 		const frame = requestAnimationFrame(() => {
@@ -40,6 +45,11 @@ var useStaticInputHandoff = ({ inputRef, renderInput, setRenderInput, getFocusTa
 			pendingStaticChangeRef.current = value;
 			setShouldFocus(true);
 			setRenderInput(true);
+		},
+		replayStaticInputPress: () => {
+			shouldReplayStaticPressRef.current = true;
+			setShouldFocus(true);
+			setRenderInput(true);
 		}
 	};
 };

package/dist/components/table/Table.js

@@ -1,3 +1,4 @@
+"use no memo";
 import { ChevronDownIcon } from "../../assets/icons/ChevronDown.js";
 import { ChevronUpIcon } from "../../assets/icons/ChevronUp.js";
 import { UIStyle } from "../../config/uiStyle.context.js";
@@ -26,8 +27,8 @@ var CustomCellContext = (context) => {
 		value: context.getValue()
 	};
 };
-var CellRender = (Comp, props) => {
-	const rendered = typeof Comp === "function" ? Comp(props) : Comp;
+var renderCell = (Comp, props) => {
+	const rendered = flexRender(Comp, props);
 	return typeof rendered === "string" ? /* @__PURE__ */ jsx(CellText, { children: rendered }) : rendered;
 };
 var RowDragHandleCell = ({ rowId }) => {
@@ -68,7 +69,7 @@ var DraggableRow = ({ row, showCellBorder, onRowClick, onDoubleClick, tableRowCv
 			return /* @__PURE__ */ jsx("td", {
 				tabIndex: -1,
 				className: clsx(tableDataCva({ hasRightBorder: cellIndex > 0 && showCellBorder }), columnMeta.cellClass, columnMeta.width),
-				children: CellRender(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
+				children: renderCell(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
 			}, cell.id);
 		})
 	});
@@ -245,7 +246,7 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 						return /* @__PURE__ */ jsx("td", {
 							tabIndex: -1,
 							className: clsx(tableDataCva({ hasRightBorder: cellIndex > 0 && showCellBorder }), columnMeta.cellClass, columnMeta.width),
-							children: CellRender(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
+							children: renderCell(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
 						}, cell.id);
 					})
 				}, row.id);

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