@korsolutions/ui 0.0.59 → 0.0.61

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/types.ts

@@ -11,8 +11,6 @@ export type MenuRadioItemState =
   | "selected"
   | "disabled";
 
-export type MenuRadioIndicatorState = "default" | "selected";
-
 export interface MenuStyles {
   content?: MenuContentProps["style"];
   item?: Partial<Record<MenuButtonState, StyleProp<ViewStyle>>>;
@@ -24,11 +22,8 @@ export interface MenuStyles {
   label?: StyleProp<TextStyle>;
   separator?: StyleProp<ViewStyle>;
   checkboxItem?: Partial<Record<MenuCheckboxItemState, StyleProp<ViewStyle>>>;
-  checkboxIndicator?: StyleProp<TextStyle>;
+  selectionIndicator?: TextStyle & SvgProps;
   radioGroup?: StyleProp<ViewStyle>;
   radioItem?: Partial<Record<MenuRadioItemState, StyleProp<ViewStyle>>>;
-  radioIndicator?: Partial<
-    Record<MenuRadioIndicatorState, StyleProp<ViewStyle>>
-  >;
   shortcut?: StyleProp<TextStyle>;
 }

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

@@ -67,13 +67,16 @@ export const useMenuVariantDefault = (): MenuStyles => {
           opacity: 0.5,
         },
       },
