@brand-map/primitives 0.0.0-broken.0

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

@@ -0,0 +1,560 @@
+// 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, useIsomorphicLayoutEffect } from "../hooks";
+// import * as Slot from "../slot";
+// import { EmptyGestureResponderEvent } from "../utils";
+
+// 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";
+
+// const ContextMenuContext = React.createContext<{
+//   open: boolean;
+//   onOpenChange: (open: boolean) => void;
+// } | null>(null);
+
+// const Root = React.forwardRef<RootRef, RootProps>(({ onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+//   const [open, setOpen] = React.useState(false);
+
+//   function onOpenChange(value: boolean) {
+//     setOpen(value);
+//     onOpenChangeProp?.(value);
+//   }
+
+//
+//   return (
+//     <ContextMenuContext.Provider value={{ open, onOpenChange }}>
+//       <ContextMenu.Root onOpenChange={onOpenChange}>
+//         <Component
+//           ref={ref}
+//           {...viewProps}
+//         />
+//       </ContextMenu.Root>
+//     </ContextMenuContext.Provider>
+//   );
+// });
+
+// Root.displayName = "RootWebContextMenu";
+
+// function useRootContext() {
+//   const context = React.useContext(ContextMenuContext);
+//   if (!context) {
+//     throw new Error("ContextMenu compound components cannot be rendered outside the ContextMenu component");
+//   }
+//   return context;
+// }
+
+// const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ disabled = false, ...props }, 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");
+//       },
+//     },
+//   });
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLDivElement;
+//       augRef.dataset.state = open ? "open" : "closed";
+//     }
+//   }, [open]);
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLDivElement;
+//       if (disabled) {
+//         augRef.dataset.disabled = "true";
+//       } else {
+//         augRef.dataset.disabled = undefined;
+//       }
+//     }
+//   }, [disabled]);
+
+//
+//   return (
+//     <ContextMenu.Trigger
+//       disabled={disabled ?? undefined}
+//       render
+//     >
+//       <Component
+//         ref={augmentedRef}
+//         disabled={disabled}
+//         {...props}
+//       />
+//     </ContextMenu.Trigger>
+//   );
+// });
+
+// Trigger.displayName = "TriggerWebContextMenu";
+
+// function Portal({ keepMounted, container, children }: PortalProps) {
+//   return (
+//     <ContextMenu.Portal
+//       keepMounted={keepMounted}
+//       container={container}
+//       children={children}
+//     />
+//   );
+// }
+
+// const Backdrop = React.forwardRef<BackdropRef, BackdropProps>(({ ...props }, ref) => {
+//
+//   return (
+//     <Component
+//       ref={ref}
+//       {...props}
+//     />
+//   );
+// });
+
+// Backdrop.displayName = "BackdropWebContextMenu";
+
+// const ContextMenuContentContext = React.createContext<{
+//   close: () => void;
+// } | null>(null);
+
+// const Content = React.forwardRef<ContentRef, ContentProps>(
+//   (
+//     {
+//       render = false,
+//       keepMounted,
+//       align: _align,
+//       side: _side,
+//       sideOffset: _sideOffset,
+//       alignOffset = 0,
+//       avoidCollisions = true,
+//       insets,
+//       loop = true,
+//       onCloseAutoFocus,
+//       onEscapeKeyDown,
+//       onPointerDownOutside,
+//       onFocusOutside,
+//       onInteractOutside,
+//       collisionBoundary,
+//       sticky,
+//       hideWhenDetached,
+//       ...props
+//     },
+//     ref,
+//   ) => {
+//     const itemRef = React.useRef<HTMLDivElement>(null);
+
+//     function close() {
+//       itemRef.current?.click();
+//     }
+
+//
+//     return (
+//       <ContextMenuContentContext.Provider value={{ close }}>
+//         <ContextMenu.Content
+//           keepMounted={keepMounted}
+//           alignOffset={alignOffset}
+//           avoidCollisions={avoidCollisions}
+//           collisionPadding={insets}
+//           loop={loop}
+//           onCloseAutoFocus={onCloseAutoFocus}
+//           onEscapeKeyDown={onEscapeKeyDown}
+//           onPointerDownOutside={onPointerDownOutside}
+//           onFocusOutside={onFocusOutside}
+//           onInteractOutside={onInteractOutside}
+//           collisionBoundary={collisionBoundary}
+//           sticky={sticky}
+//           hideWhenDetached={hideWhenDetached}
+//         >
+//           <Component
+//             ref={ref}
+//             {...props}
+//           />
+//           <ContextMenu.Item
+//             ref={itemRef}
+//             aria-hidden
+//             style={{ position: "fixed", top: 0, left: 0, zIndex: -999999999 }}
+//             aria-disabled
+//             tabIndex={-1}
+//             hidden
+//           />
+//         </ContextMenu.Content>
+//       </ContextMenuContentContext.Provider>
+//     );
+//   },
+// );
+
+// Content.displayName = "ContentWebContextMenu";
+
+// function useContextMenuContentContext() {
+//   const context = React.useContext(ContextMenuContentContext);
+//   if (!context) {
+//     throw new Error("ContextMenu compound components cannot be rendered outside the ContextMenu component");
+//   }
+//   return context;
+// }
+
+// const Item = React.forwardRef<ItemRef, ItemProps>(({ textValue, closeOnPress = true, onPress: onPressProp, ...props }, ref) => {
+//   const { close } = useContextMenuContentContext();
+
+//   function onKeyDown(ev: React.KeyboardEvent) {
+//     if (ev.key === "Enter" || ev.key === " ") {
+//       onPressProp?.(EmptyGestureResponderEvent);
+//       if (closeOnPress) {
+//         close();
+//       }
+//     }
+//   }
+
+//   function onPress(ev: GestureResponderEvent) {
+//     onPressProp?.(ev);
+//     if (closeOnPress) {
+//       close();
+//     }
+//   }
+
+//
+//   return (
+//     <ContextMenu.Item
+//       textValue={textValue}
+//       disabled={props.disabled ?? undefined}
+//       onSelect={closeOnPress ? undefined : onSelected}
+//       render
+//     >
+//       <Component
+//         ref={ref}
+//         role="button"
+//         onPress={onPress}
+//         onKeyDown={onKeyDown}
+//         {...props}
+//       />
+//     </ContextMenu.Item>
+//   );
+// });
+
+// Item.displayName = "ItemWebContextMenu";
+
+// const Group = React.forwardRef<GroupRef, GroupProps>(({ ...props }, ref) => {
+//
+//   return (
+//     <ContextMenu.Group render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </ContextMenu.Group>
+//   );
+// });
+
+// Group.displayName = "GroupWebContextMenu";
+
+// const Label = React.forwardRef<LabelRef, LabelProps>(({ ...props }, ref) => {
+//
+//   return (
+//     <ContextMenu.Label render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </ContextMenu.Label>
+//   );
+// });
+
+// Label.displayName = "LabelWebContextMenu";
+
+// const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
+//   ({ render, checked, onCheckedChange, textValue, disabled = false, closeOnPress = true, onPress: onPressProp, onKeyDown: onKeyDownProp, ...props }, ref) => {
+//     const { close } = useContextMenuContentContext();
+
+//     function onKeyDown(ev: React.KeyboardEvent) {
+//       onKeyDownProp?.(ev);
+//       if (ev.key === "Enter" || ev.key === " ") {
+//         onPressProp?.(EmptyGestureResponderEvent);
+//         onCheckedChange?.(!checked);
+//         if (closeOnPress) {
+//           close();
+//         }
+//       }
+//     }
+
+//     function onPress(ev: GestureResponderEvent) {
+//       onPressProp?.(ev);
+//       onCheckedChange?.(!checked);
+//       if (closeOnPress) {
+//         close();
+//       }
+//     }
+
+//
+//     return (
+//       <ContextMenu.CheckboxItem
+//         textValue={textValue}
+//         checked={checked}
+//         onCheckedChange={onCheckedChange}
+//         onSelect={closeOnPress ? undefined : onSelected}
+//         disabled={disabled ?? undefined}
+//         render
+//       >
+//         <Component
+//           ref={ref}
+//           disabled={disabled}
+//           // @ts-expect-error web only
+//           onKeyDown={onKeyDown}
+//           onPress={onPress}
+//           role="button"
+//           {...props}
+//         />
+//       </ContextMenu.CheckboxItem>
+//     );
+//   },
+// );
+
+// CheckboxItem.displayName = "CheckboxItemWebContextMenu";
+
+// const ContextMenuRadioGroupContext = React.createContext<{
+//   value?: string;
+//   onValueChange?: (value: string) => void;
+// } | null>(null);
+
+// const RadioGroup = React.forwardRef<RadioGroupRef, RadioGroupProps>(({ value, onValueChange, ...props }, ref) => {
+//
+//   return (
+//     <ContextMenuRadioGroupContext.Provider value={{ value, onValueChange }}>
+//       <ContextMenu.RadioGroup
+//         value={value}
+//         onValueChange={onValueChange}
+//         render
+//       >
+//         <Component
+//           ref={ref}
+//           {...props}
+//         />
+//       </ContextMenu.RadioGroup>
+//     </ContextMenuRadioGroupContext.Provider>
+//   );
+// });
+
+// RadioGroup.displayName = "RadioGroupWebContextMenu";
+
+// function useContextMenuRadioGroupContext() {
+//   const context = React.useContext(ContextMenuRadioGroupContext);
+//   if (!context) {
+//     throw new Error("ContextMenu compound components cannot be rendered outside the ContextMenu component");
+//   }
+//   return context;
+// }
+
+// const RadioItem = React.forwardRef<RadioItemRef, RadioItemProps>(
+//   ({ render, value, textValue, closeOnPress = true, onPress: onPressProp, onKeyDown: onKeyDownProp, ...props }, ref) => {
+//     const { onValueChange } = useContextMenuRadioGroupContext();
+//     const { close } = useContextMenuContentContext();
+
+//     function onKeyDown(ev: React.KeyboardEvent) {
+//       onKeyDownProp?.(ev);
+//       if (ev.key === "Enter" || ev.key === " ") {
+//         onValueChange?.(value);
+//         onPressProp?.(EmptyGestureResponderEvent);
+//         if (closeOnPress) {
+//           close();
+//         }
+//       }
+//     }
+
+//     function onPress(ev: GestureResponderEvent) {
+//       onValueChange?.(value);
+//       onPressProp?.(ev);
+//       if (closeOnPress) {
+//         close();
+//       }
+//     }
+//
+//     return (
+//       <ContextMenu.RadioItem
+//         value={value}
+//         textValue={textValue}
+//         disabled={props.disabled ?? undefined}
+//         onSelect={closeOnPress ? undefined : onSelected}
+//         render
+//       >
+//         <Component
+//           ref={ref}
+//           // @ts-expect-error web only
+//           onKeyDown={onKeyDown}
+//           onPress={onPress}
+//           {...props}
+//         />
+//       </ContextMenu.RadioItem>
+//     );
+//   },
+// );
+
+// RadioItem.displayName = "RadioItemWebContextMenu";
+
+// const ItemIndicator = React.forwardRef<ItemIndicatorRef, ItemIndicatorProps>(({ keepMounted, ...props }, ref) => {
+//
+//   return (
+//     <ContextMenu.ItemIndicator
+//       keepMounted={keepMounted}
+//       render
+//     >
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </ContextMenu.ItemIndicator>
+//   );
+// });
+
+// ItemIndicator.displayName = "ItemIndicatorWebContextMenu";
+
+// const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(({ decorative, ...props }, ref) => {
+//
+//   return (
+//     <ContextMenu.Separator render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </ContextMenu.Separator>
+//   );
+// });
+
+// Separator.displayName = "SeparatorWebContextMenu";
+
+// const ContextMenuSubContext = React.createContext<{
+//   open: boolean;
+//   onOpenChange: (open: boolean) => void;
+// } | null>(null);
+
+// const Sub = React.forwardRef<SubRef, SubProps>(({ defaultOpen, open: openProp, onOpenChange: onOpenChangeProp, ...props }, ref) => {
+//   const [open = false, onOpenChange] = useControllableState({
+//     prop: openProp,
+//     defaultProp: defaultOpen,
+//     onChange: onOpenChangeProp,
+//   });
+
+//
+//   return (
+//     <ContextMenuSubContext.Provider value={{ open, onOpenChange }}>
+//       <ContextMenu.Sub
+//         open={open}
+//         onOpenChange={onOpenChange}
+//       >
+//         <Component
+//           ref={ref}
+//           {...props}
+//         />
+//       </ContextMenu.Sub>
+//     </ContextMenuSubContext.Provider>
+//   );
+// });
+
+// Sub.displayName = "SubWebContextMenu";
+
+// function useSubContext() {
+//   const context = React.useContext(ContextMenuSubContext);
+//   if (!context) {
+//     throw new Error("ContextMenu compound components cannot be rendered outside the ContextMenu component");
+//   }
+//   return context;
+// }
+
+// const SubTrigger = React.forwardRef<SubTriggerRef, SubTriggerProps>(({ textValue, disabled = false, onPress: onPressProp, ...props }, ref) => {
+//   const { onOpenChange } = useSubContext();
+
+//   function onPress(ev: GestureResponderEvent) {
+//     onOpenChange(true);
+//     onPressProp?.(ev);
+//   }
+
+//
+//   return (
+//     <ContextMenu.SubTrigger
+//       disabled={disabled ?? undefined}
+//       textValue={textValue}
+//       render
+//     >
+//       <Component
+//         ref={ref}
+//         onPress={onPress}
+//         {...props}
+//       />
+//     </ContextMenu.SubTrigger>
+//   );
+// });
+
+// SubTrigger.displayName = "SubTriggerWebContextMenu";
+
+// const SubContent = React.forwardRef<SubContentRef, SubContentProps>(({ render = false, keepMounted, ...props }, ref) => {
+//
+//   return (
+//     <ContextMenu.Portal>
+//       <ContextMenu.SubContent keepMounted={keepMounted}>
+//         <Component
+//           ref={ref}
+//           {...props}
+//         />
+//       </ContextMenu.SubContent>
+//     </ContextMenu.Portal>
+//   );
+// });
+
+// Content.displayName = "ContentWebContextMenu";
+
+// export {
+//   CheckboxItem,
+//   Content,
+//   Group,
+//   Item,
+//   ItemIndicator,
+//   Label,
+//   Backdrop,
+//   Portal,
+//   RadioGroup,
+//   RadioItem,
+//   Root,
+//   Separator,
+//   Sub,
+//   SubContent,
+//   SubTrigger,
+//   Trigger,
+//   useRootContext,
+//   useSubContext,
+// };
+
+// function onSelected(ev: Event) {
+//   ev.preventDefault();
+// }

