@brand-map/primitives 0.0.0-broken.0

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

@@ -0,0 +1,565 @@
+// import * as DropdownMenu from "@radix-ui/react-dropdown-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 DropdownMenuContext = 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(open: boolean) {
+//     setOpen(open);
+//     onOpenChangeProp?.(open);
+//   }
+
+//
+//   return (
+//     <DropdownMenuContext.Provider value={{ open, onOpenChange }}>
+//       <DropdownMenu.Root
+//         open={open}
+//         onOpenChange={onOpenChange}
+//       >
+//         <Component
+//           ref={ref}
+//           {...viewProps}
+//         />
+//       </DropdownMenu.Root>
+//     </DropdownMenuContext.Provider>
+//   );
+// });
+
+// Root.displayName = "RootWebDropdownMenu";
+
+// function useRootContext() {
+//   const context = React.useContext(DropdownMenuContext);
+//   if (!context) {
+//     throw new Error("DropdownMenu compound components cannot be rendered outside the DropdownMenu component");
+//   }
+//   return context;
+// }
+
+// const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ disabled = false, ...props }, ref) => {
+//   const { open, onOpenChange } = useRootContext();
+//   const augmentedRef = useAugmentedRef({
+//     ref,
+//     methods: {
+//       open() {
+//         onOpenChange(true);
+//       },
+//       close() {
+//         onOpenChange(false);
+//       },
+//     },
+//   });
+
+//   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 (
+//     <DropdownMenu.Trigger
+//       disabled={disabled ?? undefined}
+//       render
+//     >
+//       <Component
+//         ref={augmentedRef}
+//         {...props}
+//       />
+//     </DropdownMenu.Trigger>
+//   );
+// });
+
+// Trigger.displayName = "TriggerWebDropdownMenu";
+
+// function Portal({ keepMounted, container, children }: PortalProps) {
+//   return (
+//     <DropdownMenu.Portal
+//       keepMounted={keepMounted}
+//       container={container}
+//       children={children}
+//     />
+//   );
+// }
+
+// const Backdrop = React.forwardRef<BackdropRef, BackdropProps>(({ ...props }, ref) => {
+//
+//   return (
+//     <Component
+//       ref={ref}
+//       {...props}
+//     />
+//   );
+// });
+
+// Backdrop.displayName = "BackdropWebDropdownMenu";
+
+// const DropdownMenuContentContext = React.createContext<{
+//   close: () => void;
+// } | null>(null);
+
+// const Content = React.forwardRef<ContentRef, ContentProps>(
+//   (
+//     {
+//       render = false,
+//       keepMounted,
+//       align,
+//       side,
+//       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 (
+//       <DropdownMenuContentContext.Provider value={{ close }}>
+//         <DropdownMenu.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}
+//           align={align}
+//           side={side}
+//           sideOffset={sideOffset}
+//         >
+//           <Component
+//             ref={ref}
+//             {...props}
+//           />
+//           <DropdownMenu.Item
+//             ref={itemRef}
+//             aria-hidden
+//             style={{ position: "fixed", top: 0, left: 0, zIndex: -999999999 }}
+//             aria-disabled
+//             tabIndex={-1}
+//             hidden
+//           />
+//         </DropdownMenu.Content>
+//       </DropdownMenuContentContext.Provider>
+//     );
+//   },
+// );
+
+// Content.displayName = "ContentWebDropdownMenu";
+
+// function useDropdownMenuContentContext() {
+//   const context = React.useContext(DropdownMenuContentContext);
+//   if (!context) {
+//     throw new Error("DropdownMenu compound components cannot be rendered outside the DropdownMenu component");
+//   }
+//   return context;
+// }
+
+// const Item = React.forwardRef<ItemRef, ItemProps>(
+//   ({ render, textValue, closeOnPress = true, onPress: onPressProp, onKeyDown: onKeyDownProp, ...props }, ref) => {
+//     const { close } = useDropdownMenuContentContext();
+
+//     function onKeyDown(ev: React.KeyboardEvent) {
+//       onKeyDownProp?.(ev);
+//       if (ev.key === "Enter" || ev.key === " ") {
+//         onPressProp?.(EmptyGestureResponderEvent);
+//         if (closeOnPress) {
+//           close();
+//         }
+//       }
+//     }
+
+//     function onPress(ev: GestureResponderEvent) {
+//       onPressProp?.(ev);
+//       if (closeOnPress) {
+//         close();
+//       }
+//     }
+
+//
+//     return (
+//       <DropdownMenu.Item
+//         textValue={textValue}
+//         disabled={props.disabled ?? undefined}
+//         onSelect={closeOnPress ? undefined : onSelected}
+//         render
+//       >
+//         <Component
+//           ref={ref}
+//           // @ts-expect-error web only
+//           onKeyDown={onKeyDown}
+//           onPress={onPress}
+//           {...props}
+//         />
+//       </DropdownMenu.Item>
+//     );
+//   },
+// );
+
+// Item.displayName = "ItemWebDropdownMenu";
+
+// const Group = React.forwardRef<GroupRef, GroupProps>(({ ...props }, ref) => {
+//
+//   return (
+//     <DropdownMenu.Group render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </DropdownMenu.Group>
+//   );
+// });
+
+// Group.displayName = "GroupWebDropdownMenu";
+
+// const Label = React.forwardRef<LabelRef, LabelProps>(({ ...props }, ref) => {
+//
+//   return (
+//     <DropdownMenu.Label render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </DropdownMenu.Label>
+//   );
+// });
+
+// Label.displayName = "LabelWebDropdownMenu";
+
+// const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
+//   ({ render, checked, onCheckedChange, textValue, disabled = false, closeOnPress = true, onPress: onPressProp, onKeyDown: onKeyDownProp, ...props }, ref) => {
+//     const { close } = useDropdownMenuContentContext();
+
+//     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 (
+//       <DropdownMenu.CheckboxItem
+//         textValue={textValue}
+//         checked={checked}
+//         onCheckedChange={onCheckedChange}
+//         onSelect={closeOnPress ? undefined : onSelected}
+//         disabled={disabled ?? undefined}
+//         render
+//       >
+//         <Component
+//           ref={ref}
+//           // @ts-expect-error web only
+//           onKeyDown={onKeyDown}
+//           onPress={onPress}
+//           role="button"
+//           {...props}
+//         />
+//       </DropdownMenu.CheckboxItem>
+//     );
+//   },
+// );
+
+// CheckboxItem.displayName = "CheckboxItemWebDropdownMenu";
+
+// const DropdownMenuRadioGroupContext = React.createContext<{
+//   value?: string;
+//   onValueChange?: (value: string) => void;
+// } | null>(null);
+
+// const RadioGroup = React.forwardRef<RadioGroupRef, RadioGroupProps>(({ value, onValueChange, ...props }, ref) => {
+//
+//   return (
+//     <DropdownMenuRadioGroupContext.Provider value={{ value, onValueChange }}>
+//       <DropdownMenu.RadioGroup
+//         value={value}
+//         onValueChange={onValueChange}
+//         render
+//       >
+//         <Component
+//           ref={ref}
+//           {...props}
+//         />
+//       </DropdownMenu.RadioGroup>
+//     </DropdownMenuRadioGroupContext.Provider>
+//   );
+// });
+
+// RadioGroup.displayName = "RadioGroupWebDropdownMenu";
+
+// function useDropdownMenuRadioGroupContext() {
+//   const context = React.useContext(DropdownMenuRadioGroupContext);
+//   if (!context) {
+//     throw new Error("DropdownMenuRadioGroup compound components cannot be rendered outside the DropdownMenuRadioGroup component");
+//   }
+//   return context;
+// }
+
+// const RadioItem = React.forwardRef<RadioItemRef, RadioItemProps>(
+//   ({ render, value, textValue, closeOnPress = true, onPress: onPressProp, onKeyDown: onKeyDownProp, ...props }, ref) => {
+//     const { onValueChange } = useDropdownMenuRadioGroupContext();
+//     const { close } = useDropdownMenuContentContext();
+
+//     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 (
+//       <DropdownMenu.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}
+//         />
+//       </DropdownMenu.RadioItem>
+//     );
+//   },
+// );
+
+// RadioItem.displayName = "RadioItemWebDropdownMenu";
+
+// const ItemIndicator = React.forwardRef<ItemIndicatorRef, ItemIndicatorProps>(({ keepMounted, ...props }, ref) => {
+//
+//   return (
+//     <DropdownMenu.ItemIndicator
+//       keepMounted={keepMounted}
+//       render
+//     >
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </DropdownMenu.ItemIndicator>
+//   );
+// });
+
+// ItemIndicator.displayName = "ItemIndicatorWebDropdownMenu";
+
+// const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(({ decorative, ...props }, ref) => {
+//
+//   return (
+//     <DropdownMenu.Separator render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </DropdownMenu.Separator>
+//   );
+// });
+
+// Separator.displayName = "SeparatorWebDropdownMenu";
+
+// const DropdownMenuSubContext = 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 (
+//     <DropdownMenuSubContext.Provider value={{ open, onOpenChange }}>
+//       <DropdownMenu.Sub
+//         open={open}
+//         onOpenChange={onOpenChange}
+//       >
+//         <Component
+//           ref={ref}
+//           {...props}
+//         />
+//       </DropdownMenu.Sub>
+//     </DropdownMenuSubContext.Provider>
+//   );
+// });
+
+// Sub.displayName = "SubWebDropdownMenu";
+
+// function useSubContext() {
+//   const context = React.useContext(DropdownMenuSubContext);
+//   if (!context) {
+//     throw new Error("DropdownMenu compound components cannot be rendered outside the DropdownMenu 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 (
+//     <DropdownMenu.SubTrigger
+//       disabled={disabled ?? undefined}
+//       textValue={textValue}
+//       render
+//     >
+//       <Component
+//         ref={ref}
+//         onPress={onPress}
+//         {...props}
+//       />
+//     </DropdownMenu.SubTrigger>
+//   );
+// });
+
+// SubTrigger.displayName = "SubTriggerWebDropdownMenu";
+
+// const SubContent = React.forwardRef<SubContentRef, SubContentProps>(({ render = false, keepMounted, ...props }, ref) => {
+//
+//   return (
+//     <DropdownMenu.Portal>
+//       <DropdownMenu.SubContent keepMounted={keepMounted}>
+//         <Component
+//           ref={ref}
+//           {...props}
+//         />
+//       </DropdownMenu.SubContent>
+//     </DropdownMenu.Portal>
+//   );
+// });
+
+// Content.displayName = "ContentWebDropdownMenu";
+
+// 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/dropdown-menu/index.ts

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

