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

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,7 +17,7 @@ var CalendarCell = ({ state, onApply, shouldCloseOnSelect = true, onDateSelectio
 	const onClick = useCallback((event) => {
 		buttonProps.onClick?.(event);
 		if (onDateSelection) onDateSelection(props.date);
-		if (isSelected && shouldCloseOnSelect) onApply?.();
+		if (isSelected && shouldCloseOnSelect) onApply?.(props.date);
 	}, [
 		buttonProps,
 		onDateSelection,
@@ -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/FormField/FormField.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren, Ref } from 'react';
+import { FocusEventHandler, MouseEventHandler, PropsWithChildren, Ref } from 'react';
 import { FormFieldErrorProps } from './FormFieldError';
 import { FormFieldHeaderProps } from './FormFieldHeader';
 import { TextInputProps } from '../Input/TextInput/TextInput';
@@ -13,8 +13,8 @@ interface FormFieldComponentProps extends PropsWithChildren<FormFieldProps> {
     labelProps?: FormFieldHeaderProps["labelProps"];
     as?: TextInputProps["as"];
     tabIndex?: number;
-    onMouseEnter?: () => void;
-    onFocusCapture?: () => void;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onFocusCapture?: FocusEventHandler<HTMLDivElement>;
 }
 export declare const FormField: ({ ref, as, label, tooltipText, helperText, isRequired, rightContent, isDisabled, error, hideLabel, headerClassName, errorClassName, children, className, labelProps, isHeaderHidden, tabIndex, onMouseEnter, onFocusCapture, }: FormFieldComponentProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -84,6 +84,8 @@ var TextInputBase = (props) => {
 					...rest
 				}), inputClassName),
 				onClick: () => inputRef.current?.focus(),
+				"data-is-empty": value === "" || value === null || value === void 0 || void 0,
+				"data-is-required": isRequired || void 0,
 				children: /* @__PURE__ */ jsx(InputContent, {
 					...inputContentProps,
 					headerProps,

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

@@ -30,7 +30,7 @@ var QueryAutocomplete = ({ query, queryParams, queryOptions, queryMap, ...props
 		onMouseEnter: handleEnableQuery,
 		onFocusCapture: handleEnableQuery,
 		hasLoadMore: hasNextPage,
-		onLoadMore: fetchNextPage ? () => void fetchNextPage() : void 0
+		onLoadMore: fetchNextPage
 	});
 };
 //#endregion

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

@@ -27,7 +27,7 @@ var QuerySelect = ({ query, queryParams, queryOptions, queryMap, ...props }) =>
 				isLoading,
 				totalItems,
 				hasLoadMore: hasNextPage,
-				onLoadMore: fetchNextPage ? () => void fetchNextPage() : void 0,
+				onLoadMore: fetchNextPage,
 				value: field.value,
 				onChange: (value) => {
 					field.onChange(value);

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

@@ -115,14 +115,14 @@ var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inp
 					className: clsx("w-full", containerClassName)
 				},
 				as,
+				onMouseEnter,
+				onFocusCapture,
 				ref: wrapperRef,
 				children: [customTrigger ? /* @__PURE__ */ jsx(DialogTrigger, {
 					...dialogTriggerProps,
 					children: /* @__PURE__ */ jsx("div", {
 						...fieldProps,
 						ref: mergeRefs(ref, triggerRef),
-						onMouseEnter,
-						onFocusCapture,
 						children: customTrigger
 					})
 				}) : /* @__PURE__ */ jsx(SelectInput, {

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/components/inputs/Selection/shared/SelectMobile.js

@@ -57,13 +57,13 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 		as,
 		labelProps,
 		className: clsx("w-full", containerClassName),
+		onMouseEnter,
+		onFocusCapture,
 		children: /* @__PURE__ */ jsxs(DialogTrigger, {
 			...dialogTriggerProps,
 			children: [customTrigger ? /* @__PURE__ */ jsx("div", {
 				...fieldProps,
 				ref,
-				onMouseEnter,
-				onFocusCapture,
 				children: customTrigger
 			}) : /* @__PURE__ */ jsx(SelectInput, {
 				ref,

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/package.json

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