@react-native-reusables/cli 0.0.8 → 0.0.10

package/dist/generated/components/primitives/navigation-menu/navigation-menu.tsx

@@ -0,0 +1,315 @@
+import * as React from 'react';
+import {
+  BackHandler,
+  Pressable,
+  View,
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+  type LayoutRectangle,
+} from 'react-native';
+import { useRelativePosition, type LayoutPosition } from '@rnr/hooks';
+import { Portal as RNPPortal } from '@rnr/portal';
+import * as Slot from '@rnr/slot';
+import type {
+  PositionedContentProps,
+  PressableRef,
+  SlottablePressableProps,
+  SlottableViewProps,
+  ViewRef,
+} from '@rnr/types';
+import type {
+  NavigationMenuItemProps,
+  NavigationMenuLinkProps,
+  NavigationMenuPortalProps,
+  NavigationMenuRootProps,
+} from './types';
+
+interface INavigationMenuRootContext extends NavigationMenuRootProps {
+  triggerPosition: LayoutPosition | null;
+  setTriggerPosition: (triggerPosition: LayoutPosition | null) => void;
+  contentLayout: LayoutRectangle | null;
+  setContentLayout: (contentLayout: LayoutRectangle | null) => void;
+  nativeID: string;
+}
+
+const RootContext = React.createContext<INavigationMenuRootContext | null>(null);
+
+const Root = React.forwardRef<ViewRef, SlottableViewProps & NavigationMenuRootProps>(
+  ({ asChild, value, onValueChange, ...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={{
+          value,
+          onValueChange,
+          nativeID,
+          contentLayout,
+          setContentLayout,
+          setTriggerPosition,
+          triggerPosition,
+        }}
+      >
+        <Component ref={ref} role='navigation' {...viewProps} />
+      </RootContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'RootNativeNavigationMenu';
+
+function useRootContext() {
+  const context = React.useContext(RootContext);
+  if (!context) {
+    throw new Error(
+      'NavigationMenu compound components cannot be rendered outside the NavigationMenu component'
+    );
+  }
+  return context;
+}
+
+const List = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...viewProps }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return <Component ref={ref} role='menubar' {...viewProps} />;
+});
+
+List.displayName = 'ListNativeNavigationMenu';
+
+const ItemContext = React.createContext<(NavigationMenuItemProps & { nativeID: string }) | null>(
+  null
+);
+
+const Item = React.forwardRef<ViewRef, SlottableViewProps & NavigationMenuItemProps>(
+  ({ asChild, value, ...viewProps }, ref) => {
+    const nativeID = React.useId();
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <ItemContext.Provider
+        value={{
+          value,
+          nativeID,
+        }}
+      >
+        <Component ref={ref} role='menuitem' {...viewProps} />
+      </ItemContext.Provider>
+    );
+  }
+);
+
+Item.displayName = 'ItemNativeNavigationMenu';
+
+function useItemContext() {
+  const context = React.useContext(ItemContext);
+  if (!context) {
+    throw new Error(
+      'NavigationMenu compound components cannot be rendered outside the NavigationMenu component'
+    );
+  }
+  return context;
+}
+
+const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
+  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+    const triggerRef = React.useRef<View>(null);
+    const { value, onValueChange, setTriggerPosition } = useRootContext();
+    const { value: menuValue } = useItemContext();
+
+    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) => {
+        setTriggerPosition({ width, pageX, pageY: pageY, height });
+      });
+
+      onValueChange(menuValue === value ? '' : menuValue);
+      onPressProp?.(ev);
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <Component
+        ref={triggerRef}
+        aria-disabled={disabled ?? undefined}
+        role='button'
+        onPress={onPress}
+        disabled={disabled ?? undefined}
+        aria-expanded={value === menuValue}
+        {...props}
+      />
+    );
+  }
+);
+
+Trigger.displayName = 'TriggerNativeNavigationMenu';
+
+/**
+ * @warning when using a custom `<PortalHost />`, you will have to adjust the Content's sideOffset to account for nav elements like headers.
+ */
+function Portal({ forceMount, hostName, children }: NavigationMenuPortalProps) {
+  const navigationMenu = useRootContext();
+  const item = useItemContext();
+
+  if (!navigationMenu.triggerPosition) {
+    return null;
+  }
+
+  if (!forceMount) {
+    if (navigationMenu.value !== item.value) {
+      return null;
+    }
+  }
+
+  return (
+    <RNPPortal hostName={hostName} name={`${navigationMenu.nativeID}_portal_provider`}>
+      <RootContext.Provider
+        value={navigationMenu}
+        key={`RootContext_${navigationMenu.nativeID}_portal_provider`}
+      >
+        <ItemContext.Provider value={item}>{children}</ItemContext.Provider>
+      </RootContext.Provider>
+    </RNPPortal>
+  );
+}
+
+/**
+ * @info `position`, `top`, `left`, and `maxWidth` style properties are controlled internally. Opt out of this behavior by setting `disablePositioningStyle` to `true`.
+ */
+const Content = React.forwardRef<ViewRef, SlottableViewProps & PositionedContentProps>(
+  (
+    {
+      asChild = false,
+      forceMount,
+      align = 'center',
+      side = 'bottom',
+      sideOffset = 0,
+      alignOffset = 0,
+      avoidCollisions = true,
+      onLayout: onLayoutProp,
+      insets,
+      style,
+      disablePositioningStyle,
+      ...props
+    },
+    ref
+  ) => {
+    const {
+      value,
+      onValueChange,
+      triggerPosition,
+      setTriggerPosition,
+      contentLayout,
+      setContentLayout,
+    } = useRootContext();
+    const { value: menuValue, nativeID } = useItemContext();
+
+    React.useEffect(() => {
+      const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
+        setTriggerPosition(null);
+        setContentLayout(null);
+        onValueChange('');
+        return true;
+      });
+
+      return () => {
+        setContentLayout(null);
+        backHandler.remove();
+      };
+    }, []);
+
+    const positionStyle = useRelativePosition({
+      align,
+      avoidCollisions,
+      triggerPosition,
+      contentLayout,
+      alignOffset,
+      insets,
+      sideOffset,
+      side,
+      disablePositioningStyle,
+    });
+
+    function onLayout(event: LayoutChangeEvent) {
+      setContentLayout(event.nativeEvent.layout);
+      onLayoutProp?.(event);
+    }
+
+    if (!forceMount) {
+      if (value !== menuValue) {
+        return null;
+      }
+    }
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <Component
+        ref={ref}
+        role='menu'
+        nativeID={nativeID}
+        aria-modal={true}
+        style={[positionStyle, style]}
+        onLayout={onLayout}
+        onStartShouldSetResponder={onStartShouldSetResponder}
+        {...props}
+      />
+    );
+  }
+);
+
+Content.displayName = 'ContentNativeNavigationMenu';
+
+const Link = React.forwardRef<PressableRef, SlottablePressableProps & NavigationMenuLinkProps>(
+  ({ asChild, ...props }, ref) => {
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return <Component ref={ref} role='link' {...props} />;
+  }
+);
+
+Link.displayName = 'LinkNativeNavigationMenu';
+
+const Viewport = React.forwardRef<
+  ViewRef,
+  Omit<React.ComponentPropsWithoutRef<typeof View>, 'children'>
+>((props, ref) => {
+  return <View ref={ref} {...props} />;
+});
+
+Viewport.displayName = 'ViewportNativeNavigationMenu';
+
+const Indicator = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return <Component ref={ref} {...props} />;
+});
+
+Indicator.displayName = 'IndicatorNativeNavigationMenu';
+
+export {
+  Content,
+  Indicator,
+  Item,
+  Link,
+  List,
+  Portal,
+  Root,
+  Trigger,
+  Viewport,
+  useItemContext,
+  useRootContext,
+};
+
+function onStartShouldSetResponder() {
+  return true;
+}

