@povio/ui 2.2.9-rc.2 → 2.2.9-rc.21

package/dist/components/inputs/shared/StaticInput.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { FormFieldProps } from '../FormField/FormField';
+import { TextInputProps } from '../Input/TextInput/TextInput';
+import { InputSizeProps, InputVariantProps } from './input.cva';
+import { TypographyVariantProps } from '../../text/Typography/typography.cva';
+type StaticInputDataAttributes = {
+    dataDisabled?: boolean;
+    dataHasSearch?: boolean;
+    dataHasSelection?: boolean;
+    dataInvalid?: boolean;
+    dataIsDirty?: boolean;
+    dataIsDisabled?: boolean;
+    dataIsEmpty?: boolean;
+    dataIsFilled?: boolean;
+    dataIsRequired?: boolean;
+};
+interface StaticInputProps extends FormFieldProps {
+    onInteract: (shouldFocus: boolean) => void;
+    as?: TextInputProps["as"];
+    typographySize?: TypographyVariantProps["size"];
+    size?: InputSizeProps["size"];
+    variant?: InputVariantProps["variant"];
+    applyMinInputWidth?: boolean;
+    placeholder?: ReactNode;
+    showPlacholderIfFilled?: boolean;
+    displayValue?: ReactNode;
+    isEmpty?: boolean;
+    leadingVisual?: ReactNode;
+    leadingContent?: ReactNode;
+    leadingContentClassName?: string;
+    trailingContent?: ReactNode;
+    contentRowClassName?: string;
+    inputClassName?: string;
+    dataAttributes?: StaticInputDataAttributes;
+}
+export declare const StaticInput: ({ onInteract, as, typographySize, size, variant, applyMinInputWidth, placeholder, showPlacholderIfFilled, displayValue, isEmpty, leadingVisual, leadingContent, leadingContentClassName, trailingContent, contentRowClassName, inputClassName, dataAttributes, className, ...formFieldProps }: StaticInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,91 @@
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { typography } from "../../text/Typography/typography.cva.js";
+import { FormFieldLabel } from "../FormField/FormFieldLabel.js";
+import { inputBase, inputSize } from "./input.cva.js";
+import { FormField } from "../FormField/FormField.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+//#region src/components/inputs/shared/StaticInput.tsx
+var StaticInput = ({ onInteract, as, typographySize, size, variant, applyMinInputWidth, placeholder, showPlacholderIfFilled = false, displayValue, isEmpty, leadingVisual, leadingContent, leadingContentClassName, trailingContent, contentRowClassName, inputClassName, dataAttributes, className, ...formFieldProps }) => {
+	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
+	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
+	const typographyCva = UIStyle.useCva("typography.cva", typography);
+	let hasValue = !!displayValue;
+	if (isEmpty != null) hasValue = !isEmpty;
+	let staticDisplayContent = placeholder;
+	if (hasValue) staticDisplayContent = displayValue;
+	else if (as === "floating") staticDisplayContent = null;
+	const shouldRenderPlaceholderAfterValue = showPlacholderIfFilled && placeholder && hasValue;
+	const shouldRenderFloatingLineSpacer = as === "floating" && !hasValue;
+	const inputDataAttributes = {
+		dataIsEmpty: !hasValue,
+		dataDisabled: formFieldProps.isDisabled,
+		dataIsDisabled: formFieldProps.isDisabled,
+		dataHasSelection: hasValue,
+		...dataAttributes
+	};
+	return /* @__PURE__ */ jsx(FormField, {
+		...formFieldProps,
+		as,
+		className,
+		onMouseEnter: () => onInteract(false),
+		tabIndex: as === "inline" ? -1 : void 0,
+		children: /* @__PURE__ */ jsxs("div", {
+			tabIndex: formFieldProps.isDisabled ? -1 : 0,
+			onFocus: () => onInteract(true),
+			onClick: () => onInteract(true),
+			onPointerDown: () => onInteract(true),
+			"data-is-empty": inputDataAttributes.dataIsEmpty || void 0,
+			"data-disabled": inputDataAttributes.dataDisabled || void 0,
+			"data-is-disabled": inputDataAttributes.dataIsDisabled || void 0,
+			"data-has-selection": inputDataAttributes.dataHasSelection || void 0,
+			"data-has-search": inputDataAttributes.dataHasSearch || void 0,
+			"data-invalid": inputDataAttributes.dataInvalid || void 0,
+			"data-is-dirty": inputDataAttributes.dataIsDirty || void 0,
+			"data-is-filled": inputDataAttributes.dataIsFilled || void 0,
+			"data-is-required": inputDataAttributes.dataIsRequired || void 0,
+			"data-rac": "",
+			className: clsx("group/static-input group/input-content group/select-content relative flex items-center gap-input-gap-input-text-to-elements", applyMinInputWidth && "min-w-input-width-min-width", inputBaseCva({
+				as,
+				variant
+			}), !hasValue && "text-text-default-3", inputClassName),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: clsx("group/input-content flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", inputSizeCva({
+					size,
+					as
+				}), typographySize && typographyCva({ size: typographySize }), contentRowClassName),
+				children: [
+					leadingVisual && /* @__PURE__ */ jsx("div", {
+						className: "pointer-events-none shrink-0",
+						children: leadingVisual
+					}),
+					as && ["filter", "floating"].includes(as) && /* @__PURE__ */ jsx(FormFieldLabel, {
+						as,
+						size,
+						label: formFieldProps.label,
+						isRequired: formFieldProps.isRequired,
+						isDisabled: formFieldProps.isDisabled
+					}),
+					leadingContent && /* @__PURE__ */ jsx("div", {
+						className: clsx("ml-input-side-default flex shrink-0 items-center", leadingContentClassName),
+						children: leadingContent
+					}),
+					staticDisplayContent,
+					shouldRenderFloatingLineSpacer && /* @__PURE__ */ jsx(Fragment, { children: "\xA0" }),
+					shouldRenderPlaceholderAfterValue && /* @__PURE__ */ jsx("div", {
+						className: "text-text-default-3",
+						children: placeholder
+					})
+				]
+			}), trailingContent && /* @__PURE__ */ jsx("div", {
+				className: clsx(inputSizeCva({
+					size,
+					as
+				}), "pointer-events-none flex items-center gap-input-gap-trailing-elements py-0! pl-0!"),
+				children: trailingContent
+			})]
+		})
+	});
+};
+//#endregion
+export { StaticInput };

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/input.cva.d.ts

