@brand-map/primitives 0.0.0-broken.0

package/src/navigation-menu/navigation-menu.tsx

@@ -0,0 +1,302 @@
+import * as React from "react";
+import { BackHandler, Pressable, View, type GestureResponderEvent, type LayoutChangeEvent, type LayoutRectangle } from "react-native";
+
+import { useRelativePosition, type LayoutPosition } from "../hooks";
+import { Portal as RNPPortal } from "../portal";
+import * as Slot from "../slot";
+
+import type {
+  ContentProps,
+  ContentRef,
+  IndicatorProps,
+  IndicatorRef,
+  ItemProps,
+  ItemRef,
+  LinkProps,
+  LinkRef,
+  ListProps,
+  ListRef,
+  PortalProps,
+  RootProps,
+  RootRef,
+  TriggerProps,
+  TriggerRef,
+  ViewportProps,
+  ViewportRef,
+} from "./types";
+
+interface INavigationMenuRootContext extends RootProps {
+  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<RootRef, RootProps>(({ value, onValueChange, ...viewProps }, ref) => {
+  const nativeID = React.useId();
+  const [triggerPosition, setTriggerPosition] = React.useState<LayoutPosition | null>(null);
+  const [contentLayout, setContentLayout] = React.useState<LayoutRectangle | null>(null);
+
+  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<ListRef, ListProps>(({ ...viewProps }, ref) => {
+  return (
+    <Component
+      ref={ref}
+      role="menubar"
+      {...viewProps}
+    />
+  );
+});
+
+List.displayName = "ListNativeNavigationMenu";
+
+const ItemContext = React.createContext<(ItemProps & { nativeID: string }) | null>(null);
+
+const Item = React.forwardRef<ItemRef, ItemProps>(({ value, ...viewProps }, ref) => {
+  const nativeID = React.useId();
+
+  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<TriggerRef, TriggerProps>(({ 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);
+  }
+
+  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({ keepMounted, hostName, children }: PortalProps) {
+  const navigationMenu = useRootContext();
+  const item = useItemContext();
+
+  if (!navigationMenu.triggerPosition) {
+    return null;
+  }
+
+  if (!keepMounted) {
+    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<ContentRef, ContentProps>(
+  (
+    {
+      render = false,
+      keepMounted,
+      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 (!keepMounted) {
+      if (value !== menuValue) {
+        return null;
+      }
+    }
+
+    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<LinkRef, LinkProps>(({ ...props }, ref) => {
+  return (
+    <Component
+      ref={ref}
+      role="link"
+      {...props}
+    />
+  );
+});
+
+Link.displayName = "LinkNativeNavigationMenu";
+
+const Viewport = React.forwardRef<ViewportRef, ViewportProps>((props, ref) => {
+  return (
+    <View
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+Viewport.displayName = "ViewportNativeNavigationMenu";
+
+const Indicator = React.forwardRef<IndicatorRef, IndicatorProps>(({ ...props }, ref) => {
+  return (
+    <Component
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+Indicator.displayName = "IndicatorNativeNavigationMenu";
+
+export { Content, Indicator, Item, Link, List, Portal, Root, Trigger, useItemContext, useRootContext, Viewport };
+
+function onStartShouldSetResponder() {
+  return true;
+}

package/src/navigation-menu/navigation-menu.web.tsx

@@ -0,0 +1,259 @@
+// import * as NavigationMenu from "@radix-ui/react-navigation-menu";
+// import * as React from "react";
+// import { GestureResponderEvent, Pressable, View } from "react-native";
+
+// import { useAugmentedRef, useIsomorphicLayoutEffect } from "../hooks";
+// import * as Slot from "../slot";
+// import { EmptyGestureResponderEvent } from "../utils";
+
+// import type {
+//   ContentProps,
+//   ContentRef,
+//   IndicatorProps,
+//   IndicatorRef,
+//   ItemProps,
+//   ItemRef,
+//   LinkProps,
+//   LinkRef,
+//   ListProps,
+//   ListRef,
+//   PortalProps,
+//   RootProps,
+//   RootRef,
+//   TriggerProps,
+//   TriggerRef,
+//   ViewportProps,
+//   ViewportRef,
+// } from "./types";
+
+// const NavigationMenuContext = React.createContext<RootProps | null>(null);
+
+// const Root = React.forwardRef<RootRef, RootProps>(
+//   ({ render, value, onValueChange, delayDuration, skipDelayDuration, dir, orientation, ...viewProps }, ref) => {
+//
+//     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<ListRef, ListProps>(({ ...viewProps }, ref) => {
+//   const augmentedRef = useAugmentedRef({ ref });
+//   const { orientation } = useRootContext();
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLDivElement;
+//       augRef.dataset.orientation = orientation;
+//     }
+//   }, [orientation]);
+
+//
+//   return (
+//     <NavigationMenu.List render>
+//       <Component
+//         ref={ref}
+//         {...viewProps}
+//       />
+//     </NavigationMenu.List>
+//   );
+// });
+
+// List.displayName = "ListWebNavigationMenu";
+
+// const ItemContext = React.createContext<ItemProps | null>(null);
+
+// const Item = React.forwardRef<ItemRef, ItemProps>(({ value, ...props }, ref) => {
+//
+//   return (
+//     <ItemContext.Provider value={{ value }}>
+//       <NavigationMenu.Item
+//         value={value}
+//         render
+//       >
+//         <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<TriggerRef, TriggerProps>(({ 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);
+//   }
+
+//
+//   return (
+//     <NavigationMenu.Trigger
+//       disabled={disabled ?? undefined}
+//       render
+//     >
+//       <Component
+//         ref={ref}
+//         // @ts-expect-error web only
+//         onKeyDown={onKeyDown}
+//         onPress={onPress}
+//         {...props}
+//       />
+//     </NavigationMenu.Trigger>
+//   );
+// });
+
+// Trigger.displayName = "TriggerWebNavigationMenu";
+
+// function Portal({ children }: PortalProps) {
+//   return <>{children}</>;
+// }
+
+// const Content = React.forwardRef<ContentRef, ContentProps>(
+//   (
+//     {
+//       render = false,
+//       keepMounted,
+//       align: _align,
+//       side: _side,
+//       sideOffset: _sideOffset,
+//       alignOffset: _alignOffset,
+//       avoidCollisions: _avoidCollisions,
+//       onLayout: onLayoutProp,
+//       insets: _insets,
+//       disablePositioningStyle: _disablePositioningStyle,
+//       onEscapeKeyDown,
+//       onPointerDownOutside,
+//       onFocusOutside,
+//       onInteractOutside,
+//       ...props
+//     },
+//     ref,
+//   ) => {
+//
+//     return (
+//       <NavigationMenu.Content
+//         keepMounted={keepMounted}
+//         onEscapeKeyDown={onEscapeKeyDown}
+//         onPointerDownOutside={onPointerDownOutside}
+//         onFocusOutside={onFocusOutside}
+//         onInteractOutside={onInteractOutside}
+//       >
+//         <Component
+//           ref={ref}
+//           {...props}
+//         />
+//       </NavigationMenu.Content>
+//     );
+//   },
+// );
+
+// Content.displayName = "ContentWebNavigationMenu";
+
+// const Link = React.forwardRef<LinkRef, LinkProps>(({ 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("");
+//   }
+
+//
+//   return (
+//     <NavigationMenu.Link
+//       active={active}
+//       render
+//     >
+//       <Component
+//         ref={ref}
+//         role="link"
+//         // @ts-expect-error web only
+//         onKeyDown={onKeyDown}
+//         onPress={onPress}
+//         {...props}
+//       />
+//     </NavigationMenu.Link>
+//   );
+// });
+
+// Link.displayName = "LinkWebNavigationMenu";
+
+// const Viewport = React.forwardRef<ViewportRef, ViewportProps>((props, ref) => {
+//   return (
+//     <Slot.View
+//       ref={ref}
+//       {...props}
+//     >
+//       <NavigationMenu.Viewport />
+//     </Slot.View>
+//   );
+// });
+
+// Viewport.displayName = "ViewportWebNavigationMenu";
+
+// const Indicator = React.forwardRef<IndicatorRef, IndicatorProps>(({ ...props }, ref) => {
+//
+//   return (
+//     <NavigationMenu.Indicator render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </NavigationMenu.Indicator>
+//   );
+// });
+
+// Indicator.displayName = "IndicatorWebNavigationMenu";
+
+// export { Content, Indicator, Item, Link, List, Portal, Root, Trigger, useItemContext, useRootContext, Viewport };

package/src/navigation-menu/types.ts

@@ -0,0 +1,85 @@
+import type { ViewProps } from "react-native";
+
+import type { KeepMountable, PositionedContentProps, PressableRef, RenderPressableProps, RenderViewProps, ViewRef } from "../types";
+
+type RootProps = RenderViewProps & {
+  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";
+};
+
+type ItemProps = RenderViewProps & {
+  value: string | undefined;
+};
+
+interface PortalProps extends KeepMountable {
+  children: React.ReactNode;
+
+  /**
+   * @platform: NATIVE ONLY
+   */
+  hostName?: string;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  container?: HTMLElement | null | undefined;
+}
+
+type LinkProps = RenderPressableProps & {
+  active?: boolean;
+};
+
+type ListProps = RenderViewProps;
+type TriggerProps = RenderPressableProps;
+type ContentProps = RenderViewProps & PositionedContentProps;
+type IndicatorProps = RenderViewProps;
+type ViewportProps = Omit<ViewProps, "children">;
+
+type ContentRef = ViewRef;
+type IndicatorRef = ViewRef;
+type ItemRef = ViewRef;
+type LinkRef = PressableRef;
+type ListRef = ViewRef;
+type RootRef = ViewRef;
+type ViewportRef = ViewRef;
+type TriggerRef = PressableRef;
+
+export type {
+  ContentProps,
+  ContentRef,
+  IndicatorProps,
+  IndicatorRef,
+  ItemProps,
+  ItemRef,
+  LinkProps,
+  LinkRef,
+  ListProps,
+  ListRef,
+  PortalProps,
+  RootProps,
+  RootRef,
+  TriggerProps,
+  TriggerRef,
+  ViewportProps,
+  ViewportRef,
+};

package/src/popover/index.ts

@@ -0,0 +1,2 @@
+export * from "./popover";
+export * from "./types";