@korsolutions/ui 0.0.90 → 0.0.92

package/src/components/combobox/components/combobox-trigger.tsx

@@ -6,9 +6,17 @@ import { measureLayoutPosition } from "../../../utils/normalize-layout";
 import { useCombobox } from "../context";
 import type { ComboboxTriggerState } from "../types";
 
-export interface ComboboxTriggerProps {
-  placeholder?: string;
-}
+type ExtendableProps = Omit<TextInputProps, "value" | "onChange" | "onChangeText">;
+
+type RenderProps = {
+  inputRef: React.RefObject<TextInputRef | null>;
+  open: () => void;
+  setInputValue: (value: string) => void;
+};
+
+export type ComboboxTriggerProps = ExtendableProps & {
+  render?: (props: RenderProps) => React.ReactNode;
+};
 
 const calculateState = (isDisabled: boolean, isOpen: boolean): ComboboxTriggerState => {
   if (isDisabled) return "disabled";
@@ -16,17 +24,17 @@ const calculateState = (isDisabled: boolean, isOpen: boolean): ComboboxTriggerSt
   return "default";
 };
 
-export function ComboboxTrigger(props: ComboboxTriggerProps) {
+export function ComboboxTrigger({ render, ...props }: ComboboxTriggerProps) {
   const combobox = useCombobox();
   const triggerRef = useRef<TextInputRef>(null);
 
   const triggerState = calculateState(combobox.isDisabled, combobox.isOpen);
-
-  const displayValue = combobox.isOpen ? combobox.inputValue : (combobox.value ?? "");
+  const selectedLabel = combobox.value != null ? combobox.getItemLabel(combobox.value) : "";
+  const displayValue = combobox.isOpen ? combobox.inputValue : selectedLabel;
 
   const open = () => {
     if (combobox.isDisabled) return;
-    combobox.setInputValue(combobox.value ?? "");
+    combobox.setInputValue(selectedLabel);
     requestAnimationFrame(() => {
       measureLayoutPosition(triggerRef.current, (layout) => {
         combobox.setTriggerPosition(layout);
@@ -35,9 +43,25 @@ export function ComboboxTrigger(props: ComboboxTriggerProps) {
     });
   };
 
+  const onChangeText = (text: string) => {
+    if (combobox.isDisabled) return;
+    combobox.setInputValue(text);
+    if (!combobox.isOpen) open();
+  };
+
+  const onFocus = () => {
+    if (!combobox.isOpen) open();
+  };
+
+  const setInputValue = (value: string) => {
+    combobox.setInputValue(value);
+    if (triggerRef.current) {
+      setInnerInputValue(triggerRef.current, value);
+    }
+  };
+
   useEffect(() => {
-    if (!triggerRef.current) return;
-    setInnerInputValue(triggerRef.current, displayValue);
+    setInputValue(displayValue);
   }, [displayValue]);
 
   useEffect(() => {
@@ -60,26 +84,25 @@ export function ComboboxTrigger(props: ComboboxTriggerProps) {
   const composedStyle = StyleSheet.flatten([
     triggerStyles?.default?.style,
     triggerStyles?.[triggerState]?.style,
+    props.style,
   ]);
 
+  if (render) {
+    return render({
+      inputRef: triggerRef,
+      open,
+      setInputValue,
+    });
+  }
+
   return (
     <TextInput
       {...composedProps}
       ref={triggerRef}
       value={undefined}
       onChange={undefined}
-      onChangeText={(text) => {
-        if (combobox.isDisabled) return;
-        combobox.setInputValue(text);
-        if (!combobox.isOpen) {
-          open();
-        }
-      }}
-      onFocus={() => {
-        if (!combobox.isOpen) {
-          open();
-        }
-      }}
+      onChangeText={onChangeText}
+      onFocus={onFocus}
       style={composedStyle}
     />
   );

package/src/components/combobox/context.ts

@@ -4,8 +4,13 @@ import type { LayoutPosition } from "../../hooks";
 import type { ComboboxState, ComboboxStyles } from "./types";
 
 export interface ComboboxContext {
-  value?: string;
-  onChange?: (value: string) => void;
+  items: readonly unknown[];
+  filteredItems: readonly unknown[];
+  getItemValue: (item: unknown) => string;
+  getItemLabel: (item: unknown) => string;
+
+  value: unknown | undefined;
+  onChange: ((item: unknown) => void) | undefined;
 
   isOpen: boolean;
   setIsOpen: Dispatch<React.SetStateAction<boolean>>;

package/src/components/combobox/index.ts

@@ -1,5 +1,6 @@
 import { ComboboxContent } from "./components/combobox-content";
 import { ComboboxEmpty } from "./components/combobox-empty";
+import { ComboboxList } from "./components/combobox-list";
 import { ComboboxOption } from "./components/combobox-option";
 import { ComboboxOverlay } from "./components/combobox-overlay";
 import { ComboboxPortal } from "./components/combobox-portal";
@@ -12,12 +13,14 @@ export const Combobox = {
   Portal: ComboboxPortal,
   Overlay: ComboboxOverlay,
   Content: ComboboxContent,
+  List: ComboboxList,
   Option: ComboboxOption,
   Empty: ComboboxEmpty,
 };
 
 export type { ComboboxContentProps } from "./components/combobox-content";
 export type { ComboboxEmptyProps } from "./components/combobox-empty";
+export type { ComboboxListProps } from "./components/combobox-list";
 export type { ComboboxOptionProps } from "./components/combobox-option";
 export type { ComboboxOverlayProps } from "./components/combobox-overlay";
 export type { ComboboxPortalProps } from "./components/combobox-portal";

package/src/components/combobox/types.ts

@@ -1,14 +1,13 @@
-import type { TextInputProps, TextStyle } from "react-native";
+import type { StyleProp, TextInputProps, TextStyle, ViewStyle } from "react-native";
 import type { ComboboxContentProps } from "./components/combobox-content";
 import type { ComboboxOverlayProps } from "./components/combobox-overlay";
-import type { ComboboxRootProps } from "./components/combobox-root";
 
 export type ComboboxState = "default" | "disabled";
 export type ComboboxTriggerState = ComboboxState | "focused";
 export type ComboboxOptionState = ComboboxState | "hovered" | "selected";
 
 export interface ComboboxStyles {
-  root?: Partial<Record<ComboboxState, ComboboxRootProps["style"]>>;
+  root?: Partial<Record<ComboboxState, StyleProp<ViewStyle>>>;
   trigger?: Partial<Record<ComboboxTriggerState, TextInputProps>>;
   overlay?: Partial<Record<ComboboxState, ComboboxOverlayProps["style"]>>;
   content?: Partial<Record<ComboboxState, ComboboxContentProps["style"]>>;

package/src/components/link/link.tsx

@@ -1,26 +1,42 @@
 import React from "react";
-import { Linking, Text as RnText, type TextProps as RnTextProps } from "react-native";
+import { Linking, Text as RnText, StyleSheet, type TextProps as RnTextProps } from "react-native";
+import { useComponentConfig } from "../../themes/provider";
 import { LinkVariants } from "./variants";
 
-export interface LinkProps extends RnTextProps {
-  href?: string;
+export type ExtendableProps = Omit<RnTextProps, "onPress" | "style">;
 
+export type LinkStyles = RnTextProps["style"];
+
+export type LinkProps = RnTextProps & {
   variant?: keyof typeof LinkVariants;
-}
+  style?: LinkStyles;
+} & (
+    | {
+        href?: string;
+      }
+    | {
+        onPress?: RnTextProps["onPress"];
+      }
+  );
 
 export function Link(props: LinkProps) {
-  const useVariantStyles = LinkVariants[props.variant ?? "default"];
+  const { style, onPress, variant = "default", ...rest } = props;
+  const useVariantStyles = LinkVariants[variant];
+  const config = useComponentConfig("link");
   const variantStyles = useVariantStyles();
 
   const handlePress: RnTextProps["onPress"] = async (e) => {
-    if (props.href) {
+    if ("href" in props && props.href) {
       const supported = await Linking.canOpenURL(props.href);
       if (supported) {
         await Linking.openURL(props.href);
       }
+    } else {
+      onPress?.(e);
     }
-    props.onPress?.(e);
   };
 
-  return <RnText {...props} style={variantStyles} onPress={handlePress} />;
+  const composedStyles = StyleSheet.flatten([variantStyles, config?.styles, style]);
+
+  return <RnText {...rest} style={composedStyles} onPress={handlePress} />;
 }

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Text, View } from "react-native";
+import { Text, View, type StyleProp, type ViewStyle } from "react-native";
 import { useComponentConfig } from "../../../themes/provider";
 import { useMenu } from "../context";
 
@@ -11,14 +11,15 @@ export function MenuSelectionIndicator({ isSelected }: MenuSelectionIndicatorPro
   const config = useComponentConfig("menu");
   const menu = useMenu();
   const SelectionIcon = config?.selectionIcon;
+  const indicatorStyles = menu.styles?.selectionIndicator;
 
   if (!isSelected) {
-    return <View style={menu.styles?.selectionIndicator} />;
+    return <View style={indicatorStyles as StyleProp<ViewStyle>} />;
   }
 
   if (SelectionIcon) {
-    return <SelectionIcon {...menu.styles?.selectionIndicator} />;
+    return <SelectionIcon {...indicatorStyles} />;
   }
 
-  return <Text style={menu.styles?.selectionIndicator}>✓</Text>;
+  return <Text style={indicatorStyles}>✓</Text>;
 }

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

@@ -1,28 +1,38 @@
-import React from "react";
-import { type StyleProp, StyleSheet, TextInput, type TextStyle } from "react-native";
+import React, { forwardRef } from "react";
+import { StyleSheet, TextInput, type TextInputProps } from "react-native";
+import type { TextInputRef } from "../../../types/element.types";
 import { usePhoneInput } from "../context";
 
-export interface PhoneInputProps {
-  placeholder?: string;
-  style?: StyleProp<TextStyle>;
-}
+export type ExpandableProps = Omit<TextInputProps, "value" | "onChangeText">;
 
-export function PhoneInput({ placeholder = "Enter phone number", style }: PhoneInputProps) {
-  const { styles, state, setIsFocused, phoneMask, isDisabled } = usePhoneInput();
+export type PhoneInputProps = ExpandableProps;
 
-  const inputStyles = StyleSheet.flatten([styles.input?.default, styles.input?.[state], style]);
+export const PhoneInput = forwardRef<TextInputRef, PhoneInputProps>(
+  ({ placeholder = "Enter phone number", style, ...props }, ref) => {
+    const { styles, state, setIsFocused, phoneMask, isDisabled } = usePhoneInput();
 
-  return (
-    <TextInput
-      value={phoneMask.displayValue}
-      onChangeText={phoneMask.onChangeText}
-      keyboardType={phoneMask.keyboardType}
-      placeholder={placeholder}
-      placeholderTextColor={StyleSheet.flatten(styles.countryButtonText?.disabled)?.color}
-      readOnly={isDisabled}
-      onFocus={() => setIsFocused(true)}
-      onBlur={() => setIsFocused(false)}
-      style={inputStyles}
-    />
-  );
-}
+    const inputStyles = StyleSheet.flatten([styles.input?.default, styles.input?.[state], style]);
+
+    return (
+      <TextInput
+        {...props}
+        ref={ref}
+        value={phoneMask.displayValue}
+        onChangeText={phoneMask.onChangeText}
+        keyboardType={phoneMask.keyboardType}
+        placeholder={placeholder}
+        placeholderTextColor={StyleSheet.flatten(styles.countryButtonText?.disabled)?.color}
+        readOnly={isDisabled}
+        onFocus={(e) => {
+          setIsFocused(true);
+          props.onFocus?.(e);
+        }}
+        onBlur={(e) => {
+          setIsFocused(false);
+          props.onBlur?.(e);
+        }}
+        style={inputStyles}
+      />
+    );
+  },
+);

package/src/components/portal/portal.tsx

@@ -6,7 +6,7 @@ import React, {
   useState,
   useSyncExternalStore,
 } from "react";
-import { Platform, View, type HostInstance } from "react-native";
+import { Platform, View } from "react-native";
 import { measureLayoutPosition } from "../../utils/normalize-layout";
 import { PortalOffsetContext, type PortalOffset } from "./portal-offset";
 import { DEFAULT_PORTAL_HOST, type PortalHostProps, type PortalProps } from "./portal.constants";
@@ -58,7 +58,7 @@ function removePortal(hostName: string, name: string) {
 }
 
 function DefaultContainer(props: React.PropsWithChildren) {
-  const containerRef = useRef<HostInstance>(null);
+  const containerRef = useRef<React.ComponentRef<typeof View>>(null);
   const [offset, setOffset] = useState<PortalOffset | null>(null);
 
   const onLayout = useCallback(() => {

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

@@ -1,12 +1,13 @@
-import { calculateComposedStyles } from "../../../utils/calculate-styles";
 import React, { useEffect, useState } from "react";
-import { Pressable, Text } from "react-native";
+import { Pressable, StyleSheet, type PressableProps } from "react-native";
+import type { ElementChildren } from "../../../types/element.types";
 import { useSelect } from "../context";
 import type { SelectOptionState, SelectState } from "../types";
 
 export type SelectOptionProps = {
   value: string;
-  children?: React.ReactNode;
+  children?: ElementChildren;
+  style?: PressableProps["style"];
 };
 
 const calculateState = (
@@ -32,8 +33,7 @@ export function SelectOption(props: SelectOptionProps): React.ReactElement {
   const isSelected = select.value === props.value;
 
   const optionState = calculateState(select.state, isHovered, isSelected);
-  const composedStyles = calculateComposedStyles(select.styles, optionState, "option");
-
+  const optionStyles = select.styles?.option;
   useEffect(() => {
     select.setOptions((prev) => {
       if (prev.find((option) => option.value === props.value)) {
@@ -43,23 +43,27 @@ export function SelectOption(props: SelectOptionProps): React.ReactElement {
     });
   }, [props.value, props.children]);
 
-  const Component = typeof props.children === "string" ? Text : Pressable;
+  const handlePress = () => {
+    select.onChange?.(props.value);
+    select.setIsOpen(false);
+  };
+  const handlePointerEnter = () => setIsHovered(true);
+  const handlePointerLeave = () => setIsHovered(false);
 
   return (
-    <Component
-      onPress={() => {
-        select.onChange?.(props.value);
-        select.setIsOpen(false);
-      }}
-      onPointerEnter={() => {
-        setIsHovered(true);
-      }}
-      onPointerLeave={() => {
-        setIsHovered(false);
-      }}
-      style={composedStyles}
+    <Pressable
+      onPress={handlePress}
+      onPointerEnter={handlePointerEnter}
+      onPointerLeave={handlePointerLeave}
+      style={(styleProps) =>
+        StyleSheet.flatten([
+          optionStyles?.default,
+          optionStyles?.[optionState],
+          typeof props.style === "function" ? props.style(styleProps) : props.style,
+        ])
+      }
     >
       {props.children}
-    </Component>
+    </Pressable>
   );
 }

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

@@ -1,5 +1,11 @@
 import React, { useRef } from "react";
-import { Pressable, Text, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+import {
+  Pressable,
+  Text,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
 import type { ViewRef } from "../../../types/element.types";
 import { calculateComposedStyles } from "../../../utils/calculate-styles";
 import { measureLayoutPosition } from "../../../utils/normalize-layout";
@@ -56,11 +62,10 @@ export function SelectValue(props: SelectValueProps) {
   const selectedOptionLabel = selectedOption?.label;
   const displayValue = selectedOptionLabel ?? select.value;
 
-  const composedStyles = calculateComposedStyles(
-    select.styles,
-    select.state,
-    displayValue ? "value" : "placeholder",
-  );
+  const key = displayValue ? "value" : "placeholder";
+  const slotStyles = select.styles?.[key];
+  const composedStyles: StyleProp<TextStyle> = [slotStyles?.default, slotStyles?.[select.state]];
+
   if (!!displayValue && typeof displayValue !== "string") {
     return <>{displayValue}</>;
   }

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

@@ -1,3 +1,4 @@
+import type { CursorValue } from "react-native";
 import type { Size } from "../../../utils/size-scale";
 import { useThemedStyles } from "../../../utils/use-themed-styles";
 import { type SelectStyles } from "../types";
@@ -23,6 +24,7 @@ export function useSelectVariantDefault(size: Size): SelectStyles {
         },
         disabled: {
           backgroundColor: colors.muted,
+          cursor: "not-allowed" as CursorValue,
         },
       },
       value: {
@@ -74,9 +76,11 @@ export function useSelectVariantDefault(size: Size): SelectStyles {
           lineHeight: s.lineHeight,
           color: colors.foreground,
           borderRadius: radius / 2,
+          cursor: "pointer",
         },
         disabled: {
           color: colors.mutedForeground,
+          cursor: "not-allowed" as CursorValue,
         },
         selected: {
           backgroundColor: colors.muted,

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

@@ -2,8 +2,8 @@ import { useMemo } from "react";
 import {
   Platform,
   useWindowDimensions,
-  type DisplayMetrics,
   type LayoutRectangle,
+  type ScaledSize,
   type ViewStyle,
 } from "react-native";
 import { usePortalOffset } from "../components/portal";
@@ -118,7 +118,7 @@ export interface LayoutPosition {
 }
 
 interface GetPositionArgs {
-  dimensions: DisplayMetrics;
+  dimensions: ScaledSize;
   triggerPosition: LayoutPosition;
   contentLayout: LayoutRectangle;
   insets: SafeAreaInsets;
@@ -148,7 +148,7 @@ interface GetSideArgs {
   positionTop: number;
   positionBottom: number;
   contentLayout: LayoutRectangle;
-  dimensions: DisplayMetrics;
+  dimensions: ScaledSize;
 }
 
 function getSide({
@@ -272,7 +272,7 @@ function getLeftPosition(
   contentWidth: number,
   alignOffset: number,
   insets: SafeAreaInsets,
-  dimensions: DisplayMetrics,
+  dimensions: ScaledSize,
 ) {
   let left = 0;
   if (align === "start") {

package/src/themes/types.ts

@@ -53,6 +53,7 @@ import type { EmptyStyles } from "../components/empty/types";
 import type { FieldStyles } from "../components/field/types";
 import type { IconButtonStyles } from "../components/icon-button/types";
 import type { InputStyles } from "../components/input/types";
+import type { LinkStyles } from "../components/link";
 import type { MenuStyles } from "../components/menu/types";
 import type { PhoneInputStyles } from "../components/phone-input/types";
 import type { PopoverStyles } from "../components/popover/types";
@@ -115,6 +116,9 @@ export interface ComponentsConfig {
   input?: {
     styles?: InputStyles;
   };
+  link?: {
+    styles?: LinkStyles;
+  };
   menu?: {
     selectionIcon?: React.ComponentType<SvgProps>;
     styles?: MenuStyles;

package/src/types/element.types.ts

@@ -1,15 +1,8 @@
-import type { HostInstance } from "react-native";
+import type { TextInput, View } from "react-native";
 import type { SvgProps } from "./props.types";
 
-export type ViewRef = HostInstance;
-export type TextInputRef = HostInstance & {
-  focus: () => void;
-  blur: () => void;
-  clear: () => void;
-  isFocused: () => boolean;
-  getNativeRef: () => HostInstance;
-  setSelection: (start: number, end?: number) => void;
-};
+export type ViewRef = React.ComponentRef<typeof View>;
+export type TextInputRef = React.ComponentRef<typeof TextInput>;
 
 export type TextChild = string | number | bigint | boolean | null | undefined;
 export type TextChildren = TextChild | TextChild[];

package/src/types/props.types.ts

@@ -2,7 +2,7 @@ import type React from "react";
 import type { ColorValue, StyleProp, TextStyle, ViewStyle } from "react-native";
 
 export type PropsWithRender<P> = P & {
-  render?: (props: P) => React.ReactNode;
+  render?: React.ComponentType<P>;
 };
 
 export type PropsWithRequiredRender<P> = P & {

package/src/utils/normalize-layout.ts

@@ -1,5 +1,6 @@
-import type { HostInstance, LayoutRectangle } from "react-native";
+import type { LayoutRectangle } from "react-native";
 import type { LayoutPosition } from "../hooks";
+import type { TextInputRef, ViewRef } from "../types/element.types";
 
 export const normalizeLayout = (layout: LayoutRectangle) => {
   const _layout = { ...layout };
@@ -22,7 +23,7 @@ const isValidNumber = (value: unknown): value is number => {
 };
 
 export const measureLayoutPosition = (
-  ref: HostInstance | null,
+  ref: ViewRef | TextInputRef | null,
   callback: (layout: LayoutPosition) => void,
 ) => {
   if (ref && "getBoundingClientRect" in ref) {