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

package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.d.ts

@@ -17,6 +17,7 @@ interface DateTimePickerBaseProps extends FormFieldProps, InputVariantProps, Omi
     isDirty?: boolean;
     disableManualEntry?: boolean;
     autoFixYear?: boolean;
+    setDateValueOnDateSelection?: boolean;
     placeholder?: string;
     inputClassName?: string;
     onBlur?: (e: FocusEvent<HTMLInputElement>) => void;

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

@@ -17,7 +17,7 @@ import { useCalendarState, useDatePickerState } from "react-stately";
 //#region src/components/inputs/DateTime/DateTimePicker/DateTimePicker.tsx
 var DateTimePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, isTimeOptional, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, autoFixYear = ui.dateInput.autoFixYear, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, isTimeOptional, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, autoFixYear = ui.dateInput.autoFixYear, setDateValueOnDateSelection = ui.dateInput.setDateValueOnDateSelection, ...rest } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -177,7 +177,8 @@ var DateTimePickerBase = (props) => {
 					calendarProps,
 					includesTime: true,
 					datePickerState: dialogState,
-					onApply
+					onApply,
+					setDateValueOnDateSelection
 				})
 			})]
 		})

package/dist/components/inputs/DateTime/shared/Calendar.d.ts

@@ -1,4 +1,5 @@
 import { CalendarState, CalendarStateOptions } from '@react-stately/calendar';
