@korsolutions/ui 0.0.38 → 0.0.40

package/src/primitives/autocomplete/context.ts

@@ -0,0 +1,45 @@
+import type { LayoutPosition } from "@/hooks";
+import { createContext, type Dispatch, useContext } from "react";
+import type { LayoutRectangle } from "react-native";
+import type { AutocompleteOption, AutocompleteState, AutocompleteStyles } from "./types";
+
+export interface AutocompleteContext {
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+
+  inputValue?: string;
+  setInputValue?: (value: string) => void;
+
+  isOpen: boolean;
+  setIsOpen: Dispatch<React.SetStateAction<boolean>>;
+  inputPosition: LayoutPosition;
+  setInputPosition: Dispatch<React.SetStateAction<LayoutPosition>>;
+  contentLayout: LayoutRectangle;
+  setContentLayout: Dispatch<React.SetStateAction<LayoutRectangle>>;
+
+  options: Array<AutocompleteOption>;
+  setOptions: Dispatch<React.SetStateAction<Array<AutocompleteOption>>>;
+
+  openOnFocus: boolean;
+
+  blurInput: () => void;
+  setBlurInput: Dispatch<React.SetStateAction<() => void>>;
+  setInputDisplayValueSetter: Dispatch<React.SetStateAction<(value: string) => void>>;
+  setInputDisplayValue: (value: string) => void;
+
+  isDisabled: boolean;
+
+  state: AutocompleteState;
+  styles: AutocompleteStyles | null;
+}
+
+export const AutocompleteContext = createContext<AutocompleteContext | undefined>(undefined);
+
+export const useAutocomplete = () => {
+  const context = useContext(AutocompleteContext);
+  if (!context) {
+    throw new Error("useAutocomplete must be used within an AutocompleteProvider");
+  }
+  return context;
+};

package/src/primitives/autocomplete/index.ts

@@ -0,0 +1,27 @@
+export type { AutocompleteContentProps } from "./autocomplete-content";
+export type { AutocompleteEmptyProps } from "./autocomplete-empty";
+export type { AutocompleteInputProps } from "./autocomplete-input";
+export type { AutocompleteOptionProps } from "./autocomplete-option";
+export type { AutocompleteOverlayProps } from "./autocomplete-overlay";
+export type { AutocompletePortalProps } from "./autocomplete-portal";
+export type { AutocompleteRootBaseProps, AutocompleteRootProps } from "./autocomplete-root";
+export { useAutocomplete } from "./context";
+export type { AutocompleteOption, AutocompleteOptionState, AutocompleteState, AutocompleteStyles } from "./types";
+
+import { AutocompleteContent } from "./autocomplete-content";
+import { AutocompleteEmpty } from "./autocomplete-empty";
+import { AutocompleteInput } from "./autocomplete-input";
+import { AutocompleteOption } from "./autocomplete-option";
+import { AutocompleteOverlay } from "./autocomplete-overlay";
+import { AutocompletePortal } from "./autocomplete-portal";
+import { AutocompleteRoot } from "./autocomplete-root";
+
+export const AutocompletePrimitive = {
+  Root: AutocompleteRoot,
+  Input: AutocompleteInput,
+  Portal: AutocompletePortal,
+  Overlay: AutocompleteOverlay,
+  Content: AutocompleteContent,
+  Option: AutocompleteOption,
+  Empty: AutocompleteEmpty,
+};

package/src/primitives/autocomplete/types.ts

