@korsolutions/ui 0.0.58 → 0.0.60

package/src/components/menu/components/menu-radio-group.tsx

@@ -0,0 +1,35 @@
+import React, { useMemo } from "react";
+import { View, type StyleProp, type ViewStyle } from "react-native";
+import { MenuRadioGroupContext, useMenu } from "../context";
+
+export interface MenuRadioGroupProps {
+  children?: React.ReactNode;
+  value: string;
+  onValueChange: (value: string) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function MenuRadioGroup(props: MenuRadioGroupProps) {
+  const menu = useMenu();
+  const composedStyle = [menu.styles?.radioGroup, props.style];
+
+  const contextValue = useMemo(
+    () => ({
+      value: props.value,
+      onValueChange: props.onValueChange,
+    }),
+    [props.value, props.onValueChange],
+  );
+
+  return (
+    <MenuRadioGroupContext.Provider value={contextValue}>
+      <View
+        accessibilityRole="radiogroup"
+        role="radiogroup"
+        style={composedStyle}
+      >
+        {props.children}
+      </View>
+    </MenuRadioGroupContext.Provider>
+  );
+}

package/src/components/menu/components/menu-radio-item.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from "react";
+import { Pressable, type StyleProp, type ViewStyle } from "react-native";
+import { useMenu, useMenuRadioGroup } from "../context";
+import type { MenuRadioItemState } from "../types";
+import { useOrganizedChildren } from "../use-organized-children";
+import { MenuSelectionIndicator } from "./menu-selection-indicator";
+
+export interface MenuRadioItemProps {
+  children: React.ReactNode;
+  value: string;
+  disabled?: boolean;
+  closeOnPress?: boolean;
+  render?: (props: MenuRadioItemProps) => React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+const calculateState = (
+  isHovered: boolean,
+  isSelected: boolean,
+  disabled?: boolean,
+): MenuRadioItemState => {
+  if (disabled) return "disabled";
+  if (isSelected) return "selected";
+  if (isHovered) return "hovered";
+  return "default";
+};
+
+export function MenuRadioItem(props: MenuRadioItemProps) {
+  const menu = useMenu();
+  const radioGroup = useMenuRadioGroup();
+  const [isHovered, setIsHovered] = useState(false);
+  const isSelected = radioGroup.value === props.value;
+  const state = calculateState(isHovered, isSelected, props.disabled);
+
+  const composedStyle = [
+    menu.styles?.radioItem?.default,
+    menu.styles?.radioItem?.[state],
+    props.style,
+  ];
+
+  const handlePress = () => {
+    if (props.disabled) return;
+    radioGroup.onValueChange(props.value);
+    if (props.closeOnPress) {
+      menu.setIsOpen(false);
+    }
+  };
+
+  const organizedChildren = useOrganizedChildren(props.children);
+
+  if (props.render) {
+    return (
+      <>
+        {props.render({
+          ...props,
+          children: organizedChildren,
+        })}
+      </>
+    );
+  }
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      onPointerEnter={() => setIsHovered(true)}
+      onPointerLeave={() => setIsHovered(false)}
+      disabled={props.disabled}
+      accessibilityRole="radio"
+      accessibilityState={{ checked: isSelected, disabled: props.disabled }}
+      style={composedStyle}
+    >
+      {organizedChildren}
+      <MenuSelectionIndicator isSelected={isSelected} />
+    </Pressable>
+  );
+}

package/src/components/menu/components/menu-selection-indicator.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Text, View } from "react-native";
+import { useComponentsConfig } from "../../../themes";
+import { useMenu } from "../context";
+
+interface MenuSelectionIndicatorProps {
+  isSelected: boolean;
+}
+
+export function MenuSelectionIndicator({
+  isSelected,
+}: MenuSelectionIndicatorProps) {
+  const config = useComponentsConfig();
+  const menu = useMenu();
+  const SelectionIcon = config?.menu?.selectionIcon;
+
+  if (!isSelected) {
+    return <View style={menu.styles?.selectionIndicator} />;
+  }
+
+  if (SelectionIcon) {
+    return <SelectionIcon {...menu.styles?.selectionIndicator} />;
+  }
+
+  return <Text style={menu.styles?.selectionIndicator}>✓</Text>;
+}