+import { DateValue } from 'react-aria';
 import { DatePickerState } from 'react-stately';
 type DateTimeCalendarProps = {
     includesTime?: false;
@@ -13,8 +14,10 @@ type CalendarProps = DateTimeCalendarProps & {
     className?: string;
     state: CalendarState;
     calendarProps: Omit<CalendarStateOptions, "locale" | "createCalendar">;
-    onApply: () => void;
+    onApply: (selectedDate?: DateValue) => void;
+    onDateSelectionChange?: (selectedDate: DateValue) => void;
+    setDateValueOnDateSelection?: boolean;
 };
 export type ToggleState = "month" | "year" | "time";
-export declare const Calendar: ({ className, includesTime, datePickerState, hourCycle, onApply, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Calendar: ({ className, includesTime, datePickerState, hourCycle, onApply, onDateSelectionChange, setDateValueOnDateSelection, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/DateTime/shared/Calendar.js

@@ -5,20 +5,37 @@ import { TimePickerForm } from "./TimePickerForm.js";
 import { YearPicker } from "./YearPicker.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { useCalendar } from "@react-aria/calendar";
 //#region src/components/inputs/DateTime/shared/Calendar.tsx
-var Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply, ...props }) => {
+var Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply, onDateSelectionChange, setDateValueOnDateSelection = false, ...props }) => {
 	const [toggleState, setToggleState] = useState(null);
 	const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(props.calendarProps, props.state);
-	const handleDateChange = () => {
-		if (includesTime && !datePickerState.value) setToggleState("time");
-		else onApply();
+	const onDateSelection = useCallback((date) => {
+		if (!includesTime || !setDateValueOnDateSelection) return;
+		datePickerState.setDateValue(date);
+	}, [
+		includesTime,
+		datePickerState,
+		setDateValueOnDateSelection
+	]);
+	const handleDateChange = (selectedDate) => {
+		const resolvedDate = selectedDate ?? props.state.focusedDate;
+		if (includesTime && resolvedDate && setDateValueOnDateSelection) {
+			datePickerState.setDateValue(resolvedDate);
+			onDateSelectionChange?.(resolvedDate);
+		}
+		if (includesTime && toggleState !== "time") {
+			setToggleState("time");
+			return;
+		}
+		onApply(resolvedDate);
 	};
 	const getContent = () => {
 		if (!toggleState) return /* @__PURE__ */ jsx(CalendarGrid, {
 			state: props.state,
-			onApply: handleDateChange
+			onApply: handleDateChange,
+			onDateSelection
 		});
 		if (toggleState === "month") return /* @__PURE__ */ jsx(MonthPicker, {
 			state: props.state,

package/dist/components/inputs/DateTime/shared/CalendarCell.d.ts

@@ -4,7 +4,7 @@ import { KeyboardEvent } from 'react';
 import { DateValue } from 'react-aria';
 interface CalendarCellProps extends AriaCalendarCellProps {
     state: CalendarState | RangeCalendarState;
-    onApply?: () => void;
+    onApply?: (selectedDate?: DateValue) => void;
     shouldCloseOnSelect?: boolean;
     onDateSelection?: (date: DateValue) => void;
     onDateHover?: (date: DateValue | null) => void;

package/dist/components/inputs/DateTime/shared/CalendarCell.js

@@ -17,12 +17,12 @@ var CalendarCell = ({ state, onApply, shouldCloseOnSelect = true, onDateSelectio
 	const onClick = useCallback((event) => {
 		buttonProps.onClick?.(event);
 		if (onDateSelection) onDateSelection(props.date);
-		if (isSelected && shouldCloseOnSelect) onApply?.();
+		if (shouldCloseOnSelect && !isDisabled) onApply?.(props.date);
 	}, [
 		buttonProps,
 		onDateSelection,
 		props.date,
-		isSelected,
+		isDisabled,
 		shouldCloseOnSelect,
 		onApply
 	]);
@@ -87,7 +87,7 @@ var CalendarCell = ({ state, onApply, shouldCloseOnSelect = true, onDateSelectio
 			state.setFocusedDate(props.date);
 		}
 		eventHandler?.(event);
-		if (isSelected && shouldCloseOnSelect) onApply?.();
+		if (isSelected && shouldCloseOnSelect) onApply?.(props.date);
 	};
 	const onMouseEnter = useCallback(() => {
 		if (onDateHover && selectionState.isSelectingMode) onDateHover(props.date);

package/dist/components/inputs/DateTime/shared/CalendarGrid.d.ts

@@ -4,7 +4,7 @@ import { KeyboardEvent } from 'react';
 import { DateValue } from 'react-aria';
 interface CalendarGridProps extends AriaCalendarGridProps {
     state: CalendarState | RangeCalendarState;
-    onApply?: () => void;
+    onApply?: (selectedDate?: DateValue) => void;
     offset?: {
         months?: number;
     };

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

@@ -5,7 +5,7 @@ import { Controller } from "react-hook-form";
 //#region src/components/inputs/Selection/Autocomplete/Autocomplete.tsx
 function Autocomplete(props) {
 	if ("formControl" in props && props.formControl) {
-		const { formControl, ref, ...innerProps } = props;
+		const { ignoreInputValueFiltering = true, formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,
@@ -18,7 +18,8 @@ function Autocomplete(props) {
 				isDirty,
 				isDisabled: field.disabled || props.isDisabled,
 				error: props.error ?? error?.message,
-				isSearchable: true
+				isSearchable: true,
+				ignoreInputValueFiltering
 			})
 		});
 	}

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

@@ -11,11 +11,20 @@ export interface QueryAutocompleteInfinitePage<TSelectItem extends SelectItem =
 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];
+type QueryAutocompleteFilter = {
+    search?: string;
+};
+type QueryAutocompleteSearchParams = {
+    search?: string;
+} | {
+    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: Parameters<TQueryFn>[0] extends {
-        search?: string;
-    } ? TQueryFn : never;
-    queryParams?: Omit<Parameters<TQueryFn>[0], "search">;
+    query: QueryAutocompleteParams<TQueryFn> extends QueryAutocompleteSearchParams ? TQueryFn : never;
+    queryParams?: Omit<QueryAutocompleteParams<TQueryFn>, "search" | "limit"> & {
+        limit?: number;
+    };
     queryOptions?: Parameters<TQueryFn>[1];
     queryMap?: (data: QueryAutocompleteExtractedData<TSelectItem>) => SelectItem<TSelectItem["id"]>[];
     isInitialQueryDisabled?: boolean;
@@ -28,3 +37,4 @@ export interface UseQueryAutocompleteOptions<TSelectItem extends SelectItem<any>
     initialQueryState?: boolean;
     search: string;
 }
+export {};

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

@@ -6,4 +6,4 @@ export interface SelectListBoxProps extends Pick<SelectBaseProps, "label" | "new
     isScrollable?: boolean;
     onClose?: () => void;
 }
-export declare const SelectListBox: ({ label, selectionMode, isSearchable, isScrollable, virtualizerOptions, totalItems, hasLoadMore, newItemRender, onLoadMore, className, onClose, ...props }: SelectListBoxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectListBox: ({ label, selectionMode, isSearchable, isScrollable, virtualizerOptions, totalItems, newItemRender, onLoadMore, className, onClose, ...props }: SelectListBoxProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -7,8 +7,8 @@ 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, totalItems, hasLoadMore, newItemRender, onLoadMore, className, onClose, ...props }) => {
-	const { fieldState, onChange, listItems, selectableListItems, selectedIds, isMultiple, onClear, onSelectAll } = SelectContext.useSelect();
+var SelectListBox = ({ label, selectionMode, isSearchable, isScrollable = true, virtualizerOptions, totalItems, newItemRender, onLoadMore, className, onClose, ...props }) => {
+	const { fieldState, onChange, listItems, selectableListItems, selectedIds, isMultiple, onClear, onSelectAll, hasLoadMore } = SelectContext.useSelect();
 	const onSelectionChange = (value) => {
 		const ids = Array.from(value);
 		if (!isMultiple && ids.length === 0) {

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

@@ -33,7 +33,9 @@ export declare namespace UIConfig {
         };
         toggle: Pick<ToggleProps, "variant">;
         slider: Pick<SliderProps, "minValue" | "maxValue">;
-        dateInput: Pick<DatePickerProps, "todayIcon" | "todayIconButtonSize" | "shouldForceLeadingZeros" | "disableManualEntry" | "autoFixYear">;
+        dateInput: Pick<DatePickerProps, "todayIcon" | "todayIconButtonSize" | "shouldForceLeadingZeros" | "disableManualEntry" | "autoFixYear"> & {
+            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

@@ -46,7 +46,8 @@ var UIConfig;
 			todayIconButtonSize: "none",
 			shouldForceLeadingZeros: false,
 			disableManualEntry: false,
-			autoFixYear: false
+			autoFixYear: false,
+			setDateValueOnDateSelection: false
 		},
 		actionModal: {
 			titleTypography: {

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.js

@@ -1,10 +1,16 @@
+import { ApiQueryUtils } from "../utils/query.utils.js";
 import { useMemo, useState } from "react";
 //#region src/hooks/useQueryAutocomplete.ts
 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
+		filter: queryParams && "filter" in queryParams ? {
+			...queryParams.filter,
+			search
+		} : void 0
 	}, {
 		...queryOptions,
 		enabled: isQueryEnabled && (queryOptions?.enabled ?? true)

package/dist/utils/query.utils.d.ts

@@ -0,0 +1,4 @@
+export declare namespace ApiQueryUtils {
+    const DEFAULT_LIMIT = 20;
+    const DEFAULT_PAGE = 1;
+}

package/dist/utils/query.utils.js

@@ -0,0 +1,8 @@
+//#region src/utils/query.utils.ts
+var ApiQueryUtils;
+(function(_ApiQueryUtils) {
+	_ApiQueryUtils.DEFAULT_LIMIT = 20;
+	_ApiQueryUtils.DEFAULT_PAGE = 1;
+})(ApiQueryUtils || (ApiQueryUtils = {}));
+//#endregion
+export { ApiQueryUtils };

package/package.json

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