package/src/context-menu/index.ts

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

package/src/context-menu/types.ts

@@ -0,0 +1,136 @@
+import { KeepMountable, PositionedContentProps, PressableRef, RenderPressableProps, RenderTextProps, RenderViewProps, TextRef, ViewRef } from "../types";
+
+type RootProps = RenderViewProps & {
+  onOpenChange?: (open: boolean) => void;
+
+  /**
+   * @platform: NATIVE ONLY
+   */
+  relativeTo?: "longPress" | "trigger";
+};
+
+interface PortalProps extends KeepMountable {
+  children: React.ReactNode;
+
+  /**
+   * @platform: NATIVE ONLY
+   */
+  hostName?: string;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  container?: HTMLElement | null | undefined;
+}
+
+type BackdropProps = KeepMountable &
+  RenderPressableProps & {
+    /**
+     * @platform: NATIVE ONLY
+     */
+    closeOnPress?: boolean;
+  };
+
+type ItemProps = RenderPressableProps & {
+  textValue?: string;
+  closeOnPress?: boolean;
+};
+
+type CheckboxItemProps = RenderPressableProps & {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  closeOnPress?: boolean;
+  textValue?: string;
+};
+
+type RadioGroupProps = RenderViewProps & {
+  value: string | undefined;
+  onValueChange: (value: string) => void;
+};
+
+type RadioItemProps = RenderPressableProps & {
+  value: string;
+  textValue?: string;
+  closeOnPress?: boolean;
+};
+
+type SeparatorProps = RenderViewProps & {
+  decorative?: boolean;
+};
+
+type SubProps = RenderViewProps & {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (value: boolean) => void;
+};
+
+type SubTriggerProps = RenderPressableProps & {
+  textValue?: string;
+};
+
+type TriggerProps = RenderPressableProps;
+type ContentProps = RenderViewProps & PositionedContentProps;
+type SubContentProps = RenderPressableProps & KeepMountable;
+type ItemIndicatorProps = RenderViewProps & KeepMountable;
+type GroupProps = RenderViewProps;
+type LabelProps = RenderTextProps;
+
+type CheckboxItemRef = PressableRef;
+type ContentRef = ViewRef;
+type GroupRef = ViewRef;
+type ItemIndicatorRef = ViewRef;
+type ItemRef = PressableRef;
+type LabelRef = TextRef;
+type BackdropRef = PressableRef;
+type RadioGroupRef = ViewRef;
+type RadioItemRef = PressableRef;
+type RootRef = ViewRef;
+type SeparatorRef = ViewRef;
+type SubContentRef = PressableRef;
+type SubRef = ViewRef;
+type SubTriggerRef = PressableRef;
+type TriggerRef = PressableRef & {
+  /**
+   * @platform: NATIVE ONLY
+   */
+  open: () => void;
+
+  /**
+   * @platform: NATIVE ONLY
+   */
+  close: () => void;
+};
+
+export 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,
+};