@@ -0,0 +1,23 @@
+import type { AutocompleteContentProps } from "./autocomplete-content";
+import type { AutocompleteEmptyProps } from "./autocomplete-empty";
+import type { AutocompleteInputProps } from "./autocomplete-input";
+import type { AutocompleteOptionProps } from "./autocomplete-option";
+import type { AutocompleteOverlayProps } from "./autocomplete-overlay";
+import type { AutocompleteRootProps } from "./autocomplete-root";
+
+export type AutocompleteState = "default" | "focused" | "disabled";
+export type AutocompleteOptionState = AutocompleteState | "hovered" | "selected";
+
+export interface AutocompleteStyles {
+  root?: Partial<Record<AutocompleteState, AutocompleteRootProps["style"]>>;
+  input?: Partial<Record<AutocompleteState, AutocompleteInputProps["style"]>>;
+  overlay?: Partial<Record<AutocompleteState, AutocompleteOverlayProps["style"]>>;
+  content?: Partial<Record<AutocompleteState, AutocompleteContentProps["style"]>>;
+  option?: Partial<Record<AutocompleteOptionState, AutocompleteOptionProps["style"]>>;
+  empty?: Partial<Record<AutocompleteState, AutocompleteEmptyProps["style"]>>;
+}
+
+export interface AutocompleteOption {
+  value: string;
+  label: string;
+}

