@korsolutions/ui 0.0.93 → 0.0.95

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { useMemo, useRef, useState } from "react";
 import {
   type LayoutRectangle,
   type StyleProp,
@@ -8,59 +8,24 @@ import {
 } from "react-native";
 import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "../../../hooks";
 import { useComponentConfig } from "../../../themes/provider";
+import type { TextInputRef } from "../../../types/element.types";
 import { mergeStyles } from "../../../utils/calculate-styles";
 import type { Size } from "../../../utils/size-scale";
 import { ComboboxContext } from "../context";
 import type { ComboboxState } from "../types";
 import { ComboboxVariants } from "../variants";
 
-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);
-};
-
 export interface ComboboxRootProps<T> {
-  /** The full list of selectable items. */
-  items: readonly T[];
+  items: T[];
 
-  /** The currently selected item. */
-  value?: T;
+  value: T | null;
+  onChange: (item: T) => void;
 
-  /** Called when the user selects an item. */
-  onChange?: (item: T) => void;
+  inputValue: string;
+  onInputChange: (text: string) => 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;
+  getItemValue: (item: T) => string;
+  getItemLabel: (item: T) => string;
 
   variant?: keyof typeof ComboboxVariants;
   size?: Size;
@@ -74,20 +39,12 @@ const calculateState = <T,>(props: ComboboxRootProps<T>): ComboboxState => {
   return "default";
 };
 
-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;
-
+export function ComboboxRoot<T>({
+  variant = "default",
+  size = "md",
+  isDisabled = false,
+  ...props
+}: ComboboxRootProps<T>) {
   const variantStyles = ComboboxVariants[variant](size);
   const globalStyles = useComponentConfig("combobox");
   const mergedStyles = mergeStyles(variantStyles, globalStyles?.styles);
@@ -95,42 +52,7 @@ export function ComboboxRoot<T>(props: ComboboxRootProps<T>) {
   const [isOpen, setIsOpen] = useState(false);
   const [contentLayout, setContentLayout] = useState<LayoutRectangle>(DEFAULT_LAYOUT);
   const [triggerPosition, setTriggerPosition] = useState<LayoutPosition>(DEFAULT_POSITION);
-  const [inputValue, setInputValue] = useState("");
-
-  // 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) {
-      isFirstRender.current = false;
-      return;
-    }
-    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 inputRef = useRef<TextInputRef>(null);
 
   const state = calculateState(props);
   const composedStyles = StyleSheet.flatten([
@@ -139,44 +61,38 @@ export function ComboboxRoot<T>(props: ComboboxRootProps<T>) {
     props.style,
   ]);
 
-  const handleChange = useCallback(
-    (item: unknown) => {
-      onChange?.(item as T);
-    },
-    [onChange],
-  );
-
-  const contextValue: ComboboxContext = useMemo(
+  const contextValue = useMemo<ComboboxContext>(
     () => ({
-      items,
-      filteredItems,
-      getItemValue: getItemValue as (item: unknown) => string,
-      getItemLabel: getItemLabel as (item: unknown) => string,
-      value,
-      onChange: handleChange,
+      items: props.items,
+      filteredItems: props.items,
+      value: props.value,
+      onChange: props.onChange,
+      inputValue: props.inputValue,
+      onInputChange: props.onInputChange,
+      inputRef,
+      getItemValue: props.getItemValue,
+      getItemLabel: props.getItemLabel,
       isOpen,
       setIsOpen,
       triggerPosition,
       setTriggerPosition,
       contentLayout,
       setContentLayout,
-      inputValue,
-      setInputValue,
       state,
       isDisabled,
       styles: mergedStyles,
     }),
     [
-      items,
-      filteredItems,
-      getItemValue,
-      getItemLabel,
-      value,
-      handleChange,
+      props.items,
+      props.value,
+      props.onChange,
+      props.inputValue,
+      props.onInputChange,
+      props.getItemValue,
+      props.getItemLabel,
       isOpen,
       triggerPosition,
       contentLayout,
-      inputValue,
       state,
       isDisabled,
       mergedStyles,

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

@@ -1,7 +1,6 @@
-import React, { useEffect, useRef } from "react";
+import React from "react";
 import { StyleSheet, TextInput, type TextInputProps } from "react-native";
 import type { TextInputRef } from "../../../types/element.types";
-import { setInnerInputValue } from "../../../utils/input-utils";
 import { measureLayoutPosition } from "../../../utils/normalize-layout";
 import { useCombobox } from "../context";
 import type { ComboboxTriggerState } from "../types";
@@ -11,7 +10,8 @@ type ExtendableProps = Omit<TextInputProps, "value" | "onChange" | "onChangeText
 type RenderProps = {
   inputRef: React.RefObject<TextInputRef | null>;
   open: () => void;
-  setInputValue: (value: string) => void;
+  value: string;
+  onChange: (value: string) => void;
 };
 
 export type ComboboxTriggerProps = ExtendableProps & {
@@ -26,50 +26,24 @@ const calculateState = (isDisabled: boolean, isOpen: boolean): ComboboxTriggerSt
 
 export function ComboboxTrigger({ render, ...props }: ComboboxTriggerProps) {
   const combobox = useCombobox();
-  const triggerRef = useRef<TextInputRef>(null);
 
   const triggerState = calculateState(combobox.isDisabled, combobox.isOpen);
-  const selectedLabel = combobox.value != null ? combobox.getItemLabel(combobox.value) : "";
-  const displayValue = combobox.isOpen ? combobox.inputValue : selectedLabel;
 
   const open = () => {
     if (combobox.isDisabled) return;
-    combobox.setInputValue(selectedLabel);
     requestAnimationFrame(() => {
-      measureLayoutPosition(triggerRef.current, (layout) => {
+      measureLayoutPosition(combobox.inputRef.current, (layout) => {
         combobox.setTriggerPosition(layout);
         combobox.setIsOpen(true);
       });
     });
   };
 
-  const onChangeText = (text: string) => {
-    if (combobox.isDisabled) return;
-    combobox.setInputValue(text);
-    if (!combobox.isOpen) open();
-  };
-
-  const onFocus = () => {
-    if (!combobox.isOpen) open();
+  const onFocus: TextInputProps["onFocus"] = (e) => {
+    props.onFocus?.(e);
+    open();
   };
 
-  const setInputValue = (value: string) => {
-    combobox.setInputValue(value);
-    if (triggerRef.current) {
-      setInnerInputValue(triggerRef.current, value);
-    }
-  };
-
-  useEffect(() => {
-    setInputValue(displayValue);
-  }, [displayValue]);
-
-  useEffect(() => {
-    if (!combobox.isOpen) {
-      triggerRef.current?.blur();
-    }
-  }, [combobox.isOpen]);
-
   const triggerStyles = combobox.styles?.trigger;
   const composedProps: TextInputProps = {
     ...triggerStyles?.default,
@@ -89,19 +63,20 @@ export function ComboboxTrigger({ render, ...props }: ComboboxTriggerProps) {
 
   if (render) {
     return render({
-      inputRef: triggerRef,
+      inputRef: combobox.inputRef,
       open,
-      setInputValue,
+      value: combobox.inputValue,
+      onChange: combobox.onInputChange,
     });
   }
 
   return (
     <TextInput
       {...composedProps}
-      ref={triggerRef}
-      value={undefined}
+      ref={combobox.inputRef}
+      value={combobox.inputValue}
       onChange={undefined}
-      onChangeText={onChangeText}
+      onChangeText={combobox.onInputChange}
       onFocus={onFocus}
       style={composedStyle}
     />

package/src/components/combobox/context.ts

@@ -1,16 +1,22 @@
 import { createContext, type Dispatch, useContext } from "react";
 import type { LayoutRectangle } from "react-native";
 import type { LayoutPosition } from "../../hooks";
+import type { TextInputRef } from "../../types/element.types";
 import type { ComboboxState, ComboboxStyles } from "./types";
 
 export interface ComboboxContext {
-  items: readonly unknown[];
-  filteredItems: readonly unknown[];
-  getItemValue: (item: unknown) => string;
-  getItemLabel: (item: unknown) => string;
+  items: readonly any[];
 
-  value: unknown | undefined;
-  onChange: ((item: unknown) => void) | undefined;
+  value: any | undefined;
+  onChange: (item: any) => void;
+
+  inputValue: string;
+  onInputChange: (text: string) => void;
+
+  getItemValue: (item: any) => string;
+  getItemLabel: (item: any) => string;
+
+  inputRef: React.RefObject<TextInputRef | null>;
 
   isOpen: boolean;
   setIsOpen: Dispatch<React.SetStateAction<boolean>>;
@@ -19,9 +25,6 @@ export interface ComboboxContext {
   contentLayout: LayoutRectangle;
   setContentLayout: Dispatch<React.SetStateAction<LayoutRectangle>>;
 
-  inputValue: string;
-  setInputValue: Dispatch<React.SetStateAction<string>>;
-
   isDisabled: boolean;
 
   state: ComboboxState;

package/src/components/focus/focus-prevent.ts

@@ -0,0 +1,8 @@
+import { Platform } from "react-native";
+
+export const focusPreventProps = Platform.select({
+  web: {
+    onMouseDown: (e: React.MouseEvent) => e.preventDefault(),
+  },
+  default: {},
+});

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

@@ -1,7 +1,6 @@
 import React from "react";
-import { type StyleProp, View, type ViewStyle } from "react-native";
+import { type StyleProp, StyleSheet, 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,12 +13,12 @@ export interface SelectContentProps {
 
 export function SelectContent(props: SelectContentProps) {
   const select = useSelect();
-  const composedStyles = calculateComposedStyles(
-    select.styles,
-    select.state,
-    "content",
+
+  const composedStyles = StyleSheet.flatten([
+    select.styles?.content?.default,
+    select.styles?.content?.[select.state],
     props.style,
-  );
+  ]);
 
   const positionStyle = useRelativePosition({
     align: "start",

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Pressable, StyleSheet, type PressableProps } from "react-native";
 import type { ElementChildren } from "../../../types/element.types";
+import { extractPressableStyles } from "../../../utils/calculate-styles";
 import { useSelect } from "../context";
 import type { SelectOptionState, SelectState } from "../types";
 
@@ -33,7 +34,7 @@ export function SelectOption(props: SelectOptionProps): React.ReactElement {
   const isSelected = select.value === props.value;
 
   const optionState = calculateState(select.state, isHovered, isSelected);
-  const optionStyles = select.styles?.option;
+
   useEffect(() => {
     select.setOptions((prev) => {
       if (prev.find((option) => option.value === props.value)) {
@@ -57,9 +58,9 @@ export function SelectOption(props: SelectOptionProps): React.ReactElement {
       onPointerLeave={handlePointerLeave}
       style={(styleProps) =>
         StyleSheet.flatten([
-          optionStyles?.default,
-          optionStyles?.[optionState],
-          typeof props.style === "function" ? props.style(styleProps) : props.style,
+          extractPressableStyles(select.styles?.option?.default, styleProps),
+          extractPressableStyles(select.styles?.option?.[optionState], styleProps),
+          extractPressableStyles(props.style, styleProps),
         ])
       }
     >

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

@@ -1,4 +1,3 @@
-import { calculateComposedStyles } from "../../../utils/calculate-styles";
 import React from "react";
 import { Pressable, type StyleProp, StyleSheet, type ViewStyle } from "react-native";
 import { useSelect } from "../context";
@@ -16,12 +15,12 @@ export interface SelectOverlayProps {
 export function SelectOverlay(props: SelectOverlayProps) {
   const select = useSelect();
 
-  const composedStyles = calculateComposedStyles(
-    select.styles,
-    select.state,
-    "overlay",
+  const composedStyles = StyleSheet.flatten([
+    select.styles?.overlay?.default,
+    select.styles?.overlay?.[select.state],
     props.style,
-  );
+    StyleSheet.absoluteFill,
+  ]);
 
   const Component = props.render ?? Pressable;
   return (
@@ -30,7 +29,7 @@ export function SelectOverlay(props: SelectOverlayProps) {
         select.setIsOpen(false);
       }}
       pointerEvents="auto"
-      style={[StyleSheet.absoluteFill, composedStyles]}
+      style={composedStyles}
     >
       {props.children}
     </Component>

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

@@ -1,8 +1,14 @@
 import React, { useState } from "react";
-import { type LayoutRectangle, type StyleProp, View, type ViewStyle } from "react-native";
+import {
+  type LayoutRectangle,
+  type StyleProp,
+  StyleSheet,
+  View,
+  type ViewStyle,
+} from "react-native";
 import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "../../../hooks";
 import { useComponentConfig } from "../../../themes/provider";
-import { calculateComposedStyles, mergeStyles } from "../../../utils/calculate-styles";
+import { mergeStyles } from "../../../utils/calculate-styles";
 import type { Size } from "../../../utils/size-scale";
 import { SelectContext } from "../context";
 import type { SelectOption, SelectState } from "../types";
@@ -48,7 +54,12 @@ export function SelectRoot(props: SelectRootProps) {
   const [options, setOptions] = useState<Array<SelectOption>>([]);
 
   const state = calculateState(props);
-  const composedStyles = calculateComposedStyles(mergedStyles, state, "root", props.style);
+
+  const composedStyles = StyleSheet.flatten([
+    mergedStyles?.root?.default,
+    mergedStyles?.root?.[state],
+    props.style,
+  ]);
 
   const Component = props.render ?? View;
   return (

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

@@ -1,32 +1,26 @@
 import React, { useRef } from "react";
 import {
   Pressable,
+  StyleSheet,
   Text,
+  type PressableProps,
   type StyleProp,
-  type TextStyle,
-  type ViewStyle,
+  type TextStyle
 } from "react-native";
 import type { ViewRef } from "../../../types/element.types";
-import { calculateComposedStyles } from "../../../utils/calculate-styles";
+import { extractPressableStyles } from "../../../utils/calculate-styles";
 import { measureLayoutPosition } from "../../../utils/normalize-layout";
 import { useSelect } from "../context";
 
 export interface SelectTriggerProps {
   placeholder?: string;
-  style?: StyleProp<ViewStyle>;
+  style?: PressableProps["style"];
 }
 
 export function SelectTrigger(props: SelectTriggerProps) {
   const select = useSelect();
   const triggerRef = useRef<ViewRef>(null);
 
-  const composedStyles = calculateComposedStyles(
-    select.styles,
-    select.state,
-    "trigger",
-    props.style,
-  );
-
   const onTriggerPress = () => {
     if (!select.isOpen) {
       measureLayoutPosition(triggerRef.current, (layout) => {
@@ -43,7 +37,13 @@ export function SelectTrigger(props: SelectTriggerProps) {
       ref={triggerRef}
       onPress={onTriggerPress}
       disabled={select.isDisabled}
-      style={composedStyles}
+      style={(styleProp) =>
+        StyleSheet.flatten([
+          extractPressableStyles(select.styles?.trigger?.default, styleProp),
+          extractPressableStyles(select.styles?.trigger?.[select.state], styleProp),
+          extractPressableStyles(props.style, styleProp),
+        ])
+      }
     >
       <SelectValue placeholder={props.placeholder} />
     </Pressable>

package/src/components/select/types.ts

@@ -1,5 +1,5 @@
-import type { TextStyle } from "react-native";
 import type { SelectContentProps } from "./components/select-content";
+import type { SelectOptionProps } from "./components/select-option";
 import type { SelectOverlayProps } from "./components/select-overlay";
 import type { SelectRootProps } from "./components/select-root";
 import type { SelectTriggerProps, SelectValueProps } from "./components/select-trigger";
@@ -14,7 +14,7 @@ export interface SelectStyles {
   placeholder?: Partial<Record<SelectState, SelectValueProps["style"]>>;
   overlay?: Partial<Record<SelectState, SelectOverlayProps["style"]>>;
   content?: Partial<Record<SelectState, SelectContentProps["style"]>>;
-  option?: Partial<Record<SelectOptionState, TextStyle>>;
+  option?: Partial<Record<SelectOptionState, SelectOptionProps["style"]>>;
 }
 
 export interface SelectOption {

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

@@ -71,15 +71,10 @@ export function useSelectVariantDefault(size: Size): SelectStyles {
         default: {
           paddingVertical: s.paddingVertical,
           paddingHorizontal: s.paddingHorizontal,
-          fontFamily,
-          fontSize: s.fontSize,
-          lineHeight: s.lineHeight,
-          color: colors.foreground,
           borderRadius: radius / 2,
           cursor: "pointer",
         },
         disabled: {
-          color: colors.mutedForeground,
           cursor: "not-allowed" as CursorValue,
         },
         selected: {

package/src/utils/calculate-styles.ts

@@ -1,4 +1,9 @@
-import { StyleSheet } from "react-native";
+import {
+  StyleSheet,
+  type PressableProps,
+  type PressableStateCallbackType,
+  type ViewStyle,
+} from "react-native";
 
 export const calculateComposedStyles = <
   TStyle,
@@ -57,3 +62,13 @@ export const mergeStyles = <TStyle extends Record<string, any>>(
   }
   return returnStyles;
 };
+
+export const extractPressableStyles = (
+  style: PressableProps["style"],
+  props: PressableStateCallbackType,
+): ViewStyle => {
+  if (typeof style === "function") {
+    return style(props) as ViewStyle;
+  }
+  return style as ViewStyle;
+};