@korsolutions/ui 0.0.90 → 0.0.91

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   type LayoutRectangle,
   type StyleProp,
@@ -14,31 +14,81 @@ import { ComboboxContext } from "../context";
 import type { ComboboxState } from "../types";
 import { ComboboxVariants } from "../variants";
 
-export interface ComboboxRootProps {
-  variant?: keyof typeof ComboboxVariants;
-  size?: Size;
+const defaultGetItemValue = (item: unknown): string => {
+  if (typeof item === "string") return item;
+  if (typeof item === "object" && item !== null && "value" in item) {
+    return String((item as Record<string, unknown>).value);
+  }
+  return String(item);
+};
+
+const defaultGetItemLabel = (item: unknown): string => {
+  if (typeof item === "string") return item;
+  if (typeof item === "object" && item !== null && "label" in item) {
+    return String((item as Record<string, unknown>).label);
+  }
+  return defaultGetItemValue(item);
+};
 
-  value?: string;
-  onChange?: (value: string) => void;
+export interface ComboboxRootProps<T> {
+  /** The full list of selectable items. */
+  items: readonly T[];
 
-  /** Called when the text input value changes. Use this to filter options on the consumer side. */
+  /** The currently selected item. */
+  value?: T;
+
+  /** Called when the user selects an item. */
+  onChange?: (item: T) => void;
+
+  /**
+   * Extracts a unique string identifier from an item.
+   * Defaults to reading `item.value` or `String(item)`.
+   */
+  getItemValue?: (item: T) => string;
+
+  /**
+   * Extracts a display label from an item (shown in the trigger when selected).
+   * Defaults to reading `item.label` or falling back to `getItemValue`.
+   */
+  getItemLabel?: (item: T) => string;
+
+  /**
+   * Custom filter function. Return `true` to include the item.
+   * Defaults to case-insensitive label includes query.
+   * Pass `null` to disable built-in filtering (useful for async search).
+   */
+  filter?: ((item: T, query: string) => boolean) | null;
+
+  /** Called when the text input value changes. Useful for async search. */
   onInputChange?: (text: string) => void;
 
+  variant?: keyof typeof ComboboxVariants;
+  size?: Size;
   isDisabled?: boolean;
-
   children?: React.ReactNode;
   style?: StyleProp<ViewStyle>;
 }
 
-const calculateState = (props: ComboboxRootProps): ComboboxState => {
-  if (props.isDisabled) {
-    return "disabled";
-  }
+const calculateState = <T,>(props: ComboboxRootProps<T>): ComboboxState => {
+  if (props.isDisabled) return "disabled";
   return "default";
 };
 
-export function ComboboxRoot(props: ComboboxRootProps) {
-  const variantStyles = ComboboxVariants[props.variant ?? "default"](props.size ?? "md");
+export function ComboboxRoot<T>(props: ComboboxRootProps<T>) {
+  const {
+    items,
+    value,
+    onChange,
+    getItemValue = defaultGetItemValue as (item: T) => string,
+    getItemLabel = defaultGetItemLabel as (item: T) => string,
+    filter,
+    onInputChange,
+    variant = "default",
+    size = "md",
+    isDisabled = false,
+  } = props;
+
+  const variantStyles = ComboboxVariants[variant](size);
   const globalStyles = useComponentConfig("combobox");
   const mergedStyles = mergeStyles(variantStyles, globalStyles?.styles);
 
@@ -47,9 +97,18 @@ export function ComboboxRoot(props: ComboboxRootProps) {
   const [triggerPosition, setTriggerPosition] = useState<LayoutPosition>(DEFAULT_POSITION);
   const [inputValue, setInputValue] = useState("");
 
-  const onInputChangeRef = useRef(props.onInputChange);
-  onInputChangeRef.current = props.onInputChange;
+  // Reset input value when closing
+  const prevOpen = useRef(isOpen);
+  useEffect(() => {
+    if (prevOpen.current && !isOpen) {
+      setInputValue("");
+    }
+    prevOpen.current = isOpen;
+  }, [isOpen]);
 
+  // Notify consumer when input value changes
+  const onInputChangeRef = useRef(onInputChange);
+  onInputChangeRef.current = onInputChange;
   const isFirstRender = useRef(true);
   useEffect(() => {
     if (isFirstRender.current) {
@@ -59,6 +118,20 @@ export function ComboboxRoot(props: ComboboxRootProps) {
     onInputChangeRef.current?.(inputValue);
   }, [inputValue]);
 
+  const filteredItems = useMemo(() => {
+    if (filter === null) return items;
+    if (!inputValue) return items;
+
+    const filterFn =
+      filter ??
+      ((item: T, query: string) => {
+        const label = getItemLabel(item);
+        return label.toLowerCase().includes(query.toLowerCase());
+      });
+
+    return items.filter((item) => filterFn(item, inputValue));
+  }, [items, inputValue, filter, getItemLabel]);
+
   const state = calculateState(props);
   const composedStyles = StyleSheet.flatten([
     mergedStyles?.root?.default,
@@ -66,10 +139,21 @@ export function ComboboxRoot(props: ComboboxRootProps) {
     props.style,
   ]);
 
+  const handleChange = useCallback(
+    (item: unknown) => {
+      onChange?.(item as T);
+    },
+    [onChange],
+  );
+
   const contextValue: ComboboxContext = useMemo(
     () => ({
-      value: props.value,
-      onChange: props.onChange,
+      items,
+      filteredItems,
+      getItemValue: getItemValue as (item: unknown) => string,
+      getItemLabel: getItemLabel as (item: unknown) => string,
+      value,
+      onChange: handleChange,
       isOpen,
       setIsOpen,
       triggerPosition,
@@ -79,19 +163,22 @@ export function ComboboxRoot(props: ComboboxRootProps) {
       inputValue,
       setInputValue,
       state,
-      isDisabled: props.isDisabled ?? false,
+      isDisabled,
       styles: mergedStyles,
     }),
     [
-      props.value,
-      props.onChange,
+      items,
+      filteredItems,
+      getItemValue,
+      getItemLabel,
+      value,
+      handleChange,
       isOpen,
       triggerPosition,
       contentLayout,
       inputValue,
-      setInputValue,
       state,
-      props.isDisabled,
+      isDisabled,
       mergedStyles,
     ],
   );

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

@@ -22,11 +22,12 @@ export function ComboboxTrigger(props: ComboboxTriggerProps) {
 
   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);

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/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/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,6 +1,5 @@
-import { calculateComposedStyles } from "../../../utils/calculate-styles";
 import React, { useEffect, useState } from "react";
-import { Pressable, Text } from "react-native";
+import { Pressable, Text, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
 import { useSelect } from "../context";
 import type { SelectOptionState, SelectState } from "../types";
 
@@ -32,7 +31,8 @@ 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;
+  const composedStyles: StyleProp<TextStyle> = [optionStyles?.default, optionStyles?.[optionState]];
 
   useEffect(() => {
     select.setOptions((prev) => {
@@ -43,21 +43,21 @@ export function SelectOption(props: SelectOptionProps): React.ReactElement {
     });
   }, [props.value, props.children]);
 
+  const handlePress = () => {
+    select.onChange?.(props.value);
+    select.setIsOpen(false);
+  };
+  const handlePointerEnter = () => setIsHovered(true);
+  const handlePointerLeave = () => setIsHovered(false);
+
   const Component = typeof props.children === "string" ? Text : Pressable;
 
   return (
     <Component
-      onPress={() => {
-        select.onChange?.(props.value);
-        select.setIsOpen(false);
-      }}
-      onPointerEnter={() => {
-        setIsHovered(true);
-      }}
-      onPointerLeave={() => {
-        setIsHovered(false);
-      }}
-      style={composedStyles}
+      onPress={handlePress}
+      onPointerEnter={handlePointerEnter}
+      onPointerLeave={handlePointerLeave}
+      style={composedStyles as StyleProp<ViewStyle>}
     >
       {props.children}
     </Component>

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/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/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/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) {