@react-native-reusables/cli 0.0.14 → 0.0.15

package/__generated/components/primitives/portal.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Platform, type View, type ViewStyle } from 'react-native';
 import { create } from 'zustand';
 
 const DEFAULT_PORTAL_HOST = 'INTERNAL_PRIMITIVE_DEFAULT_HOST_NAME';
@@ -7,17 +8,10 @@ type PortalMap = Map<string, React.ReactNode>;
 type PortalHostMap = Map<string, PortalMap>;
 
 const usePortal = create<{ map: PortalHostMap }>(() => ({
-  map: new Map<string, PortalMap>().set(
-    DEFAULT_PORTAL_HOST,
-    new Map<string, React.ReactNode>()
-  ),
+  map: new Map<string, PortalMap>().set(DEFAULT_PORTAL_HOST, new Map<string, React.ReactNode>()),
 }));
 
-const updatePortal = (
-  hostName: string,
-  name: string,
-  children: React.ReactNode
-) => {
+const updatePortal = (hostName: string, name: string, children: React.ReactNode) => {
   usePortal.setState((prev) => {
     const next = new Map(prev.map);
     const portal = next.get(hostName) ?? new Map<string, React.ReactNode>();
@@ -37,9 +31,7 @@ const removePortal = (hostName: string, name: string) => {
 };
 
 export function PortalHost({ name = DEFAULT_PORTAL_HOST }: { name?: string }) {
-  const portalMap =
-    usePortal((state) => state.map).get(name) ??
-    new Map<string, React.ReactNode>();
+  const portalMap = usePortal((state) => state.map).get(name) ?? new Map<string, React.ReactNode>();
   if (portalMap.size === 0) return null;
   return <>{Array.from(portalMap.values())}</>;
 }
@@ -65,3 +57,26 @@ export function Portal({
 
   return null;
 }
+
+const ROOT: ViewStyle = {
+  flex: 1,
+};
+
+export function useModalPortalRoot() {
+  const ref = React.useRef<View>(null);
+  const [sideOffset, setSideOffSet] = React.useState(0);
+
+  const onLayout = React.useCallback(() => {
+    if (Platform.OS === 'web') return;
+    ref.current?.measure((_x, _y, _width, _height, _pageX, pageY) => {
+      setSideOffSet(-pageY);
+    });
+  }, []);
+
+  return {
+    ref,
+    sideOffset,
+    onLayout,
+    style: ROOT,
+  };
+}

package/__generated/components/ui/alert-dialog.tsx

@@ -61,12 +61,12 @@ const AlertDialogOverlay = Platform.select({
 
 const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & { portalHost?: string }
+>(({ className, portalHost, ...props }, ref) => {
   const { open } = AlertDialogPrimitive.useRootContext();
 
   return (
-    <AlertDialogPortal>
+    <AlertDialogPortal hostName={portalHost}>
       <AlertDialogOverlay>
         <AlertDialogPrimitive.Content
           ref={ref}

package/__generated/components/ui/context-menu.tsx

@@ -76,18 +76,19 @@ const ContextMenuContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> & {
     overlayStyle?: StyleProp<ViewStyle>;
     overlayClassName?: string;
+    portalHost?: string;
   }
->(({ className, overlayClassName, overlayStyle, ...props }, ref) => {
+>(({ className, overlayClassName, overlayStyle, portalHost, ...props }, ref) => {
   const { open } = ContextMenuPrimitive.useRootContext();
   return (
-    <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Portal hostName={portalHost}>
       <ContextMenuPrimitive.Overlay
         style={
           overlayStyle
             ? StyleSheet.flatten([
                 Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined,
                 overlayStyle,
-              ])
+              ] as ViewStyle)
             : Platform.OS !== 'web'
             ? StyleSheet.absoluteFill
             : undefined

package/__generated/components/ui/dialog.tsx

@@ -61,11 +61,11 @@ const DialogOverlay = Platform.select({
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { portalHost?: string }
+>(({ className, children, portalHost, ...props }, ref) => {
   const { open } = DialogPrimitive.useRootContext();
   return (
-    <DialogPortal>
+    <DialogPortal hostName={portalHost}>
       <DialogOverlay>
         <DialogPrimitive.Content
           ref={ref}

package/__generated/components/ui/dropdown-menu.tsx

@@ -76,18 +76,19 @@ const DropdownMenuContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
     overlayStyle?: StyleProp<ViewStyle>;
     overlayClassName?: string;
+    portalHost?: string;
   }
->(({ className, overlayClassName, overlayStyle, ...props }, ref) => {
+>(({ className, overlayClassName, overlayStyle, portalHost, ...props }, ref) => {
   const { open } = DropdownMenuPrimitive.useRootContext();
   return (
-    <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Portal hostName={portalHost}>
       <DropdownMenuPrimitive.Overlay
         style={
           overlayStyle
             ? StyleSheet.flatten([
                 Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined,
                 overlayStyle,
-              ])
+              ] as ViewStyle)
             : Platform.OS !== 'web'
             ? StyleSheet.absoluteFill
             : undefined

package/__generated/components/ui/menubar.tsx

@@ -107,12 +107,12 @@ MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
 
 const MenubarContent = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
->(({ className, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content> & { portalHost?: string }
+>(({ className, portalHost, ...props }, ref) => {
   const { value } = MenubarPrimitive.useRootContext();
   const { value: itemValue } = MenubarPrimitive.useMenuContext();
   return (
-    <MenubarPrimitive.Portal>
+    <MenubarPrimitive.Portal hostName={portalHost}>
       <MenubarPrimitive.Content
         ref={ref}
         className={cn(

package/__generated/components/ui/navigation-menu.tsx

@@ -91,12 +91,14 @@ NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
 
 const NavigationMenuContent = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
->(({ className, children, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content> & {
+    portalHost?: string;
+  }
+>(({ className, children, portalHost, ...props }, ref) => {
   const { value } = NavigationMenuPrimitive.useRootContext();
   const { value: itemValue } = NavigationMenuPrimitive.useItemContext();
   return (
-    <NavigationMenuPrimitive.Portal>
+    <NavigationMenuPrimitive.Portal hostName={portalHost}>
       <NavigationMenuPrimitive.Content
         ref={ref}
         className={cn(

package/__generated/components/ui/popover.tsx

@@ -11,10 +11,10 @@ const PopoverTrigger = PopoverPrimitive.Trigger;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & { portalHost?: string }
+>(({ className, align = 'center', sideOffset = 4, portalHost, ...props }, ref) => {
   return (
-    <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Portal hostName={portalHost}>
       <PopoverPrimitive.Overlay style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}>
         <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut}>
           <TextClassContext.Provider value='text-popover-foreground'>

package/__generated/components/ui/select.tsx

@@ -74,12 +74,12 @@ const SelectScrollDownButton = ({
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & { portalHost?: string }
+>(({ className, children, position = 'popper', portalHost, ...props }, ref) => {
   const { open } = SelectPrimitive.useRootContext();
 
   return (
-    <SelectPrimitive.Portal>
+    <SelectPrimitive.Portal hostName={portalHost}>
       <SelectPrimitive.Overlay style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}>
         <Animated.View entering={FadeIn} exiting={FadeOut}>
           <SelectPrimitive.Content

package/__generated/components/ui/tooltip.tsx

@@ -11,9 +11,9 @@ const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Portal>
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & { portalHost?: string }
+>(({ className, sideOffset = 4, portalHost, ...props }, ref) => (
+  <TooltipPrimitive.Portal hostName={portalHost}>
     <TooltipPrimitive.Overlay style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}>
       <Animated.View entering={FadeIn} exiting={FadeOut}>
         <TextClassContext.Provider value='text-sm native:text-base text-popover-foreground'>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-reusables/cli",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "Add Universal components and primitives to your React-Native project.",
   "publishConfig": {
     "access": "public"