@povio/ui 2.2.9-rc.4 → 2.2.9-rc.6

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

@@ -3,6 +3,7 @@ import { Ref, FocusEvent } from 'react';
 import { FieldValues } from 'react-hook-form';
 import { DatePickerStateOptions } from 'react-stately';
 import { DatePickerInputHandle } from '../shared/DatePickerInput';
+import { DatePickerTodayIcon, DatePickerTodayIconButtonSize } from '../shared/datePicker.types';
 import { FormFieldProps } from '../../FormField/FormField';
 import { ControlProps } from '../../shared/form.types';
 import { InputVariantProps } from '../../shared/input.cva';
@@ -11,7 +12,8 @@ interface DatePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<Da
     disableDropdown?: boolean;
     isClearable?: boolean;
     className?: string;
-    todayIcon?: boolean;
+    todayIcon?: DatePickerTodayIcon;
+    todayIconButtonSize?: DatePickerTodayIconButtonSize;
     isDirty?: boolean;
     disableManualEntry?: boolean;
     placeholder?: string;

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

@@ -20,7 +20,7 @@ import { useCalendarState, useDatePickerState } from "react-stately";
 var PLACEHOLDER_VALUE = new CalendarDate(2024, 1, 1);
 var DatePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, placeholder, inputClassName, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, placeholder, inputClassName, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -138,6 +138,7 @@ var DatePickerBase = (props) => {
 				isClearable,
 				headerProps,
 				todayIcon,
+				todayIconButtonSize,
 				onOpenDropdown: () => state.toggle(),
 				placeholder,
 				className: inputClassName

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

@@ -4,6 +4,7 @@ import { DateValue } from 'react-aria';
 import { FieldValues } from 'react-hook-form';
 import { DateRangePickerStateOptions } from 'react-stately';
 import { DatePickerInputHandle } from '../shared/DatePickerInput';
+import { DatePickerTodayIcon, DatePickerTodayIconButtonSize } from '../shared/datePicker.types';
 import { FormFieldProps } from '../../FormField/FormField';
 import { ControlProps } from '../../shared/form.types';
 import { InputVariantProps } from '../../shared/input.cva';
@@ -13,7 +14,8 @@ interface DateRangePickerBaseProps extends FormFieldProps, InputVariantProps, Om
     isClearable?: boolean;
     hideSidebar?: boolean;
     className?: string;
-    todayIcon?: boolean;
+    todayIcon?: DatePickerTodayIcon;
+    todayIconButtonSize?: DatePickerTodayIconButtonSize;
     isDirty?: boolean;
     disableManualEntry?: boolean;
     placeholder?: string;

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

@@ -24,7 +24,7 @@ import { useDateRangePickerState, useRangeCalendarState } from "react-stately";
 var DateRangePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const { t } = useTranslation();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, hideSidebar, 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, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, hideSidebar, 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, ...rest } = props;
 	const [validationRangeError, setValidationRangeError] = useState();
 	const datePickerInputRef = useRef(null);
 	const dateRangePickerRef = useMemo(() => ({ get current() {
@@ -484,6 +484,7 @@ var DateRangePickerBase = (props) => {
 				isClearable,
 				headerProps,
 				todayIcon,
+				todayIconButtonSize,
 				isDirty,
 				disableManualEntry,
 				placeholder,

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

@@ -3,6 +3,7 @@ import { DateValue } from 'react-aria';
 import { FieldValues } from 'react-hook-form';
 import { DatePickerStateOptions } from 'react-stately';
 import { DatePickerInputHandle } from '../shared/DatePickerInput';
+import { DatePickerTodayIcon, DatePickerTodayIconButtonSize } from '../shared/datePicker.types';
 import { FormFieldProps } from '../../FormField/FormField';
 import { ControlProps } from '../../shared/form.types';
 import { InputVariantProps } from '../../shared/input.cva';
@@ -11,7 +12,8 @@ interface DateTimePickerBaseProps extends FormFieldProps, InputVariantProps, Omi
     disableDropdown?: boolean;
     isTimeOptional?: boolean;
     isClearable?: boolean;
-    todayIcon?: boolean;
+    todayIcon?: DatePickerTodayIcon;
+    todayIconButtonSize?: DatePickerTodayIconButtonSize;
     isDirty?: boolean;
     disableManualEntry?: boolean;
     placeholder?: string;

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, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...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, ...rest } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -153,6 +153,7 @@ var DateTimePickerBase = (props) => {
 				isClearable,
 				headerProps,
 				todayIcon,
+				todayIconButtonSize,
 				isRequired,
 				disableManualEntry,
 				placeholder,

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

@@ -1,5 +1,6 @@
 import { Ref } from 'react';
 import { DatePickerAria } from 'react-aria';
+import { DatePickerTodayIcon, DatePickerTodayIconButtonSize } from './datePicker.types';
 import { FormFieldHeaderProps } from '../../FormField/FormFieldHeader';
 import { InputVariantProps } from '../../shared/input.cva';
 export interface DatePickerInputHandle {
@@ -18,7 +19,8 @@ interface DatePickerInputProps extends InputVariantProps {
     isDateTime?: boolean;
     isClearable?: boolean;
     headerProps?: FormFieldHeaderProps;
-    todayIcon?: boolean;
+    todayIcon?: DatePickerTodayIcon;
+    todayIconButtonSize?: DatePickerTodayIconButtonSize;
     isDirty?: boolean;
     isRequired?: boolean;
     disableManualEntry?: boolean;
@@ -26,5 +28,5 @@ interface DatePickerInputProps extends InputVariantProps {
     className?: string;
     onOpenDropdown?: () => void;
 }
-export declare const DatePickerInput: ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, isDirty, isRequired, disableManualEntry, placeholder, className, onOpenDropdown, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePickerInput: ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize, isDirty, isRequired, disableManualEntry, placeholder, className, onOpenDropdown, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -16,7 +16,7 @@ import { Button } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { getLocalTimeZone, now, toCalendarDateTime, today } from "@internationalized/date";
 //#region src/components/inputs/DateTime/shared/DatePickerInput.tsx
-var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, isDirty, isRequired, disableManualEntry, placeholder, className, onOpenDropdown, ...props }) => {
+var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize = "none", isDirty, isRequired, disableManualEntry, placeholder, className, onOpenDropdown, ...props }) => {
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const [canClear, setCanClear] = useState(false);
@@ -70,6 +70,7 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 		endFieldProps?.onBlur?.(null);
 	};
 	const hidePlaceholder = as === "floating" && !fieldProps.value && !isFocused;
+	const todayIconComponent = todayIcon === true ? TodayIcon : todayIcon || null;
 	return /* @__PURE__ */ jsxs("div", {
 		ref: containerRef,
 		className: clsx(inputBaseCva({
@@ -108,10 +109,10 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 						className: "absolute inset-0 z-0",
 						isDisabled
 					}),
-					todayIcon && /* @__PURE__ */ jsx(IconButton, {
+					todayIconComponent && /* @__PURE__ */ jsx(IconButton, {
 						label: "",
-						icon: TodayIcon,
-						size: "none",
+						icon: todayIconComponent,
+						size: todayIconButtonSize,
 						onPress: onToday,
 						className: "relative z-1"
 					}),

package/dist/components/inputs/DateTime/shared/datePicker.types.d.ts

@@ -0,0 +1,3 @@
+import { IconButtonProps } from '../../../buttons/IconButton/IconButton';
+export type DatePickerTodayIcon = boolean | IconButtonProps["icon"];
+export type DatePickerTodayIconButtonSize = IconButtonProps["size"];

package/dist/components/inputs/Selection/shared/select.context.d.ts

@@ -17,6 +17,7 @@ export declare namespace SelectContext {
         onClear: () => void;
         onSelectAll: () => void;
         onRemove: (val: Key) => void;
+        onBlur: () => void;
         listItems: ExtendedSelectItem[];
         selectableListItems: SelectItem[];
         selectedItems: SelectItem[];

package/dist/components/inputs/Selection/shared/select.context.js

@@ -84,7 +84,7 @@ var SelectContext;
 			else updateValue(value);
 		}, [props.value]);
 		useEffect(() => {
-			if (!isMultiple && fieldState.value && fieldState.inputValue === "" && getItem(fieldState.value)?.label) syncFieldState(fieldState.value);
+			if (!isMultiple && props.value !== null && props.value !== void 0 && fieldState.value !== null && fieldState.value !== void 0 && fieldState.inputValue === "" && getItem(fieldState.value)?.label) syncFieldState(fieldState.value);
 		}, [allListItems]);
 		const handleInputChange = useCallback((inputValue) => {
 			const newFieldState = {
@@ -144,6 +144,22 @@ var SelectContext;
 			fieldState.value,
 			onChange
 		]);
+		const onBlur = useCallback(() => {
+			if (props.isSearchable && isMultiple && fieldState.searchValue !== "") {
+				const newFieldState = {
+					...fieldState,
+					inputValue: "",
+					searchValue: ""
+				};
+				setFieldState(newFieldState);
+				emitStateChanges(newFieldState);
+				setShowAll(true);
+			}
+		}, [
+			props.isSearchable,
+			isMultiple,
+			fieldState
+		]);
 		const value = useMemo(() => ({
 			fieldState,
 			isOpen,
@@ -154,6 +170,7 @@ var SelectContext;
 			onClear,
 			onSelectAll,
 			onRemove,
+			onBlur,
 			listItems,
 			selectableListItems,
 			selectedItems,
@@ -171,6 +188,7 @@ var SelectContext;
 			onClear,
 			onSelectAll,
 			onRemove,
+			onBlur,
 			listItems,
 			selectableListItems,
 			selectedIds,

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

@@ -33,7 +33,7 @@ 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">;
         actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;
         bottomSheet: Pick<BottomSheetProps, "closeDragThreshold" | "closeVelocityThreshold" | "hideThumb" | "headerTypography">;
         tableHeaderText: Pick<HeaderTextProps, "variant" | "size">;

package/dist/config/uiConfig.context.js

@@ -43,6 +43,7 @@ var UIConfig;
 		},
 		dateInput: {
 			todayIcon: false,
+			todayIconButtonSize: "none",
 			shouldForceLeadingZeros: false,
 			disableManualEntry: false
 		},

package/package.json

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