package/src/primitives/dropdown-menu/dropdown-menu-divider.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { type StyleProp, View, type ViewStyle } from "react-native";
+import { type StyleProp, StyleSheet, View, type ViewStyle } from "react-native";
 import { useDropdownMenu } from "./context";
 
 export interface DropdownMenuDividerProps {
@@ -11,7 +11,7 @@ export interface DropdownMenuDividerProps {
 export function DropdownMenuDivider(props: DropdownMenuDividerProps) {
   const menu = useDropdownMenu();
 
-  const composedStyle = [menu.styles?.divider, props.style];
+  const composedStyle = StyleSheet.flatten([menu.styles?.divider, props.style]);
 
   const Component = props.render ?? View;
   return <Component {...props} style={composedStyle} />;

package/src/primitives/dropdown-menu/dropdown-menu-trigger.tsx

@@ -1,4 +1,5 @@
 import type { ViewRef } from "@/types/element.types";
+import { measureLayoutPosition } from "@/utils/normalize-layout";
 import React, { forwardRef, useImperativeHandle, useRef } from "react";
 import { type PressableProps } from "react-native";
 import { useDropdownMenu } from "./context";
@@ -18,13 +19,8 @@ export const DropdownMenuTrigger = forwardRef<DropdownMenuTriggerRef, DropdownMe
 
   const onTriggerPress = async () => {
     if (!dropdownMenu.isOpen) {
-      triggerRef.current?.measureInWindow((pageX, pageY, width, height) => {
-        dropdownMenu.setTriggerPosition({
-          height,
-          width,
-          pageX,
-          pageY,
-        });
+      measureLayoutPosition(triggerRef.current, (layout) => {
+        dropdownMenu.setTriggerPosition(layout);
         dropdownMenu.setIsOpen(true);
       });
     } else {

package/src/primitives/index.ts

@@ -2,6 +2,7 @@ export * from "./field";
 export * from "./input";
 export * from "./button";
 export * from "./select";
+export * from "./autocomplete";
 export * from "./card";
 export * from "./empty";
 export * from "./avatar";

package/src/primitives/input/input.tsx

@@ -1,6 +1,6 @@
 import type { TextInputRef } from "@/types/element.types";
 import { forwardRef, useState } from "react";
-import { TextInput, type TextInputProps } from "react-native";
+import { StyleSheet, TextInput, type TextInputProps } from "react-native";
 import { useFieldOptional } from "../field/context";
 import type { InputState, InputStyles } from "./types";
 
@@ -11,8 +11,6 @@ export type InputPrimitiveBaseProps = Omit<TextInputProps, "onChange"> & {
 };
 
 export interface InputPrimitiveProps extends InputPrimitiveBaseProps {
-  render?: (props: InputPrimitiveProps) => React.ReactNode;
-
   styles?: InputStyles;
 }
 
@@ -31,16 +29,15 @@ export const InputPrimitive = forwardRef<TextInputRef, InputPrimitiveProps>((pro
   const state = calculateState(props, isFocused);
   const field = useFieldOptional();
 
-  const composedStyles = [props.styles?.default?.style, props.styles?.[state]?.style, props.style];
+  const composedStyles = StyleSheet.flatten([props.styles?.default?.style, props.styles?.[state]?.style, props.style]);
   const composedProps = {
     ...props.styles?.default,
     ...props.styles?.[state],
     ...props,
   };
-  const Component = props.render ?? TextInput;
 
   return (
-    <Component
+    <TextInput
       {...composedProps}
       ref={ref}
       id={field?.id}

package/src/primitives/popover/popover-trigger.tsx

@@ -1,4 +1,5 @@
 import type { ViewRef } from "@/types/element.types";
+import { measureLayoutPosition } from "@/utils/normalize-layout";
 import React, { forwardRef, useImperativeHandle, useRef } from "react";
 import { type PressableProps } from "react-native";
 import { usePopover } from "./context";
@@ -18,13 +19,8 @@ export const PopoverTrigger = forwardRef<PopoverTriggerRef, PopoverTriggerProps>
 
   const onTriggerPress = async () => {
     if (!popover.isOpen) {
-      triggerRef.current?.measureInWindow((pageX, pageY, width, height) => {
-        popover.setTriggerPosition({
-          height,
-          width,
-          pageX,
-          pageY,
-        });
+      measureLayoutPosition(triggerRef.current, (layout) => {
+        popover.setTriggerPosition(layout);
         popover.setIsOpen(true);
       });
     } else {

package/src/primitives/portal/portal.constants.tsx

@@ -3,8 +3,8 @@ export const DEFAULT_PORTAL_HOST = "__KOR_PORTAL_HOST__";
 export interface PortalHostProps {
   name?: string;
   container?: {
-    ios?: React.ComponentType<React.PropsWithChildren>;
-    android?: React.ComponentType<React.PropsWithChildren>;
+    ios?: React.ComponentType<{ children: React.ReactNode }>;
+    android?: React.ComponentType<{ children: React.ReactNode }>;
   };
 }
 

package/src/primitives/portal/portal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useSyncExternalStore } from "react";
+import { useEffect, useSyncExternalStore } from "react";
 import { Platform, View } from "react-native";
 import { DEFAULT_PORTAL_HOST, type PortalHostProps, type PortalProps } from "./portal.constants";
 
@@ -48,7 +48,7 @@ function removePortal(hostName: string, name: string) {
   emit();
 }
 
-function NativePortalHost({ name = DEFAULT_PORTAL_HOST, container }: PortalHostProps) {
+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;
@@ -69,23 +69,13 @@ function NativePortalHost({ name = DEFAULT_PORTAL_HOST, container }: PortalHostP
         }}
       />
     ),
-    ios: container?.ios,
-    android: container?.android,
+    ...container,
   });
 
   return <Container>{Array.from(portalMap.values())}</Container>;
 }
 
-function WebPortalHost() {
-  return <></>;
-}
-
-export const PortalHost = Platform.select({
-  default: NativePortalHost,
-  web: WebPortalHost,
-});
-
-function NativePortal({ 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]);
@@ -98,25 +88,3 @@ function NativePortal({ name, hostName = DEFAULT_PORTAL_HOST, children }: Portal
 
   return <></>;
 }
-
-function WebPortal({ name, hostName = DEFAULT_PORTAL_HOST, children }: PortalProps) {
-  const [] = useState(() => {
-    let container = document.getElementById(hostName);
-
-    if (!container) {
-      container = document.createElement("div");
-      container.id = hostName;
-      document.body.appendChild(container);
-    }
-    return container;
-  });
-
-  const createPortal = require("react-dom").createPortal as typeof import("react-dom").createPortal;
-
-  return <>{createPortal(children, document.body, name)}</>;
-}
-
-export const Portal = Platform.select({
-  default: NativePortal,
-  web: WebPortal,
-});

package/src/primitives/select/context.ts

@@ -1,3 +1,4 @@
+import type { LayoutPosition } from "@/hooks";
 import { createContext, type Dispatch, useContext } from "react";
 import type { LayoutRectangle } from "react-native";
 import type { SelectOption, SelectState, SelectStyles } from "./types";
@@ -9,8 +10,10 @@ export interface SelectContext {
 
   isOpen: boolean;
   setIsOpen: Dispatch<React.SetStateAction<boolean>>;
-  triggerLayout: LayoutRectangle | null;
-  setTriggerLayout: Dispatch<React.SetStateAction<LayoutRectangle | null>>;
+  triggerPosition: LayoutPosition;
+  setTriggerPosition: Dispatch<React.SetStateAction<LayoutPosition>>;
+  contentLayout: LayoutRectangle;
+  setContentLayout: Dispatch<React.SetStateAction<LayoutRectangle>>;
   options: Array<SelectOption>;
   setOptions: Dispatch<React.SetStateAction<Array<SelectOption>>>;
 

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

@@ -1,3 +1,4 @@
+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";
@@ -15,18 +16,24 @@ export function SelectContent(props: SelectContentProps) {
   const select = useSelect();
   const composedStyles = calculateComposedStyles(select.styles, select.state, "content", props.style);
 
+  const positionStyle = useRelativePosition({
+    align: "start",
+    avoidCollisions: true,
+    triggerPosition: select.triggerPosition,
+    contentLayout: select.contentLayout,
+    alignOffset: 0,
+    side: "bottom",
+    sideOffset: 0,
+  });
+
   const Component = props.render ?? View;
   return (
     <Component
-      style={[
-        composedStyles,
-        {
-          position: "absolute",
-          top: select.triggerLayout?.y! + select.triggerLayout?.height!,
-          left: select.triggerLayout?.x!,
-          width: select.triggerLayout?.width!,
-        },
-      ]}
+      style={[positionStyle, composedStyles, { width: select.triggerPosition.width }]}
+      onLayout={(e) => {
+        select.setContentLayout(e.nativeEvent.layout);
+      }}
+      pointerEvents="box-none"
     >
       {props.children}
     </Component>

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

@@ -1,3 +1,4 @@
+import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "@/hooks";
 import { calculateComposedStyles } from "@/utils/calculate-styles";
 import React, { useState } from "react";
 import { type LayoutRectangle, type StyleProp, View, type ViewStyle } from "react-native";
@@ -34,7 +35,8 @@ const calculateState = (props: SelectRootProps): SelectState => {
 
 export function SelectRoot(props: SelectRootProps) {
   const [isOpen, setIsOpen] = useState(false);
-  const [triggerLayout, setTriggerLayout] = useState<LayoutRectangle | null>(null);
+  const [contentLayout, setContentLayout] = useState<LayoutRectangle>(DEFAULT_LAYOUT);
+  const [triggerPosition, setTriggerPosition] = useState<LayoutPosition>(DEFAULT_POSITION);
   const [options, setOptions] = useState<Array<SelectOption>>([]);
 
   const state = calculateState(props);
@@ -49,8 +51,10 @@ export function SelectRoot(props: SelectRootProps) {
         placeholder: props.placeholder,
         isOpen,
         setIsOpen,
-        triggerLayout,
-        setTriggerLayout,
+        triggerPosition,
+        setTriggerPosition,
+        contentLayout,
+        setContentLayout,
         options,
         setOptions,
         state,

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

@@ -1,38 +1,36 @@
+import type { ViewRef } from "@/types/element.types";
 import { calculateComposedStyles } from "@/utils/calculate-styles";
-import { normalizeLayout } from "@/utils/normalize-layout";
-import React from "react";
+import { measureLayoutPosition } from "@/utils/normalize-layout";
+import React, { useRef } from "react";
 import { Pressable, type StyleProp, type ViewStyle } from "react-native";
 import { useSelect } from "./context";
 
-interface SelectTriggerInjectionProps {
-  onPress?: () => void;
-}
-
 export interface SelectTriggerProps {
   children?: React.ReactNode;
 
   style?: StyleProp<ViewStyle>;
-
-  render?: (props: SelectTriggerInjectionProps) => React.ReactElement;
 }
 
 export function SelectTrigger(props: SelectTriggerProps) {
   const select = useSelect();
+  const triggerRef = useRef<ViewRef>(null);
+
   const composedStyles = calculateComposedStyles(select.styles, select.state, "trigger", props.style);
-  const Component = props.render ?? Pressable;
+
+  const onTriggerPress = () => {
+    if (!select.isOpen) {
+      measureLayoutPosition(triggerRef.current, (layout) => {
+        select.setTriggerPosition(layout);
+        select.setIsOpen(true);
+      });
+    } else {
+      select.setIsOpen(false);
+    }
+  };
+
   return (
-    <Component
-      onPress={() => {
-        select.setIsOpen((prev) => !prev);
-      }}
-      onLayout={(e) => {
-        const layout = normalizeLayout(e.nativeEvent.layout);
-        select.setTriggerLayout(layout);
-      }}
-      disabled={select.isDisabled}
-      style={composedStyles}
-    >
+    <Pressable ref={triggerRef} onPress={onTriggerPress} disabled={select.isDisabled} style={composedStyles}>
       {props.children}
-    </Component>
+    </Pressable>
   );
 }

package/src/types/element.types.ts

@@ -1,4 +1,11 @@
-import type { TextInput, View } from "react-native";
+import type { HostInstance } from "react-native";
 
-export type ViewRef = React.ComponentRef<View>;
-export type TextInputRef = React.ComponentRef<TextInput>;
+export type ViewRef = HostInstance;
+export type TextInputRef = HostInstance & {
+  focus: () => void;
+  blur: () => void;
+  clear: () => void;
+  isFocused: () => boolean;
+  getNativeRef: () => HostInstance;
+  setSelection: (start: number, end?: number) => void;
+};

package/src/utils/input-utils.ts

@@ -0,0 +1,10 @@
+import type { TextInputRef } from "@/types/element.types";
+import { Platform } from "react-native";
+
+export function setInnerInputValue(element: HTMLInputElement | TextInputRef, value: string) {
+  if (Platform.OS === "web") {
+    (element as HTMLInputElement).value = value;
+  } else {
+    (element as TextInputRef)?.setNativeProps?.({ text: value });
+  }
+}

package/src/utils/normalize-layout.ts

@@ -1,4 +1,6 @@
-import type { LayoutRectangle } from "react-native";
+import type { LayoutPosition } from "@/hooks";
+import type { HostInstance, LayoutRectangle } from "react-native";
+
 export const normalizeLayout = (layout: LayoutRectangle) => {
   const _layout = { ...layout };
   // Web layout doesn't provide x/y, but left/top
@@ -10,3 +12,22 @@ export const normalizeLayout = (layout: LayoutRectangle) => {
   }
   return _layout;
 };
+
+const isValidNumber = (value: unknown): value is number => {
+  const isValid = typeof value === "number" && !isNaN(value) && isFinite(value);
+  if (!isValid) {
+    console.warn(`Expected a valid number but received: ${value}`);
+  }
+  return isValid;
+};
+
+export const measureLayoutPosition = (ref: HostInstance | null, callback: (layout: LayoutPosition) => void) => {
+  ref?.measureInWindow((pageX, pageY, width, height) => {
+    callback({
+      height: isValidNumber(height) ? height : 0,
+      width: isValidNumber(width) ? width : 0,
+      pageX: isValidNumber(pageX) ? pageX : 0,
+      pageY: isValidNumber(pageY) ? pageY : 0,
+    });
+  });
+};