@brand-map/primitives 0.0.0-broken.0

package/src/hooks/use-augmented-ref.tsx

@@ -0,0 +1,25 @@
+import { useRef, useImperativeHandle } from "react";
+
+interface AugmentRefProps<T> {
+  ref: React.Ref<T>;
+  methods?: Record<string, (...args: any[]) => any>;
+  deps?: any[];
+}
+
+export function useAugmentedRef<T>({ ref, methods, deps = [] }: AugmentRefProps<T>) {
+  const augmentedRef = useRef<T>(null);
+
+  useImperativeHandle(
+    ref,
+    () => {
+      if (typeof augmentedRef === "function" || !augmentedRef?.current) {
+        return {} as T;
+      }
+
+      return { ...augmentedRef.current, ...methods };
+    },
+    deps,
+  );
+
+  return augmentedRef;
+}

package/src/hooks/use-controllable-state.tsx

@@ -0,0 +1,70 @@
+// This project uses code from WorkOS/Radix Primitives.
+// The code is licensed under the MIT License.
+// https://github.com/radix-ui/primitives/tree/main
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+type UseControllableStateParams<T> = {
+  prop?: T | undefined;
+  defaultProp?: T | undefined;
+  onChange?: (state: T) => void;
+};
+
+type SetStateFn<T> = (prevState?: T) => T;
+
+function useControllableState<T>({ prop, defaultProp, onChange = () => {} }: UseControllableStateParams<T>) {
+  const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });
+  const isControlled = prop !== undefined;
+  const value = isControlled ? prop : uncontrolledProp;
+  const handleChange = useCallbackRef(onChange);
+
+  const setValue: React.Dispatch<React.SetStateAction<T | undefined>> = useCallback(
+    (nextValue) => {
+      if (!isControlled) {
+        setUncontrolledProp(nextValue);
+      }
+
+      if (isControlled) {
+        const setter = nextValue as SetStateFn<T>;
+        const value = typeof nextValue === "function" ? setter(prop) : nextValue;
+        if (value !== prop) handleChange(value as T);
+      }
+    },
+    [isControlled, prop, setUncontrolledProp, handleChange],
+  );
+
+  return [value, setValue] as const;
+}
+
+function useUncontrolledState<T>({ defaultProp, onChange }: Omit<UseControllableStateParams<T>, "prop">) {
+  const uncontrolledState = useState<T | undefined>(defaultProp);
+  const [value] = uncontrolledState;
+  const prevValueRef = useRef(value);
+  const handleChange = useCallbackRef(onChange);
+
+  useEffect(() => {
+    if (prevValueRef.current !== value) {
+      handleChange(value as T);
+      prevValueRef.current = value;
+    }
+  }, [value, prevValueRef, handleChange]);
+
+  return uncontrolledState;
+}
+
+/**
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ */
+function useCallbackRef<T extends (...args: any[]) => any>(callback: T | undefined): T {
+  const callbackRef = useRef(callback);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  });
+
+  // https://github.com/facebook/react/issues/19240
+  return useMemo(() => ((...args) => callbackRef.current?.(...args)) as T, []);
+}
+
+export { useControllableState };

package/src/hooks/use-relative-position.tsx

