@react-native-reusables/cli 0.0.16 → 0.0.18

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

@@ -1,15 +1,9 @@
-import * as React from 'react';
 import {
-  BackHandler,
-  Pressable,
-  Text,
-  View,
-  type AccessibilityActionEvent,
-  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 {
@@ -22,6 +16,17 @@ import type {
   TextRef,
   ViewRef,
 } from '@rnr/types';
+import * as React from 'react';
+import {
+  BackHandler,
+  Pressable,
+  Text,
+  View,
+  type AccessibilityActionEvent,
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+  type LayoutRectangle,
+} from 'react-native';
 import type {
   ContextMenuCheckboxItemProps,
   ContextMenuItemProps,
@@ -33,9 +38,12 @@ import type {
   ContextMenuSeparatorProps,
   ContextMenuSubProps,
   ContextMenuSubTriggerProps,
+  ContextMenuTriggerRef,
 } from './types';
 
 interface IRootContext extends ContextMenuRootProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
   pressPosition: LayoutPosition | null;
   setPressPosition: (pressPosition: LayoutPosition | null) => void;
   contentLayout: LayoutRectangle | null;
@@ -46,10 +54,16 @@ interface IRootContext extends ContextMenuRootProps {
 const RootContext = React.createContext<IRootContext | null>(null);
 
 const Root = React.forwardRef<ViewRef, SlottableViewProps & ContextMenuRootProps>(
-  ({ asChild, open, onOpenChange, relativeTo = 'longPress', ...viewProps }, ref) => {
+  ({ asChild, relativeTo = 'longPress', onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
     const nativeID = React.useId();
     const [pressPosition, setPressPosition] = 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 (
@@ -85,7 +99,7 @@ function useRootContext() {
 
 const accessibilityActions = [{ name: 'longpress' }];
 
-const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
+const Trigger = React.forwardRef<ContextMenuTriggerRef, SlottablePressableProps>(
   (
     {
       asChild,
@@ -96,19 +110,22 @@ const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
     },
     ref
   ) => {
-    const triggerRef = React.useRef<View>(null);
     const { open, onOpenChange, relativeTo, setPressPosition } = 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) => {
+            setPressPosition({ width, pageX, pageY: pageY, height });
+          });
+        },
+        close: () => {
+          setPressPosition(null);
+          onOpenChange(false);
+        },
       },
-      [triggerRef.current]
-    );
+    });
 
     function onLongPress(ev: GestureResponderEvent) {
       if (disabled) return;
@@ -121,7 +138,7 @@ const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
         });
       }
       if (relativeTo === 'trigger') {
-        triggerRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+        augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
           setPressPosition({ width, pageX, pageY: pageY, height });
         });
       }
@@ -147,7 +164,7 @@ const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
     const Component = asChild ? Slot.Pressable : Pressable;
     return (
       <Component
-        ref={triggerRef}
+        ref={augmentedRef}
         aria-disabled={disabled ?? undefined}
         role='button'
         onLongPress={onLongPress}
@@ -386,7 +403,6 @@ const CheckboxItem = React.forwardRef<
       <FormItemContext.Provider value={{ checked }}>
         <Component
           ref={ref}
-          key={`checkbox-${nativeID}-${checked}`}
           role='checkbox'
           aria-checked={checked}
           onPress={onPress}
@@ -524,8 +540,13 @@ const SubContext = React.createContext<{
 } | null>(null);
 
 const Sub = React.forwardRef<ViewRef, SlottableViewProps & ContextMenuSubProps>(
-  ({ 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 (
@@ -567,7 +588,6 @@ const SubTrigger = React.forwardRef<
   return (
     <Component
       ref={ref}
-      key={`sub-trigger-${nativeID}-${open}`}
       aria-valuetext={textValue}
       role='menuitem'
       aria-expanded={open}
@@ -621,6 +641,8 @@ export {
   useSubContext,
 };
 
+export type { ContextMenuTriggerRef };
+
 function onStartShouldSetResponder() {
   return true;
 }

package/__generated/components/primitives/context-menu/context-menu.web.tsx

@@ -1,8 +1,6 @@
 import * as ContextMenu from '@radix-ui/react-context-menu';
-import * as React from 'react';
-import { GestureResponderEvent, Pressable, Text, View } from 'react-native';
+import { useAugmentedRef, useControllableState } from '@rnr/hooks';
 import * as Slot from '@rnr/slot';
-import { useAugmentedRef } from '@rnr/hooks';
 import type {
   ForceMountable,
   PositionedContentProps,
@@ -13,6 +11,9 @@ import type {
   TextRef,
   ViewRef,
 } from '@rnr/types';
+import { EmptyGestureResponderEvent } from '@rnr/utils';
+import * as React from 'react';
+import { GestureResponderEvent, Pressable, Text, View } from 'react-native';
 import type {
   ContextMenuCheckboxItemProps,
   ContextMenuItemProps,
@@ -24,13 +25,23 @@ import type {
   ContextMenuSeparatorProps,
   ContextMenuSubProps,
   ContextMenuSubTriggerProps,
+  ContextMenuTriggerRef,
 } from './types';
-import { EmptyGestureResponderEvent } from '@rnr/utils';
 
-const ContextMenuContext = React.createContext<ContextMenuRootProps | null>(null);
+const ContextMenuContext = React.createContext<{
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+} | null>(null);
 
 const Root = React.forwardRef<ViewRef, SlottableViewProps & ContextMenuRootProps>(
-  ({ asChild, open, onOpenChange, ...viewProps }, ref) => {
+  ({ asChild, 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 (
       <ContextMenuContext.Provider value={{ open, onOpenChange }}>
@@ -54,10 +65,20 @@ function useRootContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
+const Trigger = React.forwardRef<ContextMenuTriggerRef, SlottablePressableProps>(
   ({ asChild, disabled = false, ...props }, ref) => {
-    const augmentedRef = useAugmentedRef({ ref });
     const { open } = useRootContext();
+    const augmentedRef = useAugmentedRef({
+      ref,
+      methods: {
+        open() {
+          console.warn('Warning: `open()` is only for Native platforms');
+        },
+        close() {
+          console.warn('Warning: `close()` is only for Native platforms');
+        },
+      },
+    });
 
     React.useLayoutEffect(() => {
       if (augmentedRef.current) {
@@ -425,7 +446,13 @@ const ContextMenuSubContext = React.createContext<{
 } | null>(null);
 
 const Sub = React.forwardRef<ViewRef, SlottableViewProps & ContextMenuSubProps>(
-  ({ 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 (
       <ContextMenuSubContext.Provider value={{ open, onOpenChange }}>
@@ -495,10 +522,12 @@ export {
   SubContent,
   SubTrigger,
   Trigger,
-  useSubContext,
   useRootContext,
+  useSubContext,
 };
 
+export type { ContextMenuTriggerRef };
+
 function onSelected(ev: Event) {
   ev.preventDefault();
 }

package/__generated/components/primitives/context-menu/types.ts

@@ -1,12 +1,7 @@
-import { ForceMountable } from '@rnr/types';
+import { ForceMountable, PressableRef } from '@rnr/types';
 
 interface ContextMenuRootProps {
-  /**
-   * Platform: NATIVE ONLY
-   */
-  open: boolean;
-  onOpenChange: (value: boolean) => void;
-
+  onOpenChange?: (open: boolean) => void;
   /**
    * Platform: NATIVE ONLY
    */
@@ -60,14 +55,26 @@ interface ContextMenuSeparatorProps {
 }
 
 interface ContextMenuSubProps {
-  open: boolean;
-  onOpenChange: (value: boolean) => void;
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (value: boolean) => void;
 }
 
 interface ContextMenuSubTriggerProps {
   textValue?: string;
 }
 
+interface ContextMenuTriggerRef extends PressableRef {
+  /**
+   * Platform: NATIVE ONLY
+   */
+  open: () => void;
+  /**
+   * Platform: NATIVE ONLY
+   */
+  close: () => void;
+}
+
 export type {
   ContextMenuCheckboxItemProps,
   ContextMenuItemProps,
@@ -79,4 +86,5 @@ export type {
   ContextMenuSeparatorProps,
   ContextMenuSubProps,
   ContextMenuSubTriggerProps,
+  ContextMenuTriggerRef,
 };

package/__generated/components/primitives/dropdown-menu/dropdown-menu.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 {
   DropdownMenuCheckboxItemProps,
   DropdownMenuItemProps,
@@ -28,13 +33,15 @@ import type {
   DropdownMenuPortalProps,
   DropdownMenuRadioGroupProps,
   DropdownMenuRadioItemProps,
-  DropdownMenuRootProps,
   DropdownMenuSeparatorProps,
   DropdownMenuSubProps,
   DropdownMenuSubTriggerProps,
+  DropdownMenuTriggerRef,
 } from './types';
 
-interface IRootContext extends DropdownMenuRootProps {
+interface IRootContext {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
   triggerPosition: LayoutPosition | null;
   setTriggerPosition: (triggerPosition: LayoutPosition | null) => void;
   contentLayout: LayoutRectangle | null;
@@ -44,30 +51,37 @@ interface IRootContext extends DropdownMenuRootProps {
 
 const RootContext = React.createContext<IRootContext | null>(null);
 
-const Root = React.forwardRef<ViewRef, SlottableViewProps & DropdownMenuRootProps>(
-  ({ asChild, open, onOpenChange, ...viewProps }, ref) => {
-    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,
-          setContentLayout,
-          nativeID,
-          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(open: boolean) {
+    setOpen(open);
+    onOpenChangeProp?.(open);
   }
-);
+
+  const Component = asChild ? Slot.View : View;
+  return (
+    <RootContext.Provider
+      value={{
+        open,
+        onOpenChange,
+        contentLayout,
+        setContentLayout,
+        nativeID,
+        setTriggerPosition,
+        triggerPosition,
+      }}
+    >
+      <Component ref={ref} {...viewProps} />
+    </RootContext.Provider>
+  );
+});
 
 Root.displayName = 'RootNativeDropdownMenu';
 
@@ -81,25 +95,29 @@ function useRootContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
+const Trigger = React.forwardRef<DropdownMenuTriggerRef, 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;
@@ -110,7 +128,7 @@ const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
     const Component = asChild ? Slot.Pressable : Pressable;
     return (
       <Component
-        ref={triggerRef}
+        ref={augmentedRef}
         aria-disabled={disabled ?? undefined}
         role='button'
         onPress={onPress}
@@ -349,7 +367,6 @@ const CheckboxItem = React.forwardRef<
       <FormItemContext.Provider value={{ checked }}>
         <Component
           ref={ref}
-          key={`checkbox-${nativeID}-${checked}`}
           role='checkbox'
           aria-checked={checked}
           onPress={onPress}
@@ -487,8 +504,13 @@ const SubContext = React.createContext<{
 } | null>(null);
 
 const Sub = React.forwardRef<ViewRef, SlottableViewProps & DropdownMenuSubProps>(
-  ({ 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 (
@@ -582,3 +604,5 @@ export {
   useRootContext,
   useSubContext,
 };
+
+export type { DropdownMenuTriggerRef };

package/__generated/components/primitives/dropdown-menu/dropdown-menu.web.tsx

@@ -1,7 +1,5 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-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 {
   DropdownMenuCheckboxItemProps,
   DropdownMenuItemProps,
@@ -21,26 +21,37 @@ import type {
   DropdownMenuPortalProps,
   DropdownMenuRadioGroupProps,
   DropdownMenuRadioItemProps,
-  DropdownMenuRootProps,
   DropdownMenuSeparatorProps,
   DropdownMenuSubProps,
   DropdownMenuSubTriggerProps,
+  DropdownMenuTriggerRef,
 } from './types';
 
-const DropdownMenuContext = React.createContext<DropdownMenuRootProps | null>(null);
+const DropdownMenuContext = React.createContext<{
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+} | null>(null);
 
-const Root = React.forwardRef<ViewRef, SlottableViewProps & DropdownMenuRootProps>(
-  ({ asChild, open, onOpenChange, ...viewProps }, ref) => {
-    const Component = asChild ? Slot.View : View;
-    return (
-      <DropdownMenuContext.Provider value={{ open, onOpenChange }}>
-        <DropdownMenu.Root open={open} onOpenChange={onOpenChange}>
-          <Component ref={ref} {...viewProps} />
-        </DropdownMenu.Root>
-      </DropdownMenuContext.Provider>
-    );
+const Root = React.forwardRef<
+  ViewRef,
+  SlottableViewProps & { onOpenChange?: (open: boolean) => void }
+>(({ asChild, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+  const [open, setOpen] = React.useState(false);
+
+  function onOpenChange(open: boolean) {
+    setOpen(open);
+    onOpenChangeProp?.(open);
   }
-);
+
+  const Component = asChild ? Slot.View : View;
+  return (
+    <DropdownMenuContext.Provider value={{ open, onOpenChange }}>
+      <DropdownMenu.Root open={open} onOpenChange={onOpenChange}>
+        <Component ref={ref} {...viewProps} />
+      </DropdownMenu.Root>
+    </DropdownMenuContext.Provider>
+  );
+});
 
 Root.displayName = 'RootWebDropdownMenu';
 
@@ -54,10 +65,20 @@ function useRootContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
+const Trigger = React.forwardRef<DropdownMenuTriggerRef, SlottablePressableProps>(
   ({ asChild, disabled = false, ...props }, ref) => {
-    const augmentedRef = useAugmentedRef({ ref });
-    const { open } = useRootContext();
+    const { open, onOpenChange } = useRootContext();
+    const augmentedRef = useAugmentedRef({
+      ref,
+      methods: {
+        open() {
+          onOpenChange(true);
+        },
+        close() {
+          onOpenChange(false);
+        },
+      },
+    });
 
     React.useLayoutEffect(() => {
       if (augmentedRef.current) {
@@ -442,7 +463,13 @@ const DropdownMenuSubContext = React.createContext<{
 } | null>(null);
 
 const Sub = React.forwardRef<ViewRef, SlottableViewProps & DropdownMenuSubProps>(
-  ({ 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 (
       <DropdownMenuSubContext.Provider value={{ open, onOpenChange }}>
@@ -516,6 +543,8 @@ export {
   useSubContext,
 };
 
+export type { DropdownMenuTriggerRef };
+
 function onSelected(ev: Event) {
   ev.preventDefault();
 }

package/__generated/components/primitives/dropdown-menu/types.ts

@@ -1,9 +1,4 @@
-import type { ForceMountable } from '@rnr/types';
-
-interface DropdownMenuRootProps {
-  open: boolean;
-  onOpenChange: (value: boolean) => void;
-}
+import type { ForceMountable, PressableRef } from '@rnr/types';
 
 interface DropdownMenuPortalProps extends ForceMountable {
   children: React.ReactNode;
@@ -49,14 +44,20 @@ interface DropdownMenuSeparatorProps {
 }
 
 interface DropdownMenuSubProps {
-  open: boolean;
-  onOpenChange: (value: boolean) => void;
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (value: boolean) => void;
 }
 
 interface DropdownMenuSubTriggerProps {
   textValue?: string;
 }
 
+interface DropdownMenuTriggerRef extends PressableRef {
+  open: () => void;
+  close: () => void;
+}
+
 export type {
   DropdownMenuCheckboxItemProps,
   DropdownMenuItemProps,
@@ -64,8 +65,8 @@ export type {
   DropdownMenuPortalProps,
   DropdownMenuRadioGroupProps,
   DropdownMenuRadioItemProps,
-  DropdownMenuRootProps,
   DropdownMenuSeparatorProps,
   DropdownMenuSubProps,
   DropdownMenuSubTriggerProps,
+  DropdownMenuTriggerRef,
 };