@vellira-ui/react-native 2.95.0 → 2.95.2

package/dist/index.js

@@ -861,8 +861,14 @@ function AccordionRoot({ children, type = "single", value, defaultValue, onValue
 	const styles = createStyles$23(theme);
 	const isControlled = value !== void 0;
 	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? (type === "multiple" ? [] : ""));
-	const selectedValues = (isControlled ? value : uncontrolledValue) ?? [];
-	const expandedValues = Array.isArray(selectedValues) ? selectedValues : selectedValues ? [selectedValues] : [];
+	const expandedValues = useMemo(() => {
+		const selectedValues = (isControlled ? value : uncontrolledValue) ?? [];
+		return Array.isArray(selectedValues) ? selectedValues : selectedValues ? [selectedValues] : [];
+	}, [
+		isControlled,
+		uncontrolledValue,
+		value
+	]);
 	const selectValue = useCallback((itemValue) => {
 		if (disabled) return;
 		const isExpanded = expandedValues.includes(itemValue);
@@ -921,6 +927,7 @@ const useDropdownContext = () => {
 DropdownContext.displayName = "DropdownContext";
 //#endregion
 //#region src/components/Dropdown/Content/DropdownContent.styles.ts
+const getDropdownBackdropBackgroundColor = (theme, presentation) => presentation === "popover" ? "transparent" : theme.semantic.overlay.backdrop;
 const createStyles$22 = (theme) => StyleSheet.create({
 	modalRoot: { flex: 1 },
 	sheet: { justifyContent: "flex-end" },
@@ -930,10 +937,7 @@ const createStyles$22 = (theme) => StyleSheet.create({
 		padding: theme.tokens.spacing[4]
 	},
 	popover: { flex: 1 },
-	backdrop: {
-		...StyleSheet.absoluteFill,
-		backgroundColor: theme.semantic.overlay.backdrop
-	},
+	backdrop: { ...StyleSheet.absoluteFill },
 	menu: {
 		maxHeight: "50%",
 		overflow: "hidden",
@@ -1005,7 +1009,7 @@ const createStyles$22 = (theme) => StyleSheet.create({
 const nativePointerEventsBoxNone$1 = Platform.OS === "web" ? void 0 : { pointerEvents: "box-none" };
 const webPointerEventsBoxNone$1 = Platform.OS === "web" ? { pointerEvents: "box-none" } : void 0;
 function DropdownContent({ children, contentStyle, accessibilityLabel }) {
-	const { open, color, presentation, zIndex, position, searchable, searchValue, searchPlaceholder, searchAccessibilityLabel, requestClose, getOutsidePressProps, onSearchChange, onFloatingLayout } = useDropdownContext();
+	const { open, color, presentation, positionReady, zIndex, position, searchable, searchValue, searchPlaceholder, searchAccessibilityLabel, requestClose, getOutsidePressProps, onSearchChange, onFloatingLayout } = useDropdownContext();
 	const { theme } = useTheme();
 	const styles = useThemeStyles(createStyles$22);
 	const colorPalette = theme.components.dropdown[color];
@@ -1021,11 +1025,12 @@ function DropdownContent({ children, contentStyle, accessibilityLabel }) {
 		};
 	}, []);
 	useEffect(() => {
+		if (Platform.OS === "web") return;
 		if (!open) {
 			animation.setValue(0);
 			return;
 		}
-		if (reduceMotion || Platform.OS === "web") {
+		if (reduceMotion) {
 			animation.setValue(1);
 			return;
 		}
@@ -1041,11 +1046,15 @@ function DropdownContent({ children, contentStyle, accessibilityLabel }) {
 		isSheet,
 		reduceMotion
 	]);
-	const backdropAnimatedStyle = useMemo(() => ({ opacity: animation.interpolate({
-		inputRange: [0, 1],
-		outputRange: [0, 1]
-	}) }), [animation]);
+	const backdropAnimatedStyle = useMemo(() => {
+		if (Platform.OS === "web") return;
+		return { opacity: animation.interpolate({
+			inputRange: [0, 1],
+			outputRange: [0, 1]
+		}) };
+	}, [animation]);
 	const menuAnimatedStyle = useMemo(() => {
+		if (Platform.OS === "web") return;
 		const translateY = animation.interpolate({
 			inputRange: [0, 1],
 			outputRange: isSheet ? [24, 0] : [-6, 0]
@@ -1074,6 +1083,7 @@ function DropdownContent({ children, contentStyle, accessibilityLabel }) {
 				...nativePointerEventsBoxNone$1,
 				style: [
 					styles.backdrop,
+					{ backgroundColor: getDropdownBackdropBackgroundColor(theme, presentation) },
 					backdropAnimatedStyle,
 					webPointerEventsBoxNone$1
 				],
@@ -1087,6 +1097,7 @@ function DropdownContent({ children, contentStyle, accessibilityLabel }) {
 				style: [
 					styles.menu,
 					styles[`${presentation}Menu`],
+					isPopover && !positionReady && { opacity: 0 },
 					{ borderColor: colorPalette.content.border },
 					isPopover && {
 						position: "absolute",
@@ -1425,6 +1436,7 @@ function computeFloatingPosition({ reference, floating, boundary, placement, off
 //#endregion
 //#region src/managers/FloatingManager/useNativeFloatingPosition.ts
 function useNativeFloatingPosition(placement = "top", offset = 8) {
+	const [isPositioned, setIsPositioned] = useState(false);
 	const [result, setResult] = useState({
 		position: {
 			top: 0,
@@ -1445,6 +1457,7 @@ function useNativeFloatingPosition(placement = "top", offset = 8) {
 		const triggerNode = triggerRef.current;
 		const containerNode = containerRef?.current;
 		if (!triggerNode || typeof triggerNode.measureInWindow !== "function") {
+			setIsPositioned(false);
 			setResult((current) => ({
 				...current,
 				position: {
@@ -1472,6 +1485,7 @@ function useNativeFloatingPosition(placement = "top", offset = 8) {
 					offset
 				});
 				setResult(nextResult);
+				setIsPositioned(measuredSize.width > 0 && measuredSize.height > 0);
 			};
 			if (!containerNode || typeof containerNode.measureInWindow !== "function") {
 				const window = Dimensions.get("window");
@@ -1493,6 +1507,7 @@ function useNativeFloatingPosition(placement = "top", offset = 8) {
 		if (lastTriggerRef.current) updatePosition(lastTriggerRef.current, lastContainerRef.current ?? void 0, nextSize);
 	}, [updatePosition]);
 	return {
+		isPositioned,
 		position: result.position,
 		arrowPosition: result.arrowPosition,
 		placement: result.placement,
@@ -1894,7 +1909,7 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 	const resolvedPresentation = useOverlayPresentation(presentation);
 	const contentStyleFromSlot = parsed.contentProps?.style;
 	const contentPresentation = (parsed.contentProps?.presentation === "auto" ? void 0 : parsed.contentProps?.presentation) ?? resolvedPresentation;
-	const { position, updatePosition, onFloatingLayout } = useNativeFloatingPosition(placement, offset);
+	const { isPositioned: positionReady, position, updatePosition, onFloatingLayout } = useNativeFloatingPosition(placement, offset);
 	const { isOpen, closeDropdown, toggleDropdown } = useDropdown({
 		items: navigableItems,
 		open,
@@ -1976,6 +1991,7 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 		color,
 		size,
 		presentation: contentPresentation,
+		positionReady,
 		position,
 		zIndex: dismiss.zIndex,
 		searchable: isSearchable,
@@ -2004,6 +2020,7 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 		loading,
 		onFloatingLayout,
 		position,
+		positionReady,
 		resolvedSearchPlaceholder,
 		resolvedSearchValue,
 		searchAccessibilityLabel,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/react-native",
-  "version": "2.95.0",
+  "version": "2.95.2",
   "description": "React Native components for Vellira Design System",
   "keywords": [
     "vellira",