@@ -0,0 +1,175 @@
+import * as React from "react";
+import { Dimensions, type LayoutRectangle, type ScaledSize } from "react-native";
+
+import type { Insets } from "../types";
+
+type UseRelativePositionArgs = Omit<GetContentStyleArgs, "triggerPosition" | "contentLayout" | "dimensions"> & {
+  triggerPosition: LayoutPosition | null;
+  contentLayout: LayoutRectangle | null;
+  disablePositioningStyle?: boolean;
+};
+
+export function useRelativePosition({
+  align,
+  avoidCollisions,
+  triggerPosition,
+  contentLayout,
+  alignOffset,
+  insets,
+  sideOffset,
+  side,
+  disablePositioningStyle,
+}: UseRelativePositionArgs) {
+  const dimensions = Dimensions.get("screen");
+
+  return React.useMemo(() => {
+    if (disablePositioningStyle) {
+      return {};
+    }
+    if (!triggerPosition || !contentLayout) {
+      return {
+        position: "absolute",
+        opacity: 0,
+        top: dimensions.height,
+        zIndex: -9999999,
+      } as const;
+    }
+    return getContentStyle({
+      align,
+      avoidCollisions,
+      contentLayout,
+      side,
+      triggerPosition,
+      alignOffset,
+      insets,
+      sideOffset,
+      dimensions,
+    });
+  }, [align, avoidCollisions, side, alignOffset, insets, triggerPosition, contentLayout, dimensions.width, dimensions.height]);
+}
+
+export interface LayoutPosition {
+  pageY: number;
+  pageX: number;
+  width: number;
+  height: number;
+}
+
+interface GetPositionArgs {
+  dimensions: ScaledSize;
+  avoidCollisions: boolean;
+  triggerPosition: LayoutPosition;
+  contentLayout: LayoutRectangle;
+  insets?: Insets;
+}
+
+interface GetSidePositionArgs extends GetPositionArgs {
+  side: "top" | "bottom";
+  sideOffset: number;
+}
+
+function getSidePosition({ side, triggerPosition, contentLayout, sideOffset, insets, avoidCollisions, dimensions }: GetSidePositionArgs) {
+  const insetTop = insets?.top ?? 0;
+  const insetBottom = insets?.bottom ?? 0;
+  const positionTop = triggerPosition?.pageY - sideOffset - contentLayout.height;
+  const positionBottom = triggerPosition.pageY + triggerPosition.height + sideOffset;
+
+  if (!avoidCollisions) {
+    return {
+      top: side === "top" ? positionTop : positionBottom,
+    };
+  }
+
+  if (side === "top") {
+    return {
+      top: Math.min(Math.max(insetTop, positionTop), dimensions.height - insetBottom - contentLayout.height),
+    };
+  }
+
+  return {
+    top: Math.min(dimensions.height - insetBottom - contentLayout.height, positionBottom),
+  };
+}
+
+interface GetAlignPositionArgs extends GetPositionArgs {
+  align: "start" | "center" | "end";
+  alignOffset: number;
+}
+
+function getAlignPosition({ align, avoidCollisions, contentLayout, triggerPosition, alignOffset, insets, dimensions }: GetAlignPositionArgs) {
+  const insetLeft = insets?.left ?? 0;
+  const insetRight = insets?.right ?? 0;
+  const maxContentWidth = dimensions.width - insetLeft - insetRight;
+
+  const contentWidth = Math.min(contentLayout.width, maxContentWidth);
+
+  let left = getLeftPosition(align, triggerPosition.pageX, triggerPosition.width, contentWidth, alignOffset, insetLeft, insetRight, dimensions);
+
+  if (avoidCollisions) {
+    const doesCollide = left < insetLeft || left + contentWidth > dimensions.width - insetRight;
+    if (doesCollide) {
+      const spaceLeft = left - insetLeft;
+      const spaceRight = dimensions.width - insetRight - (left + contentWidth);
+
+      if (spaceLeft > spaceRight && spaceLeft >= contentWidth) {
+        left = insetLeft;
+      } else if (spaceRight >= contentWidth) {
+        left = dimensions.width - insetRight - contentWidth;
+      } else {
+        const centeredPosition = Math.max(insetLeft, (dimensions.width - contentWidth - insetRight) / 2);
+        left = centeredPosition;
+      }
+    }
+  }
+
+  return { left, maxWidth: maxContentWidth };
+}
+
+function getLeftPosition(
+  align: "start" | "center" | "end",
+  triggerPageX: number,
+  triggerWidth: number,
+  contentWidth: number,
+  alignOffset: number,
+  insetLeft: number,
+  insetRight: number,
+  dimensions: ScaledSize,
+) {
+  let left = 0;
+  if (align === "start") {
+    left = triggerPageX;
+  }
+  if (align === "center") {
+    left = triggerPageX + triggerWidth / 2 - contentWidth / 2;
+  }
+  if (align === "end") {
+    left = triggerPageX + triggerWidth - contentWidth;
+  }
+  return Math.max(insetLeft, Math.min(left + alignOffset, dimensions.width - contentWidth - insetRight));
+}
+
+type GetContentStyleArgs = GetPositionArgs & GetSidePositionArgs & GetAlignPositionArgs;
+
+function getContentStyle({ align, avoidCollisions, contentLayout, side, triggerPosition, alignOffset, insets, sideOffset, dimensions }: GetContentStyleArgs) {
+  return Object.assign(
+    { position: "absolute" } as const,
+    getSidePosition({
+      side,
+      triggerPosition,
+      contentLayout,
+      sideOffset,
+      insets,
+      avoidCollisions,
+      dimensions,
+    }),
+    getAlignPosition({
+      align,
+      avoidCollisions,
+      triggerPosition,
+      contentLayout,
+      alignOffset,
+      insets,
+      dimensions,
+    }),
+  );
+}

package/src/hover-card/hover-card.tsx

