@korsolutions/ui 0.0.19 → 0.0.20

package/src/components/popover/popover.tsx

@@ -0,0 +1,51 @@
+import { PopoverPrimitive, usePopover } from "@/primitives";
+import React, { forwardRef } from "react";
+import { PopoverVariants } from "./variants";
+import type { PopoverTriggerRef } from "@/primitives";
+import { PressableProps } from "react-native";
+
+interface PopoverChildrenProps {
+  close: () => void;
+}
+
+export interface PopoverProps {
+  children: ((props: PopoverChildrenProps) => React.ReactNode) | React.ReactNode;
+  trigger: React.ReactElement<PressableProps>;
+  closeOnOverlayPress?: boolean;
+
+  variant?: keyof typeof PopoverVariants;
+}
+
+const PopoverContentComponent = (props: { children: PopoverProps["children"] }) => {
+  const popover = usePopover();
+  if (typeof props.children === "function") {
+    return (
+      <PopoverPrimitive.Content>
+        {props.children({
+          close: () => popover.setIsOpen(false),
+        })}
+      </PopoverPrimitive.Content>
+    );
+  }
+  return <PopoverPrimitive.Content>{props.children}</PopoverPrimitive.Content>;
+};
+
+const PopoverComponent = forwardRef<PopoverTriggerRef, PopoverProps>((props, ref) => {
+  const useVariantStyles = PopoverVariants[props.variant || "default"];
+  const styles = useVariantStyles();
+
+  return (
+    <PopoverPrimitive.Root styles={styles}>
+      <PopoverPrimitive.Trigger ref={ref}>{props.trigger}</PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Overlay closeOnPress={props.closeOnOverlayPress}>
+          <PopoverContentComponent>{props.children}</PopoverContentComponent>
+        </PopoverPrimitive.Overlay>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  );
+});
+
+PopoverComponent.displayName = "Popover";
+
+export const Popover = PopoverComponent;

package/src/components/popover/variants/default.tsx

@@ -0,0 +1,26 @@
+import { PopoverStyles } from "@/primitives/popover/types";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export const usePopoverVariantDefault = (): PopoverStyles => {
+  return useThemedStyles(
+    ({ colors, radius }): PopoverStyles => ({
+      overlay: {
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+      },
+      content: {
+        backgroundColor: colors.surface,
+        borderRadius: radius,
+        borderWidth: 1,
+        borderColor: colors.border,
+        padding: 16,
+        minWidth: 280,
+        maxWidth: 320,
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.15,
+        shadowRadius: 12,
+        elevation: 8,
+      },
+    })
+  );
+};

package/src/components/popover/variants/index.ts

@@ -0,0 +1,5 @@
+import { usePopoverVariantDefault } from "./default";
+
+export const PopoverVariants = {
+  default: usePopoverVariantDefault,
+};

package/src/hooks/useRelativePosition.ts

