@povio/ui 2.2.9-rc.1 → 2.2.9-rc.11

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

@@ -75,6 +75,8 @@ var TextInputBase = (props) => {
 			labelProps,
 			className: clsx("group w-full", as === "inline" && "h-full", className),
 			tabIndex: as === "inline" ? -1 : void 0,
+			"data-is-empty": value === "" || value === null || value === void 0 || void 0,
+			"data-is-required": isRequired || void 0,
 			children: /* @__PURE__ */ jsx("div", {
 				className: clsx("relative flex cursor-text has-disabled:cursor-default", inputBaseCva({
 					variant,

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

@@ -1,6 +1,8 @@
 import { ComponentProps, JSXElementConstructor, ReactElement, ReactNode } from 'react';
 import { Control, UseFormReturn } from 'react-hook-form';
 import { z } from 'zod';
+import { Autocomplete } from '../Selection/Autocomplete/Autocomplete';
+import { Select } from '../Selection/Select/Select';
 import { HasRequiredProperty } from '../../../types/common';
 declare const componentRegistry: {
     readonly toggle: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Toggle/Toggle').ControlledToggleProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
@@ -10,24 +12,16 @@ declare const componentRegistry: {
     readonly textInput: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/TextInput/TextInput').ControlledTextInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly passwordInput: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/PasswordInput/PasswordInput').ControlledPasswordInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly textArea: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/TextArea/TextArea').ControlledTextAreaProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
-    readonly select: <TFieldValues extends import('react-hook-form').FieldValues, TKey extends import('react-aria').Key = import('react-aria').Key, TInitialSelectItem = import('../Selection/shared/select.types').DefaultInitialSelectItem<TKey>>(props: import('../Selection/Select/Select').ControlledSelectProps<TFieldValues, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;
-    readonly autocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TKey extends import('react-aria').Key = import('react-aria').Key, TInitialSelectItem = import('../Selection/shared/select.types').DefaultInitialSelectItem<TKey>>(props: import('../Selection/Autocomplete/Autocomplete').ControlledAutocompleteProps<TFieldValues, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;
-    readonly queryAutocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TSelectItem extends import('../Selection/shared/select.types').SelectItem<any>, TQueryFn extends (...args: any) => import('@tanstack/react-query').UseQueryResult<TSelectItem[]>>({ query, queryParams, queryOptions, ...props }: import('../../../types/common').OmitDiscriminatedUnion<import('../Selection/Autocomplete/Autocomplete').AutocompleteProps<Exclude<ReturnType<TQueryFn>["data"], undefined>[0] extends {
-        id: infer InferredKey extends import('react-aria').Key;
-    } ? InferredKey : never>, "onChange" | "value" | "items" | "selectionMode" | "isLoading" | "showSelectionBar" | "showSelectAllOption" | "initialSelection" | "showSelectionContent" | "onSearchChange"> & (import('../Selection/shared/select.types').GroupedSelectControlProps<TFieldValues, Exclude<ReturnType<TQueryFn>["data"], undefined>[0] extends {
-        id: infer InferredKey extends import('react-aria').Key;
-    } ? InferredKey : never> & {
-        query: Parameters<TQueryFn>[0] extends {
-            search?: string;
-        } ? TQueryFn : never;
-        queryParams?: Omit<Parameters<TQueryFn>[0], "search"> | undefined;
-        queryOptions?: Parameters<TQueryFn>[1] | undefined;
-    })) => import("react/jsx-runtime").JSX.Element;
+    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 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;
     readonly timePicker: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../DateTime/TimePicker/TimePicker').ControlledTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly dateRangePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, minValue, maxValue, ...props }: import('../DateTime/DateRangePicker/DateRangePicker').ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly textEditor: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../../../text-editor.js').ControlledTextEditorProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly unknown: null;
 };
 export type InputComponentRegistry = typeof componentRegistry;
@@ -56,8 +50,8 @@ type TypeBasedInputDef<TSchemaType extends Record<string, any>, T extends InputC
 interface RenderBasedInputDef<TSchemaType extends Record<string, any>, K extends keyof TSchemaType> {
     type?: never;
     name: K;
-    label?: never;
-    placeholder?: never;
+    label?: string;
+    placeholder?: string;
     props?: never;
     inputWrapper?: never;
     render: (formControl: {

package/dist/components/inputs/Inputs/InputItem.js

@@ -13,6 +13,8 @@ import { QueryAutocomplete } from "../Selection/Autocomplete/QueryAutocomplete.j
 import { Slider } from "../Slider/Slider.js";
 import { Toggle } from "../Toggle/Toggle.js";
 import { Segment } from "../../segment/Segment.js";
+import { QuerySelect } from "../Selection/Select/QuerySelect.js";
+import { TextEditor } from "../TextEditor/TextEditor.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/inputs/Inputs/InputItem.tsx
 var componentRegistry = {
@@ -24,6 +26,7 @@ var componentRegistry = {
 	passwordInput: PasswordInput,
 	textArea: TextArea,
 	select: Select,
+	querySelect: QuerySelect,
 	autocomplete: Autocomplete,
 	queryAutocomplete: QueryAutocomplete,
 	segment: Segment,
@@ -31,6 +34,7 @@ var componentRegistry = {
 	dateTimePicker: DateTimePicker,
 	timePicker: TimePicker,
 	dateRangePicker: DateRangePicker,
+	textEditor: TextEditor,
 	unknown: null
 };
 function InputItem({ form, inputDef }) {

package/dist/components/inputs/RadioGroup/RadioGroup.js

@@ -2,7 +2,7 @@ import { UIStyle } from "../../../config/uiStyle.context.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import { CheckContent } from "../shared/CheckContent.js";
 import { FormField } from "../FormField/FormField.js";
-import { radio, radioIndicatorClass, radioTypography } from "./radio.cva.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";
@@ -13,6 +13,7 @@ var RadioGroupBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const radioCva = UIStyle.useCva("radio.cva", radio);
 	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 formFieldProps = {
 		className,
@@ -49,6 +50,10 @@ var RadioGroupBase = (props) => {
 							variant,
 							...rest
 						}),
+						contentClassName: radioContentClassNameMap({
+							variant,
+							...rest
+						}),
 						className: labelClassName,
 						children: option.label
 					})]

package/dist/components/inputs/RadioGroup/radio.cva.d.ts

@@ -9,3 +9,6 @@ export declare const radioIndicatorClass = "group flex items-center gap-2";
 export declare const radioTypography: (props: {
     variant?: "default" | null | undefined;
 }) => TypographyVariantProps | undefined;
+export declare const radioContentClassName: (props: {
+    variant?: "default" | null | undefined;
+}) => string | undefined;

package/dist/components/inputs/RadioGroup/radio.cva.js

@@ -31,5 +31,6 @@ var radioTypography = compoundMapper({ default: {
 	sizeMobile: "label-1",
 	variant: "default"
 } });
+var radioContentClassName = compoundMapper({ default: "text-text-default-2" });
 //#endregion
-export { radio, radioIndicatorClass, radioTypography };
+export { radio, radioContentClassName, radioIndicatorClass, radioTypography };

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

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 import { Key } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
 import { SelectBaseProps } from '../shared/SelectBase';
@@ -5,4 +6,5 @@ import { DefaultInitialSelectItem, GroupedSelectControlProps, GroupedSelectProps
 import { OmitDiscriminatedUnion } from '../../../../types/common';
 export type AutocompleteProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = OmitDiscriminatedUnion<SelectBaseProps<TKey, TInitialSelectItem>, "isSearchable">;
 export type ControlledAutocompleteProps<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = Omit<AutocompleteProps<TKey, TInitialSelectItem>, keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey, TInitialSelectItem>;
-export declare const Autocomplete: <TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: ControlledAutocompleteProps<TFieldValues, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;
+export declare function Autocomplete<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: AutocompleteProps<TKey, TInitialSelectItem>): ReactElement;
+export declare function Autocomplete<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: ControlledAutocompleteProps<TFieldValues, TKey, TInitialSelectItem>): ReactElement;

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

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 //#region src/components/inputs/Selection/Autocomplete/Autocomplete.tsx
-var Autocomplete = (props) => {
+function Autocomplete(props) {
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -26,6 +26,6 @@ var Autocomplete = (props) => {
 		...props,
 		isSearchable: true
 	});
-};
+}
 //#endregion
 export { Autocomplete };

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

@@ -1,19 +1,4 @@
-import { 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';
-type QueryFn<TSelectItem extends SelectItem = SelectItem> = (...args: any) => UseQueryResult<Array<TSelectItem>>;
-type TKey<TQueryFn extends QueryFn> = Exclude<ReturnType<TQueryFn>["data"], undefined>[0] extends {
-    id: infer InferredKey extends Key;
-} ? InferredKey : never;
-type QueryAutocompleteProps<TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn<TSelectItem>> = OmitDiscriminatedUnion<AutocompleteProps<TKey<TQueryFn>>, "items" | "onSearchChange" | "isLoading" | keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey<TQueryFn>> & {
-    query: Parameters<TQueryFn>[0] extends {
-        search?: string;
-    } ? TQueryFn : never;
-    queryParams?: Omit<Parameters<TQueryFn>[0], "search">;
-    queryOptions?: Parameters<TQueryFn>[1];
-};
-export declare const QueryAutocomplete: <TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn<TSelectItem>>({ query, queryParams, queryOptions, ...props }: QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;
-export {};
+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;

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

@@ -1,19 +1,36 @@
+import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { Autocomplete } from "./Autocomplete.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, ...props }) => {
+var QueryAutocomplete = ({ query, queryParams, queryOptions, queryMap, ...props }) => {
+	const ui = UIConfig.useConfig();
 	const [search, setSearch] = useState("");
-	const { data: items, isLoading } = query({
+	const mapItems = (data) => {
+		const extractedData = Array.isArray(data) ? data : data.pages.flatMap((page) => page.items ?? []);
+		return queryMap?.(extractedData) ?? extractedData;
+	};
+	const { items, totalItems, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete({
+		query,
+		queryParams,
+		queryOptions,
+		mapItems: (data) => mapItems(data),
 		search,
-		...queryParams
-	}, queryOptions);
+		initialQueryState: props.isInitialQueryDisabled ?? ui.queryAutocomplete?.isInitialQueryDisabled
+	});
+	const { isInitialQueryDisabled: _, ...restProps } = props;
 	return /* @__PURE__ */ jsx(Autocomplete, {
-		...props,
-		items: items ?? [],
+		...restProps,
+		items,
 		onSearchChange: setSearch,
 		isClientSearchDisabled: true,
-		isLoading
+		isLoading,
+		totalItems,
+		onMouseEnter: handleEnableQuery,
+		onFocusCapture: handleEnableQuery,
+		hasLoadMore: hasNextPage,
+		onLoadMore: fetchNextPage ? () => void fetchNextPage() : void 0
 	});
 };
 //#endregion

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

@@ -0,0 +1,30 @@
+import { 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>;
+    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>;
+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: Parameters<TQueryFn>[0] extends {
+        search?: string;
+    } ? TQueryFn : never;
+    queryParams?: Omit<Parameters<TQueryFn>[0], "search">;
+    queryOptions?: Parameters<TQueryFn>[1];
+    queryMap?: (data: QueryAutocompleteExtractedData<TSelectItem>) => SelectItem<TSelectItem["id"]>[];
+    isInitialQueryDisabled?: boolean;
+};
+export interface UseQueryAutocompleteOptions<TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn<TSelectItem>, TKey extends Key = QueryAutocompleteExtractedData<TSelectItem>[number]["id"]> {
+    query: TQueryFn;
+    queryParams?: Parameters<TQueryFn>[0];
+    queryOptions?: Parameters<TQueryFn>[1];
+    queryMap?: (data: QueryAutocompleteExtractedData<TSelectItem>) => SelectItem<TKey>[];
+    initialQueryState?: boolean;
+    search: string;
+}

package/dist/components/inputs/Selection/Select/QuerySelect.d.ts

@@ -0,0 +1,14 @@
+import { GroupedSelectControlProps, GroupedSelectProps, SelectItem } from '../shared/select.types';
+import { SelectBaseProps } from '../shared/SelectBase';
+import { QueryDataType, QueryFn } from '../shared/querySelect.utils';
+import { OmitDiscriminatedUnion } from '../../../../types/common';
+import { Key } from 'react-aria-components';
+import { FieldValues } from 'react-hook-form';
+export type QuerySelectProps<TFieldValues extends FieldValues, TQueryFn extends QueryFn, TKey extends Key = Key> = OmitDiscriminatedUnion<SelectBaseProps<TKey>, "items" | "isLoading" | keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey> & {
+    query: TQueryFn;
+    queryParams?: Parameters<TQueryFn>[0];
+    queryOptions?: Parameters<TQueryFn>[1];
+    queryMap?: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[];
+    isInitialQueryDisabled?: boolean;
+};
+export declare const QuerySelect: <TFieldValues extends FieldValues, TQueryFn extends QueryFn, TKey extends Key = Key>({ query, queryParams, queryOptions, queryMap, ...props }: QuerySelectProps<TFieldValues, TQueryFn, TKey>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,58 @@
+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 { jsx } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
+//#region src/components/inputs/Selection/Select/QuerySelect.tsx
+var QuerySelect = ({ query, queryParams, queryOptions, queryMap, ...props }) => {
+	const ui = UIConfig.useConfig();
+	const { items, totalItems, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete({
+		query,
+		queryParams,
+		queryOptions,
+		mapItems: (data) => getQueryItems(data, queryMap),
+		initialQueryState: props.isInitialQueryDisabled ?? ui.querySelect?.isInitialQueryDisabled
+	});
+	if ("formControl" in props && props.formControl) {
+		const { formControl, ref, isInitialQueryDisabled: _, ...innerProps } = props;
+		return /* @__PURE__ */ jsx(Controller, {
+			control: formControl.control,
+			name: formControl.name,
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(SelectBase, {
+				...innerProps,
+				ref: mergeRefs(ref, field.ref),
+				items,
+				isLoading,
+				totalItems,
+				hasLoadMore: hasNextPage,
+				onLoadMore: fetchNextPage ? () => void fetchNextPage() : void 0,
+				value: field.value,
+				onChange: (value) => {
+					field.onChange(value);
+					field.onBlur?.();
+				},
+				onBlur: field.onBlur,
+				isDirty,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message,
+				onMouseEnter: handleEnableQuery,
+				onFocusCapture: handleEnableQuery
+			})
+		});
+	}
+	const { isInitialQueryDisabled: _, ...restProps } = props;
+	return /* @__PURE__ */ jsx(SelectBase, {
+		...restProps,
+		items,
+		isLoading,
+		totalItems,
+		hasLoadMore: hasNextPage,
+		onLoadMore: fetchNextPage ? () => void fetchNextPage() : void 0,
+		onMouseEnter: handleEnableQuery,
+		onFocusCapture: handleEnableQuery
+	});
+};
+//#endregion
+export { QuerySelect };

package/dist/components/inputs/Selection/Select/Select.d.ts

@@ -1,8 +1,10 @@
+import { ReactElement } from 'react';
 import { Key } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
 import { SelectBaseProps } from '../shared/SelectBase';
 import { DefaultInitialSelectItem, GroupedSelectControlProps, GroupedSelectProps, SelectAsyncProps } from '../shared/select.types';
 import { OmitDiscriminatedUnion } from '../../../../types/common';
 export type SelectProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = OmitDiscriminatedUnion<SelectBaseProps<TKey, TInitialSelectItem>, "initialSelection" | "mapInitialToSelectItem" | keyof SelectAsyncProps>;
-export type ControlledSelectProps<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = Omit<SelectProps<TKey, TInitialSelectItem>, keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey>;
-export declare const Select: <TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: ControlledSelectProps<TFieldValues, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;
+export type ControlledSelectProps<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = Omit<SelectProps<TKey, TInitialSelectItem>, keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey, TInitialSelectItem>;
+export declare function Select<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: SelectProps<TKey, TInitialSelectItem>): ReactElement;
+export declare function Select<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: ControlledSelectProps<TFieldValues, TKey, TInitialSelectItem>): ReactElement;

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

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 //#region src/components/inputs/Selection/Select/Select.tsx
-var Select = (props) => {
+function Select(props) {
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -22,6 +22,6 @@ var Select = (props) => {
 		});
 	}
 	return /* @__PURE__ */ jsx(SelectBase, { ...props });
-};
+}
 //#endregion
 export { Select };

package/dist/components/inputs/Selection/shared/SelectBase.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, Ref } from 'react';
+import { FocusEventHandler, MouseEventHandler, ReactElement, ReactNode, Ref } from 'react';
 import { AriaButtonProps } from 'react-aria';
 import { Key } from 'react-aria-components';
 import { FormFieldProps } from '../../FormField/FormField';
@@ -14,10 +14,13 @@ export type SelectBaseProps<TKey extends Key = Key, TInitialSelectItem = Default
     isSearchable?: boolean;
     isClearable?: boolean;
     isClientSearchDisabled?: boolean;
+    ignoreInputValueFiltering?: boolean;
     ignoreTriggerWidth?: boolean;
     items: SelectItem<TKey>[];
     inputClassName?: string;
     containerClassName?: string;
+    leadingContent?: ReactNode;
+    trailingContent?: ReactNode;
     customTrigger?: ReactElement;
     selectedTagsType?: "tags" | "list";
     collapseAfter?: number;
@@ -25,5 +28,7 @@ export type SelectBaseProps<TKey extends Key = Key, TInitialSelectItem = Default
     onInputChange?: (value: string) => void;
     onSearchChange?: (value: string) => void;
     mapInitialToSelectItem?: (item: TInitialSelectItem) => SelectItem<TKey>;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onFocusCapture?: FocusEventHandler<HTMLDivElement>;
 };
 export declare const SelectBase: <TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(dProps: SelectBaseProps<TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;

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

@@ -17,10 +17,11 @@ var SelectBase = (dProps) => {
 		isClearable: dProps.isClearable ?? ui.input.isClearable,
 		isSearchable: dProps.isSearchable ?? ui.select.isSearchable,
 		selectedTagsType: dProps.selectedTagsType ?? ui.select.selectedTagsType,
-		ignoreTriggerWidth: dProps.virtualizerOptions || dProps.items.length > 100 ? false : dProps.ignoreTriggerWidth ?? false,
+		ignoreTriggerWidth: dProps.virtualizerOptions || (dProps.totalItems ?? 0) > 100 || dProps.hasLoadMore ? false : dProps.ignoreTriggerWidth ?? false,
 		collapseAfter: dProps.collapseAfter ?? ui.select.collapseAfter,
 		hideSearchIcon: dProps.hideSearchIcon ?? ui.select.hideSearchIcon,
-		fireBlurOnChange: dProps.fireBlurOnChange ?? ui.select.fireBlurOnChange
+		fireBlurOnChange: dProps.fireBlurOnChange ?? ui.select.fireBlurOnChange,
+		isClientSearchDisabled: dProps.ignoreInputValueFiltering ?? dProps.isClientSearchDisabled
 	};
 	const isDesktop = useBreakpoint("md");
 	return /* @__PURE__ */ jsx(SelectContext.Provider, {

package/dist/components/inputs/Selection/shared/SelectDesktop.d.ts

@@ -1,5 +1,5 @@
 import { Key } from 'react-aria-components';
 import { SelectBaseProps } from './SelectBase';
 type SelectDesktopProps<TKey extends Key = Key> = SelectBaseProps<TKey>;
-export declare const SelectDesktop: <TKey extends Key = Key>({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }: SelectDesktopProps<TKey>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectDesktop: <TKey extends Key = Key>({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, leadingContent, trailingContent, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }: SelectDesktopProps<TKey>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -6,6 +6,7 @@ import "./useSelectItems.js";
 import { SelectContext } from "./select.context.js";
 import { SelectInput } from "./SelectInput.js";
 import { SelectListBox } from "./SelectListBox.js";
+import { selectPopoverCva } from "./selectDesktop.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Fragment as Fragment$1, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -13,9 +14,10 @@ import { ComboBox, DialogTrigger, Popover } from "react-aria-components";
 import { useLabel, usePreventScroll } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 //#region src/components/inputs/Selection/shared/SelectDesktop.tsx
-var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }) => {
+var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, leadingContent, trailingContent, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }) => {
 	const { label, tooltipText, helperText, isDirty, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, isSearchable, isClearable, isLoading, as, size, collapseAfter, selectedTagsType } = props;
 	const popoverCva = UIStyle.useCva("popover.cva", popover);
+	const selectPopoverCva$1 = UIStyle.useCva("select.popoverCva", selectPopoverCva);
 	const formFieldProps = {
 		error,
 		label,
@@ -119,6 +121,8 @@ var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inp
 					children: /* @__PURE__ */ jsx("div", {
 						...fieldProps,
 						ref: mergeRefs(ref, triggerRef),
+						onMouseEnter,
+						onFocusCapture,
 						children: customTrigger
 					})
 				}) : /* @__PURE__ */ jsx(SelectInput, {
@@ -135,6 +139,8 @@ var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inp
 					isClearable,
 					showSelectionContent,
 					inputClassName,
+					leadingContent,
+					trailingContent,
 					collapseAfter,
 					selectedTagsType,
 					isRequired,
@@ -149,7 +155,7 @@ var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inp
 					triggerRef,
 					isOpen,
 					onOpenChange: setIsOpen,
-					className: "my-4 outline-none",
+					className: selectPopoverCva$1({}),
 					style: { width: !ignoreTriggerWidth ? popoverWidth : void 0 },
 					offset: 0,
 					children: /* @__PURE__ */ jsx(SelectListBox, {

package/dist/components/inputs/Selection/shared/SelectInput.d.ts

@@ -4,12 +4,12 @@ import { FormFieldHeaderProps } from '../../FormField/FormFieldHeader';
 import { SelectBaseProps } from './SelectBase';
 import { SelectItem } from './select.types';
 import { InputVariantProps } from '../../shared/input.cva';
-interface SelectInputProps extends InputVariantProps, Pick<SelectBaseProps, "ref" | "placeholder" | "isDisabled" | "hideDropdownIcon" | "isSearchable" | "isClearable" | "onBlur" | "showSelectionContent" | "inputClassName" | "selectedTagsType" | "collapseAfter" | "isRequired" | "isDirty" | "fireBlurOnChange"> {
+interface SelectInputProps extends InputVariantProps, Pick<SelectBaseProps, "ref" | "placeholder" | "isDisabled" | "hideDropdownIcon" | "isSearchable" | "isClearable" | "onBlur" | "showSelectionContent" | "inputClassName" | "selectedTagsType" | "collapseAfter" | "isRequired" | "isDirty" | "fireBlurOnChange" | "leadingContent" | "trailingContent" | "onMouseEnter" | "onFocusCapture"> {
     isInvalid?: boolean;
     className?: string;
     fieldProps?: AriaFieldProps;
     headerProps?: FormFieldHeaderProps;
     onCloseComboBox?: (state: ComboBoxState<SelectItem> | null) => void;
 }
-export declare const SelectInput: ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onBlur, fireBlurOnChange, ...props }: SelectInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectInput: ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onBlur, fireBlurOnChange, leadingContent, trailingContent, onMouseEnter, onFocusCapture, ...props }: SelectInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -14,7 +14,7 @@ import { Button, ComboBoxStateContext, Input } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/Selection/shared/SelectInput.tsx
-var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onBlur, fireBlurOnChange, ...props }) => {
+var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onBlur, fireBlurOnChange, leadingContent, trailingContent, onMouseEnter, onFocusCapture, ...props }) => {
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const { t } = useTranslation("ui");
@@ -83,6 +83,8 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 		"data-is-required": isRequired || void 0,
 		"data-is-dirty": isDirty || void 0,
 		"data-select-input": "",
+		onMouseEnter,
+		onFocusCapture,
 		...hoverProps,
 		...focusWithinProps,
 		children: [
@@ -99,6 +101,10 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 						...headerProps,
 						labelProps
 					}),
+					leadingContent && /* @__PURE__ */ jsx("div", {
+						className: "ml-input-side-default flex shrink-0 items-center",
+						children: leadingContent
+					}),
 					(showTags || isSearchable) && /* @__PURE__ */ jsxs("div", {
 						className: clsx("flex flex-1 flex-wrap gap-input-gap-input-text-to-elements truncate", !isSearchable && "pointer-events-none z-1"),
 						children: [showTags && /* @__PURE__ */ jsx(SelectInputTags, {
@@ -131,6 +137,10 @@ 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();

package/dist/components/inputs/Selection/shared/SelectListBox.d.ts

@@ -1,9 +1,9 @@
 import { AriaListBoxProps } from 'react-aria';
 import { SelectBaseProps } from './SelectBase';
 import { SelectItem } from './select.types';
-export interface SelectListBoxProps extends Pick<SelectBaseProps, "label" | "newItemRender" | "onLoadMore" | "selectionMode" | "isSearchable" | "virtualizerOptions">, Omit<AriaListBoxProps<SelectItem>, "children" | "aria-label" | "selectionMode" | "items" | "selectedKeys" | "onSelectionChange" | "escapeKeyBehavior" | "shouldSelectOnPressUp" | "label"> {
+export interface SelectListBoxProps extends Pick<SelectBaseProps, "label" | "newItemRender" | "onLoadMore" | "selectionMode" | "isSearchable" | "virtualizerOptions" | "totalItems" | "hasLoadMore">, Omit<AriaListBoxProps<SelectItem>, "children" | "aria-label" | "selectionMode" | "items" | "selectedKeys" | "onSelectionChange" | "escapeKeyBehavior" | "shouldSelectOnPressUp" | "label"> {
     className?: string;
     isScrollable?: boolean;
     onClose?: () => void;
 }
-export declare const SelectListBox: ({ label, selectionMode, isSearchable, isScrollable, virtualizerOptions, newItemRender, onLoadMore, className, onClose, ...props }: SelectListBoxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectListBox: ({ label, selectionMode, isSearchable, isScrollable, virtualizerOptions, totalItems, hasLoadMore, newItemRender, onLoadMore, className, onClose, ...props }: SelectListBoxProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -7,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { ListBox, ListLayout, Virtualizer } from "react-aria-components";
 //#region src/components/inputs/Selection/shared/SelectListBox.tsx
-var SelectListBox = ({ label, selectionMode, isSearchable, isScrollable = true, virtualizerOptions, newItemRender, onLoadMore, className, onClose, ...props }) => {
+var SelectListBox = ({ label, selectionMode, isSearchable, isScrollable = true, virtualizerOptions, totalItems, hasLoadMore, newItemRender, onLoadMore, className, onClose, ...props }) => {
 	const { fieldState, onChange, listItems, selectableListItems, selectedIds, isMultiple, onClear, onSelectAll } = SelectContext.useSelect();
 	const onSelectionChange = (value) => {
 		const ids = Array.from(value);
@@ -42,7 +42,7 @@ var SelectListBox = ({ label, selectionMode, isSearchable, isScrollable = true,
 			newItemRender
 		}, item.id);
 	};
-	if (virtualizerOptions || listItems.length > 100) return /* @__PURE__ */ jsx(Virtualizer, {
+	if (virtualizerOptions || (totalItems ?? listItems.length) > 100 || hasLoadMore) return /* @__PURE__ */ jsx(Virtualizer, {
 		layout: ListLayout,
 		layoutOptions: virtualizerOptions,
 		children: /* @__PURE__ */ jsx(ListBox, {

package/dist/components/inputs/Selection/shared/SelectMobile.d.ts

@@ -1,5 +1,5 @@
 import { Key } from 'react-aria-components';
 import { SelectBaseProps } from './SelectBase';
 type SelectMobileProps<TKey extends Key = Key> = SelectBaseProps<TKey>;
-export declare const SelectMobile: <TKey extends Key = Key>({ ref, error, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }: SelectMobileProps<TKey>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectMobile: <TKey extends Key = Key>({ ref, error, showSelectionContent, inputClassName, containerClassName, leadingContent, trailingContent, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }: SelectMobileProps<TKey>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -13,7 +13,7 @@ import { useRef } from "react";
 import { DialogTrigger } from "react-aria-components";
 import { useLabel } from "react-aria";
 //#region src/components/inputs/Selection/shared/SelectMobile.tsx
-var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }) => {
+var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containerClassName, leadingContent, trailingContent, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }) => {
 	const { label, tooltipText, helperText, isDirty, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, hideSearchIcon, isSearchable, isClearable, as, size, collapseAfter, selectedTagsType } = props;
 	const formFieldProps = {
 		error,
@@ -62,6 +62,8 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 			children: [customTrigger ? /* @__PURE__ */ jsx("div", {
 				...fieldProps,
 				ref,
+				onMouseEnter,
+				onFocusCapture,
 				children: customTrigger
 			}) : /* @__PURE__ */ jsx(SelectInput, {
 				ref,
@@ -79,6 +81,8 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 				onBlur: void 0,
 				fieldProps,
 				headerProps,
+				leadingContent,
+				trailingContent,
 				collapseAfter,
 				selectedTagsType,
 				isRequired,

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

@@ -0,0 +1,6 @@
+import { UseInfiniteQueryResult, UseQueryResult } from '@tanstack/react-query';
+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>[];