@@ -12,6 +12,11 @@ export declare const inputSize: (props?: ({
 } & ClassProp) | undefined) => string;
 export interface InputSizeProps extends VariantProps<typeof inputSize> {
 }
+export declare const inputClearClass: (props?: ({
+    as?: "filter" | "default" | "floating" | "inline" | null | undefined;
+} & ClassProp) | undefined) => string;
+export interface InputClearClassProps extends VariantProps<typeof inputClearClass> {
+}
 export declare const inputSide: (props?: ({
     size?: "small" | "default" | "extra-small" | "large" | null | undefined;
     type?: "left" | "right" | "var" | null | undefined;

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

@@ -191,6 +191,15 @@ var inputSize = cva("", {
 		as: "default"
 	}
 });
+var inputClearClass = cva("", {
+	variants: { as: {
+		default: "",
+		floating: "",
+		filter: "",
+		inline: ""
+	} },
+	defaultVariants: { as: "default" }
+});
 var inputSide = cva("", {
 	variants: {
 		size: {
@@ -277,4 +286,4 @@ var useInputCva = () => {
 	};
 };
 //#endregion
-export { inputBase, inputSide, inputSize, useInputCva };
+export { inputBase, inputClearClass, inputSide, inputSize, useInputCva };

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("inline-flex");
+//#endregion
+export { tooltipWrapperTrigger };

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

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactElement } from 'react';
 import { ButtonProps } from '../components/buttons/Button/Button';
 import { CheckboxProps } from '../components/inputs/Checkbox/Checkbox';
 import { DatePickerProps } from '../components/inputs/DateTime/DatePicker/DatePicker';
@@ -19,6 +19,7 @@ export declare namespace UIConfig {
         [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : Exclude<T[P], null | undefined>;
     };
     export interface Options {
+        renderStaticInput: boolean;
         input: Pick<TextInputProps, "variant" | "isClearable" | "hideLabel" | "as" | "size">;
         button: Pick<ButtonProps, "variant" | "size">;
         numberInput: Pick<NumberInputProps, "formatOptions">;
@@ -33,7 +34,12 @@ export declare namespace UIConfig {
         };
         toggle: Pick<ToggleProps, "variant">;
         slider: Pick<SliderProps, "minValue" | "maxValue">;
-        dateInput: Pick<DatePickerProps, "todayIcon" | "shouldForceLeadingZeros" | "disableManualEntry">;
+        dateInput: Pick<DatePickerProps, "todayIcon" | "todayIconButtonSize" | "shouldForceLeadingZeros" | "disableManualEntry" | "autoFixYear"> & {
+            calendarIcon?: ReactElement;
+            dateTimeIcon?: ReactElement;
+            timeIcon?: ReactElement;
+            setDateValueOnDateSelection?: boolean;
+        };
         actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;
         bottomSheet: Pick<BottomSheetProps, "closeDragThreshold" | "closeVelocityThreshold" | "hideThumb" | "headerTypography">;
         tableHeaderText: Pick<HeaderTextProps, "variant" | "size">;

package/dist/config/uiConfig.context.js

@@ -1,3 +1,6 @@
+import { CalendarIcon } from "../assets/icons/Calendar.js";
+import { ClockIcon } from "../assets/icons/Clock.js";
+import { DateTimeIcon } from "../assets/icons/DateTime.js";
 import { ObjectUtils } from "../utils/object.utils.js";
 import { useDeepCompareMemo } from "../hooks/useDeepCompare.js";
 import { jsx } from "react/jsx-runtime";
@@ -6,6 +9,7 @@ import { createContext, use } from "react";
 var UIConfig;
 (function(_UIConfig) {
 	const DEFAULT_CONFIG = {
+		renderStaticInput: true,
 		input: {
 			variant: "outlined",
 			as: "default",
@@ -43,8 +47,14 @@ var UIConfig;
 		},
 		dateInput: {
 			todayIcon: false,
+			todayIconButtonSize: "none",
 			shouldForceLeadingZeros: false,
-			disableManualEntry: false
+			disableManualEntry: false,
+			autoFixYear: false,
+			calendarIcon: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-5" }),
+			dateTimeIcon: /* @__PURE__ */ jsx(DateTimeIcon, { className: "size-5" }),
+			timeIcon: /* @__PURE__ */ jsx(ClockIcon, { className: "size-6 text-interactive-text-secondary-idle" }),
+			setDateValueOnDateSelection: false
 		},
 		actionModal: {
 			titleTypography: {

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

@@ -4,11 +4,16 @@ import { BreadcrumbChevronVariantProps, BreadcrumbIconVariantProps, BreadcrumbIt
 import { ButtonVariantProps } from '../components/buttons/Button/button.cva';
 import { PillButtonVariants } from '../components/buttons/PillButton/pillButton.cva';
 import { CheckboxIconVariantProps, CheckboxVariantProps } from '../components/inputs/Checkbox/checkbox.cva';
+import { DatePickerInputContentRowProps } from '../components/inputs/DateTime/shared/datePickerInput.cva';
 import { FormFieldErrorVariantProps } from '../components/inputs/FormField/formFieldError.cva';
+import { FormFieldHeaderVariantProps } from '../components/inputs/FormField/formFieldHeader.cva';
 import { FormFieldHelperVariantProps } from '../components/inputs/FormField/formFieldHelper.cva';
 import { RadioVariantProps } from '../components/inputs/RadioGroup/radio.cva';
-import { InputBaseProps, InputSideProps, InputSizeProps } from '../components/inputs/shared/input.cva';
+import { SelectPopoverCva } from '../components/inputs/Selection/shared/selectDesktop.cva';
+import { SelectListBoxItemCva } from '../components/inputs/Selection/shared/selectItem.cva';
+import { InputBaseProps, InputClearClassProps, 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';
@@ -24,13 +29,12 @@ import { LinkVariantProps } from '../components/text/Link/link.cva';
 import { TagVariantProps } from '../components/text/Tag/tag.cva';
 import { TypographyVariantProps } from '../components/text/Typography/typography.cva';
 import { CompoundMapper, ConfigSchema } from '../utils/compoundMapper';
-import { SelectListBoxItemCva } from '../components/inputs/Selection/shared/selectItem.cva';
 export declare namespace UIStyle {
     export type Cva<T> = (props: (T & ClassProp) | ClassProp) => string;
     type OptionKey = {
         [K in keyof Options]: Options[K] extends object ? `${K & string}.${keyof Options[K] & string}` : never;
     }[keyof Options];
-    interface Options {
+    export interface Options {
         button: {
             cva?: Cva<ButtonVariantProps>;
             sizeCva?: Cva<ButtonVariantProps>;
@@ -46,10 +50,12 @@ export declare namespace UIStyle {
             cva?: Cva<CheckboxVariantProps>;
             iconCva?: Cva<CheckboxIconVariantProps>;
             typography?: CompoundMapper<TypographyVariantProps, CheckboxVariantProps>;
+            contentClassName?: CompoundMapper<string, CheckboxVariantProps>;
         };
         radio: {
             cva?: Cva<RadioVariantProps>;
             typography?: CompoundMapper<TypographyVariantProps, RadioVariantProps>;
+            contentClassName?: CompoundMapper<string, RadioVariantProps>;
         };
         status: {
             iconCva?: Cva<ToastVariantProps>;
@@ -64,9 +70,16 @@ export declare namespace UIStyle {
         };
         input: {
             baseCva?: Cva<InputBaseProps>;
+            clearClassCva?: Cva<InputClearClassProps>;
             sizeCva?: Cva<InputSizeProps>;
             sideCva?: Cva<InputSideProps>;
         };
+        tooltipWrapper: {
+            triggerCva?: Cva<TooltipWrapperTriggerVariantProps>;
+        };
+        datePickerInput: {
+            contentRowCva?: Cva<DatePickerInputContentRowProps>;
+        };
         label: {
             cva?: Cva<LabelBaseProps>;
             typography?: CompoundMapper<TypographyVariantProps, LabelBaseProps>;
@@ -74,6 +87,7 @@ export declare namespace UIStyle {
         toggle: {
             cva?: Cva<ToggleVariantProps>;
             typography?: CompoundMapper<TypographyVariantProps, ToggleVariantProps>;
+            contentClassName?: CompoundMapper<string, ToggleVariantProps>;
         };
         typography: {
             cva?: Cva<TypographyVariantProps>;
@@ -145,11 +159,13 @@ export declare namespace UIStyle {
             cva?: Cva<PopoverVariantProps>;
         };
         formField: {
+            headerCva?: Cva<FormFieldHeaderVariantProps>;
             errorLabelCva?: Cva<FormFieldErrorVariantProps>;
             helperLabelCva?: Cva<FormFieldHelperVariantProps>;
         };
         select: {
             listBoxItemCva?: Cva<SelectListBoxItemCva>;
+            popoverCva?: Cva<SelectPopoverCva>;
         };
     }
     interface ProviderProps {

package/dist/helpers/dynamicInputs.d.ts

@@ -21,14 +21,14 @@ export type AllowedComponentType<TZodType extends z.ZodType> = ZodUtils.ZodTypeS
     datetime: "datePicker" | "dateTimePicker" | "timePicker";
     dateRange: "dateRangePicker";
     boolean: "toggle" | "checkbox";
-    number: "numberInput" | "slider" | "select" | "autocomplete" | "queryAutocomplete" | "segment";
-    enum: "select" | "autocomplete" | "segment";
-    string: "textInput" | "passwordInput" | "textArea" | "select" | "autocomplete" | "queryAutocomplete" | "segment";
+    number: "numberInput" | "slider" | "select" | "querySelect" | "autocomplete" | "queryAutocomplete" | "segment";
+    enum: "select" | "querySelect" | "autocomplete" | "segment";
+    string: "textInput" | "passwordInput" | "textArea" | "textEditor" | "select" | "querySelect" | "autocomplete" | "queryAutocomplete" | "segment";
     email: "textInput";
-    array: "select" | "autocomplete" | "queryAutocomplete" | "segment";
+    array: "select" | "querySelect" | "autocomplete" | "queryAutocomplete" | "segment";
     object: InputComponentType;
     unknown: InputComponentType;
-    uuid: "select" | "autocomplete" | "queryAutocomplete" | "segment";
+    uuid: "select" | "querySelect" | "autocomplete" | "queryAutocomplete" | "segment";
 }>;
 interface DynamicInputDefBase<TProps> {
     label?: string;

package/dist/helpers/dynamicInputs.js

@@ -81,6 +81,7 @@ var getDefaultProps = (componentType, keyType) => {
 	].includes(componentType)) props.items = getDefaultSelectionItems(unwrappedType);
 	if ([
 		"select",
+		"querySelect",
 		"autocomplete",
 		"queryAutocomplete",
 		"segment"
@@ -146,6 +147,8 @@ var populateInputDef = (schema, schemaKey, value, options) => {
 	const inputWrapper = value.inputWrapper ?? options.globalInputWrapper;
 	if ("render" in value) return {
 		name,
+		label,
+		placeholder,
 		render: value.render
 	};
 	const schemaKeyType = schema.shape[schemaKey];

package/dist/hooks/useIntersectionObserver.d.ts

@@ -3,6 +3,6 @@ type UseIntersectionObserverProps = {
     onIntersectionChange?: (entry: IntersectionObserverEntry) => void;
 } & IntersectionObserverInit;
 export declare const useIntersectionObserver: <T extends HTMLElement>({ onIntersection, onIntersectionChange, root, rootMargin, threshold, }: UseIntersectionObserverProps) => {
-    ref: import('react').RefObject<T | null>;
+    ref: (element: T | null) => void;
 };
 export {};

package/dist/hooks/useIntersectionObserver.js

@@ -1,25 +1,44 @@
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 //#region src/hooks/useIntersectionObserver.ts
 var useIntersectionObserver = ({ onIntersection, onIntersectionChange, root, rootMargin, threshold }) => {
-	const ref = useRef(null);
+	const elementRef = useRef(null);
+	const observerRef = useRef(null);
+	const onIntersectionRef = useRef(onIntersection);
+	const onIntersectionChangeRef = useRef(onIntersectionChange);
+	useEffect(() => {
+		onIntersectionRef.current = onIntersection;
+	}, [onIntersection]);
+	useEffect(() => {
+		onIntersectionChangeRef.current = onIntersectionChange;
+	}, [onIntersectionChange]);
 	useEffect(() => {
 		const observer = new IntersectionObserver((entries) => {
-			if (entries.some((entry) => entry.isIntersecting)) onIntersection?.();
-			onIntersectionChange?.(entries[0]);
+			if (entries.some((entry) => entry.isIntersecting)) onIntersectionRef.current?.();
+			onIntersectionChangeRef.current?.(entries[0]);
 		}, {
 			root,
 			rootMargin,
 			threshold
 		});
-		if (ref.current) observer.observe(ref.current);
-		return () => observer.disconnect();
+		observerRef.current = observer;
+		if (elementRef.current) observer.observe(elementRef.current);
+		return () => {
+			if (elementRef.current) observer.unobserve(elementRef.current);
+			observer.disconnect();
+			observerRef.current = null;
+		};
 	}, [
-		ref,
 		root,
-		onIntersection,
-		onIntersectionChange
+		rootMargin,
+		threshold
 	]);
-	return { ref };
+	const ref = useCallback((element) => {
+		if (elementRef.current === element) return;
+		if (observerRef.current && elementRef.current) observerRef.current.unobserve(elementRef.current);
+		elementRef.current = element;
+		if (observerRef.current && elementRef.current) observerRef.current.observe(elementRef.current);
+	}, []);
+	return useMemo(() => ({ ref }), [ref]);
 };
 //#endregion
 export { useIntersectionObserver };

package/dist/hooks/useQueryAutocomplete.d.ts

@@ -1,25 +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>[];
+    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,10 +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,
-		...queryParams
+		...isFilterSearchParams(queryParams) ? { filter: {
+			...queryParams.filter,
+			search
+		} } : {}
 	}, {
 		...queryOptions,
 		enabled: isQueryEnabled && (queryOptions?.enabled ?? true)
@@ -14,14 +23,14 @@ 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;
+	const totalItems = infiniteQueryResult?.data?.pages?.[0]?.totalItems;
 	const items = useMemo(() => {
 		if (!data) return [];
 		return mapItems(data);
@@ -32,6 +41,7 @@ var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initia
 		isQueryEnabled,
 		handleEnableQuery,
 		items,
+		totalItems,
 		hasNextPage,
 		fetchNextPage,
 		isFetchingNextPage

package/dist/index.d.ts

@@ -78,6 +78,8 @@ export type { FormFieldProps } from './components/inputs/FormField/FormField';
 export { FormField } from './components/inputs/FormField/FormField';
 export type { ControlledNumberInputProps, NumberInputProps } from './components/inputs/Input/NumberInput/NumberInput';
 export { NumberInput } from './components/inputs/Input/NumberInput/NumberInput';
+export type { ControlledNumberRangeInputProps, NumberRangeInputProps, NumberRangeValue, } from './components/inputs/Input/NumberRangeInput/NumberRangeInput';
+export { NumberRangeInput } from './components/inputs/Input/NumberRangeInput/NumberRangeInput';
 export type { ControlledPasswordInputProps, PasswordInputProps, } from './components/inputs/Input/PasswordInput/PasswordInput';
 export { PasswordInput } from './components/inputs/Input/PasswordInput/PasswordInput';
 export type { ControlledTextAreaProps, TextAreaProps } from './components/inputs/Input/TextArea/TextArea';
@@ -94,11 +96,16 @@ export type { RadioVariantProps } from './components/inputs/RadioGroup/radio.cva
 export type { AutocompleteProps, ControlledAutocompleteProps, } from './components/inputs/Selection/Autocomplete/Autocomplete';
 export { Autocomplete } from './components/inputs/Selection/Autocomplete/Autocomplete';
 export { QueryAutocomplete } from './components/inputs/Selection/Autocomplete/QueryAutocomplete';
+export type { SelectBaseProps } from './components/inputs/Selection/shared/SelectBase';
+export type { DefaultInitialSelectItem, SelectAsyncProps, SelectItem, } from './components/inputs/Selection/shared/select.types';
+export type { QuerySelectProps } from './components/inputs/Selection/Select/QuerySelect';
+export { QuerySelect } from './components/inputs/Selection/Select/QuerySelect';
 export type { ControlledSelectProps, SelectProps } from './components/inputs/Selection/Select/Select';
 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/dist/index.js

@@ -68,10 +68,10 @@ import { Checkbox } from "./components/inputs/Checkbox/Checkbox.js";
 import { useLongPressRepeat } from "./hooks/useLongPressRepeat.js";
 import { useScrollableListBox } from "./hooks/useScrollableListBox.js";
 import { FormField } from "./components/inputs/FormField/FormField.js";
+import { useDebounceCallback } from "./hooks/useDebounceCallback.js";
 import { DateTimeUtils } from "./utils/date-time.utils.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";
@@ -85,6 +85,7 @@ import { FileUpload } from "./components/inputs/File/FileUpload.js";
 import { FileUploadContainer } from "./components/inputs/File/FileUploadContainer.js";
 import { InputUpload } from "./components/inputs/File/InputUpload.js";
 import { NumberInput } from "./components/inputs/Input/NumberInput/NumberInput.js";
+import { NumberRangeInput } from "./components/inputs/Input/NumberRangeInput/NumberRangeInput.js";
 import { PasswordInput } from "./components/inputs/Input/PasswordInput/PasswordInput.js";
 import { TextArea } from "./components/inputs/Input/TextArea/TextArea.js";
 import { Autocomplete } from "./components/inputs/Selection/Autocomplete/Autocomplete.js";
@@ -92,6 +93,7 @@ import { QueryAutocomplete } from "./components/inputs/Selection/Autocomplete/Qu
 import { Slider } from "./components/inputs/Slider/Slider.js";
 import { Toggle } from "./components/inputs/Toggle/Toggle.js";
 import { Segment } from "./components/segment/Segment.js";
+import { QuerySelect } from "./components/inputs/Selection/Select/QuerySelect.js";
 import { ResponsivePopover } from "./components/overlays/ResponsivePopover/ResponsivePopover.js";
 import { StringUtils } from "./utils/string.utils.js";
 import { dynamicInputs } from "./helpers/dynamicInputs.js";
@@ -135,4 +137,4 @@ import { useTableColumnConfig } from "./hooks/useTableColumnConfig.js";
 import { ArrayUtils } from "./utils/array.utils.js";
 import { QueriesUtils } from "./utils/queries.utils.js";
 import { RoutingUtils } from "./utils/routing.utils.js";
-export { Accordion, ActionModal, Alert, AlignCenterIcon, AlignLeftIcon, AlignLeftRightIcon, AlignRightIcon, ArrayUtils, ArrowDropDownIcon, ArrowDropUpIcon, ArrowLeftIcon, ArrowRightIcon, Autocomplete, BoldIcon, BottomSheet, Breadcrumbs, BulletedListIcon, Button, CalendarIcon, CellText, CheckIcon, Checkbox, CheckboxCheckmarkIcon, CheckboxIndeterminateIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ClockIcon, CloseIcon, ColumnConfigModal, Confirmation, DatePicker, DateRangePicker, DateTimeIcon, DateTimePicker, DateTimeUtils, DateUtils, DomUtils, Drawer, FileUpload, FileUploadContainer, FileUtils, Form, FormField, HeaderText, HighlightIcon, HighlightOnIcon, HomeIcon, IconButton, InfiniteTable, InfoIcon, InlineIconButton, InputUpload, Inputs, ItalicIcon, Link, LinkContext, LinkIcon, Loader, Menu, MenuIcon, MenuItem, MenuPopover, Modal, NumberInput, NumberedListIcon, ObjectUtils, PaginatedTable, Pagination, PaginationList, PasswordInput, PillButton, PointerHorizontalIcon, PointerVerticalIcon, ProgressBar, QueriesUtils, QueryAutocomplete, RadioGroup, ResponsivePopover, RestUtils, RoutingUtils, Segment, Select, SendIcon, Slider, SplitButton, Stepper, StrikethroughIcon, StringUtils, Table, Tag, TextArea, TextButton, TextColorIcon, TextInput, ThemeContext, TimePicker, Toast, ToastContainer, Toggle, ToggleButton, Tooltip, TooltipEllipsis, Typography, UIConfig, UIRouter, UIStyle, UnderlinedIcon, VisibilityIcon, VisibilityOffIcon, compoundMapper, dynamicColumns, dynamicInputs, isEqual, logger, ns, resources, uiOutlineClass, useAutosave, useBreakpoint, useDebounceCallback, useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo, useFilters, useForm, useFormAutosave, useIntersectionObserver, useLocalStorage, useLongPressRepeat, usePagination, useScrollableListBox, useSorting, useStateAndRef, useTableColumnConfig, useTableNav, useToast, useTranslationMemo };
+export { Accordion, ActionModal, Alert, AlignCenterIcon, AlignLeftIcon, AlignLeftRightIcon, AlignRightIcon, ArrayUtils, ArrowDropDownIcon, ArrowDropUpIcon, ArrowLeftIcon, ArrowRightIcon, Autocomplete, BoldIcon, BottomSheet, Breadcrumbs, BulletedListIcon, Button, CalendarIcon, CellText, CheckIcon, Checkbox, CheckboxCheckmarkIcon, CheckboxIndeterminateIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ClockIcon, CloseIcon, ColumnConfigModal, Confirmation, DatePicker, DateRangePicker, DateTimeIcon, DateTimePicker, DateTimeUtils, DateUtils, DomUtils, Drawer, FileUpload, FileUploadContainer, FileUtils, Form, FormField, HeaderText, HighlightIcon, HighlightOnIcon, HomeIcon, IconButton, InfiniteTable, InfoIcon, InlineIconButton, InputUpload, Inputs, ItalicIcon, Link, LinkContext, LinkIcon, Loader, Menu, MenuIcon, MenuItem, MenuPopover, Modal, NumberInput, NumberRangeInput, NumberedListIcon, ObjectUtils, PaginatedTable, Pagination, PaginationList, PasswordInput, PillButton, PointerHorizontalIcon, PointerVerticalIcon, ProgressBar, QueriesUtils, QueryAutocomplete, QuerySelect, RadioGroup, ResponsivePopover, RestUtils, RoutingUtils, Segment, Select, SendIcon, Slider, SplitButton, Stepper, StrikethroughIcon, StringUtils, Table, Tag, TextArea, TextButton, TextColorIcon, TextInput, ThemeContext, TimePicker, Toast, ToastContainer, Toggle, ToggleButton, Tooltip, TooltipEllipsis, Typography, UIConfig, UIRouter, UIStyle, UnderlinedIcon, VisibilityIcon, VisibilityOffIcon, compoundMapper, dynamicColumns, dynamicInputs, isEqual, logger, ns, resources, uiOutlineClass, useAutosave, useBreakpoint, useDebounceCallback, useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo, useFilters, useForm, useFormAutosave, useIntersectionObserver, useLocalStorage, useLongPressRepeat, usePagination, useScrollableListBox, useSorting, useStateAndRef, useTableColumnConfig, useTableNav, useToast, useTranslationMemo };

package/dist/utils/date-time.utils.d.ts

@@ -1,14 +1,28 @@
 import { CalendarDate, CalendarDateTime, DateValue, ZonedDateTime } from '@internationalized/date';
 export declare namespace DateTimeUtils {
-    function fromISOtoZonedDateTime(isoString: string): ZonedDateTime;
-    function fromDateValueToISO(dateValue: DateValue): string;
-    function fromLocalToZonedDateTime(date: Date): ZonedDateTime;
-    function fromDateValueToLocal(dateValue: DateValue): Date;
-    function fromCalendarDateToUTCISO(calendarDate: CalendarDate, options?: {
+    interface LocalizedDateFormatOptions {
+        shouldForceLeadingZeros?: boolean;
+    }
+    export function getDatePlaceholder(locale?: string, options?: LocalizedDateFormatOptions): string;
+    export function getTimePlaceholder(locale?: string): string;
+    export function getDateTimePlaceholder(locale?: string, options?: LocalizedDateFormatOptions): string;
+    export function getDateRangePlaceholder(locale?: string, options?: LocalizedDateFormatOptions): string;
+    export function formatCalendarDateLocalized(calendarDate: CalendarDate, locale?: string, options?: LocalizedDateFormatOptions): string;
+    export function formatTimeLocalized(timeValue: {
+        hour: number;
+        minute: number;
+    }, locale?: string): string;
+    export function formatCalendarDateTimeLocalized(calendarDateTime: Pick<CalendarDateTime, "day" | "month" | "year" | "hour" | "minute">, locale?: string, options?: LocalizedDateFormatOptions): string;
+    export function fromISOtoZonedDateTime(isoString: string): ZonedDateTime;
+    export function fromDateValueToISO(dateValue: DateValue): string;
+    export function fromLocalToZonedDateTime(date: Date): ZonedDateTime;
+    export function fromDateValueToLocal(dateValue: DateValue): Date;
+    export function fromCalendarDateToUTCISO(calendarDate: CalendarDate, options?: {
         endOfDay?: boolean;
     }): string;
-    function fromUTCISOToCalendarDate(isoString: string): CalendarDate;
-    function fromCalendarDateTimeToUTCISO(calendarDateTime: CalendarDateTime): string;
-    function fromUTCISOToCalendarDateTime(isoString: string): CalendarDateTime;
-    function formatTextDateToCalendarDateTime(textDate: string | null): CalendarDateTime | null;
+    export function fromUTCISOToCalendarDate(isoString: string): CalendarDate;
+    export function fromCalendarDateTimeToUTCISO(calendarDateTime: CalendarDateTime): string;
+    export function fromUTCISOToCalendarDateTime(isoString: string): CalendarDateTime;
+    export function formatTextDateToCalendarDateTime(textDate: string | null): CalendarDateTime | null;
+    export {};
 }