@@ -0,0 +1,188 @@
+import * as React from "react";
+import { useWindowDimensions, type LayoutRectangle, type ScaledSize } from "react-native";
+
+interface Insets {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+}
+
+type UseRelativePositionArgs = Omit<GetContentStyleArgs, "triggerPosition" | "contentLayout" | "dimensions"> & {
+  triggerPosition: LayoutPosition | null;
+  contentLayout: LayoutRectangle | null;
+};
+
+export function useRelativePosition({
+  align,
+  avoidCollisions,
+  triggerPosition,
+  contentLayout,
+  alignOffset,
+  insets,
+  sideOffset,
+  side,
+}: UseRelativePositionArgs) {
+  const dimensions = useWindowDimensions();
+
+  return React.useMemo(() => {
+    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;
+}
+
+export const DEFAULT_LAYOUT: LayoutRectangle = { x: 0, y: 0, width: 0, height: 0 };
+export const DEFAULT_POSITION: LayoutPosition = { height: 0, width: 0, pageX: 0, pageY: 0 };
+
+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/primitives/button/button-root.tsx

@@ -1,13 +1,11 @@
 import React, { useState } from "react";
-import { Pressable, StyleProp, ViewStyle } from "react-native";
+import { Pressable, PressableProps, StyleProp, ViewStyle } from "react-native";
 import { ButtonStyles, ButtonState } from "./types";
 import { ButtonPrimitiveContext } from "./button-context";
 
-export interface ButtonPrimitiveRootProps {
+export interface ButtonPrimitiveRootProps extends PressableProps {
   children?: React.ReactNode;
 
-  onPress?: () => void;
-
   isDisabled?: boolean;
   isLoading?: boolean;
 

package/src/primitives/dropdown-menu/context.ts

@@ -0,0 +1,25 @@
+import { createContext, Dispatch, useContext } from "react";
+import { LayoutRectangle } from "react-native";
+import { DropdownMenuStyles } from "./types";
+import { LayoutPosition } from "@/hooks/useRelativePosition";
+
+export interface DropdownMenuContext {
+  isOpen: boolean;
+  setIsOpen: Dispatch<React.SetStateAction<boolean>>;
+  triggerPosition: LayoutPosition;
+  setTriggerPosition: Dispatch<React.SetStateAction<LayoutPosition>>;
+  contentLayout: LayoutRectangle;
+  setContentLayout: Dispatch<React.SetStateAction<LayoutRectangle>>;
+
+  styles?: DropdownMenuStyles;
+}
+
+export const DropdownMenuContext = createContext<DropdownMenuContext | undefined>(undefined);
+
+export const useDropdownMenu = () => {
+  const context = useContext(DropdownMenuContext);
+  if (!context) {
+    throw new Error("useDropdownMenu must be used within a DropdownMenuRoot");
+  }
+  return context;
+};

package/src/primitives/dropdown-menu/dropdown-menu-button.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import { StyleProp, Text, TextStyle } from "react-native";
+import { useDropdownMenu } from "./context";
+import { DropdownMenuButtonState } from "./types";
+
+export interface DropdownMenuButtonProps {
+  children?: string;
+  onPress?: () => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+
+  render?: (props: DropdownMenuButtonProps) => React.ReactElement;
+
+  style?: StyleProp<TextStyle>;
+}
+
+const calculateState = (isHovered: boolean): DropdownMenuButtonState => {
+  if (isHovered) {
+    return "hovered";
+  }
+  return "default";
+};
+
+export function DropdownMenuButton(props: DropdownMenuButtonProps) {
+  const menu = useDropdownMenu();
+  const [isHovered, setIsHovered] = useState(false);
+  const state = calculateState(isHovered);
+  const composedStyle = [menu.styles?.button?.default, menu.styles?.button?.[state], props.style];
+
+  const handlePress = () => {
+    props.onPress?.();
+    menu.setIsOpen((prev) => !prev);
+  };
+
+  const Component = props.render ?? Text;
+  return (
+    <Component
+      {...props}
+      onPress={handlePress}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      style={composedStyle}
+    >
+      {props.children}
+    </Component>
+  );
+}

package/src/primitives/dropdown-menu/dropdown-menu-content.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { StyleProp, View, ViewStyle } from "react-native";
+import { useDropdownMenu } from "./context";
+import { useRelativePosition } from "@/hooks/useRelativePosition";
+
+export interface DropdownMenuContentProps {
+  children?: React.ReactNode;
+
+  render?: (props: DropdownMenuContentProps) => React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function DropdownMenuContent(props: DropdownMenuContentProps) {
+  const menu = useDropdownMenu();
+
+  const positionStyle = useRelativePosition({
+    align: "start",
+    avoidCollisions: true,
+    triggerPosition: menu.triggerPosition,
+    contentLayout: menu.contentLayout,
+    alignOffset: 0,
+    side: "bottom",
+    sideOffset: 0,
+  });
+
+  const composedStyle = [positionStyle, menu.styles?.content, props.style];
+
+  const Component = props.render ?? View;
+  return (
+    <Component
+      {...props}
+      onLayout={(e) => {
+        menu.setContentLayout(e.nativeEvent.layout);
+      }}
+      style={composedStyle}
+    />
+  );
+}

package/src/primitives/dropdown-menu/dropdown-menu-divider.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { StyleProp, View, ViewStyle } from "react-native";
+import { useDropdownMenu } from "./context";
+
+export interface DropdownMenuDividerProps {
+  render?: (props: DropdownMenuDividerProps) => React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function DropdownMenuDivider(props: DropdownMenuDividerProps) {
+  const menu = useDropdownMenu();
+
+  const composedStyle = [menu.styles?.divider, props.style];
+
+  const Component = props.render ?? View;
+  return <Component {...props} style={composedStyle} />;
+}

package/src/primitives/dropdown-menu/dropdown-menu-overlay.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { useDropdownMenu } from "./context";
+import { Pressable, StyleProp, StyleSheet, ViewStyle } from "react-native";
+
+export interface DropdownMenuOverlayProps {
+  children?: React.ReactNode;
+
+  render?: (props: DropdownMenuOverlayProps) => React.ReactElement;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function DropdownMenuOverlay(props: DropdownMenuOverlayProps) {
+  const menu = useDropdownMenu();
+
+  const composedStyle = [StyleSheet.absoluteFill, menu.styles?.overlay, props.style];
+
+  const Component = props.render ?? Pressable;
+  return (
+    <Component
+      onPress={() => {
+        menu.setIsOpen(false);
+      }}
+      style={composedStyle}
+    >
+      {props.children}
+    </Component>
+  );
+}

package/src/primitives/dropdown-menu/dropdown-menu-portal.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Portal } from "../portal";
+import { useDropdownMenu, DropdownMenuContext } from "./context";
+
+export interface DropdownMenuPortalProps {
+  children?: React.ReactNode;
+}
+
+export function DropdownMenuPortal(props: DropdownMenuPortalProps) {
+  const menu = useDropdownMenu();
+
+  if (!menu.isOpen) {
+    return null;
+  }
+
+  return (
+    <Portal name="dropdown-menu-portal">
+      <DropdownMenuContext.Provider value={menu}>{props.children}</DropdownMenuContext.Provider>
+    </Portal>
+  );
+}

package/src/primitives/dropdown-menu/dropdown-menu-root.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+import { LayoutRectangle } from "react-native";
+import { DropdownMenuStyles } from "./types";
+import { DropdownMenuContext } from "./context";
+import { DEFAULT_LAYOUT, DEFAULT_POSITION, LayoutPosition } from "@/hooks/useRelativePosition";
+
+export interface DropdownMenuRootProps {
+  children?: React.ReactNode;
+
+  render?: (props: DropdownMenuRootProps) => React.ReactNode;
+
+  styles?: DropdownMenuStyles;
+}
+
+export function DropdownMenuRoot(props: DropdownMenuRootProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [triggerPosition, setTriggerPosition] = useState<LayoutPosition>(DEFAULT_POSITION);
+  const [contentLayout, setContentLayout] = useState<LayoutRectangle>(DEFAULT_LAYOUT);
+
+  return (
+    <DropdownMenuContext.Provider
+      value={{
+        isOpen,
+        setIsOpen,
+        triggerPosition,
+        setTriggerPosition,
+        contentLayout,
+        setContentLayout,
+        styles: props.styles,
+      }}
+    >
+      {props.children}
+    </DropdownMenuContext.Provider>
+  );
+}

package/src/primitives/dropdown-menu/dropdown-menu-trigger.tsx

@@ -0,0 +1,47 @@
+import React, { forwardRef, RefAttributes, useImperativeHandle, useRef } from "react";
+import { PressableProps, View } from "react-native";
+import { useDropdownMenu } from "./context";
+
+export interface DropdownMenuTriggerProps extends PressableProps {
+  children: React.ReactElement<RefAttributes<View> & PressableProps>;
+}
+
+export interface DropdownMenuTriggerRef {
+  open: () => void;
+  close: () => void;
+}
+
+export const DropdownMenuTrigger = forwardRef<DropdownMenuTriggerRef, DropdownMenuTriggerProps>((props, ref) => {
+  const dropdownMenu = useDropdownMenu();
+  const triggerRef = useRef<View>(null);
+
+  const onTriggerPress = async () => {
+    triggerRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+      dropdownMenu.setTriggerPosition({
+        height,
+        width,
+        pageX,
+        pageY,
+      });
+    });
+
+    dropdownMenu.setIsOpen((prev) => !prev);
+  };
+
+  useImperativeHandle(ref, () => ({
+    open: () => dropdownMenu.setIsOpen(true),
+    close: () => dropdownMenu.setIsOpen(false),
+  }));
+
+  return React.cloneElement(props.children, {
+    ref: triggerRef,
+    onPress: onTriggerPress,
+    role: "button",
+    accessible: true,
+    accessibilityRole: "button",
+    accessibilityState: { expanded: dropdownMenu.isOpen },
+    ...props.children.props,
+  });
+});
+
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";

package/src/primitives/dropdown-menu/index.ts

@@ -0,0 +1,26 @@
+import { DropdownMenuRoot } from "./dropdown-menu-root";
+import { DropdownMenuTrigger } from "./dropdown-menu-trigger";
+import { DropdownMenuContent } from "./dropdown-menu-content";
+import { DropdownMenuButton } from "./dropdown-menu-button";
+import { DropdownMenuDivider } from "./dropdown-menu-divider";
+import { DropdownMenuPortal } from "./dropdown-menu-portal";
+import { DropdownMenuOverlay } from "./dropdown-menu-overlay";
+
+export const DropdownMenuPrimitive = {
+  Root: DropdownMenuRoot,
+  Trigger: DropdownMenuTrigger,
+  Portal: DropdownMenuPortal,
+  Overlay: DropdownMenuOverlay,
+  Content: DropdownMenuContent,
+  Button: DropdownMenuButton,
+  Divider: DropdownMenuDivider,
+};
+
+export type { DropdownMenuRootProps } from "./dropdown-menu-root";
+export type { DropdownMenuTriggerProps } from "./dropdown-menu-trigger";
+export type { DropdownMenuPortalProps } from "./dropdown-menu-portal";
+export type { DropdownMenuOverlayProps } from "./dropdown-menu-overlay";
+export type { DropdownMenuContentProps } from "./dropdown-menu-content";
+export type { DropdownMenuButtonProps } from "./dropdown-menu-button";
+export type { DropdownMenuDividerProps } from "./dropdown-menu-divider";
+export type { DropdownMenuStyles } from "./types";

package/src/primitives/dropdown-menu/types.ts

@@ -0,0 +1,13 @@
+import { DropdownMenuContentProps } from "./dropdown-menu-content";
+import { DropdownMenuButtonProps } from "./dropdown-menu-button";
+import { DropdownMenuDividerProps } from "./dropdown-menu-divider";
+import { DropdownMenuOverlayProps } from "./dropdown-menu-overlay";
+
+export type DropdownMenuButtonState = "default" | "hovered";
+
+export interface DropdownMenuStyles {
+  content?: DropdownMenuContentProps["style"];
+  button?: Partial<Record<DropdownMenuButtonState, DropdownMenuButtonProps["style"]>>;
+  divider?: DropdownMenuDividerProps["style"];
+  overlay?: DropdownMenuOverlayProps["style"];
+}

package/src/primitives/index.ts

@@ -8,3 +8,5 @@ export * from "./avatar";
 export * from "./toast";
 export * from "./badge";
 export * from "./textarea";
+export * from "./dropdown-menu";
+export * from "./popover";

package/src/primitives/popover/context.ts

@@ -0,0 +1,25 @@
+import { createContext, Dispatch, useContext } from "react";
+import { PopoverStyles } from "./types";
+import { LayoutRectangle } from "react-native";
+import { LayoutPosition } from "@/hooks/useRelativePosition";
+
+export interface PopoverContext {
+  isOpen: boolean;
+  setIsOpen: Dispatch<React.SetStateAction<boolean>>;
+  contentLayout: LayoutRectangle;
+  setContentLayout: Dispatch<React.SetStateAction<LayoutRectangle>>;
+  triggerPosition: LayoutPosition;
+  setTriggerPosition: Dispatch<React.SetStateAction<LayoutPosition>>;
+
+  styles?: PopoverStyles;
+}
+
+export const PopoverContext = createContext<PopoverContext | undefined>(undefined);
+
+export const usePopover = () => {
+  const context = useContext(PopoverContext);
+  if (!context) {
+    throw new Error("usePopover must be used within a PopoverRoot");
+  }
+  return context;
+};

package/src/primitives/popover/index.ts

@@ -0,0 +1,24 @@
+import { PopoverRoot } from "./popover-root";
+import { PopoverTrigger } from "./popover-trigger";
+import { PopoverPortal } from "./popover-portal";
+import { PopoverOverlay } from "./popover-overlay";
+import { PopoverContent } from "./popover-content";
+import { PopoverClose } from "./popover-close";
+
+export const PopoverPrimitive = {
+  Root: PopoverRoot,
+  Trigger: PopoverTrigger,
+  Portal: PopoverPortal,
+  Overlay: PopoverOverlay,
+  Content: PopoverContent,
+  Close: PopoverClose,
+};
+
+export type { PopoverRootProps } from "./popover-root";
+export type { PopoverTriggerProps, PopoverTriggerRef } from "./popover-trigger";
+export type { PopoverPortalProps } from "./popover-portal";
+export type { PopoverOverlayProps } from "./popover-overlay";
+export type { PopoverContentProps } from "./popover-content";
+export type { PopoverCloseProps } from "./popover-close";
+export type { PopoverContext } from "./context";
+export { usePopover } from "./context";