@korsolutions/ui 0.0.38 → 0.0.40

package/dist/typescript/src/types/element.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"element.types.d.ts","sourceRoot":"","sources":["../../../../src/types/element.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,MAAM,OAAO,GAAG,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;AAC/C,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC"}
+{"version":3,"file":"element.types.d.ts","sourceRoot":"","sources":["../../../../src/types/element.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,OAAO,GAAG,YAAY,CAAC;AACnC,MAAM,MAAM,YAAY,GAAG,YAAY,GAAG;IACxC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,SAAS,EAAE,MAAM,OAAO,CAAC;IACzB,YAAY,EAAE,MAAM,YAAY,CAAC;IACjC,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD,CAAC"}

package/dist/typescript/src/utils/input-utils.d.ts

@@ -0,0 +1,3 @@
+import type { TextInputRef } from "../types/element.types";
+export declare function setInnerInputValue(element: HTMLInputElement | TextInputRef, value: string): void;
+//# sourceMappingURL=input-utils.d.ts.map

package/dist/typescript/src/utils/input-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-utils.d.ts","sourceRoot":"","sources":["../../../../src/utils/input-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAG1D,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,gBAAgB,GAAG,YAAY,EAAE,KAAK,EAAE,MAAM,QAMzF"}

package/dist/typescript/src/utils/normalize-layout.d.ts

@@ -1,8 +1,10 @@
-import type { LayoutRectangle } from "react-native";
+import type { LayoutPosition } from "../hooks";
+import type { HostInstance, LayoutRectangle } from "react-native";
 export declare const normalizeLayout: (layout: LayoutRectangle) => {
     x: number;
     y: number;
     width: number;
     height: number;
 };
+export declare const measureLayoutPosition: (ref: HostInstance | null, callback: (layout: LayoutPosition) => void) => void;
 //# sourceMappingURL=normalize-layout.d.ts.map

package/dist/typescript/src/utils/normalize-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"normalize-layout.d.ts","sourceRoot":"","sources":["../../../../src/utils/normalize-layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,eAAO,MAAM,eAAe,GAAI,QAAQ,eAAe;;;;;CAUtD,CAAC"}
+{"version":3,"file":"normalize-layout.d.ts","sourceRoot":"","sources":["../../../../src/utils/normalize-layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAElE,eAAO,MAAM,eAAe,GAAI,QAAQ,eAAe;;;;;CAUtD,CAAC;AAUF,eAAO,MAAM,qBAAqB,GAAI,KAAK,YAAY,GAAG,IAAI,EAAE,UAAU,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,SASzG,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.38",
+  "version": "0.0.40",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -35,20 +35,23 @@
       "types": "./dist/typescript/src/primitives/index.d.ts"
     }
   },
+  "scripts": {
+    "prepare": "./scripts/build.sh",
+    "ts-check": "tsc --noEmit"
+  },
   "devDependencies": {
+    "@react-navigation/native": "^7.1.28",
     "@types/react": "^19.2.3",
     "@types/react-dom": "^19.2.3",
     "babel-plugin-module-resolver": "^5.0.2",
     "react-native-builder-bob": "^0.40.17",
-    "tsc-alias": "^1.8.16"
+    "tsc-alias": "^1.8.16",
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*",
     "react-native": "*",
     "react-native-web": "*"
-  },
-  "scripts": {
-    "ts-check": "tsc --noEmit"
   }
 }

package/src/components/autocomplete/autocomplete.tsx

@@ -0,0 +1,34 @@
+import { AutocompletePrimitive, type AutocompleteOption, type AutocompleteRootBaseProps } from "@/primitives";
+import React from "react";
+import { AutocompleteVariants } from "./variants";
+
+export type { AutocompleteOption };
+
+export interface AutocompleteProps extends AutocompleteRootBaseProps {
+  options: AutocompleteOption[];
+  variant?: keyof typeof AutocompleteVariants;
+  emptyMessage?: string;
+}
+
+export function Autocomplete(props: AutocompleteProps) {
+  const { options, variant = "default", emptyMessage = "No results found", ...rootProps } = props;
+  const useVariantStyles = AutocompleteVariants[variant];
+  const variantStyles = useVariantStyles();
+
+  return (
+    <AutocompletePrimitive.Root {...rootProps} styles={variantStyles}>
+      <AutocompletePrimitive.Input />
+      <AutocompletePrimitive.Portal>
+        <AutocompletePrimitive.Overlay />
+        <AutocompletePrimitive.Content>
+          {options.map((option) => (
+            <AutocompletePrimitive.Option key={option.value} value={option.value}>
+              {option.label}
+            </AutocompletePrimitive.Option>
+          ))}
+          {!options.length && <AutocompletePrimitive.Empty>{emptyMessage}</AutocompletePrimitive.Empty>}
+        </AutocompletePrimitive.Content>
+      </AutocompletePrimitive.Portal>
+    </AutocompletePrimitive.Root>
+  );
+}

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

