@vellira-ui/react-native 2.55.0 → 2.56.0

package/dist/index.js

@@ -698,11 +698,7 @@ const createStyles$21 = (theme) => StyleSheet.create({
 		justifyContent: "center",
 		padding: theme.tokens.spacing[4]
 	},
-	popover: {
-		alignItems: "center",
-		justifyContent: "center",
-		padding: theme.tokens.spacing[4]
-	},
+	popover: { flex: 1 },
 	backdrop: {
 		...StyleSheet.absoluteFill,
 		backgroundColor: theme.semantic.overlay.backdrop
@@ -777,11 +773,12 @@ const createStyles$21 = (theme) => StyleSheet.create({
 //#region src/components/Dropdown/Content/DropdownContent.tsx
 const nativePointerEventsBoxNone$1 = Platform.OS === "web" ? void 0 : { pointerEvents: "box-none" };
 const webPointerEventsBoxNone$1 = Platform.OS === "web" ? { pointerEvents: "box-none" } : void 0;
-function DropdownContent({ isOpen, children, onClose, color = "primary", contentStyle, accessibilityLabel, presentation, searchable = false, searchValue = "", searchPlaceholder = "Search actions...", searchAccessibilityLabel, onSearchChange }) {
+function DropdownContent({ isOpen, children, onClose, color = "primary", contentStyle, accessibilityLabel, presentation, position, onFloatingLayout, searchable = false, searchValue = "", searchPlaceholder = "Search actions...", searchAccessibilityLabel, onSearchChange }) {
 	const { theme } = useTheme();
 	const styles = useThemeStyles(createStyles$21);
 	const colorPalette = theme.components.dropdown[color];
 	const isSheet = presentation === "sheet";
+	const isPopover = presentation === "popover";
 	const animation = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
 	const [reduceMotion, setReduceMotion] = useState(false);
 	useEffect(() => {
@@ -857,9 +854,15 @@ function DropdownContent({ isOpen, children, onClose, color = "primary", content
 					styles.menu,
 					styles[`${presentation}Menu`],
 					{ borderColor: colorPalette.content.border },
+					isPopover && {
+						position: "absolute",
+						top: position.top,
+						left: position.left
+					},
 					contentStyle,
 					menuAnimatedStyle
 				],
+				onLayout: isPopover ? onFloatingLayout : void 0,
 				children: [searchable && /* @__PURE__ */ jsxs(View, {
 					style: styles.searchWrap,
 					children: [/* @__PURE__ */ jsx(View, {
@@ -887,27 +890,6 @@ function DropdownContent({ isOpen, children, onClose, color = "primary", content
 }
 DropdownContent.displayName = "DropdownContent";
 //#endregion
-//#region src/components/Dropdown/Group/DropdownGroup.styles.ts
-const createStyles$20 = (theme) => StyleSheet.create({ groupLabel: {
-	paddingHorizontal: theme.tokens.spacing[4],
-	paddingVertical: theme.tokens.spacing[2],
-	color: theme.components.dropdown.groupLabel.fg,
-	fontFamily: theme.tokens.typography.family.medium,
-	fontSize: theme.tokens.typography.size.xs,
-	lineHeight: theme.tokens.typography.lineHeight.sm,
-	textTransform: "uppercase"
-} });
-//#endregion
-//#region src/components/Dropdown/Group/DropdownGroup.tsx
-function DropdownGroup({ label }) {
-	return /* @__PURE__ */ jsx(Text, {
-		accessibilityRole: "header",
-		style: useThemeStyles(createStyles$20).groupLabel,
-		children: label
-	});
-}
-DropdownGroup.displayName = "DropdownGroup";
-//#endregion
 //#region src/components/Dropdown/internal/DropdownCollection.ts
 function createDropdownSlot(name, displayName) {
 	const Slot = () => null;
@@ -1011,8 +993,65 @@ function getItemLabel(children) {
 	return labelParts.join("").trim();
 }
 //#endregion
+//#region src/components/Dropdown/Dropdown.styles.ts
+const createStyles$20 = (theme) => StyleSheet.create({
+	root: { alignSelf: "flex-start" },
+	emptyText: {
+		minHeight: 44,
+		paddingHorizontal: theme.tokens.spacing[3],
+		paddingVertical: theme.tokens.spacing[3],
+		color: theme.components.dropdown.item.disabled.fg,
+		fontFamily: theme.tokens.typography.family.regular,
+		fontSize: theme.tokens.typography.size.md,
+		lineHeight: theme.tokens.typography.lineHeight.md
+	}
+});
+//#endregion
+//#region src/components/Dropdown/Group/DropdownGroup.styles.ts
+const createStyles$19 = (theme) => StyleSheet.create({ groupLabel: {
+	paddingHorizontal: theme.tokens.spacing[4],
+	paddingVertical: theme.tokens.spacing[2],
+	color: theme.components.dropdown.groupLabel.fg,
+	fontFamily: theme.tokens.typography.family.medium,
+	fontSize: theme.tokens.typography.size.xs,
+	lineHeight: theme.tokens.typography.lineHeight.sm,
+	textTransform: "uppercase"
+} });
+//#endregion
+//#region src/components/Dropdown/Group/DropdownGroup.tsx
+function DropdownGroup({ label }) {
+	return /* @__PURE__ */ jsx(Text, {
+		accessibilityRole: "header",
+		style: useThemeStyles(createStyles$19).groupLabel,
+		children: label
+	});
+}
+DropdownGroup.displayName = "DropdownGroup";
+//#endregion
+//#region src/components/Dropdown/internal/DropdownUtils.ts
+function createDropdownSelectEvent() {
+	let defaultPrevented = false;
+	return {
+		preventDefault: () => {
+			defaultPrevented = true;
+		},
+		get defaultPrevented() {
+			return defaultPrevented;
+		}
+	};
+}
+function filterDropdownEntries(parsed, searchValue) {
+	const normalizedSearch = searchValue.trim().toLocaleLowerCase();
+	const matchedItems = new Set(parsed.items.filter((item) => item.label.toLocaleLowerCase().includes(normalizedSearch)).map((item) => item.id));
+	return {
+		...parsed,
+		items: parsed.items.filter((item) => matchedItems.has(item.id)),
+		entries: parsed.entries.filter((entry) => entry.type !== "item" || matchedItems.has(entry.id))
+	};
+}
+//#endregion
 //#region src/components/Dropdown/Item/DropdownItem.styles.ts
-const createStyles$19 = (theme) => StyleSheet.create({
+const createStyles$18 = (theme) => StyleSheet.create({
 	item: {
 		minWidth: 0,
 		minHeight: 44,
@@ -1037,7 +1076,7 @@ const createStyles$19 = (theme) => StyleSheet.create({
 //#region src/components/Dropdown/Item/DropdownItem.tsx
 function DropdownItem({ label, value, rootColor = "primary", color = "default", icon, disabled = false, textWrap = "truncate", itemStyle, textStyle, onSelect }) {
 	const { theme } = useTheme();
-	const styles = useThemeStyles(createStyles$19);
+	const styles = useThemeStyles(createStyles$18);
 	const rootColorPalette = theme.components.dropdown[rootColor];
 	const itemColorPalette = color === "default" ? void 0 : theme.components.dropdown[color];
 	const renderColoredNode = (node, color) => {
@@ -1091,19 +1130,19 @@ function DropdownItem({ label, value, rootColor = "primary", color = "default",
 DropdownItem.displayName = "DropdownItem";
 //#endregion
 //#region src/components/Dropdown/Separator/DropdownSeparator.styles.ts
-const createStyles$18 = (theme) => StyleSheet.create({ separator: {
+const createStyles$17 = (theme) => StyleSheet.create({ separator: {
 	height: 1,
 	backgroundColor: theme.components.dropdown.separator.bg
 } });
 //#endregion
 //#region src/components/Dropdown/Separator/DropdownSeparator.tsx
 function DropdownSeparator() {
-	return /* @__PURE__ */ jsx(View, { style: useThemeStyles(createStyles$18).separator });
+	return /* @__PURE__ */ jsx(View, { style: useThemeStyles(createStyles$17).separator });
 }
 DropdownSeparator.displayName = "DropdownSeparator";
 //#endregion
 //#region src/components/Dropdown/Trigger/DropdownTrigger.styles.ts
-const createStyles$17 = (theme) => StyleSheet.create({
+const createStyles$16 = (theme) => StyleSheet.create({
 	trigger: {
 		alignItems: "center",
 		justifyContent: "center",
@@ -1191,7 +1230,7 @@ const createStyles$17 = (theme) => StyleSheet.create({
 //#region src/components/Dropdown/Trigger/DropdownTrigger.tsx
 function DropdownTrigger({ asChild = false, label, trigger, children, icon, arrowIcon, showArrow = true, color = "primary", size = "md", disabled = false, isOpen, triggerStyle, triggerRef, accessibilityLabel, accessibilityHint, onPress }) {
 	const { theme } = useTheme();
-	const styles = useThemeStyles(createStyles$17);
+	const styles = useThemeStyles(createStyles$16);
 	const colorPalette = theme.components.dropdown[color];
 	const textSizeStyle = {
 		sm: styles.textSm,
@@ -1311,32 +1350,28 @@ function DropdownTrigger({ asChild = false, label, trigger, children, icon, arro
 }
 DropdownTrigger.displayName = "DropdownTrigger";
 //#endregion
-//#region src/components/Dropdown/Dropdown.styles.ts
-const createStyles$16 = (theme) => StyleSheet.create({
-	root: { alignSelf: "flex-start" },
-	emptyText: {
-		minHeight: 44,
-		paddingHorizontal: theme.tokens.spacing[3],
-		paddingVertical: theme.tokens.spacing[3],
-		color: theme.components.dropdown.item.disabled.fg,
-		fontFamily: theme.tokens.typography.family.regular,
-		fontSize: theme.tokens.typography.size.md,
-		lineHeight: theme.tokens.typography.lineHeight.md
-	}
-});
-//#endregion
-//#region src/components/Dropdown/Dropdown.tsx
-function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, showArrow = true, open, defaultOpen = false, onOpenChange, presentation = "auto", closeOnSelect = true, color = "primary", disabled = false, loading = false, loadingText = "Loading actions...", searchable = false, command = false, searchValue, defaultSearchValue = "", searchPlaceholder, onSearch, empty, size = "md", style, triggerStyle, contentStyle, itemStyle, textStyle, accessibilityLabel, accessibilityHint }) {
-	const styles = useThemeStyles(createStyles$16);
+//#region src/components/Dropdown/Root/DropdownRoot.tsx
+function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, showArrow = true, open, defaultOpen = false, onOpenChange, presentation = "auto", placement = "bottom-start", offset = 8, closeOnSelect = true, color = "primary", disabled = false, loading = false, loadingText = "Loading actions...", searchable = false, command = false, searchValue, defaultSearchValue = "", searchPlaceholder, onSearch, empty, size = "md", style, triggerStyle, contentStyle, itemStyle, textStyle, accessibilityLabel, accessibilityHint }) {
+	const styles = useThemeStyles(createStyles$20);
 	const overlayId = useId();
 	const [uncontrolledSearchValue, setUncontrolledSearchValue] = useState(defaultSearchValue);
 	const resolvedSearchValue = searchValue ?? uncontrolledSearchValue;
 	const { width } = useWindowDimensions();
 	const triggerRef = useRef(null);
+	const setTriggerRef = useCallback((node) => {
+		if (node && typeof node === "object" && "measureInWindow" in node && typeof node.measureInWindow === "function") {
+			triggerRef.current = node;
+			return;
+		}
+		triggerRef.current = null;
+	}, []);
 	const parsed = useMemo(() => parseDropdownChildren(children), [children]);
 	const contentCommand = parsed.contentProps?.command ?? false;
 	const isSearchable = searchable || command || contentCommand || !!parsed.searchProps;
 	const resolvedPresentation = presentation === "auto" ? width < 768 ? "sheet" : "popover" : 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 menuAccessibilityLabel = useMemo(() => {
 		if (accessibilityLabel) return accessibilityLabel;
 		return typeof label === "string" ? label : "Menu";
@@ -1363,6 +1398,14 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 		getItemValue: (item) => item.value,
 		getItemText: (item) => typeof item.label === "string" ? item.label : item.value
 	});
+	useEffect(() => {
+		if (!isOpen || contentPresentation !== "popover") return;
+		updatePosition(triggerRef);
+	}, [
+		isOpen,
+		contentPresentation,
+		updatePosition
+	]);
 	useEffect(() => {
 		if (!isOpen) return;
 		AccessibilityInfo.announceForAccessibility(`${menuAccessibilityLabel} opened`);
@@ -1443,8 +1486,6 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 		id: "empty",
 		props: { children: empty ?? "No actions found" }
 	}] : filteredParsed.entries;
-	const contentStyleFromSlot = parsed.contentProps?.style;
-	const presentationFromSlot = parsed.contentProps?.presentation === "auto" ? void 0 : parsed.contentProps?.presentation;
 	return /* @__PURE__ */ jsxs(View, {
 		style: [styles.root, style],
 		children: [/* @__PURE__ */ jsx(DropdownTrigger, {
@@ -1458,9 +1499,7 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 			disabled: disabled || parsed.triggerProps?.disabled,
 			isOpen,
 			size,
-			triggerRef: (node) => {
-				triggerRef.current = node;
-			},
+			triggerRef: setTriggerRef,
 			triggerStyle,
 			accessibilityLabel,
 			accessibilityHint,
@@ -1471,7 +1510,9 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 			color,
 			contentStyle: [contentStyle, contentStyleFromSlot],
 			accessibilityLabel: menuAccessibilityLabel,
-			presentation: presentationFromSlot ?? resolvedPresentation,
+			presentation: contentPresentation,
+			position,
+			onFloatingLayout,
 			searchable: isSearchable,
 			searchValue: resolvedSearchValue,
 			searchPlaceholder: parsed.searchProps?.placeholder ?? searchPlaceholder ?? (command || contentCommand ? "Type a command..." : "Search actions..."),
@@ -1488,26 +1529,8 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 	});
 }
 DropdownRoot.displayName = "Dropdown";
-function createDropdownSelectEvent() {
-	let defaultPrevented = false;
-	return {
-		preventDefault: () => {
-			defaultPrevented = true;
-		},
-		get defaultPrevented() {
-			return defaultPrevented;
-		}
-	};
-}
-function filterDropdownEntries(parsed, searchValue) {
-	const normalizedSearch = searchValue.trim().toLocaleLowerCase();
-	const matchedItems = new Set(parsed.items.filter((item) => item.label.toLocaleLowerCase().includes(normalizedSearch)).map((item) => item.id));
-	return {
-		...parsed,
-		items: parsed.items.filter((item) => matchedItems.has(item.id)),
-		entries: parsed.entries.filter((entry) => entry.type !== "item" || matchedItems.has(entry.id))
-	};
-}
+//#endregion
+//#region src/components/Dropdown/Dropdown.tsx
 const DropdownTriggerSlot = createDropdownSlot("trigger", "Dropdown.Trigger");
 const DropdownContentSlot = createDropdownSlot("content", "Dropdown.Content");
 const DropdownItemSlot = createDropdownSlot("item", "Dropdown.Item");

package/package.json

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