@povio/ui 2.2.9-rc.14 → 2.2.9-rc.15

package/dist/components/inputs/Inputs/InputItem.d.ts

@@ -15,7 +15,7 @@ declare const componentRegistry: {
     readonly select: typeof Select;
     readonly querySelect: <TFieldValues extends import('react-hook-form').FieldValues, TQueryFn extends import('../Selection/shared/querySelect.utils').QueryFn, TKey extends import('react-aria').Key = import('react-aria').Key>({ query, queryParams, queryOptions, queryMap, ...props }: import('../Selection/Select/QuerySelect.js').QuerySelectProps<TFieldValues, TQueryFn, TKey>) => import("react/jsx-runtime").JSX.Element;
     readonly autocomplete: typeof Autocomplete;
-    readonly queryAutocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TSelectItem extends import('../../..').SelectItem<any>, TQueryFn extends import('../Selection/Autocomplete/queryAutocomplete.types').QueryFn<TSelectItem>>({ query, queryParams, queryOptions, queryMap, ...props }: import('../Selection/Autocomplete/queryAutocomplete.types').QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;
+    readonly queryAutocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TSelectItem extends import('../../..').SelectItem<any>, TQueryFn extends import('../Selection/Autocomplete/queryAutocomplete.types').QueryFn>({ query, queryParams, queryOptions, queryMap, leadingContent, ...props }: import('../Selection/Autocomplete/queryAutocomplete.types').QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;
     readonly segment: <TFieldValues extends import('react-hook-form').FieldValues, TKey extends import('react-aria').Key = import('react-aria').Key>(props: import('../../..').ControlledSegmentProps<TFieldValues, TKey>) => import("react/jsx-runtime").JSX.Element;
     readonly datePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, minValue, maxValue, ...props }: import('../DateTime/DatePicker/DatePicker').ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly dateTimePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, ...props }: import('../DateTime/DateTimePicker/DateTimePicker').ControlledDateTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.d.ts

@@ -1,4 +1,4 @@
 import { FieldValues } from 'react-hook-form';
 import { QueryAutocompleteProps, QueryFn } from './queryAutocomplete.types';
 import { SelectItem } from '../shared/select.types';
-export declare const QueryAutocomplete: <TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn<TSelectItem>>({ query, queryParams, queryOptions, queryMap, ...props }: QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;
+export declare const QueryAutocomplete: <TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn>({ query, queryParams, queryOptions, queryMap, leadingContent, ...props }: QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,34 +1,38 @@
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { Autocomplete } from "./Autocomplete.js";
+import { getQueryItems } from "../shared/querySelect.utils.js";
 import { useQueryAutocomplete } from "../../../../hooks/useQueryAutocomplete.js";
 import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
 //#region src/components/inputs/Selection/Autocomplete/QueryAutocomplete.tsx
-var QueryAutocomplete = ({ query, queryParams, queryOptions, queryMap, ...props }) => {
+var QueryAutocomplete = ({ query, queryParams, queryOptions, queryMap, leadingContent, ...props }) => {
 	const ui = UIConfig.useConfig();
 	const [search, setSearch] = useState("");
-	const mapItems = (data) => {
-		const extractedData = Array.isArray(data) ? data : data.pages.flatMap((page) => page.items ?? []);
-		return queryMap?.(extractedData) ?? extractedData;
-	};
+	const { onChange, ...restProps } = props;
 	const { items, totalItems, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete({
 		query,
 		queryParams,
 		queryOptions,
-		mapItems: (data) => mapItems(data),
+		mapItems: (data) => getQueryItems(data, queryMap),
 		search,
 		initialQueryState: props.isInitialQueryDisabled ?? ui.queryAutocomplete?.isInitialQueryDisabled
 	});
-	const { isInitialQueryDisabled: _, ...restProps } = props;
+	const handleChange = (value) => {
+		onChange?.(value);
+		props.onBlur?.({ target: { value: null } });
+	};
+	const { isInitialQueryDisabled: _, ...autocompleteProps } = restProps;
 	return /* @__PURE__ */ jsx(Autocomplete, {
-		...restProps,
+		...autocompleteProps,
 		items,
+		totalItems,
 		onSearchChange: setSearch,
 		isClientSearchDisabled: true,
 		isLoading,
-		totalItems,
+		onChange: handleChange,
 		onMouseEnter: handleEnableQuery,
 		onFocusCapture: handleEnableQuery,
+		leadingContent,
 		hasLoadMore: hasNextPage,
 		onLoadMore: fetchNextPage
 	});

package/dist/components/inputs/Selection/Autocomplete/queryAutocomplete.types.d.ts

@@ -1,17 +1,20 @@
-import { UseInfiniteQueryResult, UseQueryResult } from '@tanstack/react-query';
+import { InfiniteData, UseInfiniteQueryResult, UseQueryResult } from '@tanstack/react-query';
 import { Key } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
 import { AutocompleteProps } from './Autocomplete';
 import { GroupedSelectControlProps, GroupedSelectProps, SelectItem } from '../shared/select.types';
 import { OmitDiscriminatedUnion } from '../../../../types/common';
-export interface QueryAutocompleteInfinitePage<TSelectItem extends SelectItem = SelectItem> {
-    items: Array<TSelectItem>;
+export type InfiniteQueryPage<TKey extends Key> = {
+    items?: SelectItem<TKey>[];
     totalItems?: number;
-}
-export type QueryResult<TSelectItem extends SelectItem = SelectItem> = UseQueryResult<Array<TSelectItem>> | UseInfiniteQueryResult<QueryAutocompleteInfinitePage<TSelectItem>>;
-export type QueryFn<TSelectItem extends SelectItem = SelectItem> = (...args: any[]) => QueryResult<TSelectItem>;
-export type QueryAutocompleteExtractedData<TSelectItem extends SelectItem = SelectItem> = Array<TSelectItem>;
-type QueryAutocompleteParams<TQueryFn extends QueryFn> = Parameters<TQueryFn>[0];
+};
+export type QueryResult<TData> = UseQueryResult<TData> | UseInfiniteQueryResult<TData>;
+export type QueryFn = (params: any, options?: any) => QueryResult<any>;
+export type ExtractQueryParams<TQueryFn> = TQueryFn extends (params: infer TParams, ...args: any[]) => any ? TParams : never;
+export type ExtractQueryOptions<TQueryFn> = TQueryFn extends (params: any, options?: infer TOptions) => any ? TOptions : never;
+export type QueryDataType<TQueryFn extends QueryFn> = Exclude<ReturnType<TQueryFn>["data"], undefined>;
+export type ExtractPageType<T> = T extends InfiniteData<infer TPage> ? TPage : T;
+export type ExtractedDataType<TQueryFn extends QueryFn> = ExtractPageType<QueryDataType<TQueryFn>> | ExtractPageType<QueryDataType<TQueryFn>>[];
 type QueryAutocompleteFilter = {
     search?: string;
 };
@@ -20,21 +23,23 @@ type QueryAutocompleteSearchParams = {
 } | {
     filter?: QueryAutocompleteFilter;
 };
-export type QueryAutocompleteProps<TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn<TSelectItem>> = OmitDiscriminatedUnion<AutocompleteProps<TSelectItem["id"]>, "items" | "onSearchChange" | "isLoading" | keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TSelectItem["id"]> & {
-    query: QueryAutocompleteParams<TQueryFn> extends QueryAutocompleteSearchParams ? TQueryFn : never;
-    queryParams?: Omit<QueryAutocompleteParams<TQueryFn>, "search" | "limit"> & {
+export type QueryAutocompleteProps<TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn> = OmitDiscriminatedUnion<AutocompleteProps<TSelectItem["id"]>, "items" | "onSearchChange" | "isLoading" | keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TSelectItem["id"]> & {
+    query: ExtractQueryParams<TQueryFn> extends QueryAutocompleteSearchParams ? TQueryFn : never;
+    queryParams?: Omit<ExtractQueryParams<TQueryFn>, "search" | "limit"> & {
         limit?: number;
     };
-    queryOptions?: Parameters<TQueryFn>[1];
-    queryMap?: (data: QueryAutocompleteExtractedData<TSelectItem>) => SelectItem<TSelectItem["id"]>[];
+    queryOptions?: ExtractQueryOptions<TQueryFn>;
+    queryMap?: (data: ExtractedDataType<TQueryFn>) => SelectItem<TSelectItem["id"]>[];
     isInitialQueryDisabled?: boolean;
 };
-export interface UseQueryAutocompleteOptions<TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn<TSelectItem>, TKey extends Key = QueryAutocompleteExtractedData<TSelectItem>[number]["id"]> {
+export interface UseQueryAutocompleteOptions<TQueryFn extends QueryFn, TKey extends Key = Key> {
     query: TQueryFn;
-    queryParams?: Parameters<TQueryFn>[0];
-    queryOptions?: Parameters<TQueryFn>[1];
-    queryMap?: (data: QueryAutocompleteExtractedData<TSelectItem>) => SelectItem<TKey>[];
+    queryParams?: Omit<ExtractQueryParams<TQueryFn>, "search" | "limit"> & {
+        limit?: number;
+    };
+    queryOptions?: ExtractQueryOptions<TQueryFn>;
+    mapItems: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[];
     initialQueryState?: boolean;
-    search: string;
+    search?: string;
 }
 export {};

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

@@ -1,7 +1,7 @@
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { SelectBase } from "../shared/SelectBase.js";
-import { useQueryAutocomplete } from "../../../../hooks/useQueryAutocomplete.js";
 import { getQueryItems } from "../shared/querySelect.utils.js";
+import { useQueryAutocomplete } from "../../../../hooks/useQueryAutocomplete.js";
 import { jsx } from "react/jsx-runtime";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";

package/dist/components/inputs/Selection/shared/SelectInput.js

@@ -137,10 +137,6 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 					})
 				]
 			}),
-			trailingContent && /* @__PURE__ */ jsx("div", {
-				className: "flex shrink-0 items-center",
-				children: trailingContent
-			}),
 			isClearable && /* @__PURE__ */ jsx(InputClear, {
 				onClear: () => {
 					onClear();
@@ -148,6 +144,10 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 				},
 				show: showClearButton
 			}),
+			trailingContent && /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center",
+				children: trailingContent
+			}),
 			!hideDropdownIcon && /* @__PURE__ */ jsx(Button, {
 				excludeFromTabOrder: true,
 				"aria-label": t(($) => isOpen ? $.ui.closeAlt : $.ui.openAlt),

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

@@ -1,7 +1,10 @@
+import { UIStyle } from "../../../config/uiStyle.context.js";
 import { Tooltip } from "../../overlays/Tooltip/Tooltip.js";
+import { tooltipWrapperTrigger } from "./tooltipWrapper.cva.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/inputs/shared/TooltipWrapper.tsx
 var TooltipWrapper = (props) => {
+	const tooltipWrapperTriggerCva = UIStyle.useCva("tooltipWrapper.triggerCva", tooltipWrapperTrigger);
 	if (props.as !== "inline") return props.children;
 	return /* @__PURE__ */ jsx(Tooltip, {
 		text: props.error || void 0,
@@ -9,10 +12,11 @@ var TooltipWrapper = (props) => {
 		color: "error",
 		hidden: !props.error,
 		isNonInteractiveTrigger: true,
-		triggerClassName: props.triggerClassName,
+		triggerClassName: tooltipWrapperTriggerCva({ className: props.triggerClassName }),
 		triggerTabIndex: props.triggerTabIndex,
 		children: /* @__PURE__ */ jsx("div", {
 			tabIndex: -1,
+			className: tooltipWrapperTriggerCva({}),
 			children: props.children
 		})
 	});

package/dist/components/inputs/shared/tooltipWrapper.cva.d.ts

@@ -0,0 +1,4 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const tooltipWrapperTrigger: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export interface TooltipWrapperTriggerVariantProps extends VariantProps<typeof tooltipWrapperTrigger> {
+}

package/dist/components/inputs/shared/tooltipWrapper.cva.js

@@ -0,0 +1,5 @@
+import { cva } from "class-variance-authority";
+//#region src/components/inputs/shared/tooltipWrapper.cva.ts
+var tooltipWrapperTrigger = cva("");
+//#endregion
+export { tooltipWrapperTrigger };

package/dist/config/uiStyle.context.d.ts

@@ -13,6 +13,7 @@ import { SelectPopoverCva } from '../components/inputs/Selection/shared/selectDe
 import { SelectListBoxItemCva } from '../components/inputs/Selection/shared/selectItem.cva';
 import { InputBaseProps, InputSideProps, InputSizeProps } from '../components/inputs/shared/input.cva';
 import { LabelBaseProps } from '../components/inputs/shared/label.cva';
+import { TooltipWrapperTriggerVariantProps } from '../components/inputs/shared/tooltipWrapper.cva';
 import { ToggleVariantProps } from '../components/inputs/Toggle/toggle.cva';
 import { MenuCvaVariantProps, MenuItemVariantProps, MenuPopoverVariantProps, MenuPopoverWrapperVariantProps } from '../components/Menu/menu.cva';
 import { AccordionChevronVariantProps, AccordionHeadingSubtitleVariantProps, AccordionHeadingTitleVariantProps, AccordionHeadingVariantProps, AccordionIconVariantProps, AccordionItemVariantProps, AccordionPanelContentVariantProps, AccordionPanelVariantProps, AccordionTriggerVariantProps, AccordionVariantProps } from '../components/navigation/Accordion/accordion.cva';
@@ -72,6 +73,9 @@ export declare namespace UIStyle {
             sizeCva?: Cva<InputSizeProps>;
             sideCva?: Cva<InputSideProps>;
         };
+        tooltipWrapper: {
+            triggerCva?: Cva<TooltipWrapperTriggerVariantProps>;
+        };
         datePickerInput: {
             contentRowCva?: Cva<DatePickerInputContentRowProps>;
         };

package/dist/hooks/useQueryAutocomplete.d.ts

@@ -1,26 +1,14 @@
-import { UseInfiniteQueryResult, UseQueryResult } from '@tanstack/react-query';
+import { InfiniteData } from '@tanstack/react-query';
 import { Key } from 'react-aria-components';
-import { SelectItem } from '../components/inputs/Selection/shared/select.types';
-type QueryResult<TData = any> = UseQueryResult<TData> | UseInfiniteQueryResult<TData>;
-type QueryFn<TData = any> = (...args: any[]) => QueryResult<TData>;
-type QueryDataType<TQueryFn extends QueryFn> = Exclude<ReturnType<TQueryFn>["data"], undefined>;
-interface UseQueryAutocompleteOptions<TQueryFn extends QueryFn, TKey extends Key = Key> {
-    query: TQueryFn;
-    queryParams?: Parameters<TQueryFn>[0];
-    queryOptions?: Parameters<TQueryFn>[1];
-    mapItems: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[];
-    initialQueryState?: boolean;
-    search?: string;
-}
+import { InfiniteQueryPage, QueryFn, UseQueryAutocompleteOptions } from '../components/inputs/Selection/Autocomplete/queryAutocomplete.types';
 export declare const useQueryAutocomplete: <TQueryFn extends QueryFn, TKey extends Key = Key>({ query, queryParams, queryOptions, mapItems, initialQueryState, search, }: UseQueryAutocompleteOptions<TQueryFn, TKey>) => {
     data: any;
     isLoading: boolean;
     isQueryEnabled: boolean;
     handleEnableQuery: () => void;
-    items: SelectItem<TKey>[];
-    totalItems: any;
+    items: import('..').SelectItem<TKey>[];
+    totalItems: number | undefined;
     hasNextPage: boolean;
-    fetchNextPage: (() => Promise<unknown>) | ((options?: import('@tanstack/react-query').FetchNextPageOptions) => Promise<import('@tanstack/react-query').InfiniteQueryObserverResult<any, Error>>) | undefined;
+    fetchNextPage: ((options?: import('@tanstack/react-query').FetchNextPageOptions) => Promise<import('@tanstack/react-query').InfiniteQueryObserverResult<InfiniteData<InfiniteQueryPage<TKey>, unknown>, Error>>) | undefined;
     isFetchingNextPage: boolean;
 };
-export {};

package/dist/hooks/useQueryAutocomplete.js

@@ -1,16 +1,19 @@
 import { ApiQueryUtils } from "../utils/query.utils.js";
 import { useMemo, useState } from "react";
 //#region src/hooks/useQueryAutocomplete.ts
+var isFilterSearchParams = (params) => {
+	return typeof params === "object" && params !== null && "filter" in params;
+};
 var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initialQueryState, search }) => {
 	const [isQueryEnabled, setIsQueryEnabled] = useState(!initialQueryState);
 	const queryResult = query(search === void 0 ? queryParams : {
 		...queryParams,
 		limit: queryParams?.limit ?? ApiQueryUtils.DEFAULT_LIMIT,
 		search,
-		filter: queryParams && "filter" in queryParams ? {
+		...isFilterSearchParams(queryParams) ? { filter: {
 			...queryParams.filter,
 			search
-		} : void 0
+		} } : {}
 	}, {
 		...queryOptions,
 		enabled: isQueryEnabled && (queryOptions?.enabled ?? true)
@@ -20,11 +23,10 @@ var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initia
 	const isInfiniteQueryResult = (result) => {
 		return "hasNextPage" in result && "fetchNextPage" in result;
 	};
-	const isInfiniteQuery = isInfiniteQueryResult(queryResult);
 	const handleEnableQuery = () => {
 		setIsQueryEnabled(true);
 	};
-	const infiniteQueryResult = isInfiniteQuery ? queryResult : void 0;
+	const infiniteQueryResult = isInfiniteQueryResult(queryResult) ? queryResult : void 0;
 	const hasNextPage = infiniteQueryResult?.hasNextPage ?? false;
 	const fetchNextPage = infiniteQueryResult?.fetchNextPage;
 	const isFetchingNextPage = infiniteQueryResult?.isFetchingNextPage ?? false;

package/dist/index.d.ts

@@ -103,6 +103,7 @@ export { Select } from './components/inputs/Selection/Select/Select';
 export type { ControlledSliderProps, SliderProps } from './components/inputs/Slider/Slider';
 export { Slider } from './components/inputs/Slider/Slider';
 export type { InputVariantProps } from './components/inputs/shared/input.cva';
+export type { TooltipWrapperTriggerVariantProps } from './components/inputs/shared/tooltipWrapper.cva';
 export type { ControlledToggleProps, ToggleProps } from './components/inputs/Toggle/Toggle';
 export { Toggle } from './components/inputs/Toggle/Toggle';
 export type { MenuProps } from './components/Menu/Menu';

package/package.json

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