@brand-map/primitives 0.0.0-broken.0

package/src/context-menu/context-menu.tsx

@@ -0,0 +1,616 @@
+import * as React from "react";
+import {
+  BackHandler,
+  Pressable,
+  Text,
+  View,
+  type AccessibilityActionEvent,
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+  type LayoutRectangle,
+} from "react-native";
+
+import { useAugmentedRef, useControllableState, useRelativePosition, type LayoutPosition } from "../hooks";
+import { Portal as RNPPortal } from "../portal";
+import * as Slot from "../slot";
+
+import type {
+  CheckboxItemProps,
+  CheckboxItemRef,
+  ContentProps,
+  ContentRef,
+  GroupProps,
+  GroupRef,
+  ItemIndicatorProps,
+  ItemIndicatorRef,
+  ItemProps,
+  ItemRef,
+  LabelProps,
+  LabelRef,
+  BackdropProps,
+  BackdropRef,
+  PortalProps,
+  RadioGroupProps,
+  RadioGroupRef,
+  RadioItemProps,
+  RadioItemRef,
+  RootProps,
+  RootRef,
+  SeparatorProps,
+  SeparatorRef,
+  SubContentProps,
+  SubContentRef,
+  SubProps,
+  SubRef,
+  SubTriggerProps,
+  SubTriggerRef,
+  TriggerProps,
+  TriggerRef,
+} from "./types";
+
+interface RootContextInterface extends RootProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  pressPosition: LayoutPosition | null;
+  setPressPosition: (pressPosition: LayoutPosition | null) => void;
+  contentLayout: LayoutRectangle | null;
+  setContentLayout: (contentLayout: LayoutRectangle | null) => void;
+  nativeID: string;
+}
+
+const RootContext = React.createContext<RootContextInterface | null>(null);
+
+const Root = React.forwardRef<RootRef, RootProps>(({ 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);
+  }
+
+  return (
+    <RootContext.Provider
+      value={{
+        open,
+        onOpenChange,
+        relativeTo,
+        contentLayout,
+        nativeID,
+        pressPosition,
+        setContentLayout,
+        setPressPosition,
+      }}
+    >
+      <Component
+        ref={ref}
+        {...viewProps}
+      />
+    </RootContext.Provider>
+  );
+});
+
+Root.displayName = "RootNativeContextMenu";
+
+function useRootContext() {
+  const context = React.useContext(RootContext);
+  if (!context) {
+    throw new Error("ContextMenu compound components cannot be rendered outside the ContextMenu component");
+  }
+  return context;
+}
+
+const accessibilityActions = [{ name: "longpress" }];
+
+const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
+  ({ render, onLongPress: onLongPressProp, disabled = false, onAccessibilityAction: onAccessibilityActionProp, ...props }, ref) => {
+    const { open, onOpenChange, relativeTo, setPressPosition } = useRootContext();
+    const augmentedRef = useAugmentedRef({
+      ref,
+      methods: {
+        open: () => {
+          onOpenChange(true);
+          augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+            setPressPosition({ width, pageX, pageY: pageY, height });
+          });
+        },
+        close: () => {
+          setPressPosition(null);
+          onOpenChange(false);
+        },
+      },
+    });
+
+    function onLongPress(ev: GestureResponderEvent) {
+      if (disabled) return;
+      if (relativeTo === "longPress") {
+        setPressPosition({
+          width: 0,
+          pageX: ev.nativeEvent.pageX,
+          pageY: ev.nativeEvent.pageY,
+          height: 0,
+        });
+      }
+      if (relativeTo === "trigger") {
+        augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+          setPressPosition({ width, pageX, pageY: pageY, height });
+        });
+      }
+      onOpenChange(!open);
+      onLongPressProp?.(ev);
+    }
+
+    function onAccessibilityAction(event: AccessibilityActionEvent) {
+      if (disabled) return;
+      if (event.nativeEvent.actionName === "longpress") {
+        setPressPosition({
+          width: 0,
+          pageX: 0,
+          pageY: 0,
+          height: 0,
+        });
+        const newValue = !open;
+        onOpenChange(newValue);
+      }
+      onAccessibilityActionProp?.(event);
+    }
+
+    return (
+      <Component
+        ref={augmentedRef}
+        aria-disabled={disabled ?? undefined}
+        role="button"
+        onLongPress={onLongPress}
+        disabled={disabled ?? undefined}
+        aria-expanded={open}
+        accessibilityActions={accessibilityActions}
+        onAccessibilityAction={onAccessibilityAction}
+        {...props}
+      />
+    );
+  },
+);
+
+Trigger.displayName = "TriggerNativeContextMenu";
+
+/**
+ * @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 value = useRootContext();
+
+  if (!value.pressPosition) {
+    return null;
+  }
+
+  if (!keepMounted) {
+    if (!value.open) {
+      return null;
+    }
+  }
+
+  return (
+    <RNPPortal
+      hostName={hostName}
+      name={`${value.nativeID}_portal`}
+    >
+      <RootContext.Provider value={value}>{children}</RootContext.Provider>
+    </RNPPortal>
+  );
+}
+
+const Backdrop = React.forwardRef<BackdropRef, BackdropProps>(({ keepMounted, onPress: OnPressProp, closeOnPress = true, ...props }, ref) => {
+  const { open, onOpenChange, setContentLayout, setPressPosition } = useRootContext();
+
+  function onPress(ev: GestureResponderEvent) {
+    if (closeOnPress) {
+      setPressPosition(null);
+      setContentLayout(null);
+      onOpenChange(false);
+    }
+    OnPressProp?.(ev);
+  }
+
+  if (!keepMounted) {
+    if (!open) {
+      return null;
+    }
+  }
+
+  return (
+    <Component
+      ref={ref}
+      onPress={onPress}
+      {...props}
+    />
+  );
+});
+
+Backdrop.displayName = "BackdropNativeContextMenu";
+
+const Content = React.forwardRef<ContentRef, ContentProps>(
+  (
+    {
+      render = false,
+      keepMounted,
+      align = "start",
+      side = "bottom",
+      sideOffset = 0,
+      alignOffset = 0,
+      avoidCollisions = true,
+      onLayout: onLayoutProp,
+      insets,
+      style,
+      disablePositioningStyle,
+      ...props
+    },
+    ref,
+  ) => {
+    const { open, onOpenChange, contentLayout, nativeID, pressPosition, setContentLayout, setPressPosition } = useRootContext();
+
+    React.useEffect(() => {
+      const backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
+        setPressPosition(null);
+        setContentLayout(null);
+        onOpenChange(false);
+        return true;
+      });
+
+      return () => {
+        setContentLayout(null);
+        backHandler.remove();
+      };
+    }, []);
+
+    const positionStyle = useRelativePosition({
+      align,
+      avoidCollisions,
+      triggerPosition: pressPosition,
+      contentLayout,
+      alignOffset,
+      insets,
+      sideOffset,
+      side,
+      disablePositioningStyle,
+    });
+
+    function onLayout(event: LayoutChangeEvent) {
+      setContentLayout(event.nativeEvent.layout);
+      onLayoutProp?.(event);
+    }
+
+    if (!keepMounted) {
+      if (!open) {
+        return null;
+      }
+    }
+
+    return (
+      <Component
+        ref={ref}
+        role="menu"
+        nativeID={nativeID}
+        aria-modal={true}
+        style={[positionStyle, style]}
+        onLayout={onLayout}
+        onStartShouldSetResponder={onStartShouldSetResponder}
+        {...props}
+      />
+    );
+  },
+);
+
+Content.displayName = "ContentNativeContextMenu";
+
+const Item = React.forwardRef<ItemRef, ItemProps>(({ textValue, onPress: onPressProp, disabled = false, closeOnPress = true, ...props }, ref) => {
+  const { onOpenChange, setContentLayout, setPressPosition } = useRootContext();
+
+  function onPress(ev: GestureResponderEvent) {
+    if (closeOnPress) {
+      setPressPosition(null);
+      setContentLayout(null);
+      onOpenChange(false);
+    }
+    onPressProp?.(ev);
+  }
+
+  return (
+    <Component
+      ref={ref}
+      role="menuitem"
+      onPress={onPress}
+      disabled={disabled}
+      aria-valuetext={textValue}
+      aria-disabled={!!disabled}
+      accessibilityState={{ disabled: !!disabled }}
+      {...props}
+    />
+  );
+});
+
+Item.displayName = "ItemNativeContextMenu";
+
+const Group = React.forwardRef<GroupRef, GroupProps>(({ ...props }, ref) => {
+  return (
+    <Component
+      ref={ref}
+      role="group"
+      {...props}
+    />
+  );
+});
+
+Group.displayName = "GroupNativeContextMenu";
+
+const Label = React.forwardRef<LabelRef, LabelProps>(({ ...props }, ref) => {
+  return (
+    <Component
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+Label.displayName = "LabelNativeContextMenu";
+
+type FormItemContext =
+  | { checked: boolean }
+  | {
+      value: string | undefined;
+      onValueChange: (value: string) => void;
+    };
+
+const FormItemContext = React.createContext<FormItemContext | null>(null);
+
+const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
+  ({ render, checked, onCheckedChange, textValue, onPress: onPressProp, closeOnPress = true, disabled = false, ...props }, ref) => {
+    const { onOpenChange, setContentLayout, setPressPosition } = useRootContext();
+
+    function onPress(ev: GestureResponderEvent) {
+      onCheckedChange(!checked);
+      if (closeOnPress) {
+        setPressPosition(null);
+        setContentLayout(null);
+        onOpenChange(false);
+      }
+      onPressProp?.(ev);
+    }
+
+    return (
+      <FormItemContext.Provider value={{ checked }}>
+        <Component
+          ref={ref}
+          role="checkbox"
+          aria-checked={checked}
+          onPress={onPress}
+          disabled={disabled}
+          aria-disabled={!!disabled}
+          aria-valuetext={textValue}
+          accessibilityState={{ disabled: !!disabled }}
+          {...props}
+        />
+      </FormItemContext.Provider>
+    );
+  },
+);
+
+CheckboxItem.displayName = "CheckboxItemNativeContextMenu";
+
+function useFormItemContext() {
+  const context = React.useContext(FormItemContext);
+  if (!context) {
+    throw new Error("CheckboxItem or RadioItem compound components cannot be rendered outside of a CheckboxItem or RadioItem component");
+  }
+  return context;
+}
+
+const RadioGroup = React.forwardRef<RadioGroupRef, RadioGroupProps>(({ value, onValueChange, ...props }, ref) => {
+  return (
+    <FormItemContext.Provider value={{ value, onValueChange }}>
+      <Component
+        ref={ref}
+        role="radiogroup"
+        {...props}
+      />
+    </FormItemContext.Provider>
+  );
+});
+
+RadioGroup.displayName = "RadioGroupNativeContextMenu";
+
+type BothFormItemContext = Exclude<FormItemContext, { checked: boolean }> & {
+  checked: boolean;
+};
+
+const RadioItemContext = React.createContext({} as { itemValue: string });
+
+const RadioItem = React.forwardRef<RadioItemRef, RadioItemProps>(
+  ({ render, value: itemValue, textValue, onPress: onPressProp, disabled = false, closeOnPress = true, ...props }, ref) => {
+    const { onOpenChange, setContentLayout, setPressPosition } = useRootContext();
+
+    const { value, onValueChange } = useFormItemContext() as BothFormItemContext;
+    function onPress(ev: GestureResponderEvent) {
+      onValueChange(itemValue);
+      if (closeOnPress) {
+        setPressPosition(null);
+        setContentLayout(null);
+        onOpenChange(false);
+      }
+      onPressProp?.(ev);
+    }
+
+    return (
+      <RadioItemContext.Provider value={{ itemValue }}>
+        <Component
+          ref={ref}
+          onPress={onPress}
+          role="radio"
+          aria-checked={value === itemValue}
+          disabled={disabled ?? false}
+          accessibilityState={{
+            disabled: disabled ?? false,
+            checked: value === itemValue,
+          }}
+          aria-valuetext={textValue}
+          {...props}
+        />
+      </RadioItemContext.Provider>
+    );
+  },
+);
+
+RadioItem.displayName = "RadioItemNativeContextMenu";
+
+function useItemIndicatorContext() {
+  return React.useContext(RadioItemContext);
+}
+
+const ItemIndicator = React.forwardRef<ItemIndicatorRef, ItemIndicatorProps>(({ keepMounted, ...props }, ref) => {
+  const { itemValue } = useItemIndicatorContext();
+  const { checked, value } = useFormItemContext() as BothFormItemContext;
+
+  if (!keepMounted) {
+    if (itemValue == null && !checked) {
+      return null;
+    }
+    if (value !== itemValue) {
+      return null;
+    }
+  }
+
+  return (
+    <Component
+      ref={ref}
+      role="presentation"
+      {...props}
+    />
+  );
+});
+
+ItemIndicator.displayName = "ItemIndicatorNativeContextMenu";
+
+const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(({ decorative, ...props }, ref) => {
+  return (
+    <Component
+      role={decorative ? "presentation" : "separator"}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+Separator.displayName = "SeparatorNativeContextMenu";
+
+const SubContext = React.createContext<{
+  nativeID: string;
+  open: boolean;
+  onOpenChange: (value: boolean) => void;
+} | null>(null);
+
+const Sub = React.forwardRef<SubRef, SubProps>(({ defaultOpen, open: openProp, onOpenChange: onOpenChangeProp, ...props }, ref) => {
+  const nativeID = React.useId();
+  const [open = false, onOpenChange] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChangeProp,
+  });
+
+  return (
+    <SubContext.Provider
+      value={{
+        nativeID,
+        open,
+        onOpenChange,
+      }}
+    >
+      <Component
+        ref={ref}
+        {...props}
+      />
+    </SubContext.Provider>
+  );
+});
+
+Sub.displayName = "SubNativeContextMenu";
+
+function useSubContext() {
+  const context = React.useContext(SubContext);
+  if (!context) {
+    throw new Error("Sub compound components cannot be rendered outside of a Sub component");
+  }
+  return context;
+}
+
+const SubTrigger = React.forwardRef<SubTriggerRef, SubTriggerProps>(({ textValue, onPress: onPressProp, disabled = false, ...props }, ref) => {
+  const { nativeID, open, onOpenChange } = useSubContext();
+
+  function onPress(ev: GestureResponderEvent) {
+    onOpenChange(!open);
+    onPressProp?.(ev);
+  }
+
+  return (
+    <Component
+      ref={ref}
+      aria-valuetext={textValue}
+      role="menuitem"
+      aria-expanded={open}
+      accessibilityState={{ expanded: open, disabled: !!disabled }}
+      nativeID={nativeID}
+      onPress={onPress}
+      disabled={disabled}
+      aria-disabled={!!disabled}
+      {...props}
+    />
+  );
+});
+
+SubTrigger.displayName = "SubTriggerNativeContextMenu";
+
+const SubContent = React.forwardRef<SubContentRef, SubContentProps>(({ render = false, keepMounted, ...props }, ref) => {
+  const { open, nativeID } = useSubContext();
+
+  if (!keepMounted) {
+    if (!open) {
+      return null;
+    }
+  }
+
+  return (
+    <Component
+      ref={ref}
+      role="group"
+      aria-labelledby={nativeID}
+      {...props}
+    />
+  );
+});
+
+Content.displayName = "ContentNativeContextMenu";
+
+export {
+  CheckboxItem,
+  Content,
+  Group,
+  Item,
+  ItemIndicator,
+  Label,
+  Backdrop,
+  Portal,
+  RadioGroup,
+  RadioItem,
+  Root,
+  Separator,
+  Sub,
+  SubContent,
+  SubTrigger,
+  Trigger,
+  useRootContext,
+  useSubContext,
+};
+
+function onStartShouldSetResponder() {
+  return true;
+}