@vellira-ui/react-native 2.94.0 → 2.95.1

package/dist/index.js

@@ -740,57 +740,60 @@ function useThemeStyles(createStyles) {
 }
 //#endregion
 //#region src/components/Accordion/Accordion.styles.ts
-const createStyles$23 = (theme) => StyleSheet.create({
-	root: {
-		width: "100%",
-		overflow: "hidden",
-		borderWidth: 1,
-		borderColor: theme.semantic.border.muted,
-		borderRadius: theme.tokens.radius.lg,
-		backgroundColor: theme.semantic.surface.default
-	},
-	rootDisabled: { opacity: .7 },
-	item: {
-		borderBottomWidth: 1,
-		borderBottomColor: theme.semantic.border.muted
-	},
-	trigger: {
-		minHeight: theme.tokens.spacing[10],
-		justifyContent: "center",
-		paddingHorizontal: theme.tokens.spacing[4],
-		paddingVertical: theme.tokens.spacing[3],
-		backgroundColor: theme.semantic.surface.default
-	},
-	triggerExpanded: { backgroundColor: theme.semantic.surface.subtle },
-	triggerPressed: { backgroundColor: theme.semantic.surface.muted },
-	triggerDisabled: { backgroundColor: theme.semantic.surface.subtle },
-	triggerContent: {
-		flexDirection: "row",
-		alignItems: "center",
-		justifyContent: "space-between",
-		gap: theme.tokens.spacing[3]
-	},
-	triggerText: {
-		flex: 1,
-		color: theme.semantic.text.primary,
-		fontSize: theme.tokens.typography.size.md,
-		fontWeight: theme.tokens.typography.weight.medium,
-		lineHeight: theme.tokens.typography.lineHeight.md
-	},
-	triggerTextDisabled: { color: theme.semantic.text.disabled },
-	indicator: {
-		width: theme.tokens.spacing[4],
-		height: theme.tokens.spacing[4],
-		alignItems: "center",
-		justifyContent: "center"
-	},
-	indicatorExpanded: { transform: [{ rotate: "180deg" }] },
-	content: {
-		padding: theme.tokens.spacing[4],
-		backgroundColor: theme.semantic.surface.subtle
-	},
-	contentHidden: { display: "none" }
-});
+const createStyles$23 = (theme) => {
+	const accordion = theme.components.accordion;
+	return StyleSheet.create({
+		root: {
+			width: "100%",
+			overflow: "hidden",
+			borderWidth: 1,
+			borderColor: accordion.root.border,
+			borderRadius: theme.tokens.radius.lg,
+			backgroundColor: accordion.root.bg
+		},
+		rootDisabled: { opacity: .7 },
+		item: {
+			borderBottomWidth: 1,
+			borderBottomColor: accordion.divider
+		},
+		trigger: {
+			minHeight: theme.tokens.spacing[10],
+			justifyContent: "center",
+			paddingHorizontal: theme.tokens.spacing[4],
+			paddingVertical: theme.tokens.spacing[3],
+			backgroundColor: accordion.trigger.default.bg
+		},
+		triggerExpanded: { backgroundColor: accordion.trigger.expanded.bg },
+		triggerPressed: { backgroundColor: accordion.trigger.pressed.bg },
+		triggerDisabled: { backgroundColor: accordion.trigger.disabled.bg },
+		triggerContent: {
+			flexDirection: "row",
+			alignItems: "center",
+			justifyContent: "space-between",
+			gap: theme.tokens.spacing[3]
+		},
+		triggerText: {
+			flex: 1,
+			color: accordion.trigger.default.fg,
+			fontSize: theme.tokens.typography.size.md,
+			fontWeight: theme.tokens.typography.weight.medium,
+			lineHeight: theme.tokens.typography.lineHeight.md
+		},
+		triggerTextDisabled: { color: accordion.trigger.disabled.fg },
+		indicator: {
+			width: theme.tokens.spacing[4],
+			height: theme.tokens.spacing[4],
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		indicatorExpanded: { transform: [{ rotate: "180deg" }] },
+		content: {
+			padding: theme.tokens.spacing[4],
+			backgroundColor: accordion.content.bg
+		},
+		contentHidden: { display: "none" }
+	});
+};
 //#endregion
 //#region src/components/Accordion/Content/AccordionContent.tsx
 function AccordionContent({ children, forceMount = false, hidden = false }) {
@@ -817,6 +820,7 @@ function AccordionItem({ children }) {
 function AccordionTrigger({ children, disabled = false, expanded = false, onActivate }) {
 	const { theme } = useTheme();
 	const styles = createStyles$23(theme);
+	const accordionTokens = theme.components.accordion;
 	return /* @__PURE__ */ jsx(Pressable, {
 		disabled,
 		accessibilityRole: "button",
@@ -844,7 +848,7 @@ function AccordionTrigger({ children, disabled = false, expanded = false, onActi
 				children: /* @__PURE__ */ jsx(ChevronDown, {
 					width: 16,
 					height: 16,
-					color: disabled ? theme.semantic.text.disabled : theme.semantic.text.secondary
+					color: disabled ? accordionTokens.trigger.disabled.fg : accordionTokens.indicator
 				})
 			})]
 		})
@@ -857,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);
@@ -917,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" },
@@ -926,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",
@@ -1001,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];
@@ -1017,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;
 		}
@@ -1037,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]
@@ -1070,6 +1083,7 @@ function DropdownContent({ children, contentStyle, accessibilityLabel }) {
 				...nativePointerEventsBoxNone$1,
 				style: [
 					styles.backdrop,
+					{ backgroundColor: getDropdownBackdropBackgroundColor(theme, presentation) },
 					backdropAnimatedStyle,
 					webPointerEventsBoxNone$1
 				],
@@ -1083,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",
@@ -1421,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,
@@ -1441,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: {
@@ -1468,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");
@@ -1489,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,
@@ -1890,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,
@@ -1972,6 +1991,7 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 		color,
 		size,
 		presentation: contentPresentation,
+		positionReady,
 		position,
 		zIndex: dismiss.zIndex,
 		searchable: isSearchable,
@@ -2000,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.94.0",
+  "version": "2.95.1",
   "description": "React Native components for Vellira Design System",
   "keywords": [
     "vellira",