@povio/ui 2.3.0 → 2.3.1

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

@@ -108,7 +108,8 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 						icon: TodayIcon,
 						size: "none",
 						onPress: onToday,
-						className: "relative z-1"
+						className: "relative z-1",
+						isDisabled
 					}),
 					disableManualEntry && placeholder && !fieldProps.value ? /* @__PURE__ */ jsx(Typography, {
 						size: "label-1",

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

@@ -33,7 +33,8 @@ var NumberInputBase = (props) => {
 		locale,
 		formatOptions
 	};
-	const { labelProps, inputProps } = useNumberField(numberProps, useNumberFieldState(numberProps), numberFieldRef);
+	const state = useNumberFieldState(numberProps);
+	const { labelProps, inputProps } = useNumberField(numberProps, state, numberFieldRef);
 	const formFieldProps = {
 		error,
 		label,
@@ -47,6 +48,10 @@ var NumberInputBase = (props) => {
 		headerClassName,
 		errorClassName
 	};
+	const handleInputBlur = useCallback((e) => {
+		const target = numberFieldRef.current ?? e?.target;
+		onBlur?.({ target });
+	}, [onBlur]);
 	const inputContentProps = {
 		unit,
 		isLoading,
@@ -55,12 +60,12 @@ var NumberInputBase = (props) => {
 		leadingIcon,
 		trailingIcon,
 		isClearable,
-		value,
-		onChange: (val) => onChange?.(val === "" ? null : Number(val)),
-		onBlur: useCallback((e) => {
-			const target = numberFieldRef.current ?? e?.target;
-			onBlur?.({ target });
-		}, [onBlur])
+		onChange: (val) => {
+			if (val === "") state.setInputValue("");
+			onChange?.(val === "" ? null : Number(val));
+		},
+		value: state.inputValue,
+		onBlur: handleInputBlur
 	};
 	const headerProps = {
 		label,
@@ -97,10 +102,10 @@ var NumberInputBase = (props) => {
 					size,
 					children: /* @__PURE__ */ jsx(Input, {
 						...inputProps,
-						ref: mergeRefs(ref, inputRef),
+						ref: mergeRefs(ref, inputRef, numberFieldRef),
 						"data-is-dirty": isDirty || void 0,
 						"data-is-required": isRequired || void 0,
-						"data-is-empty": value === null || value === void 0 || void 0,
+						"data-is-empty": state.inputValue === "" || state.inputValue === void 0 || state.inputValue === null || void 0,
 						placeholder: as === "floating" ? "\xA0" : inputProps.placeholder,
 						className: "w-full outline-none",
 						onFocus: (e) => {

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

@@ -19,13 +19,14 @@ var TextInputBase = (props) => {
 	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, ...rest } = props;
 	const textFieldRef = useRef(null);
 	const { isFocusVisible } = useFocusVisible();
+	const inputValue = value ?? "";
 	const { labelProps, inputProps } = useTextField({
 		...rest,
 		label,
 		isDisabled,
 		isInvalid: !!error,
 		isRequired,
-		value,
+		value: inputValue,
 		onChange,
 		onBlur
 	}, textFieldRef);
@@ -50,7 +51,7 @@ var TextInputBase = (props) => {
 		leadingIcon,
 		trailingIcon,
 		isClearable,
-		value,
+		value: inputValue,
 		onChange,
 		onBlur
 	};
@@ -90,7 +91,7 @@ var TextInputBase = (props) => {
 					children: /* @__PURE__ */ jsx(Input, {
 						...inputProps,
 						ref: mergeRefs(ref, inputRef),
-						"data-is-empty": value === "" || value === null || value === void 0 || void 0,
+						"data-is-empty": inputValue === "" || 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/shared/SelectInput.js

@@ -27,7 +27,7 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 	const { fieldState, isOpen, setIsOpen, listItems, selectedItems, onChange, onClear, onRemove, isMultiple, isLoading } = SelectContext.useSelect();
 	const isEmpty = selectedItems.length === 0;
 	const showTags = isMultiple && !isEmpty;
-	const showClearButton = isClearable && isHovered && (selectedItems.length > 0 || isSearchable && fieldState.inputValue !== "");
+	const showClearButton = isClearable && (selectedItems.length > 0 || isSearchable && fieldState.inputValue !== "");
 	const labelProps = useMemo(() => {
 		const { labelProps: headerLabelProps } = headerProps ?? {};
 		if (!(as && ["filter", "floating"].includes(as)) || isSearchable) return headerLabelProps;

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

@@ -1,4 +1,5 @@
 import { CloseIcon } from "../../../assets/icons/Close.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
 import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
 import "../../../config/i18n.js";
 import { jsx } from "react/jsx-runtime";
@@ -7,12 +8,14 @@ import { useTranslation } from "react-i18next";
 //#region src/components/inputs/shared/InputClear.tsx
 var InputClear = ({ onClear, className, style, show }) => {
 	const { t } = useTranslation("ui");
+	const alwaysShowClear = UIConfig.useConfig().input.alwaysShowClear;
 	return /* @__PURE__ */ jsx(InlineIconButton, {
 		color: "secondary",
-		className: clsx("invisible relative z-1 flex items-center", "group-focus-within:visible group-hover/date-picker-content:visible group-hover/select-content:visible group-hover/text-area:visible group-hover:visible", "border-0!", !show && "invisible!", className),
+		className: clsx("relative z-1 flex items-center", !alwaysShowClear && "md:invisible group-focus-within:visible group-hover/date-picker-content:visible group-hover/select-content:visible group-hover/text-area:visible group-hover:visible", "border-0!", !show && "invisible!", className),
 		label: t(($) => $.ui.clearAlt),
 		icon: CloseIcon,
 		onPress: onClear,
+		onMouseDown: (e) => e.preventDefault(),
 		excludeFromTabOrder: true,
 		style
 	});

package/dist/components/overlays/BottomSheet/BottomSheet.js

@@ -26,6 +26,7 @@ var staticTransition = {
 		1
 	]
 };
+var KEYBOARD_INSET_THRESHOLD = 48;
 var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = true, isScrollable = true, height = "full", label, portalContainerRef, children, footer, hideHeader, hideThumb: hideThumbProp, sheetMarginTop = 96, sheetMarginBottom = 128, closeDragThreshold: closeDragThresholdProp, closeVelocityThreshold: closeVelocityThresholdProp, shouldCloseOnInteractOutside, containerClassName, overlayClassName, headerTypography: headerTypographyProp }) => {
 	const uiConfig = UIConfig.useConfig();
 	const closeDragThreshold = closeDragThresholdProp ?? uiConfig.bottomSheet.closeDragThreshold;
@@ -48,6 +49,27 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 	const focusTrapRef = useRef(null);
 	const [footerElement, footerRef, setFooterElement] = useStateAndRef(null);
 	const [footerHeight, setFooterHeight] = useState(0);
+	const [keyboardInset, setKeyboardInset] = useState(0);
+	useEffect(() => {
+		if (!isOpen) {
+			setKeyboardInset(0);
+			return;
+		}
+		const vv = window.visualViewport;
+		if (!vv) return;
+		const update = () => {
+			const naturalHeight = vv.height * Math.max(vv.scale, 1);
+			const next = Math.max(0, window.innerHeight - naturalHeight);
+			setKeyboardInset(next > KEYBOARD_INSET_THRESHOLD ? Math.round(next) : 0);
+		};
+		update();
+		vv.addEventListener("resize", update);
+		vv.addEventListener("scroll", update);
+		return () => {
+			vv.removeEventListener("resize", update);
+			vv.removeEventListener("scroll", update);
+		};
+	}, [isOpen]);
 	useEffect(() => {
 		if (!footerElement) return;
 		const onResize = () => {
@@ -77,6 +99,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 		isOpen: true,
 		UNSTABLE_portalContainer: portalContainerRef?.current,
 		className: clsx("fixed top-0 left-0 z-10 w-screen h-dvh", containerClassName),
+		style: { "--bottom-sheet-keyboard-inset": `${keyboardInset}px` },
 		onOpenChange,
 		isDismissable,
 		ref: overlayRef,
@@ -110,7 +133,8 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 			transition: staticTransition,
 			style: {
 				y,
-				minHeight: "100%"
+				height: "calc(100dvh - var(--bottom-sheet-keyboard-inset, 0px))",
+				minHeight: "calc(100dvh - var(--bottom-sheet-keyboard-inset, 0px))"
 			},
 			drag: "y",
 			dragListener: false,
@@ -188,7 +212,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 						initial: { opacity: 0 },
 						exit: { opacity: 0 },
 						ref: setFooterElement,
-						className: clsx("pointer-events-auto absolute z-50 w-full bg-elevation-fill-default-2", "top-[100dvh] left-0 translate-y-[calc(-100%-var(--scroll-position,0px))]"),
+						className: clsx("pointer-events-auto absolute z-50 w-full bg-elevation-fill-default-2", "top-[calc(100dvh-var(--bottom-sheet-keyboard-inset,0))] left-0 translate-y-[calc(-100%-var(--scroll-position,0))]"),
 						children: footer
 					})
 				] })

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

@@ -19,7 +19,9 @@ export declare namespace UIConfig {
         [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : Exclude<T[P], null | undefined>;
     };
     export interface Options {
-        input: Pick<TextInputProps, "variant" | "isClearable" | "hideLabel" | "as" | "size">;
+        input: Pick<TextInputProps, "variant" | "isClearable" | "hideLabel" | "as" | "size"> & {
+            alwaysShowClear: boolean;
+        };
         button: Pick<ButtonProps, "variant" | "size">;
         numberInput: Pick<NumberInputProps, "formatOptions">;
         radioGroup: Pick<RadioGroupProps, "variant" | "hideLabel">;

package/dist/config/uiConfig.context.js

@@ -11,7 +11,8 @@ var UIConfig;
 			as: "default",
 			size: "default",
 			isClearable: false,
-			hideLabel: false
+			hideLabel: false,
+			alwaysShowClear: false
 		},
 		button: {
 			variant: "contained",

package/dist/utils/dom.utils.js

@@ -9,7 +9,7 @@ var DomUtils;
 		"image"
 	]);
 	_DomUtils.isKeyboardInput = (elem) => {
-		return elem.tagName === "INPUT" && !KEYBOARD_INPUTS.has(elem.type) || elem.hasAttribute("contenteditable");
+		return elem.tagName === "INPUT" && !KEYBOARD_INPUTS.has(elem.type) || elem.tagName === "TEXTAREA" || elem.hasAttribute("contenteditable");
 	};
 	_DomUtils.isKeyboardEvent = (event) => {
 		return event.nativeEvent instanceof KeyboardEvent;

package/package.json

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