@@ -0,0 +1,84 @@
+import { type AutocompleteStyles } from "@/primitives";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export function useAutocompleteVariantDefault(): AutocompleteStyles {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): AutocompleteStyles => ({
+      root: {
+        default: {},
+        focused: {},
+        disabled: {},
+      },
+      input: {
+        default: {
+          borderWidth: 1,
+          borderColor: colors.border,
+          borderRadius: radius,
+          paddingVertical: 12,
+          paddingHorizontal: 16,
+          height: 48,
+          fontFamily,
+          fontSize,
+          color: colors.foreground,
+          backgroundColor: colors.background,
+        },
+        focused: {
+          borderColor: colors.primary,
+        },
+        disabled: {
+          backgroundColor: colors.muted,
+          color: colors.mutedForeground,
+        },
+      },
+      overlay: {
+        default: {},
+        focused: {},
+        disabled: {},
+      },
+      content: {
+        default: {
+          backgroundColor: colors.surface,
+          borderRadius: radius,
+          borderWidth: 1,
+          borderColor: colors.border,
+          padding: 4,
+          gap: 4,
+          maxHeight: 300,
+        },
+        focused: {},
+        disabled: {},
+      },
+      option: {
+        default: {
+          paddingVertical: 12,
+          paddingHorizontal: 16,
+          fontFamily,
+          fontSize,
+          color: colors.foreground,
+          borderRadius: radius / 2,
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+        selected: {
+          backgroundColor: colors.muted,
+        },
+        hovered: {
+          backgroundColor: colors.muted,
+        },
+      },
+      empty: {
+        default: {
+          paddingVertical: 12,
+          paddingHorizontal: 16,
+          fontFamily,
+          fontSize,
+          color: colors.mutedForeground,
+          textAlign: "center",
+        },
+        focused: {},
+        disabled: {},
+      },
+    })
+  );
+}

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

@@ -0,0 +1,5 @@
+import { useAutocompleteVariantDefault } from "./default";
+
+export const AutocompleteVariants = {
+  default: useAutocompleteVariantDefault,
+};

package/src/components/index.ts

@@ -3,6 +3,7 @@ export * from "./card/card";
 export * from "./input";
 export * from "./field/field";
 export * from "./select/select";
+export * from "./autocomplete/autocomplete";
 export * from "./typography/typography";
 export * from "./link/link";
 export * from "./empty/empty";

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

@@ -1,10 +1,10 @@
 import { useNumericMask, type NumericMaskFormat } from "@/hooks/use-numeric-mask";
-import { type InputPrimitiveBaseProps } from "@/primitives";
+import { InputPrimitive, type InputPrimitiveBaseProps } from "@/primitives";
 import React, { useEffect } from "react";
