@korsolutions/ui 0.0.18 → 0.0.20

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

@@ -6,3 +6,7 @@ export * from "./card";
 export * from "./empty";
 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";

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/primitives/textarea/index.ts

@@ -0,0 +1,2 @@
+export * from "./textarea";
+export type { TextareaStyles } from "./types";

package/src/primitives/textarea/textarea.tsx

@@ -0,0 +1,56 @@
+import { TextInput, TextInputProps } from "react-native";
+import { TextareaState, TextareaStyles } from "./types";
+import { useState } from "react";
+
+export type TextareaPrimitiveBaseProps = Omit<TextInputProps, "onChange"> & {
+  onChange?: TextInputProps["onChangeText"];
+
+  isDisabled?: boolean;
+};
+
+export interface TextareaPrimitiveProps extends TextareaPrimitiveBaseProps {
+  render?: (props: TextareaPrimitiveProps) => React.ReactNode;
+
+  styles?: TextareaStyles;
+}
+
+const calculateState = (props: TextareaPrimitiveProps, isFocused: boolean): TextareaState => {
+  if (props.isDisabled) {
+    return "disabled";
+  }
+  if (isFocused) {
+    return "focused";
+  }
+  return "default";
+};
+
+export function TextareaPrimitive(props: TextareaPrimitiveProps) {
+  const [isFocused, setIsFocused] = useState(false);
+  const state = calculateState(props, isFocused);
+
+  const composedStyles = [props.styles?.default?.style, props.styles?.[state]?.style, props.style];
+  const composedProps = {
+    ...props.styles?.default,
+    ...props.styles?.[state],
+    ...props,
+  };
+  const Component = props.render ?? TextInput;
+  return (
+    <Component
+      {...composedProps}
+      multiline
+      onChange={undefined}
+      onChangeText={props.onChange}
+      onFocus={(e) => {
+        setIsFocused(true);
+        props.onFocus?.(e);
+      }}
+      onBlur={(e) => {
+        setIsFocused(false);
+        props.onBlur?.(e);
+      }}
+      readOnly={props.isDisabled || props.readOnly}
+      style={composedStyles}
+    />
+  );
+}

package/src/primitives/textarea/types.ts

@@ -0,0 +1,5 @@
+import { TextareaPrimitiveBaseProps } from "./textarea";
+
+export type TextareaState = "default" | "focused" | "disabled";
+
+export type TextareaStyles = Partial<Record<TextareaState, TextareaPrimitiveBaseProps>>;

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 });
+    });
+  });
+};