@vellira-ui/react-native 2.44.2 → 2.44.4

package/dist/index.js

@@ -1528,8 +1528,26 @@ const createStyles$13 = (theme) => StyleSheet.create({ content: {
 //#endregion
 //#region src/components/Modal/Content/ModalContent.tsx
 const ModalContent = ({ children, style }) => {
-	return /* @__PURE__ */ jsx(View, {
-		style: [useThemeStyles(createStyles$13).content, style],
+	const styles = useThemeStyles(createStyles$13);
+	const { animation, animationProgress, open } = useModalContext();
+	const closedTranslateY = open ? animation === "slide" ? 16 : 8 : 4;
+	const closedScale = open ? .96 : .98;
+	const animatedStyle = animation === "none" ? void 0 : {
+		opacity: animationProgress,
+		transform: animation === "fade" ? [] : [{ translateY: animationProgress.interpolate({
+			inputRange: [0, 1],
+			outputRange: [closedTranslateY, 0]
+		}) }, ...animation === "scale" ? [{ scale: animationProgress.interpolate({
+			inputRange: [0, 1],
+			outputRange: [closedScale, 1]
+		}) }] : []]
+	};
+	return /* @__PURE__ */ jsx(Animated.View, {
+		style: [
+			styles.content,
+			style,
+			animatedStyle
+		],
 		children
 	});
 };
@@ -1582,27 +1600,55 @@ const createStyles$11 = (theme) => StyleSheet.create({
 //#region src/components/Modal/Overlay/ModalOverlay.tsx
 const ModalOverlay = ({ children, overlayStyle }) => {
 	const styles = useThemeStyles(createStyles$11);
-	const { closeOnOutsidePress, onClose, onOutsideClose, open } = useModalContext();
+	const { animation, animationProgress, closeOnOutsidePress, onClose, onOutsideClose, shouldRender } = useModalContext();
+	const backdropStyle = animation === "none" ? void 0 : { opacity: animationProgress };
 	return /* @__PURE__ */ jsx(Modal$1, {
-		visible: open,
+		visible: shouldRender,
 		transparent: true,
-		animationType: "fade",
+		animationType: "none",
 		onRequestClose: onClose,
 		children: /* @__PURE__ */ jsxs(View, {
 			style: [styles.overlay, overlayStyle],
-			children: [/* @__PURE__ */ jsx(Pressable, {
-				testID: "modal-backdrop",
-				accessibilityRole: closeOnOutsidePress ? "button" : void 0,
-				accessibilityLabel: closeOnOutsidePress ? "Close modal" : void 0,
-				style: styles.backdrop,
-				onPress: closeOnOutsidePress ? onOutsideClose : void 0
+			children: [/* @__PURE__ */ jsx(Animated.View, {
+				style: [styles.backdrop, backdropStyle],
+				children: /* @__PURE__ */ jsx(Pressable, {
+					testID: "modal-backdrop",
+					accessibilityRole: closeOnOutsidePress ? "button" : void 0,
+					accessibilityLabel: closeOnOutsidePress ? "Close modal" : void 0,
+					style: StyleSheet.absoluteFill,
+					onPress: closeOnOutsidePress ? onOutsideClose : void 0
+				})
 			}), children]
 		})
 	});
 };
 //#endregion
 //#region src/components/Modal/Root/ModalRoot.tsx
-const ModalRoot = ({ open, defaultOpen = false, onOpenChange, closeOnOutsidePress = true, children }) => {
+const linearEasing = (value) => value;
+const easingMap = {
+	standard: Easing?.bezier?.(.22, 1, .36, 1) ?? linearEasing,
+	linear: Easing?.linear ?? linearEasing,
+	ease: Easing?.ease ?? linearEasing,
+	"ease-in": Easing?.in?.(Easing?.ease ?? linearEasing) ?? linearEasing,
+	"ease-out": Easing?.out?.(Easing?.ease ?? linearEasing) ?? linearEasing,
+	"ease-in-out": Easing?.inOut?.(Easing?.ease ?? linearEasing) ?? linearEasing
+};
+const parseDuration = (duration) => Number.parseFloat(duration);
+const resolveDuration = (duration) => {
+	if (typeof duration === "number") return {
+		close: duration,
+		open: duration
+	};
+	return {
+		close: duration?.close ?? parseDuration(nativeThemes.light.components.modal.motion.closeDuration),
+		open: duration?.open ?? parseDuration(nativeThemes.light.components.modal.motion.openDuration)
+	};
+};
+const ModalRoot = ({ open, defaultOpen = false, onOpenChange, animation = "scale", duration, easing = "standard", closeOnOutsidePress = true, children }) => {
+	const initialOpen = open ?? defaultOpen;
+	const animationProgress = useRef(new Animated.Value(initialOpen ? 1 : 0));
+	const [shouldRender, setShouldRender] = useState(initialOpen);
+	const [reduceMotion, setReduceMotion] = useState(false);
 	const modal = useModal({
 		open,
 		defaultOpen,
@@ -1615,13 +1661,62 @@ const ModalRoot = ({ open, defaultOpen = false, onOpenChange, closeOnOutsidePres
 		closeOnOutsidePress: modal.closeOnOutsidePress,
 		requestClose: modal.requestClose
 	});
+	const animationDuration = resolveDuration(duration);
+	const shouldAnimate = animation !== "none" && !reduceMotion;
+	useEffect(() => {
+		AccessibilityInfo.isReduceMotionEnabled?.().then(setReduceMotion);
+		const subscription = AccessibilityInfo.addEventListener?.("reduceMotionChanged", setReduceMotion);
+		return () => {
+			subscription?.remove();
+		};
+	}, []);
+	useEffect(() => {
+		const progress = animationProgress.current;
+		if (modal.open) {
+			setShouldRender(true);
+			if (!shouldAnimate) {
+				progress.setValue(1);
+				return;
+			}
+			progress.setValue(0);
+			Animated.timing(progress, {
+				toValue: 1,
+				duration: animationDuration.open,
+				easing: easingMap[easing],
+				useNativeDriver: Platform.OS !== "web"
+			}).start();
+			return;
+		}
+		if (!shouldAnimate) {
+			progress.setValue(0);
+			setShouldRender(false);
+			return;
+		}
+		Animated.timing(progress, {
+			toValue: 0,
+			duration: animationDuration.close,
+			easing: easingMap[easing],
+			useNativeDriver: Platform.OS !== "web"
+		}).start(({ finished }) => {
+			if (finished) setShouldRender(false);
+		});
+	}, [
+		animationDuration.close,
+		animationDuration.open,
+		easing,
+		modal.open,
+		shouldAnimate
+	]);
 	return /* @__PURE__ */ jsx(ModalContext.Provider, {
 		value: {
+			animation,
+			animationProgress: animationProgress.current,
 			closeOnOutsidePress: modal.closeOnOutsidePress,
 			onClose: dismiss.requestClose,
 			onOutsideClose: dismiss.requestOutsideClose,
 			open: modal.open,
-			setOpen: modal.setOpen
+			setOpen: modal.setOpen,
+			shouldRender
 		},
 		children
 	});
@@ -2493,11 +2588,12 @@ const SelectItemRow = ({ option, isSelected, isDisabled, optionStyle, onSelect }
 	const { theme } = useTheme();
 	const styles = useThemeStyles(createItemStyles);
 	const { color, variant, renderOption } = useSelectContext();
+	const [isHovered, setIsHovered] = useState(false);
 	const optionPalette = theme.components.select[option.color ?? color][variant].option;
 	const getOptionState = (pressed) => {
 		if (isDisabled) return theme.components.select.option.disabled;
-		if (isSelected) return pressed ? optionPalette.selectedPressed : optionPalette.selected;
-		return pressed ? optionPalette.pressed : theme.components.select.option.default;
+		if (isSelected) return pressed ? optionPalette.selectedPressed : isHovered ? optionPalette.selectedHover : optionPalette.selected;
+		return pressed ? optionPalette.pressed : isHovered ? optionPalette.hover : theme.components.select.option.default;
 	};
 	return /* @__PURE__ */ jsx(Pressable, {
 		disabled: isDisabled,
@@ -2509,6 +2605,8 @@ const SelectItemRow = ({ option, isSelected, isDisabled, optionStyle, onSelect }
 			disabled: isDisabled
 		},
 		onPress: () => onSelect(option),
+		onHoverIn: () => setIsHovered(true),
+		onHoverOut: () => setIsHovered(false),
 		style: ({ pressed }) => {
 			const optionState = getOptionState(pressed);
 			return [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/react-native",
-  "version": "2.44.2",
+  "version": "2.44.4",
   "description": "React Native components for Vellira Design System",
   "author": "Roman Bakurov",
   "license": "MIT",