-import { Input } from "./input";
+import { InputVariants } from "./variants";
 
 export interface NumericInputProps extends Omit<InputPrimitiveBaseProps, "value" | "onChange" | "keyboardType"> {
-  variant?: "default";
+  variant?: keyof typeof InputVariants;
   value?: number | null;
   onChange?: (value: number | null) => void;
   format?: NumericMaskFormat;
@@ -42,7 +42,6 @@ export function NumericInput({
     onChange,
   });
 
-  // Sync external value changes with internal state
   useEffect(() => {
     if (value !== numericMask.numericValue) {
       numericMask.setValue(value ?? null);
@@ -59,15 +58,18 @@ export function NumericInput({
     onFocus?.(e);
   };
 
+  const useVariantStyles = InputVariants[variant];
+  const variantStyles = useVariantStyles();
+
   return (
-    <Input
+    <InputPrimitive
       {...props}
-      variant={variant}
       value={numericMask.value}
       onChange={numericMask.onChangeText}
       onBlur={handleBlur}
       onFocus={handleFocus}
       keyboardType={numericMask.keyboardType}
+      styles={variantStyles}
     />
   );
 }

package/src/primitives/alert-dialog/alert-dialog-trigger.tsx

@@ -7,7 +7,7 @@ export interface AlertDialogPrimitiveTriggerProps extends PressableProps {
   children: React.ReactElement<React.RefAttributes<ViewRef> & PressableProps>;
 }
 
-export function AlertDialogTrigger(props: AlertDialogPrimitiveTriggerProps) {
+export function AlertDialogTrigger(props: AlertDialogPrimitiveTriggerProps): React.ReactElement {
   const { onPress } = props;
   const { isOpen, setIsOpen } = useAlertDialog();
 

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

@@ -0,0 +1,38 @@
+import { useRelativePosition } from "@/hooks/use-relative-position";
+import { calculateComposedStyles } from "@/utils/calculate-styles";
+import React from "react";
+import { ScrollView, type StyleProp, type ViewStyle } from "react-native";
+import { useAutocomplete } from "./context";
+
+export interface AutocompleteContentProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function AutocompleteContent(props: AutocompleteContentProps) {
+  const autocomplete = useAutocomplete();
+  const composedStyles = calculateComposedStyles(autocomplete.styles, autocomplete.state, "content", props.style);
+
+  const positionStyle = useRelativePosition({
+    align: "start",
+    avoidCollisions: true,
+    triggerPosition: autocomplete.inputPosition,
+    contentLayout: autocomplete.contentLayout,
+    alignOffset: 0,
+    side: "bottom",
+    sideOffset: 0,
+  });
+
+  return (
+    <ScrollView
+      style={[positionStyle, composedStyles, { width: autocomplete.inputPosition.width }]}
+      onLayout={(e) => {
+        autocomplete.setContentLayout(e.nativeEvent.layout);
+      }}
+      pointerEvents="box-none"
+      keyboardShouldPersistTaps="handled"
+    >
+      {props.children}
+    </ScrollView>
+  );
+}

package/src/primitives/autocomplete/autocomplete-empty.tsx

@@ -0,0 +1,19 @@
+import { calculateComposedStyles } from "@/utils/calculate-styles";
+import React from "react";
+import { type StyleProp, Text, type TextStyle } from "react-native";
+import { useAutocomplete } from "./context";
+
+export interface AutocompleteEmptyProps {
+  children?: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+  render?: (props: AutocompleteEmptyProps) => React.ReactElement;
+}
+
+export function AutocompleteEmpty(props: AutocompleteEmptyProps) {
+  const autocomplete = useAutocomplete();
+
+  const composedStyles = calculateComposedStyles(autocomplete.styles, autocomplete.state, "empty", props.style);
+
+  const Component = props.render ?? Text;
+  return <Component style={composedStyles}>{props.children}</Component>;
+}

package/src/primitives/autocomplete/autocomplete-input.tsx

@@ -0,0 +1,86 @@
+import type { TextInputRef } from "@/types/element.types";
+import { setInnerInputValue } from "@/utils/input-utils";
+import { measureLayoutPosition } from "@/utils/normalize-layout";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { StyleSheet, TextInput, type StyleProp, type TextInputProps, type TextStyle } from "react-native";
+import { useFieldOptional } from "../field/context";
+import { useAutocomplete } from "./context";
+
+export interface AutocompleteInputProps extends Omit<TextInputProps, "onChange" | "value"> {
+  style?: StyleProp<TextStyle>;
+}
+
+export const AutocompleteInput = forwardRef<TextInputRef, AutocompleteInputProps>((props, ref) => {
+  const autocomplete = useAutocomplete();
+  const field = useFieldOptional();
+  const inputRef = useRef<TextInputRef>(null);
+  const blurTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
+
+  const composedStyles = [autocomplete.styles?.input?.default, autocomplete.styles?.input?.[autocomplete.state], props.style];
+
+  const handleFocus: TextInputProps["onFocus"] = (e) => {
+    // Clear any pending blur timeout
+    if (blurTimeoutRef.current) {
+      clearTimeout(blurTimeoutRef.current);
+    }
+
+    // Measure layout position and open dropdown
+    if (autocomplete.openOnFocus && !autocomplete.isDisabled) {
+      measureLayoutPosition(inputRef.current, (layout) => {
+        autocomplete.setInputPosition(layout);
+        autocomplete.setIsOpen(true);
+      });
+    }
+
+    props.onFocus?.(e);
+  };
+
+  const handleBlur: TextInputProps["onBlur"] = (e) => {
+    blurTimeoutRef.current = setTimeout(() => {
+      autocomplete.setIsOpen(false);
+    }, 150);
+
+    props.onBlur?.(e);
+  };
+
+  const handleChangeText = (text: string) => {
+    autocomplete.setInputValue?.(text);
+
+    // Open dropdown when typing
+    if (!autocomplete.isOpen && text.trim() && autocomplete.openOnFocus) {
+      measureLayoutPosition(inputRef.current, (layout) => {
+        autocomplete.setInputPosition(layout);
+        autocomplete.setIsOpen(true);
+      });
+    }
+
+    props.onChangeText?.(text);
+  };
+
+  useImperativeHandle(ref, () => inputRef.current!);
+  useEffect(() => {
+    autocomplete.setBlurInput(() => () => {
+      inputRef.current?.blur();
+    });
+    autocomplete.setInputDisplayValueSetter(() => (v: string) => {
+      setInnerInputValue(inputRef.current!, v);
+    });
+  }, []);
+
+  return (
+    <TextInput
+      {...props}
+      ref={inputRef}
+      id={field?.id}
+      value={autocomplete.inputValue}
+      placeholder={autocomplete.placeholder}
+      onChangeText={handleChangeText}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      editable={!autocomplete.isDisabled}
+      style={StyleSheet.flatten(composedStyles)}
+    />
+  );
+});
+
+AutocompleteInput.displayName = "AutocompleteInput";

package/src/primitives/autocomplete/autocomplete-option.tsx

@@ -0,0 +1,66 @@
+import { calculateComposedStyles } from "@/utils/calculate-styles";
+import { useEffect, useState } from "react";
+import { type StyleProp, Text, type TextStyle } from "react-native";
+import { useAutocomplete } from "./context";
+import type { AutocompleteOptionState, AutocompleteState } from "./types";
+
+export interface AutocompleteOptionProps {
+  children: string;
+  value: string;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  render?: (props: AutocompleteOptionProps) => React.ReactElement;
+  style?: StyleProp<TextStyle>;
+}
+
+const calculateState = (autocompleteState: AutocompleteState, hovered: boolean, selected: boolean): AutocompleteOptionState => {
+  if (autocompleteState === "disabled") {
+    return "disabled";
+  }
+  if (selected) {
+    return "selected";
+  }
+  if (hovered) {
+    return "hovered";
+  }
+  return "default";
+};
+
+export function AutocompleteOption(props: AutocompleteOptionProps) {
+  const [isHovered, setIsHovered] = useState(false);
+  const autocomplete = useAutocomplete();
+  const isSelected = autocomplete.value === props.value;
+
+  const optionState = calculateState(autocomplete.state, isHovered, isSelected);
+  const composedStyles = calculateComposedStyles(autocomplete.styles, optionState, "option", props.style);
+
+  useEffect(() => {
+    autocomplete.setOptions((prev) => {
+      if (prev.find((option) => option.value === props.value)) {
+        return prev;
+      }
+      return [...prev, { value: props.value, label: props.children }];
+    });
+  }, [props.value, props.children]);
+
+  const handlePress = () => {
+    autocomplete.onChange?.(props.value);
+    autocomplete.setInputValue?.("");
+    autocomplete.setInputDisplayValue(props.children);
+    autocomplete.setIsOpen(false);
+    autocomplete.blurInput();
+  };
+
+  const Component = props.render ?? Text;
+  return (
+    <Component
+      value={props.value}
+      onPress={handlePress}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      style={composedStyles}
+    >
+      {props.children}
+    </Component>
+  );
+}

package/src/primitives/autocomplete/autocomplete-overlay.tsx

@@ -0,0 +1,29 @@
+import { calculateComposedStyles } from "@/utils/calculate-styles";
+import React from "react";
+import { Pressable, type StyleProp, StyleSheet, type ViewStyle } from "react-native";
+import { useAutocomplete } from "./context";
+
+export interface AutocompleteOverlayProps {
+  children?: React.ReactNode;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  render?: (props: AutocompleteOverlayProps) => React.ReactElement;
+}
+
+export function AutocompleteOverlay(props: AutocompleteOverlayProps) {
+  const autocomplete = useAutocomplete();
+
+  const composedStyles = calculateComposedStyles(autocomplete.styles, autocomplete.state, "overlay", props.style);
+
+  const Component = props.render ?? Pressable;
+  return (
+    <Component
+      onPress={() => {
+        autocomplete.setIsOpen(false);
+      }}
+      style={[StyleSheet.absoluteFill, composedStyles]}
+    >
+      {props.children}
+    </Component>
+  );
+}

package/src/primitives/autocomplete/autocomplete-portal.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect } from "react";
+import { Portal } from "../portal";
+import { useAutocomplete, AutocompleteContext } from "./context";
+
+export interface AutocompletePortalProps {
+  children?: React.ReactNode;
+}
+
+export function AutocompletePortal(props: AutocompletePortalProps) {
+  const autocomplete = useAutocomplete();
+
+  useEffect(() => {
+    return () => {
+      autocomplete.setOptions([]);
+    };
+  }, []);
+
+  if (!autocomplete.isOpen) {
+    return null;
+  }
+
+  return (
+    <Portal name="autocomplete-portal">
+      <AutocompleteContext.Provider value={autocomplete}>{props.children}</AutocompleteContext.Provider>
+    </Portal>
+  );
+}

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

@@ -0,0 +1,111 @@
+import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "@/hooks";
+import { calculateComposedStyles } from "@/utils/calculate-styles";
+import React, { useEffect, useMemo, useState } from "react";
+import { type LayoutRectangle, type StyleProp, View, type ViewStyle } from "react-native";
+import { AutocompleteContext } from "./context";
+import type { AutocompleteOption, AutocompleteState, AutocompleteStyles } from "./types";
+
+interface AutocompleteRootInjectedProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface AutocompleteRootBaseProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  inputValue?: string;
+  setInputValue?: (value: string) => void;
+  placeholder?: string;
+  isDisabled?: boolean;
+  openOnFocus?: boolean;
+}
+
+export interface AutocompleteRootProps extends AutocompleteRootBaseProps {
+  children?: React.ReactNode;
+  render?: (props: AutocompleteRootInjectedProps) => React.ReactElement;
+  styles?: AutocompleteStyles;
+  style?: StyleProp<ViewStyle>;
+}
+
+const calculateState = (props: AutocompleteRootProps, isFocused: boolean): AutocompleteState => {
+  if (props.isDisabled) {
+    return "disabled";
+  }
+  if (isFocused) {
+    return "focused";
+  }
+  return "default";
+};
+
+export function AutocompleteRoot(props: AutocompleteRootProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [contentLayout, setContentLayout] = useState<LayoutRectangle>(DEFAULT_LAYOUT);
+  const [inputPosition, setInputPosition] = useState<LayoutPosition>(DEFAULT_POSITION);
+  const [options, setOptions] = useState<Array<AutocompleteOption>>([]);
+  const [blurInput, setBlurInput] = useState<() => void>(() => () => {});
+  const [setInputDisplayValue, setInputDisplayValueSetter] = useState<(value: string) => void>(() => () => {});
+
+  useEffect(() => {
+    if (props.value) {
+      const selectedOption = options.find((opt) => opt.value === props.value);
+      if (selectedOption) {
+        props.setInputValue?.(selectedOption.label);
+      }
+    } else {
+      props.setInputValue?.("");
+    }
+  }, [props.value, options]);
+
+  const state = calculateState(props, isOpen);
+  const composedStyles = calculateComposedStyles(props.styles, state, "root", props.style);
+
+  const contextValue = useMemo(
+    () =>
+      ({
+        value: props.value,
+        onChange: props.onChange,
+        placeholder: props.placeholder,
+        inputValue: props.inputValue,
+        setInputValue: props.setInputValue,
+        isOpen,
+        setIsOpen,
+        inputPosition,
+        setInputPosition,
+        contentLayout,
+        setContentLayout,
+        options,
+        setOptions,
+        openOnFocus: props.openOnFocus ?? true,
+        blurInput,
+        setBlurInput,
+        setInputDisplayValue,
+        setInputDisplayValueSetter,
+        state,
+        isDisabled: props.isDisabled ?? false,
+        styles: props.styles ?? null,
+      }) satisfies AutocompleteContext,
+    [
+      props.value,
+      props.onChange,
+      props.placeholder,
+      props.openOnFocus,
+      props.isDisabled,
+      props.styles,
+      props.inputValue,
+      props.setInputValue,
+      isOpen,
+      inputPosition,
+      contentLayout,
+      options,
+      blurInput,
+      setInputDisplayValue,
+      state,
+    ],
+  );
+
+  const Component = props.render ?? View;
+  return (
+    <AutocompleteContext.Provider value={contextValue}>
+      <Component style={composedStyles}>{props.children}</Component>
+    </AutocompleteContext.Provider>
+  );
+}