package/dist/generated/components/primitives/navigation-menu/navigation-menu.web.tsx

@@ -0,0 +1,264 @@
+import * as NavigationMenu from '@radix-ui/react-navigation-menu';
+import * as React from 'react';
+import { GestureResponderEvent, Pressable, View } from 'react-native';
+import { useAugmentedRef } from '@rnr/hooks';
+import * as Slot from '@rnr/slot';
+import type {
+  PositionedContentProps,
+  PressableRef,
+  SlottablePressableProps,
+  SlottableViewProps,
+  ViewRef,
+} from '@rnr/types';
+import { EmptyGestureResponderEvent } from '@rnr/utils';
+import type {
+  NavigationMenuItemProps,
+  NavigationMenuLinkProps,
+  NavigationMenuPortalProps,
+  NavigationMenuRootProps,
+} from './types';
+
+const NavigationMenuContext = React.createContext<NavigationMenuRootProps | null>(null);
+
+const Root = React.forwardRef<ViewRef, SlottableViewProps & NavigationMenuRootProps>(
+  (
+    {
+      asChild,
+      value,
+      onValueChange,
+      delayDuration,
+      skipDelayDuration,
+      dir,
+      orientation,
+      ...viewProps
+    },
+    ref
+  ) => {
+    const Component = asChild ? Slot.View : View;
+    return (
+      <NavigationMenuContext.Provider value={{ value, onValueChange, orientation }}>
+        <NavigationMenu.Root
+          value={value}
+          onValueChange={onValueChange}
+          delayDuration={delayDuration}
+          skipDelayDuration={skipDelayDuration}
+          dir={dir}
+          orientation={orientation}
+        >
+          <Component ref={ref} {...viewProps} />
+        </NavigationMenu.Root>
+      </NavigationMenuContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'RootWebNavigationMenu';
+
+function useRootContext() {
+  const context = React.useContext(NavigationMenuContext);
+  if (!context) {
+    throw new Error(
+      'NavigationMenu compound components cannot be rendered outside the NavigationMenu component'
+    );
+  }
+  return context;
+}
+
+const List = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...viewProps }, ref) => {
+  const augmentedRef = useAugmentedRef({ ref });
+  const { orientation } = useRootContext();
+
+  React.useLayoutEffect(() => {
+    if (augmentedRef.current) {
+      const augRef = augmentedRef.current as unknown as HTMLDivElement;
+      augRef.dataset.orientation = orientation;
+    }
+  }, [orientation]);
+
+  const Component = asChild ? Slot.View : View;
+  return (
+    <NavigationMenu.List asChild>
+      <Component ref={ref} {...viewProps} />
+    </NavigationMenu.List>
+  );
+});
+
+List.displayName = 'ListWebNavigationMenu';
+
+const ItemContext = React.createContext<NavigationMenuItemProps | null>(null);
+
+const Item = React.forwardRef<ViewRef, SlottableViewProps & NavigationMenuItemProps>(
+  ({ asChild, value, ...props }, ref) => {
+    const Component = asChild ? Slot.View : View;
+    return (
+      <ItemContext.Provider value={{ value }}>
+        <NavigationMenu.Item value={value} asChild>
+          <Component ref={ref} {...props} />
+        </NavigationMenu.Item>
+      </ItemContext.Provider>
+    );
+  }
+);
+
+Item.displayName = 'ItemWebNavigationMenu';
+
+function useItemContext() {
+  const context = React.useContext(ItemContext);
+  if (!context) {
+    throw new Error(
+      'NavigationMenu compound components cannot be rendered outside the NavigationMenu component'
+    );
+  }
+  return context;
+}
+
+const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
+  (
+    { asChild, onPress: onPressProp, disabled = false, onKeyDown: onKeyDownProp, ...props },
+    ref
+  ) => {
+    const { value: rootValue, onValueChange } = useRootContext();
+    const { value } = useItemContext();
+    function onKeyDown(ev: React.KeyboardEvent) {
+      onKeyDownProp?.(ev);
+      if (ev.key === ' ') {
+        onPressProp?.(EmptyGestureResponderEvent);
+        onValueChange(value === rootValue ? '' : value);
+      }
+    }
+
+    function onPress(ev: GestureResponderEvent) {
+      onPressProp?.(ev);
+      onValueChange(value === rootValue ? '' : value);
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <NavigationMenu.Trigger disabled={disabled ?? undefined} asChild>
+        <Component
+          ref={ref}
+          // @ts-expect-error web only
+          onKeyDown={onKeyDown}
+          onPress={onPress}
+          {...props}
+        />
+      </NavigationMenu.Trigger>
+    );
+  }
+);
+
+Trigger.displayName = 'TriggerWebNavigationMenu';
+
+function Portal({ children }: NavigationMenuPortalProps) {
+  return <>{children}</>;
+}
+
+const Content = React.forwardRef<ViewRef, SlottableViewProps & PositionedContentProps>(
+  (
+    {
+      asChild = false,
+      forceMount,
+      align: _align,
+      side: _side,
+      sideOffset: _sideOffset,
+      alignOffset: _alignOffset,
+      avoidCollisions: _avoidCollisions,
+      onLayout: onLayoutProp,
+      insets: _insets,
+      disablePositioningStyle: _disablePositioningStyle,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onInteractOutside,
+      ...props
+    },
+    ref
+  ) => {
+    const Component = asChild ? Slot.View : View;
+    return (
+      <NavigationMenu.Content
+        forceMount={forceMount}
+        onEscapeKeyDown={onEscapeKeyDown}
+        onPointerDownOutside={onPointerDownOutside}
+        onFocusOutside={onFocusOutside}
+        onInteractOutside={onInteractOutside}
+      >
+        <Component ref={ref} {...props} />
+      </NavigationMenu.Content>
+    );
+  }
+);
+
+Content.displayName = 'ContentWebNavigationMenu';
+
+const Link = React.forwardRef<PressableRef, SlottablePressableProps & NavigationMenuLinkProps>(
+  ({ asChild, active, onPress: onPressProp, onKeyDown: onKeyDownProp, ...props }, ref) => {
+    const { onValueChange } = useRootContext();
+    function onKeyDown(ev: React.KeyboardEvent) {
+      onKeyDownProp?.(ev);
+      if (ev.key === 'Enter' || ev.key === ' ') {
+        onPressProp?.(EmptyGestureResponderEvent);
+        onValueChange('');
+      }
+    }
+
+    function onPress(ev: GestureResponderEvent) {
+      onPressProp?.(ev);
+      onValueChange('');
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <NavigationMenu.Link active={active} asChild>
+        <Component
+          ref={ref}
+          role='link'
+          // @ts-expect-error web only
+          onKeyDown={onKeyDown}
+          onPress={onPress}
+          {...props}
+        />
+      </NavigationMenu.Link>
+    );
+  }
+);
+
+Link.displayName = 'LinkWebNavigationMenu';
+
+const Viewport = React.forwardRef<
+  ViewRef,
+  Omit<React.ComponentPropsWithoutRef<typeof View>, 'children'>
+>((props, ref) => {
+  return (
+    <Slot.View ref={ref} {...props}>
+      <NavigationMenu.Viewport />
+    </Slot.View>
+  );
+});
+
+Viewport.displayName = 'ViewportWebNavigationMenu';
+
+const Indicator = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return (
+    <NavigationMenu.Indicator asChild>
+      <Component ref={ref} {...props} />
+    </NavigationMenu.Indicator>
+  );
+});
+
+Indicator.displayName = 'IndicatorWebNavigationMenu';
+
+export {
+  Content,
+  Indicator,
+  Item,
+  Link,
+  List,
+  Portal,
+  Root,
+  Trigger,
+  Viewport,
+  useItemContext,
+  useRootContext,
+};

