@povio/ui 2.2.8 → 2.2.9-rc.1

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

@@ -101,6 +101,7 @@ var TimePickerBase = (props) => {
 				onPress: onOpen,
 				isDisabled,
 				isDirty,
+				isRequired,
 				isInvalid: !!error,
 				disableDropdown,
 				variant,
@@ -141,12 +142,13 @@ var TimePicker = (props) => {
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,
-			render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(TimePickerBase, {
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(TimePickerBase, {
 				...innerProps,
 				ref: mergeRefs(ref, field.ref),
 				value: parseTimeValue(field.value),
 				onChange: (value) => field.onChange(formatTimeValue(value)),
 				onBlur: field.onBlur,
+				isDirty,
 				isDisabled: field.disabled || props.isDisabled,
 				error: props.error ?? error?.message
 			})

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

@@ -82,6 +82,7 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 		"data-has-selection": fieldProps.value !== null || void 0,
 		"data-is-dirty": isDirty || void 0,
 		"data-is-required": isRequired || void 0,
+		"data-is-filled": fieldProps.value !== null || void 0,
 		...groupProps,
 		...focusWithinProps,
 		...hoverProps,

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

@@ -9,6 +9,7 @@ interface DatePickerInputProps extends InputVariantProps {
     state: TimeFieldState;
     isDisabled?: boolean;
     isDirty?: boolean;
+    isRequired?: boolean;
     isInvalid?: boolean;
     disableDropdown?: boolean;
     headerProps?: FormFieldHeaderProps;
@@ -18,5 +19,5 @@ interface DatePickerInputProps extends InputVariantProps {
     className?: string;
     onPress: () => void;
 }
-export declare const TimePickerInput: ({ ref, as, fieldProps, state, isDisabled, isDirty, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TimePickerInput: ({ ref, as, fieldProps, state, isDisabled, isDirty, isRequired, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -12,7 +12,7 @@ import { useState } from "react";
 import { Button } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 //#region src/components/inputs/DateTime/shared/TimePickerInput.tsx
-var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, ...props }) => {
+var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isRequired, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, ...props }) => {
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const { hoverProps, isHovered } = useHover({ isDisabled });
@@ -38,6 +38,8 @@ var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isInva
 		"data-focus-visible": isFocused && isFocusVisible || void 0,
 		"data-has-selection": state.value !== null || void 0,
 		"data-is-dirty": isDirty || void 0,
+		"data-is-required": isRequired || void 0,
+		"data-is-filled": state.value !== null || void 0,
 		...fieldProps,
 		...focusWithinProps,
 		...hoverProps,

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

@@ -101,6 +101,7 @@ var NumberInputBase = (props) => {
 						"data-is-dirty": isDirty || void 0,
 						"data-is-required": isRequired || void 0,
 						"data-is-empty": value === null || value === void 0 || void 0,
+						"data-is-filled": !("" + value === "" || value === null || value === void 0) || void 0,
 						placeholder: as === "floating" ? "\xA0" : inputProps.placeholder,
 						className: "w-full outline-none",
 						onFocus: (e) => {

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

@@ -91,6 +91,7 @@ var TextInputBase = (props) => {
 						...inputProps,
 						ref: mergeRefs(ref, inputRef),
 						"data-is-empty": value === "" || value === null || value === void 0 || void 0,
+						"data-is-filled": !(value === "" || value === null || value === void 0) || void 0,
 						"data-is-dirty": isDirty || void 0,
 						"data-is-required": isRequired || void 0,
 						"data-is-disabled": isDisabled || void 0,

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

@@ -9,12 +9,13 @@ var Autocomplete = (props) => {
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,
-			render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(SelectBase, {
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(SelectBase, {
 				...innerProps,
 				ref: mergeRefs(ref, field.ref),
 				value: field.value,
 				onChange: field.onChange,
 				onBlur: field.onBlur,
+				isDirty,
 				isDisabled: field.disabled || props.isDisabled,
 				error: props.error ?? error?.message,
 				isSearchable: true

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

@@ -9,12 +9,13 @@ var Select = (props) => {
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,
-			render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(SelectBase, {
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(SelectBase, {
 				...innerProps,
 				ref: mergeRefs(ref, field.ref),
 				value: field.value,
 				onChange: field.onChange,
 				onBlur: field.onBlur,
+				isDirty,
 				isDisabled: field.disabled || props.isDisabled,
 				error: props.error ?? error?.message
 			})

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

@@ -7,6 +7,7 @@ import { InputVariantProps } from '../../shared/input.cva';
 export type SelectBaseProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = FormFieldProps & GroupedSelectProps<TKey, TInitialSelectItem> & SelectNewItemProps & SelectAsyncProps & SelectVirtualizationProps & InputVariantProps & Pick<AriaButtonProps, "onBlur"> & {
     ref?: Ref<HTMLDivElement>;
     className?: string;
+    isDirty?: boolean;
     placeholder?: string;
     hideDropdownIcon?: boolean;
     hideSearchIcon?: boolean;
@@ -20,6 +21,7 @@ export type SelectBaseProps<TKey extends Key = Key, TInitialSelectItem = Default
     customTrigger?: ReactElement;
     selectedTagsType?: "tags" | "list";
     collapseAfter?: number;
+    fireBlurOnChange?: boolean;
     onInputChange?: (value: string) => void;
     onSearchChange?: (value: string) => void;
     mapInitialToSelectItem?: (item: TInitialSelectItem) => SelectItem<TKey>;

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

@@ -19,7 +19,8 @@ var SelectBase = (dProps) => {
 		selectedTagsType: dProps.selectedTagsType ?? ui.select.selectedTagsType,
 		ignoreTriggerWidth: dProps.virtualizerOptions || dProps.items.length > 100 ? false : dProps.ignoreTriggerWidth ?? false,
 		collapseAfter: dProps.collapseAfter ?? ui.select.collapseAfter,
-		hideSearchIcon: dProps.hideSearchIcon ?? ui.select.hideSearchIcon
+		hideSearchIcon: dProps.hideSearchIcon ?? ui.select.hideSearchIcon,
+		fireBlurOnChange: dProps.fireBlurOnChange ?? ui.select.fireBlurOnChange
 	};
 	const isDesktop = useBreakpoint("md");
 	return /* @__PURE__ */ jsx(SelectContext.Provider, {

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

@@ -14,7 +14,7 @@ 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 }) => {
-	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, isSearchable, isClearable, isLoading, as, size, collapseAfter, selectedTagsType } = 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 formFieldProps = {
 		error,
@@ -137,6 +137,8 @@ var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inp
 					inputClassName,
 					collapseAfter,
 					selectedTagsType,
+					isRequired,
+					isDirty,
 					onBlur,
 					onCloseComboBox: (state) => {
 						if (isSearchable) closeComboBoxRef.current = state;

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"> {
+interface SelectInputProps extends InputVariantProps, Pick<SelectBaseProps, "ref" | "placeholder" | "isDisabled" | "hideDropdownIcon" | "isSearchable" | "isClearable" | "onBlur" | "showSelectionContent" | "inputClassName" | "selectedTagsType" | "collapseAfter" | "isRequired" | "isDirty" | "fireBlurOnChange"> {
     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, onCloseComboBox, onBlur, ...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, ...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, onCloseComboBox, onBlur, ...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, ...props }) => {
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const { t } = useTranslation("ui");
@@ -44,9 +44,13 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 		if (e.key === "Enter" && !isMultiple && !isLoading && listItems.length === 1 && !listItems[0].isDisabled) {
 			e.preventDefault();
 			onChange(listItems[0].id);
+			if (fireBlurOnChange) onBlur?.({});
 			onCloseComboBox?.(state);
 		}
-		if (e.key === "Backspace" && isMultiple && fieldState.inputValue === "" && Array.isArray(fieldState.value) && fieldState.value.length > 0) onChange(fieldState.value.slice(0, -1));
+		if (e.key === "Backspace" && isMultiple && fieldState.inputValue === "" && Array.isArray(fieldState.value) && fieldState.value.length > 0) {
+			onChange(fieldState.value.slice(0, -1));
+			if (fireBlurOnChange) onBlur?.({});
+		}
 	};
 	const onClick = () => {
 		if (isDisabled) return;
@@ -75,6 +79,9 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 		"data-has-search": fieldState.searchValue !== "" || void 0,
 		"data-invalid": isInvalid || void 0,
 		"data-is-empty": isEmpty || void 0,
+		"data-is-filled": !isEmpty || void 0,
+		"data-is-required": isRequired || void 0,
+		"data-is-dirty": isDirty || void 0,
 		"data-select-input": "",
 		...hoverProps,
 		...focusWithinProps,
@@ -125,7 +132,10 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 				]
 			}),
 			isClearable && /* @__PURE__ */ jsx(InputClear, {
-				onClear,
+				onClear: () => {
+					onClear();
+					if (fireBlurOnChange) onBlur?.({});
+				},
 				show: showClearButton
 			}),
 			!hideDropdownIcon && /* @__PURE__ */ jsx(Button, {

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

@@ -14,7 +14,7 @@ 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 }) => {
-	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, hideSearchIcon, isSearchable, isClearable, as, size, collapseAfter, selectedTagsType } = 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,
 		label,
@@ -80,7 +80,9 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 				fieldProps,
 				headerProps,
 				collapseAfter,
-				selectedTagsType
+				selectedTagsType,
+				isRequired,
+				isDirty
 			}), /* @__PURE__ */ jsx(BottomSheet, {
 				isOpen,
 				onOpenChange: handleOpenChange,

package/dist/components/inputs/TextEditor/TextEditor.d.ts

@@ -15,6 +15,7 @@ export interface TextEditorBaseProps extends FormFieldProps {
     onBlur?: () => void;
     as?: "default" | "filter" | "floating" | "inline" | null;
     editorClassName?: string;
+    isDirty?: boolean;
 }
 export type TextEditorProps = TextEditorBaseProps;
 export type ControlledTextEditorProps<TFieldValues extends FieldValues> = ControlProps<TextEditorProps, TFieldValues>;

package/dist/components/inputs/TextEditor/TextEditor.js

@@ -37,7 +37,7 @@ var extensions = [
 		defaultProtocol: "https"
 	})
 ];
-var TextEditorBase = ({ ref, as = "default", placeholder, label, hideLabel, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, value, className, editorClassName, onChange, onBlur }) => {
+var TextEditorBase = ({ ref, as = "default", placeholder, label, hideLabel, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, value, className, editorClassName, isDirty, onChange, onBlur }) => {
 	const contentRef = useRef(null);
 	const { hoverProps, isHovered } = useHover({ isDisabled });
 	const [isFocused, setIsFocused] = useState(false);
@@ -109,6 +109,8 @@ var TextEditorBase = ({ ref, as = "default", placeholder, label, hideLabel, tool
 			"data-focus-within": isFocused || void 0,
 			"data-focus-visible": isFocused && isFocusVisible || void 0,
 			"data-is-filled": !editor?.isEmpty,
+			"data-is-required": isRequired || void 0,
+			"data-is-dirty": isDirty || void 0,
 			...hoverProps,
 			...focusWithinProps,
 			...fieldProps,
@@ -136,13 +138,15 @@ var TextEditor = (props) => {
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,
-			render: ({ field }) => /* @__PURE__ */ jsx(TextEditorBase, {
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(TextEditorBase, {
 				...innerProps,
 				ref: mergeRefs(ref, field.ref),
 				value: field.value,
 				onChange: field.onChange,
 				onBlur: field.onBlur,
-				isDisabled: field.disabled || props.isDisabled
+				isDirty,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message
 			})
 		});
 	}

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

@@ -24,7 +24,7 @@ export declare namespace UIConfig {
         numberInput: Pick<NumberInputProps, "formatOptions">;
         radioGroup: Pick<RadioGroupProps, "variant" | "hideLabel">;
         checkbox: Pick<CheckboxProps, "variant">;
-        select: Pick<SelectBaseProps, "selectionMode" | "isSearchable" | "collapseAfter" | "selectedTagsType" | "hideSearchIcon">;
+        select: Pick<SelectBaseProps, "selectionMode" | "isSearchable" | "collapseAfter" | "selectedTagsType" | "hideSearchIcon" | "fireBlurOnChange">;
         toggle: Pick<ToggleProps, "variant">;
         slider: Pick<SliderProps, "minValue" | "maxValue">;
         dateInput: Pick<DatePickerProps, "todayIcon" | "shouldForceLeadingZeros" | "disableManualEntry">;

package/dist/config/uiConfig.context.js

@@ -31,7 +31,8 @@ var UIConfig;
 			isSearchable: false,
 			selectedTagsType: "list",
 			collapseAfter: 3,
-			hideSearchIcon: false
+			hideSearchIcon: false,
+			fireBlurOnChange: false
 		},
 		toggle: { variant: "default" },
 		slider: {

package/package.json

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