package/src/components/menu/components/menu-separator.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { View, type StyleProp, type ViewStyle } from "react-native";
+import { useMenu } from "../context";
+
+export interface MenuSeparatorProps {
+  render?: (props: MenuSeparatorProps) => React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function MenuSeparator(props: MenuSeparatorProps) {
+  const menu = useMenu();
+  const composedStyle = [menu.styles?.separator, props.style];
+
+  const Component = props.render ?? View;
+  return (
+    <Component
+      {...props}
+      role="separator"
+      style={composedStyle}
+    />
+  );
+}

package/src/components/menu/components/menu-shortcut.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Text, type StyleProp, type TextStyle } from "react-native";
+import { useMenu } from "../context";
+
+export interface MenuShortcutProps {
+  children: string;
+  render?: (props: MenuShortcutProps) => React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function MenuShortcut(props: MenuShortcutProps) {
+  const menu = useMenu();
+  const composedStyle = [menu.styles?.shortcut, props.style];
+
+  const Component = props.render ?? Text;
+  return (
+    <Component {...props} style={composedStyle}>
+      {props.children}
+    </Component>
+  );
+}

package/src/components/menu/context.ts

@@ -1,6 +1,6 @@
-import type { LayoutPosition } from "../../hooks/use-relative-position";
 import { createContext, type Dispatch, useContext } from "react";
 import type { LayoutRectangle } from "react-native";
+import type { LayoutPosition } from "../../hooks/use-relative-position";
 import type { MenuStyles } from "./types";
 
 export interface MenuContext {
@@ -23,3 +23,20 @@ export const useMenu = () => {
   }
   return context;
 };
+
+export interface MenuRadioGroupContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+export const MenuRadioGroupContext = createContext<
+  MenuRadioGroupContextValue | undefined
+>(undefined);
+
+export const useMenuRadioGroup = () => {
+  const context = useContext(MenuRadioGroupContext);
+  if (!context) {
+    throw new Error("useMenuRadioGroup must be used within a Menu.RadioGroup");
+  }
+  return context;
+};

package/src/components/menu/index.ts

@@ -1,8 +1,15 @@
+import { MenuCheckboxItem } from "./components/menu-checkbox-item";
 import { MenuContent } from "./components/menu-content";
+import { MenuGroup } from "./components/menu-group";
 import { MenuItem } from "./components/menu-item";
+import { MenuLabel } from "./components/menu-label";
 import { MenuOverlay } from "./components/menu-overlay";
 import { MenuPortal } from "./components/menu-portal";
+import { MenuRadioGroup } from "./components/menu-radio-group";
+import { MenuRadioItem } from "./components/menu-radio-item";
 import { MenuRoot } from "./components/menu-root";
+import { MenuSeparator } from "./components/menu-separator";
+import { MenuShortcut } from "./components/menu-shortcut";
 import { MenuTrigger } from "./components/menu-trigger";
 
 export const Menu = {
@@ -12,12 +19,26 @@ export const Menu = {
   Overlay: MenuOverlay,
   Content: MenuContent,
   Item: MenuItem,
+  Group: MenuGroup,
+  Label: MenuLabel,
+  Separator: MenuSeparator,
+  CheckboxItem: MenuCheckboxItem,
+  RadioGroup: MenuRadioGroup,
+  RadioItem: MenuRadioItem,
+  Shortcut: MenuShortcut,
 };
 
+export type { MenuCheckboxItemProps } from "./components/menu-checkbox-item";
 export type { MenuContentProps } from "./components/menu-content";
+export type { MenuGroupProps } from "./components/menu-group";
 export type { MenuItemProps } from "./components/menu-item";
+export type { MenuLabelProps } from "./components/menu-label";
 export type { MenuOverlayProps } from "./components/menu-overlay";
 export type { MenuPortalProps } from "./components/menu-portal";
+export type { MenuRadioGroupProps } from "./components/menu-radio-group";
+export type { MenuRadioItemProps } from "./components/menu-radio-item";
 export type { MenuRootProps } from "./components/menu-root";
+export type { MenuSeparatorProps } from "./components/menu-separator";
+export type { MenuShortcutProps } from "./components/menu-shortcut";
 export type { MenuTriggerProps } from "./components/menu-trigger";
 export type { MenuStyles } from "./types";

package/src/components/menu/types.ts

@@ -1,11 +1,29 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { SvgProps } from "../../types/props.types";
 import type { MenuContentProps } from "./components/menu-content";
-import type { MenuItemProps } from "./components/menu-item";
 import type { MenuOverlayProps } from "./components/menu-overlay";
 
 export type MenuButtonState = "default" | "hovered";
+export type MenuCheckboxItemState = "default" | "hovered" | "disabled";
+export type MenuRadioItemState =
+  | "default"
+  | "hovered"
+  | "selected"
+  | "disabled";
 
 export interface MenuStyles {
   content?: MenuContentProps["style"];
-  item?: Partial<Record<MenuButtonState, MenuItemProps["style"]>>;
+  item?: Partial<Record<MenuButtonState, StyleProp<ViewStyle>>>;
+  itemText?: StyleProp<TextStyle>;
+  itemIcon?: SvgProps;
   overlay?: MenuOverlayProps["style"];
+
+  group?: StyleProp<ViewStyle>;
+  label?: StyleProp<TextStyle>;
+  separator?: StyleProp<ViewStyle>;
+  checkboxItem?: Partial<Record<MenuCheckboxItemState, StyleProp<ViewStyle>>>;
+  selectionIndicator?: TextStyle & SvgProps;
+  radioGroup?: StyleProp<ViewStyle>;
+  radioItem?: Partial<Record<MenuRadioItemState, StyleProp<ViewStyle>>>;
+  shortcut?: StyleProp<TextStyle>;
 }

package/src/components/menu/use-organized-children.tsx

@@ -0,0 +1,38 @@
+import React, { useMemo } from "react";
+import { Text } from "react-native";
+import { getElementProp } from "../../utils/element-utils";
+import { Icon } from "../icon";
+import { useMenu } from "./context";
+
+export function useOrganizedChildren(children: React.ReactNode) {
+  const menu = useMenu();
+
+  const organizedChildren = useMemo(() => {
+    if (typeof children === "string") {
+      return <Text style={menu.styles?.itemText}>{children}</Text>;
+    }
+    if (Array.isArray(children)) {
+      return children.map((child, index) => {
+        if (typeof child === "string") {
+          return (
+            <Text key={index} style={menu.styles?.itemText}>
+              {child}
+            </Text>
+          );
+        } else if (React.isValidElement(child) && child.type === Icon) {
+          return React.cloneElement(child as React.ReactElement<any>, {
+            key: child.key,
+            ...menu.styles?.itemIcon,
+            style: [
+              menu.styles?.itemIcon?.style,
+              getElementProp(child, "style"),
+            ],
+          });
+        }
+        return child;
+      });
+    }
+    return children;
+  }, [children, menu.styles?.itemIcon]);
+  return organizedChildren;
+}

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

@@ -4,9 +4,7 @@ import { useThemedStyles } from "../../../utils/use-themed-styles";
 export const useMenuVariantDefault = (): MenuStyles => {
   return useThemedStyles(
     ({ colors, radius, fontFamily, fontSize }): MenuStyles => ({
-      overlay: {
-        backgroundColor: "rgba(0, 0, 0, 0.5)",
-      },
+      overlay: {},
       content: {
         overflow: "hidden",
         backgroundColor: colors.surface,
@@ -21,15 +19,84 @@ export const useMenuVariantDefault = (): MenuStyles => {
       },
       item: {
         default: {
+          flexDirection: "row",
+          alignItems: "center",
+          paddingVertical: 12,
+          paddingHorizontal: 16,
+          gap: 8,
+        },
+        hovered: {
+          backgroundColor: colors.muted,
+        },
+      },
+      itemText: {
+        fontFamily: fontFamily,
+        fontSize: fontSize,
+        color: colors.foreground,
+      },
+      itemIcon: {
+        color: colors.foreground,
+        size: fontSize * 1.25,
+      },
+      label: {
+        paddingVertical: 8,
+        paddingHorizontal: 16,
+        fontFamily: fontFamily,
+        fontSize: fontSize * 0.75,
+        fontWeight: "600",
+        color: colors.mutedForeground,
+      },
+      separator: {
+        height: 1,
+        backgroundColor: colors.border,
+        marginVertical: 4,
+        marginHorizontal: 8,
+      },
+      checkboxItem: {
+        default: {
+          flexDirection: "row",
+          alignItems: "center",
           paddingVertical: 12,
           paddingHorizontal: 16,
-          fontFamily: fontFamily,
-          fontSize: fontSize,
-          color: colors.foreground,
+          gap: 8,
         },
         hovered: {
           backgroundColor: colors.muted,
         },
+        disabled: {
+          opacity: 0.5,
+        },
+      },
+      selectionIndicator: {
+        color: colors.foreground,
+        fontSize: fontSize,
+        width: fontSize,
+        size: fontSize,
+        strokeWidth: 2,
+        marginLeft: "auto",
+        style: {
+          marginLeft: "auto",
+        },
+      },
+      radioItem: {
+        default: {
+          flexDirection: "row",
+          alignItems: "center",
+          paddingVertical: 12,
+          paddingHorizontal: 16,
+          gap: 8,
+        },
+        hovered: {
+          backgroundColor: colors.muted,
+        },
+        disabled: {
+          opacity: 0.5,
+        },
+      },
+      shortcut: {
+        fontSize: fontSize * 0.75,
+        fontFamily: fontFamily,
+        color: colors.mutedForeground,
       },
     }),
   );

package/src/components/phone-input/components/country-picker.tsx

@@ -64,7 +64,7 @@ export function CountryPicker() {
     contentLayout,
     alignOffset: 0,
     preferredSide: "bottom",
-    sideOffset: 4,
+    sideOffset: 2,
   });
 
   const countryButtonStyles = StyleSheet.flatten([

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

@@ -1,7 +1,6 @@
-import { useRelativePosition } from "../../../hooks/use-relative-position";
-import { useSafeAreaInsets } from "../../../safe-area";
 import React from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useRelativePosition } from "../../../hooks/use-relative-position";
 import { usePopover } from "../context";
 
 export interface PopoverContentProps {
@@ -14,7 +13,6 @@ export interface PopoverContentProps {
 
 export function PopoverContent(props: PopoverContentProps) {
   const popover = usePopover();
-  const insets = useSafeAreaInsets();
 
   const positionStyle = useRelativePosition({
     align: "start",
@@ -23,7 +21,6 @@ export function PopoverContent(props: PopoverContentProps) {
     alignOffset: 0,
     preferredSide: "bottom",
     sideOffset: 0,
-    insets,
   });
 
   const composedStyle = [positionStyle, popover.styles?.content, props.style];

package/src/components/portal/index.ts

@@ -1,2 +1,3 @@
 export * from "./portal";
+export * from "./portal-offset";
 export * from "./portal.constants";

package/src/components/portal/portal-offset.ts

@@ -0,0 +1,28 @@
+import { createContext, useContext } from "react";
+
+export interface PortalOffset {
+  x: number;
+  y: number;
+}
+
+export type PortalOffsetValue = PortalOffset | null | undefined;
+
+// null means the offset is not measure yet but will be
+// undefined means the offset is not available and will never be (e.g. on web or ios when FullWindowOverlay is used)
+export const PortalOffsetContext = createContext<PortalOffsetValue>(undefined);
+
+type UsePortalOffsetReturn = {
+  value: PortalOffset;
+  isLoaded: boolean;
+};
+
+export function usePortalOffset(): UsePortalOffsetReturn {
+  const value = useContext(PortalOffsetContext);
+  if (value === undefined) {
+    return { value: { x: 0, y: 0 }, isLoaded: true };
+  }
+  if (value === null) {
+    return { value: { x: 0, y: 0 }, isLoaded: false };
+  }
+  return { value, isLoaded: true };
+}

package/src/components/portal/portal.tsx

@@ -1,6 +1,18 @@
-import { useEffect, useSyncExternalStore } from "react";
-import { Platform, View } from "react-native";
-import { DEFAULT_PORTAL_HOST, type PortalHostProps, type PortalProps } from "./portal.constants";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from "react";
+import { Platform, View, type HostInstance } from "react-native";
+import { PortalOffsetContext, type PortalOffset } from "./portal-offset";
+import {
+  DEFAULT_PORTAL_HOST,
+  type PortalHostProps,
+  type PortalProps,
+} from "./portal.constants";
 
 type PortalMap = Map<string, React.ReactNode>;
 type PortalHostMap = Map<string, PortalMap>;
@@ -11,7 +23,10 @@ type PortalStore = {
 };
 
 const store: PortalStore = {
-  map: new Map<string, PortalMap>().set(DEFAULT_PORTAL_HOST, new Map<string, React.ReactNode>()),
+  map: new Map<string, PortalMap>().set(
+    DEFAULT_PORTAL_HOST,
+    new Map<string, React.ReactNode>(),
+  ),
   listeners: new Set(),
 };
 
@@ -30,7 +45,11 @@ function subscribe(cb: () => void) {
   };
 }
 
-function updatePortal(hostName: string, name: string, children: React.ReactNode) {
+function updatePortal(
+  hostName: string,
+  name: string,
+  children: React.ReactNode,
+) {
   const next = new Map(store.map);
   const portal = next.get(hostName) ?? new Map<string, React.ReactNode>();
   portal.set(name, children);
@@ -48,34 +67,65 @@ function removePortal(hostName: string, name: string) {
   emit();
 }
 
-export function PortalHost({ name = DEFAULT_PORTAL_HOST, container }: PortalHostProps) {
+function DefaultContainer(props: React.PropsWithChildren) {
+  const containerRef = useRef<HostInstance>(null);
+  const [offset, setOffset] = useState<PortalOffset | null>(null);
+
+  const onLayout = useCallback(() => {
+    containerRef.current?.measureInWindow((pageX: number, pageY: number) => {
+      setOffset((prev) => {
+        if (prev?.x === pageX && prev?.y === pageY) return prev;
+        return { x: pageX, y: pageY };
+      });
+    });
+  }, []);
+
+  return (
+    <View
+      ref={containerRef}
+      onLayout={onLayout}
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        elevation: 999,
+        zIndex: 999,
+        pointerEvents: "box-none",
+      }}
+    >
+      <PortalOffsetContext.Provider value={offset}>
+        {props.children}
+      </PortalOffsetContext.Provider>
+    </View>
+  );
+}
+
+export function PortalHost({
+  name = DEFAULT_PORTAL_HOST,
+  container,
+}: PortalHostProps) {
   const map = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   const portalMap = map.get(name) ?? new Map<string, React.ReactNode>();
-  if (portalMap.size === 0) return null;
-
-  const Container = Platform.select({
-    default: (props: React.PropsWithChildren) => (
-      <View
-        {...props}
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          elevation: 999,
-          zIndex: 999,
-          pointerEvents: "box-none",
-        }}
-      />
-    ),
-    ...container,
-  });
+  const Container = useMemo(
+    () =>
+      Platform.select({
+        default: DefaultContainer,
+        ...container,
+      }),
+    [container],
+  );
 
+  if (portalMap.size === 0) return null;
   return <Container>{Array.from(portalMap.values())}</Container>;
 }
 
-export function Portal({ name, hostName = DEFAULT_PORTAL_HOST, children }: PortalProps) {
+export function Portal({
+  name,
+  hostName = DEFAULT_PORTAL_HOST,
+  children,
+}: PortalProps) {
   useEffect(() => {
     updatePortal(hostName, name, children);
   }, [hostName, name, children]);

package/src/components/select/components/select-content.tsx

@@ -1,7 +1,7 @@
-import { useRelativePosition } from "../../../hooks/use-relative-position";
-import { calculateComposedStyles } from "../../../utils/calculate-styles";
 import React from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useRelativePosition } from "../../../hooks/use-relative-position";
+import { calculateComposedStyles } from "../../../utils/calculate-styles";
 import { useSelect } from "../context";
 
 export interface SelectContentProps {
@@ -14,7 +14,12 @@ export interface SelectContentProps {
 
 export function SelectContent(props: SelectContentProps) {
   const select = useSelect();
-  const composedStyles = calculateComposedStyles(select.styles, select.state, "content", props.style);
+  const composedStyles = calculateComposedStyles(
+    select.styles,
+    select.state,
+    "content",
+    props.style,
+  );
 
   const positionStyle = useRelativePosition({
     align: "start",
@@ -22,13 +27,17 @@ export function SelectContent(props: SelectContentProps) {
     contentLayout: select.contentLayout,
     alignOffset: 0,
     preferredSide: "bottom",
-    sideOffset: 0,
+    sideOffset: 2,
   });
 
   const Component = props.render ?? View;
   return (
     <Component
-      style={[positionStyle, composedStyles, { width: select.triggerPosition.width }]}
+      style={[
+        positionStyle,
+        composedStyles,
+        { width: select.triggerPosition.width },
+      ]}
       onLayout={(e) => {
         select.setContentLayout(e.nativeEvent.layout);
       }}