package/dist/generated/components/primitives/navigation-menu/types.ts

@@ -0,0 +1,49 @@
+import type { ForceMountable } from '@rnr/types';
+
+interface NavigationMenuRootProps {
+  value: string | undefined;
+  onValueChange: (value: string | undefined) => void;
+  /**
+   * Platform: WEB ONLY
+   */
+  delayDuration?: number;
+  /**
+   * Platform: WEB ONLY
+   */
+  skipDelayDuration?: number;
+  /**
+   * Platform: WEB ONLY
+   */
+  dir?: 'ltr' | 'rtl';
+  /**
+   * Platform: WEB ONLY
+   */
+  orientation?: 'horizontal' | 'vertical';
+}
+
+interface NavigationMenuItemProps {
+  value: string | undefined;
+}
+
+interface NavigationMenuPortalProps extends ForceMountable {
+  children: React.ReactNode;
+  /**
+   * Platform: NATIVE ONLY
+   */
+  hostName?: string;
+  /**
+   * Platform: WEB ONLY
+   */
+  container?: HTMLElement | null | undefined;
+}
+
+interface NavigationMenuLinkProps {
+  active?: boolean;
+}
+
+export type {
+  NavigationMenuItemProps,
+  NavigationMenuPortalProps,
+  NavigationMenuRootProps,
+  NavigationMenuLinkProps,
+};

package/dist/generated/components/primitives/popover/index.ts

@@ -0,0 +1 @@
+export * from './popover';