@korsolutions/ui 0.0.19 → 0.0.20

package/src/primitives/popover/popover-close.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Pressable, PressableProps, StyleProp, ViewStyle } from "react-native";
+import { usePopover } from "./context";
+
+export interface PopoverCloseProps extends Omit<PressableProps, "onPress"> {
+  children?: React.ReactNode;
+
+  onPress?: () => void;
+
+  render?: (props: PopoverCloseProps) => React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function PopoverClose(props: PopoverCloseProps) {
+  const popover = usePopover();
+
+  const Component = props.render ?? Pressable;
+  return (
+    <Component
+      {...props}
+      onPress={() => {
+        popover.setIsOpen(false);
+        props.onPress?.();
+      }}
+      style={props.style}
+    />
+  );
+}

package/src/primitives/popover/popover-content.tsx

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

package/src/primitives/popover/popover-overlay.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { usePopover } from "./context";
+import { Pressable, PressableProps, StyleProp, StyleSheet, ViewStyle } from "react-native";
+
+export interface PopoverOverlayProps extends Omit<PressableProps, "onPress"> {
+  children?: React.ReactNode;
+
+  onPress?: () => void;
+  closeOnPress?: boolean;
+
+  render?: (props: PopoverOverlayProps) => React.ReactElement;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function PopoverOverlay(props: PopoverOverlayProps) {
+  const { closeOnPress = true, ...restProps } = props;
+  const popover = usePopover();
+
+  const composedStyle = [StyleSheet.absoluteFill, popover.styles?.overlay, props.style];
+
+  const Component = props.render ?? Pressable;
+  return (
+    <Component
+      {...restProps}
+      onPress={() => {
+        if (closeOnPress) {
+          popover.setIsOpen(false);
+        }
+        props.onPress?.();
+      }}
+      style={composedStyle}
+    >
+      {props.children}
+    </Component>
+  );
+}

package/src/primitives/popover/popover-portal.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Portal } from "../portal";
+import { usePopover, PopoverContext } from "./context";
+
+export interface PopoverPortalProps {
+  children?: React.ReactNode;
+}
+
+export function PopoverPortal(props: PopoverPortalProps) {
+  const popover = usePopover();
+
+  if (!popover.isOpen) {
+    return null;
+  }
+
+  return (
+    <Portal name="popover-portal">
+      <PopoverContext.Provider value={popover}>{props.children}</PopoverContext.Provider>
+    </Portal>
+  );
+}

package/src/primitives/popover/popover-root.tsx

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

package/src/primitives/popover/popover-trigger.tsx

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

package/src/primitives/popover/types.ts

@@ -0,0 +1,7 @@
+import { PopoverContentProps } from "./popover-content";
+import { PopoverOverlayProps } from "./popover-overlay";
+
+export interface PopoverStyles {
+  overlay?: PopoverOverlayProps["style"];
+  content?: PopoverContentProps["style"];
+}

package/src/utils/get-ref-layout.ts

@@ -0,0 +1,16 @@
+import { LayoutRectangle, View } from "react-native";
+
+const DEFAULT_LAYOUT: LayoutRectangle = { x: 0, y: 0, width: 0, height: 0 };
+
+export const getRefLayout = async (ref: React.RefObject<View | null>) => {
+  return new Promise<LayoutRectangle>((resolve) => {
+    if (!ref?.current?.["measureInWindow"]) {
+      console.warn("getRefLayout.NoRef");
+      resolve(DEFAULT_LAYOUT);
+      return;
+    }
+    ref.current.measureInWindow((x, y, width, height) => {
+      resolve({ x, y, width, height });
+    });
+  });
+};