-      checkboxIndicator: {
-        fontSize: fontSize * 0.75,
-        fontWeight: "bold",
+      selectionIndicator: {
         color: colors.foreground,
+        fontSize: fontSize,
         width: fontSize,
-        textAlign: "center",
+        size: fontSize,
+        strokeWidth: 2,
         marginLeft: "auto",
+        style: {
+          marginLeft: "auto",
+        },
       },
       radioItem: {
         default: {
@@ -90,18 +93,6 @@ export const useMenuVariantDefault = (): MenuStyles => {
           opacity: 0.5,
         },
       },
-      radioIndicator: {
-        default: {
-          width: 8,
-          height: 8,
-          borderRadius: 4,
-          backgroundColor: "transparent",
-          marginLeft: "auto",
-        },
-        selected: {
-          backgroundColor: colors.foreground,
-        },
-      },
       shortcut: {
         fontSize: fontSize * 0.75,
         fontFamily: fontFamily,

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,5 +1,13 @@
-import { useEffect, useSyncExternalStore } from "react";
-import { Platform, View } from "react-native";
+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,
@@ -59,33 +67,57 @@ function removePortal(hostName: string, name: string) {
   emit();
 }
 
+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>;
 }
 

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

package/src/components/separator/index.ts

@@ -0,0 +1,2 @@
+export { Separator, type SeparatorProps } from "./separator";
+export type { SeparatorStyles } from "./types";

package/src/components/separator/separator.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { View, type StyleProp, type ViewStyle } from "react-native";
+import { SeparatorVariants } from "./variants";
+
+export interface SeparatorProps {
+  variant?: keyof typeof SeparatorVariants;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function Separator(props: SeparatorProps) {
+  const { variant = "horizontal", style } = props;
+  const variantStyles = SeparatorVariants[variant]();
+
+  return <View style={[variantStyles.root, style]} />;
+}

package/src/components/separator/types.ts

@@ -0,0 +1,5 @@
+import type { StyleProp, ViewStyle } from "react-native";
+
+export interface SeparatorStyles {
+  root?: StyleProp<ViewStyle>;
+}

package/src/components/separator/variants/horizontal.tsx

@@ -0,0 +1,14 @@
+import { useThemedStyles } from "../../../utils/use-themed-styles";
+import type { SeparatorStyles } from "../types";
+
+export const useSeparatorVariantHorizontal = (): SeparatorStyles => {
+  return useThemedStyles(
+    ({ colors }): SeparatorStyles => ({
+      root: {
+        height: 1,
+        alignSelf: "stretch",
+        backgroundColor: colors.border,
+      },
+    }),
+  );
+};

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

@@ -0,0 +1,7 @@
+import { useSeparatorVariantHorizontal } from "./horizontal";
+import { useSeparatorVariantVertical } from "./vertical";
+
+export const SeparatorVariants = {
+  horizontal: useSeparatorVariantHorizontal,
+  vertical: useSeparatorVariantVertical,
+};

package/src/components/separator/variants/vertical.tsx

@@ -0,0 +1,14 @@
+import { useThemedStyles } from "../../../utils/use-themed-styles";
+import type { SeparatorStyles } from "../types";
+
+export const useSeparatorVariantVertical = (): SeparatorStyles => {
+  return useThemedStyles(
+    ({ colors }): SeparatorStyles => ({
+      root: {
+        width: 1,
+        alignSelf: "stretch",
+        backgroundColor: colors.border,
+      },
+    }),
+  );
+};

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

@@ -1,3 +1,4 @@
+import { Platform } from "react-native";
 import { type TextareaStyles } from "../..";
 import { useThemedStyles } from "../../../utils/use-themed-styles";
 
@@ -15,6 +16,12 @@ export function useTextareaVariantDefault(): TextareaStyles {
           paddingVertical: 12,
           paddingHorizontal: 16,
           outlineWidth: 0,
+          ...Platform.select({
+            default: {},
+            web: {
+              outline: "none",
+            },
+          }),
           fontFamily,
           fontSize,
           minHeight: 120,

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

@@ -5,29 +5,35 @@ import {
   type LayoutRectangle,
   type ViewStyle,
 } from "react-native";
-import type { SafeAreaInsets } from "../safe-area";
+import { usePortalOffset } from "../components/portal";
+import { useSafeAreaInsets, type SafeAreaInsets } from "../safe-area";
 
 type UseRelativePositionArgs = Omit<
   GetContentStyleArgs,
-  "triggerPosition" | "contentLayout" | "dimensions"
-> & {
-  triggerPosition: LayoutPosition | null;
-  contentLayout: LayoutRectangle | null;
-};
+  "dimensions" | "insets"
+>;
 
 export function useRelativePosition({
   align,
   triggerPosition,
   contentLayout,
   alignOffset,
-  insets,
   sideOffset,
   preferredSide,
 }: UseRelativePositionArgs): ViewStyle {
   const dimensions = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const portalOffset = usePortalOffset();
 
   return useMemo(() => {
-    if (!triggerPosition || !contentLayout) {
+    const hasLayout =
+      triggerPosition.width > 0 &&
+      triggerPosition.height > 0 &&
+      contentLayout.width > 0 &&
+      contentLayout.height > 0 &&
+      portalOffset.isLoaded;
+
+    if (!hasLayout) {
       return {
         position: "absolute",
         opacity: 0,
@@ -36,11 +42,22 @@ export function useRelativePosition({
       };
     }
 
+    // Adjust trigger position to account for the portal container's
+    // offset from the window origin. measureInWindow returns window-relative
+    // coordinates, but the portal content is positioned relative to its
+    // container which may not be at the window origin (e.g. on Android
+    // where the status bar offsets the view hierarchy).
+    const adjustedTriggerPosition: LayoutPosition = {
+      ...triggerPosition,
+      pageX: triggerPosition.pageX - portalOffset.value.x,
+      pageY: triggerPosition.pageY - portalOffset.value.y,
+    };
+
     const style = getContentStyle({
       align,
       contentLayout,
       preferredSide,
-      triggerPosition,
+      triggerPosition: adjustedTriggerPosition,
       alignOffset,
       insets,
       sideOffset,
@@ -58,6 +75,7 @@ export function useRelativePosition({
     dimensions.width,
     dimensions.height,
     sideOffset,
+    portalOffset,
   ]);
 }
 
@@ -72,7 +90,7 @@ interface GetPositionArgs {
   dimensions: DisplayMetrics;
   triggerPosition: LayoutPosition;
   contentLayout: LayoutRectangle;
-  insets?: SafeAreaInsets;
+  insets: SafeAreaInsets;
 }
 
 interface GetSidePositionArgs extends GetPositionArgs {
@@ -95,8 +113,7 @@ export const DEFAULT_POSITION: LayoutPosition = {
 
 interface GetSideArgs {
   preferredSide: "top" | "bottom";
-  insetTop: number;
-  insetBottom: number;
+  insets: SafeAreaInsets;
   positionTop: number;
   positionBottom: number;
   contentLayout: LayoutRectangle;
@@ -105,29 +122,28 @@ interface GetSideArgs {
 
 function getSide({
   preferredSide,
-  insetTop,
-  insetBottom,
+  insets,
   positionTop,
   positionBottom,
   contentLayout,
   dimensions,
 }: GetSideArgs) {
   if (preferredSide === "bottom") {
-    const spaceBelow = dimensions.height - insetBottom - positionBottom;
+    const spaceBelow = dimensions.height - insets.bottom - positionBottom;
     if (spaceBelow >= contentLayout.height) {
       return "bottom";
     }
-    const spaceAbove = positionTop - insetTop;
+    const spaceAbove = positionTop - insets.top;
     if (spaceAbove > spaceBelow) {
       return "top";
     }
     return "bottom";
   }
-  const spaceAbove = positionTop - insetTop;
+  const spaceAbove = positionTop - insets.top;
   if (spaceAbove >= contentLayout.height) {
     return "top";
   }
-  const spaceBelow = dimensions.height - insetBottom - positionBottom;
+  const spaceBelow = dimensions.height - insets.bottom - positionBottom;
   if (spaceBelow > spaceAbove) {
     return "bottom";
   }
@@ -142,8 +158,6 @@ function getSidePosition({
   insets,
   dimensions,
 }: GetSidePositionArgs) {
-  const insetTop = insets?.top ?? 0;
-  const insetBottom = insets?.bottom ?? 0;
   const positionTop =
     triggerPosition?.pageY - sideOffset - contentLayout.height;
   const positionBottom =
@@ -151,8 +165,7 @@ function getSidePosition({
 
   const side = getSide({
     preferredSide,
-    insetTop,
-    insetBottom,
+    insets,
     positionTop,
     positionBottom,
     contentLayout,
@@ -162,15 +175,15 @@ function getSidePosition({
   if (side === "top") {
     return {
       top: Math.min(
-        Math.max(insetTop, positionTop),
-        dimensions.height - insetBottom - contentLayout.height,
+        Math.max(insets.top, positionTop),
+        dimensions.height - insets.bottom - contentLayout.height,
       ),
     };
   }
 
   return {
     top: Math.min(
-      dimensions.height - insetBottom - contentLayout.height,
+      dimensions.height - insets.bottom - contentLayout.height,
       positionBottom,
     ),
   };
@@ -189,9 +202,7 @@ function getAlignPosition({
   insets,
   dimensions,
 }: GetAlignPositionArgs) {
-  const insetLeft = insets?.left ?? 0;
-  const insetRight = insets?.right ?? 0;
-  const maxContentWidth = dimensions.width - insetLeft - insetRight;
+  const maxContentWidth = dimensions.width - insets.left - insets.right;
 
   const contentWidth = Math.min(contentLayout.width, maxContentWidth);
 
@@ -201,25 +212,24 @@ function getAlignPosition({
     triggerPosition.width,
     contentWidth,
     alignOffset,
-    insetLeft,
-    insetRight,
+    insets,
     dimensions,
   );
 
   const doesCollide =
-    left < insetLeft || left + contentWidth > dimensions.width - insetRight;
+    left < insets.left || left + contentWidth > dimensions.width - insets.right;
   if (doesCollide) {
-    const spaceLeft = left - insetLeft;
-    const spaceRight = dimensions.width - insetRight - (left + contentWidth);
+    const spaceLeft = left - insets.left;
+    const spaceRight = dimensions.width - insets.right - (left + contentWidth);
 
     if (spaceLeft > spaceRight && spaceLeft >= contentWidth) {
-      left = insetLeft;
+      left = insets.left;
     } else if (spaceRight >= contentWidth) {
-      left = dimensions.width - insetRight - contentWidth;
+      left = dimensions.width - insets.right - contentWidth;
     } else {
       const centeredPosition = Math.max(
-        insetLeft,
-        (dimensions.width - contentWidth - insetRight) / 2,
+        insets.left,
+        (dimensions.width - contentWidth - insets.right) / 2,
       );
       left = centeredPosition;
     }
@@ -234,8 +244,7 @@ function getLeftPosition(
   triggerWidth: number,
   contentWidth: number,
   alignOffset: number,
-  insetLeft: number,
-  insetRight: number,
+  insets: SafeAreaInsets,
   dimensions: DisplayMetrics,
 ) {
   let left = 0;
@@ -249,8 +258,11 @@ function getLeftPosition(
     left = triggerPageX + triggerWidth - contentWidth;
   }
   return Math.max(
-    insetLeft,
-    Math.min(left + alignOffset, dimensions.width - contentWidth - insetRight),
+    insets.left,
+    Math.min(
+      left + alignOffset,
+      dimensions.width - contentWidth - insets.right,
+    ),
   );
 }
 

package/src/themes/provider.tsx

@@ -36,6 +36,9 @@ export interface ComponentsConfig {
   toast?: {
     icons?: Partial<Record<keyof typeof ToastVariants, IconComponent>>;
   };
+  menu?: {
+    selectionIcon?: IconComponent;
+  };
 }
 
 const ThemeContext = createContext<ThemeContext | null>(null);