@@ -0,0 +1,255 @@
+import * as React from "react";
+import { BackHandler, Pressable, View, type GestureResponderEvent, type LayoutChangeEvent, type LayoutRectangle } from "react-native";
+
+import { useAugmentedRef, useRelativePosition, type LayoutPosition } from "../hooks";
+import { Portal as RNPPortal } from "../portal";
+import * as Slot from "../slot";
+
+import type {
+  ContentProps,
+  ContentRef,
+  BackdropProps,
+  BackdropRef,
+  PortalProps,
+  SharedRootContext,
+  RootProps,
+  RootRef,
+  TriggerProps,
+  TriggerRef,
+} from "./types";
+
+interface RootContextInterface extends SharedRootContext {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  triggerPosition: LayoutPosition | null;
+  setTriggerPosition: (triggerPosition: 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>(
+  ({ render, openDelay: _openDelay, closeDelay: _closeDelay, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+    const nativeID = React.useId();
+    const [triggerPosition, setTriggerPosition] = 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,
+          contentLayout,
+          nativeID,
+          setContentLayout,
+          setTriggerPosition,
+          triggerPosition,
+        }}
+      >
+        <Component
+          ref={ref}
+          {...viewProps}
+        />
+      </RootContext.Provider>
+    );
+  },
+);
+
+Root.displayName = "RootNativeHoverCard";
+
+function useRootContext() {
+  const context = React.useContext(RootContext);
+  if (!context) {
+    throw new Error("HoverCard compound components cannot be rendered outside the HoverCard component");
+  }
+  return context;
+}
+
+const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ onPress: onPressProp, disabled = false, ...props }, ref) => {
+  const { open, onOpenChange, setTriggerPosition } = useRootContext();
+
+  const augmentedRef = useAugmentedRef({
+    ref,
+    methods: {
+      open: () => {
+        onOpenChange(true);
+        augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+          setTriggerPosition({ width, pageX, pageY: pageY, height });
+        });
+      },
+      close: () => {
+        setTriggerPosition(null);
+        onOpenChange(false);
+      },
+    },
+  });
+
+  function onPress(ev: GestureResponderEvent) {
+    if (disabled) return;
+    augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+      setTriggerPosition({ width, pageX, pageY: pageY, height });
+    });
+
+    onOpenChange(!open);
+    onPressProp?.(ev);
+  }
+
+  return (
+    <Component
+      ref={augmentedRef}
+      aria-disabled={disabled ?? undefined}
+      role="button"
+      onPress={onPress}
+      disabled={disabled ?? undefined}
+      {...props}
+    />
+  );
+});
+
+Trigger.displayName = "TriggerNativeHoverCard";
+
+/**
+ * @warning when using a custom `<PortalHost />`, you might 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.triggerPosition) {
+    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, setTriggerPosition, setContentLayout } = useRootContext();
+
+  function onPress(ev: GestureResponderEvent) {
+    if (closeOnPress) {
+      setTriggerPosition(null);
+      setContentLayout(null);
+      onOpenChange(false);
+    }
+    OnPressProp?.(ev);
+  }
+
+  if (!keepMounted) {
+    if (!open) {
+      return null;
+    }
+  }
+
+  return (
+    <Component
+      ref={ref}
+      onPress={onPress}
+      {...props}
+    />
+  );
+});
+
+Backdrop.displayName = "BackdropNativeHoverCard";
+
+/**
+ * @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 = "start",
+      side = "bottom",
+      sideOffset = 0,
+      alignOffset = 0,
+      avoidCollisions = true,
+      onLayout: onLayoutProp,
+      insets,
+      style,
+      disablePositioningStyle,
+      ...props
+    },
+    ref,
+  ) => {
+    const { open, onOpenChange, contentLayout, nativeID, setContentLayout, setTriggerPosition, triggerPosition } = useRootContext();
+
+    React.useEffect(() => {
+      const backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
+        setTriggerPosition(null);
+        setContentLayout(null);
+        onOpenChange(false);
+        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 (!open) {
+        return null;
+      }
+    }
+
+    return (
+      <Component
+        ref={ref}
+        role="dialog"
+        nativeID={nativeID}
+        aria-modal={true}
+        style={[positionStyle, style]}
+        onLayout={onLayout}
+        onStartShouldSetResponder={onStartShouldSetResponder}
+        {...props}
+      />
+    );
+  },
+);
+
+Content.displayName = "ContentNativeHoverCard";
+
+export { Content, Backdrop, Portal, Root, Trigger, useRootContext };
+
+function onStartShouldSetResponder() {
+  return true;
+}

package/src/hover-card/hover-card.web.tsx

@@ -0,0 +1,161 @@
+// import * as HoverCard from "@radix-ui/react-hover-card";
+// import * as React from "react";
+// import { Pressable, View } from "react-native";
+
+// import { useAugmentedRef } from "../hooks";
+// import * as Slot from "../slot";
+
+// import type {
+//   ContentProps,
+//   ContentRef,
+//   BackdropProps,
+//   BackdropRef,
+//   PortalProps,
+//   SharedRootContext,
+//   RootProps,
+//   RootRef,
+//   TriggerProps,
+//   TriggerRef,
+// } from "./types";
+
+// const HoverCardContext = React.createContext<SharedRootContext | null>(null);
+
+// const Root = React.forwardRef<RootRef, RootProps>(({ openDelay, closeDelay, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+//   const [open, setOpen] = React.useState(false);
+
+//   function onOpenChange(value: boolean) {
+//     setOpen(value);
+//     onOpenChangeProp?.(value);
+//   }
+
+//
+//   return (
+//     <HoverCardContext.Provider value={{ open, onOpenChange }}>
+//       <HoverCard.Root
+//         open={open}
+//         onOpenChange={onOpenChange}
+//         openDelay={openDelay}
+//         closeDelay={closeDelay}
+//       >
+//         <Component
+//           ref={ref}
+//           {...viewProps}
+//         />
+//       </HoverCard.Root>
+//     </HoverCardContext.Provider>
+//   );
+// });
+
+// Root.displayName = "RootWebHoverCard";
+
+// function useRootContext() {
+//   const context = React.useContext(HoverCardContext);
+//   if (!context) {
+//     throw new Error("HoverCard compound components cannot be rendered outside the HoverCard component");
+//   }
+//   return context;
+// }
+
+// const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ ...props }, ref) => {
+//   const { onOpenChange } = useRootContext();
+//   const augmentedRef = useAugmentedRef({
+//     ref,
+//     methods: {
+//       open() {
+//         onOpenChange(true);
+//       },
+//       close() {
+//         onOpenChange(false);
+//       },
+//     },
+//   });
+
+//
+//   return (
+//     <HoverCard.Trigger render>
+//       <Component
+//         ref={augmentedRef}
+//         {...props}
+//       />
+//     </HoverCard.Trigger>
+//   );
+// });
+
+// Trigger.displayName = "TriggerWebHoverCard";
+
+// function Portal({ keepMounted, container, children }: PortalProps) {
+//   return (
+//     <HoverCard.Portal
+//       keepMounted={keepMounted}
+//       container={container}
+//       children={children}
+//     />
+//   );
+// }
+
+// const Backdrop = React.forwardRef<BackdropRef, BackdropProps>(({ ...props }, ref) => {
+//
+//   return (
+//     <Component
+//       ref={ref}
+//       {...props}
+//     />
+//   );
+// });
+
+// Backdrop.displayName = "BackdropWebHoverCard";
+
+// const Content = React.forwardRef<ContentRef, ContentProps>(
+//   (
+//     {
+//       render = false,
+//       keepMounted,
+//       align,
+//       side,
+//       sideOffset,
+//       alignOffset = 0,
+//       avoidCollisions = true,
+//       insets,
+//       loop: _loop,
+//       onCloseAutoFocus: _onCloseAutoFocus,
+//       onEscapeKeyDown,
+//       onPointerDownOutside,
+//       onFocusOutside,
+//       onInteractOutside,
+//       collisionBoundary,
+//       sticky,
+//       hideWhenDetached,
+//       ...props
+//     },
+//     ref,
+//   ) => {
+//
+//     return (
+//       <HoverCard.Content
+//         keepMounted={keepMounted}
+//         alignOffset={alignOffset}
+//         avoidCollisions={avoidCollisions}
+//         collisionPadding={insets}
+//         onEscapeKeyDown={onEscapeKeyDown}
+//         onPointerDownOutside={onPointerDownOutside}
+//         onFocusOutside={onFocusOutside}
+//         onInteractOutside={onInteractOutside}
+//         collisionBoundary={collisionBoundary}
+//         sticky={sticky}
+//         hideWhenDetached={hideWhenDetached}
+//         align={align}
+//         side={side}
+//         sideOffset={sideOffset}
+//       >
+//         <Component
+//           ref={ref}
+//           {...props}
+//         />
+//       </HoverCard.Content>
+//     );
+//   },
+// );
+
+// Content.displayName = "ContentWebHoverCard";
+
+// export { Content, Backdrop, Portal, Root, Trigger, useRootContext };

package/src/hover-card/index.ts

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