@react-native-reusables/cli 0.0.16 → 0.0.18

package/__generated/components/primitives/hover-card/hover-card.tsx

@@ -1,13 +1,4 @@
-import * as React from 'react';
-import {
-  BackHandler,
-  Pressable,
-  View,
-  type GestureResponderEvent,
-  type LayoutChangeEvent,
-  type LayoutRectangle,
-} from 'react-native';
-import { useRelativePosition, type LayoutPosition, useControllableState } from '@rnr/hooks';
+import { useAugmentedRef, useRelativePosition, type LayoutPosition } from '@rnr/hooks';
 import { Portal as RNPPortal } from '@rnr/portal';
 import * as Slot from '@rnr/slot';
 import type {
@@ -17,14 +8,26 @@ import type {
   SlottableViewProps,
   ViewRef,
 } from '@rnr/types';
+import * as React from 'react';
+import {
+  BackHandler,
+  Pressable,
+  View,
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+  type LayoutRectangle,
+} from 'react-native';
 import type {
   HoverCardOverlayProps,
   HoverCardPortalProps,
   HoverCardRootProps,
+  HoverCardTriggerRef,
   RootContext,
 } from './types';
 
 interface IRootContext extends RootContext {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
   triggerPosition: LayoutPosition | null;
   setTriggerPosition: (triggerPosition: LayoutPosition | null) => void;
   contentLayout: LayoutRectangle | null;
@@ -38,23 +41,22 @@ const Root = React.forwardRef<ViewRef, SlottableViewProps & HoverCardRootProps>(
   (
     {
       asChild,
-      open: openProp,
-      defaultOpen,
-      onOpenChange: onOpenChangeProp,
       openDelay: _openDelay,
       closeDelay: _closeDelay,
+      onOpenChange: onOpenChangeProp,
       ...viewProps
     },
     ref
   ) => {
     const nativeID = React.useId();
-    const [open = false, onOpenChange] = useControllableState({
-      prop: openProp,
-      defaultProp: defaultOpen,
-      onChange: onOpenChangeProp,
-    });
     const [triggerPosition, setTriggerPosition] = React.useState<LayoutPosition | null>(null);
     const [contentLayout, setContentLayout] = React.useState<LayoutRectangle | null>(null);
+    const [open, setOpen] = React.useState(false);
+
+    function onOpenChange(value: boolean) {
+      setOpen(value);
+      onOpenChangeProp?.(value);
+    }
 
     const Component = asChild ? Slot.View : View;
     return (
@@ -87,36 +89,40 @@ function useRootContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
+const Trigger = React.forwardRef<HoverCardTriggerRef, SlottablePressableProps>(
   ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
-    const triggerRef = React.useRef<View>(null);
     const { open, onOpenChange, setTriggerPosition } = useRootContext();
 
-    React.useImperativeHandle(
+    const augmentedRef = useAugmentedRef({
       ref,
-      () => {
-        if (!triggerRef.current) {
-          return new View({});
-        }
-        return triggerRef.current;
+      methods: {
+        open: () => {
+          onOpenChange(true);
+          augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+            setTriggerPosition({ width, pageX, pageY: pageY, height });
+          });
+        },
+        close: () => {
+          setTriggerPosition(null);
+          onOpenChange(false);
+        },
       },
-      [triggerRef.current]
-    );
+    });
 
     function onPress(ev: GestureResponderEvent) {
       if (disabled) return;
-      triggerRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+      augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
         setTriggerPosition({ width, pageX, pageY: pageY, height });
       });
-      const newValue = !open;
-      onOpenChange(newValue);
+
+      onOpenChange(!open);
       onPressProp?.(ev);
     }
 
     const Component = asChild ? Slot.Pressable : Pressable;
     return (
       <Component
-        ref={triggerRef}
+        ref={augmentedRef}
         aria-disabled={disabled ?? undefined}
         role='button'
         onPress={onPress}
@@ -266,6 +272,8 @@ Content.displayName = 'ContentNativeHoverCard';
 
 export { Content, Overlay, Portal, Root, Trigger, useRootContext };
 
+export type { HoverCardTriggerRef };
+
 function onStartShouldSetResponder() {
   return true;
 }

package/__generated/components/primitives/hover-card/hover-card.web.tsx

@@ -1,6 +1,5 @@
 import * as HoverCard from '@radix-ui/react-hover-card';
-import * as React from 'react';
-import { Pressable, View } from 'react-native';
+import { useAugmentedRef } from '@rnr/hooks';
 import * as Slot from '@rnr/slot';
 import type {
   PositionedContentProps,
@@ -9,40 +8,31 @@ import type {
   SlottableViewProps,
   ViewRef,
 } from '@rnr/types';
+import * as React from 'react';
+import { Pressable, View } from 'react-native';
 import type {
   HoverCardOverlayProps,
   HoverCardPortalProps,
   HoverCardRootProps,
+  HoverCardTriggerRef,
   RootContext,
 } from './types';
-import { useControllableState } from '@rnr/hooks';
 
 const HoverCardContext = React.createContext<RootContext | null>(null);
 
 const Root = React.forwardRef<ViewRef, SlottableViewProps & HoverCardRootProps>(
-  (
-    {
-      asChild,
-      open: openProp,
-      defaultOpen,
-      onOpenChange: onOpenChangeProp,
-      openDelay,
-      closeDelay,
-      ...viewProps
-    },
-    ref
-  ) => {
-    const [open = false, onOpenChange] = useControllableState({
-      prop: openProp,
-      defaultProp: defaultOpen,
-      onChange: onOpenChangeProp,
-    });
+  ({ asChild, openDelay, closeDelay, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+    const [open, setOpen] = React.useState(false);
+
+    function onOpenChange(value: boolean) {
+      setOpen(value);
+      onOpenChangeProp?.(value);
+    }
     const Component = asChild ? Slot.View : View;
     return (
       <HoverCardContext.Provider value={{ open, onOpenChange }}>
         <HoverCard.Root
           open={open}
-          defaultOpen={defaultOpen}
           onOpenChange={onOpenChange}
           openDelay={openDelay}
           closeDelay={closeDelay}
@@ -66,12 +56,25 @@ function useRootContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
+const Trigger = React.forwardRef<HoverCardTriggerRef, SlottablePressableProps>(
   ({ asChild, ...props }, ref) => {
+    const { onOpenChange } = useRootContext();
+    const augmentedRef = useAugmentedRef({
+      ref,
+      methods: {
+        open() {
+          onOpenChange(true);
+        },
+        close() {
+          onOpenChange(false);
+        },
+      },
+    });
+
     const Component = asChild ? Slot.Pressable : Pressable;
     return (
       <HoverCard.Trigger asChild>
-        <Component ref={ref} {...props} />
+        <Component ref={augmentedRef} {...props} />
       </HoverCard.Trigger>
     );
   }
@@ -143,3 +146,5 @@ const Content = React.forwardRef<PressableRef, SlottablePressableProps & Positio
 Content.displayName = 'ContentWebHoverCard';
 
 export { Content, Overlay, Portal, Root, Trigger, useRootContext };
+
+export type { HoverCardTriggerRef };

package/__generated/components/primitives/hover-card/types.ts

@@ -1,4 +1,4 @@
-import type { ForceMountable } from '@rnr/types';
+import type { ForceMountable, PressableRef } from '@rnr/types';
 
 interface RootContext {
   open: boolean;
@@ -8,9 +8,7 @@ interface RootContext {
 }
 
 interface HoverCardRootProps {
-  open?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (value: boolean) => void;
+  onOpenChange?: (open: boolean) => void;
   /**
    * Platform: WEB ONLY
    * @default 700
@@ -39,4 +37,15 @@ interface HoverCardOverlayProps extends ForceMountable {
   closeOnPress?: boolean;
 }
 
-export type { HoverCardRootProps, HoverCardOverlayProps, HoverCardPortalProps, RootContext };
+interface HoverCardTriggerRef extends PressableRef {
+  open: () => void;
+  close: () => void;
+}
+
+export type {
+  HoverCardOverlayProps,
+  HoverCardPortalProps,
+  HoverCardRootProps,
+  HoverCardTriggerRef,
+  RootContext,
+};

package/__generated/components/primitives/menubar/menubar.tsx

@@ -1,14 +1,9 @@
-import * as React from 'react';
 import {
-  BackHandler,
-  Pressable,
-  Text,
-  View,
-  type GestureResponderEvent,
-  type LayoutChangeEvent,
-  type LayoutRectangle,
-} from 'react-native';
-import { useRelativePosition, type LayoutPosition } from '@rnr/hooks';
+  useAugmentedRef,
+  useControllableState,
+  useRelativePosition,
+  type LayoutPosition,
+} from '@rnr/hooks';
 import { Portal as RNPPortal } from '@rnr/portal';
 import * as Slot from '@rnr/slot';
 import type {
@@ -21,6 +16,16 @@ import type {
   TextRef,
   ViewRef,
 } from '@rnr/types';
+import * as React from 'react';
+import {
+  BackHandler,
+  Pressable,
+  Text,
+  View,
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+  type LayoutRectangle,
+} from 'react-native';
 import type {
   MenubarCheckboxItemProps,
   MenubarItemProps,
@@ -109,21 +114,10 @@ function useMenuContext() {
 
 const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
   ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
-    const triggerRef = React.useRef<View>(null);
+    const triggerRef = useAugmentedRef({ ref });
     const { value, onValueChange, setTriggerPosition } = useRootContext();
     const { value: menuValue } = useMenuContext();
 
-    React.useImperativeHandle(
-      ref,
-      () => {
-        if (!triggerRef.current) {
-          return new View({});
-        }
-        return triggerRef.current;
-      },
-      [triggerRef.current]
-    );
-
     function onPress(ev: GestureResponderEvent) {
       if (disabled) return;
       triggerRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
@@ -383,7 +377,6 @@ const CheckboxItem = React.forwardRef<
       <FormItemContext.Provider value={{ checked }}>
         <Component
           ref={ref}
-          key={`checkbox-${nativeID}-${checked}`}
           role='checkbox'
           aria-checked={checked}
           onPress={onPress}
@@ -522,8 +515,13 @@ const SubContext = React.createContext<{
 } | null>(null);
 
 const Sub = React.forwardRef<ViewRef, SlottableViewProps & MenubarSubProps>(
-  ({ asChild, open, onOpenChange, ...props }, ref) => {
+  ({ asChild, defaultOpen, open: openProp, onOpenChange: onOpenChangeProp, ...props }, ref) => {
     const nativeID = React.useId();
+    const [open = false, onOpenChange] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChangeProp,
+    });
 
     const Component = asChild ? Slot.View : View;
     return (

package/__generated/components/primitives/menubar/menubar.web.tsx

@@ -1,7 +1,5 @@
 import * as Menubar from '@radix-ui/react-menubar';
-import * as React from 'react';
-import { GestureResponderEvent, Pressable, Text, View } from 'react-native';
-import { useAugmentedRef } from '@rnr/hooks';
+import { useAugmentedRef, useControllableState } from '@rnr/hooks';
 import * as Slot from '@rnr/slot';
 import type {
   ForceMountable,
@@ -14,6 +12,8 @@ import type {
   ViewRef,
 } from '@rnr/types';
 import { EmptyGestureResponderEvent } from '@rnr/utils';
+import * as React from 'react';
+import { GestureResponderEvent, Pressable, Text, View } from 'react-native';
 import type {
   MenubarCheckboxItemProps,
   MenubarItemProps,
@@ -463,7 +463,12 @@ const MenubarSubContext = React.createContext<{
 } | null>(null);
 
 const Sub = React.forwardRef<ViewRef, SlottableViewProps & MenubarSubProps>(
-  ({ asChild, open, onOpenChange, ...props }, ref) => {
+  ({ asChild, defaultOpen, open: openProp, onOpenChange: onOpenChangeProp, ...props }, ref) => {
+    const [open = false, onOpenChange] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChangeProp,
+    });
     const Component = asChild ? Slot.View : View;
     return (
       <MenubarSubContext.Provider value={{ open, onOpenChange }}>
@@ -533,8 +538,8 @@ export {
   SubContent,
   SubTrigger,
   Trigger,
-  useRootContext,
   useMenuContext,
+  useRootContext,
   useSubContext,
 };
 

package/__generated/components/primitives/menubar/types.ts

@@ -53,8 +53,9 @@ interface MenubarSeparatorProps {
 }
 
 interface MenubarSubProps {
-  open: boolean;
-  onOpenChange: (value: boolean) => void;
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (value: boolean) => void;
 }
 
 interface MenubarSubTriggerProps {

package/__generated/components/primitives/popover/popover.tsx

@@ -1,4 +1,4 @@
-import { useControllableState, useRelativePosition, type LayoutPosition } from '@rnr/hooks';
+import { useAugmentedRef, useRelativePosition, type LayoutPosition } from '@rnr/hooks';
 import { Portal as RNPPortal } from '@rnr/portal';
 import * as Slot from '@rnr/slot';
 import type {
@@ -17,14 +17,11 @@ import {
   type LayoutChangeEvent,
   type LayoutRectangle,
 } from 'react-native';
-import type {
-  PopoverOverlayProps,
-  PopoverPortalProps,
-  PopoverRootProps,
-  RootContext,
-} from './types';
+import type { PopoverOverlayProps, PopoverPortalProps, PopoverTriggerRef } from './types';
 
-interface IRootContext extends RootContext {
+interface IRootContext {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
   triggerPosition: LayoutPosition | null;
   setTriggerPosition: (triggerPosition: LayoutPosition | null) => void;
   contentLayout: LayoutRectangle | null;
@@ -34,39 +31,41 @@ interface IRootContext extends RootContext {
 
 const RootContext = React.createContext<IRootContext | null>(null);
 
-const Root = React.forwardRef<ViewRef, SlottableViewProps & PopoverRootProps>(
-  ({ asChild, open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
-    const [open = false, onOpenChange] = useControllableState({
-      prop: openProp,
-      defaultProp: defaultOpen,
-      onChange: onOpenChangeProp,
-    });
-    const nativeID = React.useId();
-    const [triggerPosition, setTriggerPosition] = React.useState<LayoutPosition | null>(null);
-    const [contentLayout, setContentLayout] = React.useState<LayoutRectangle | null>(null);
-
-    const Component = asChild ? Slot.View : View;
-    return (
-      <RootContext.Provider
-        value={{
-          open,
-          onOpenChange,
-          contentLayout,
-          nativeID,
-          setContentLayout,
-          setTriggerPosition,
-          triggerPosition,
-        }}
-      >
-        <Component ref={ref} {...viewProps} />
-      </RootContext.Provider>
-    );
+const Root = React.forwardRef<
+  ViewRef,
+  SlottableViewProps & { onOpenChange?: (open: boolean) => void }
+>(({ asChild, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+  const nativeID = React.useId();
+  const [triggerPosition, setTriggerPosition] = React.useState<LayoutPosition | null>(null);
+  const [contentLayout, setContentLayout] = React.useState<LayoutRectangle | null>(null);
+  const [open, setOpen] = React.useState(false);
+
+  function onOpenChange(value: boolean) {
+    setOpen(value);
+    onOpenChangeProp?.(value);
   }
-);
+
+  const Component = asChild ? Slot.View : View;
+  return (
+    <RootContext.Provider
+      value={{
+        open,
+        onOpenChange,
+        contentLayout,
+        nativeID,
+        setContentLayout,
+        setTriggerPosition,
+        triggerPosition,
+      }}
+    >
+      <Component ref={ref} {...viewProps} />
+    </RootContext.Provider>
+  );
+});
 
 Root.displayName = 'RootNativePopover';
 
-function usePopoverContext() {
+function useRootContext() {
   const context = React.useContext(RootContext);
   if (!context) {
     throw new Error('Popover compound components cannot be rendered outside the Popover component');
@@ -74,36 +73,39 @@ function usePopoverContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
+const Trigger = React.forwardRef<PopoverTriggerRef, SlottablePressableProps>(
   ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
-    const triggerRef = React.useRef<View>(null);
-    const { open, onOpenChange, setTriggerPosition } = usePopoverContext();
+    const { onOpenChange, setTriggerPosition } = useRootContext();
 
-    React.useImperativeHandle(
+    const augmentedRef = useAugmentedRef({
       ref,
-      () => {
-        if (!triggerRef.current) {
-          return new View({});
-        }
-        return triggerRef.current;
+      methods: {
+        open: () => {
+          onOpenChange(true);
+          augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+            setTriggerPosition({ width, pageX, pageY: pageY, height });
+          });
+        },
+        close: () => {
+          setTriggerPosition(null);
+          onOpenChange(false);
+        },
       },
-      [triggerRef.current]
-    );
+    });
 
     function onPress(ev: GestureResponderEvent) {
       if (disabled) return;
-      triggerRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+      augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
         setTriggerPosition({ width, pageX, pageY: pageY, height });
       });
-      const newValue = !open;
-      onOpenChange(newValue);
+      onOpenChange(!open);
       onPressProp?.(ev);
     }
 
     const Component = asChild ? Slot.Pressable : Pressable;
     return (
       <Component
-        ref={triggerRef}
+        ref={augmentedRef}
         aria-disabled={disabled ?? undefined}
         role='button'
         onPress={onPress}
@@ -120,7 +122,7 @@ Trigger.displayName = 'TriggerNativePopover';
  * @warning when using a custom `<PortalHost />`, you might have to adjust the Content's sideOffset to account for nav elements like headers.
  */
 function Portal({ forceMount, hostName, children }: PopoverPortalProps) {
-  const value = usePopoverContext();
+  const value = useRootContext();
 
   if (!value.triggerPosition) {
     return null;
@@ -141,7 +143,7 @@ function Portal({ forceMount, hostName, children }: PopoverPortalProps) {
 
 const Overlay = React.forwardRef<PressableRef, SlottablePressableProps & PopoverOverlayProps>(
   ({ asChild, forceMount, onPress: OnPressProp, closeOnPress = true, ...props }, ref) => {
-    const { open, onOpenChange, setTriggerPosition, setContentLayout } = usePopoverContext();
+    const { open, onOpenChange, setTriggerPosition, setContentLayout } = useRootContext();
 
     function onPress(ev: GestureResponderEvent) {
       if (closeOnPress) {
@@ -194,7 +196,7 @@ const Content = React.forwardRef<ViewRef, SlottableViewProps & PositionedContent
       setContentLayout,
       setTriggerPosition,
       triggerPosition,
-    } = usePopoverContext();
+    } = useRootContext();
 
     React.useEffect(() => {
       const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
@@ -253,7 +255,7 @@ Content.displayName = 'ContentNativePopover';
 
 const Close = React.forwardRef<PressableRef, SlottablePressableProps>(
   ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
-    const { onOpenChange, setContentLayout, setTriggerPosition } = usePopoverContext();
+    const { onOpenChange, setContentLayout, setTriggerPosition } = useRootContext();
 
     function onPress(ev: GestureResponderEvent) {
       if (disabled) return;
@@ -279,7 +281,9 @@ const Close = React.forwardRef<PressableRef, SlottablePressableProps>(
 
 Close.displayName = 'CloseNativePopover';
 
-export { Close, Content, Overlay, Portal, Root, Trigger, usePopoverContext };
+export { Close, Content, Overlay, Portal, Root, Trigger, useRootContext };
+
+export type { PopoverTriggerRef };
 
 function onStartShouldSetResponder() {
   return true;