package/src/dropdown-menu/types.ts

@@ -0,0 +1,121 @@
+import type { KeepMountable, PositionedContentProps, PressableRef, RenderPressableProps, RenderTextProps, RenderViewProps, TextRef, ViewRef } from "../types";
+
+type RootProps = RenderViewProps & {
+  onOpenChange?: (open: boolean) => void;
+};
+
+interface PortalProps extends KeepMountable {
+  children: React.ReactNode;
+
+  /**
+   * @platform: NATIVE ONLY
+   */
+  hostName?: string;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  container?: HTMLElement | null | undefined;
+}
+
+type BackdropProps = KeepMountable &
+  RenderPressableProps & {
+    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 = RenderPressableProps & 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 & {
+  open: () => void;
+  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,
+};

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export { useAugmentedRef } from "./use-augmented-ref";
+export { useRelativePosition, type LayoutPosition } from "./use-relative-position";
+export { useControllableState } from "./use-controllable-state";
+export { useIsomorphicLayoutEffect } from "./use-Isomorphic-layout-effect";

package/src/hooks/use-Isomorphic-layout-effect.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { Platform } from "react-native";
+
+function useIsomorphicLayoutEffect(effect: React.EffectCallback, dependencies?: React.DependencyList) {
+  if (Platform.OS === "web" && typeof window === "undefined") {
+    React.useEffect(effect, dependencies);
+  } else {
+    React.useLayoutEffect(effect, dependencies);
+  }
+}
+
+export { useIsomorphicLayoutEffect };