@himakarinv/nativex 1.0.0

package/src/components/Typeahead/Typeahead.tsx

@@ -0,0 +1,521 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  Dimensions,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  type NativeSyntheticEvent,
+  type StyleProp,
+  type TextInputKeyPressEventData,
+  type ViewStyle,
+} from 'react-native';
+
+import { borders, colors, radius, shadows, spacing, typography } from '../../theme';
+import { Button, ButtonSize, ButtonVariant, IconPosition } from '../Button';
+import { IconName } from '../Icon';
+import { InputField, InputState } from '../InputField';
+
+export type TypeaheadOption = {
+  id: number | string;
+  label: string;
+  email?: string;
+};
+
+export type TypeaheadValue = number | number[] | TypeaheadOption | TypeaheadOption[] | null;
+
+export type TypeaheadProps = {
+  label?: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  fullWidth?: boolean;
+  helpText?: string;
+  error?: string;
+  state?: InputState;
+  multiple?: boolean;
+  inputId?: string;
+  seedLabel?: string;
+  searchFn?: (query: string) => Promise<TypeaheadOption[]>;
+  getOptionsByIdsFn?: (ids: number[]) => Promise<TypeaheadOption[]>;
+  value?: TypeaheadValue;
+  onValueChange?: (value: TypeaheadValue) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const isNative = Platform.OS !== 'web';
+const MIN_QUERY = 2;
+const SEARCH_DELAY = 300;
+const MENU_MAX_HEIGHT = spacing['7xl'] * 4 + spacing['2xl'];
+const MENU_GAP = spacing.xs;
+const FIELD_WIDTH = isNative ? 255 : 320;
+
+function webMenuShadow(): ViewStyle {
+  return {
+    boxShadow: `0 ${spacing.xs}px ${spacing.md}px ${colors.boxShadowLight}`,
+  } as ViewStyle;
+}
+
+function fieldMenuBox(host: { x: number; y: number; width: number; height: number }, fullWidth: boolean) {
+  const width = fullWidth
+    ? Math.max(spacing.none, host.width - (borders.width.thick + borders.focusRing.width) * 2)
+    : FIELD_WIDTH;
+  const x = host.x + Math.max(spacing.none, (host.width - width) / 2);
+  return { x, y: host.y, width, height: host.height };
+}
+
+function menuPosition(
+  field: { x: number; y: number; width: number; height: number },
+  menuHeight: number,
+) {
+  const window = Dimensions.get('window');
+  const pad = spacing.lg;
+  const left = Math.min(Math.max(pad, field.x), window.width - field.width - pad);
+  const below = field.y + field.height + MENU_GAP;
+  const above = field.y - menuHeight - MENU_GAP;
+  const top = below + menuHeight + pad <= window.height ? below : Math.max(pad, above);
+  return { top, left };
+}
+
+function optionIds(value: TypeaheadValue): number[] | null {
+  if (value == null) {
+    return null;
+  }
+  if (Array.isArray(value)) {
+    if (value.length === 0) {
+      return [];
+    }
+    if (typeof value[0] === 'object' && value[0] && 'id' in value[0]) {
+      return null;
+    }
+    return value as number[];
+  }
+  if (typeof value === 'object' && 'id' in value) {
+    return null;
+  }
+  if (typeof value === 'number') {
+    return [value];
+  }
+  return null;
+}
+
+function optionsFromValue(value: TypeaheadValue): TypeaheadOption[] {
+  if (value == null) {
+    return [];
+  }
+  if (Array.isArray(value)) {
+    if (value.length > 0 && typeof value[0] === 'object' && value[0] && 'id' in value[0]) {
+      return value as TypeaheadOption[];
+    }
+    return [];
+  }
+  if (typeof value === 'object' && 'id' in value) {
+    return [value];
+  }
+  return [];
+}
+
+function sameOption(left: TypeaheadOption, right: TypeaheadOption) {
+  return String(left.id) === String(right.id);
+}
+
+function emitValue(options: TypeaheadOption[], multiple: boolean): TypeaheadValue {
+  if (options.length === 0) {
+    return null;
+  }
+  const numeric = options.every((item) => typeof item.id === 'number' || !Number.isNaN(Number(item.id)));
+  if (multiple) {
+    return numeric ? options.map((item) => Number(item.id)) : options;
+  }
+  const first = options[0];
+  const numericId = Number(first.id);
+  return Number.isFinite(numericId) ? numericId : first;
+}
+
+export function Typeahead({
+  label = '',
+  placeholder = '',
+  required = false,
+  disabled = false,
+  fullWidth = false,
+  helpText = '',
+  error = '',
+  state = InputState.Default,
+  multiple = false,
+  inputId,
+  seedLabel = '',
+  searchFn,
+  getOptionsByIdsFn,
+  value,
+  onValueChange,
+  style,
+}: TypeaheadProps) {
+  const [inputValue, setInputValue] = useState('');
+  const [results, setResults] = useState<TypeaheadOption[]>([]);
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const [selectedOptions, setSelectedOptions] = useState<TypeaheadOption[]>([]);
+  const [triggerBox, setTriggerBox] = useState({ x: 0, y: 0, width: 0, height: 0 });
+  const [menuHeight, setMenuHeight] = useState(0);
+
+  const hostRef = useRef<View>(null);
+  const searchTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const searchGeneration = useRef(0);
+  const pendingIds = useRef<number[] | null>(null);
+
+  const effectiveState = error ? InputState.Error : state;
+
+  useEffect(() => {
+    if (value === undefined) {
+      return;
+    }
+
+    if (value == null) {
+      pendingIds.current = null;
+      setSelectedOptions([]);
+      setInputValue('');
+      return;
+    }
+
+    const fromValue = optionsFromValue(value);
+    if (fromValue.length > 0) {
+      pendingIds.current = null;
+      setSelectedOptions(fromValue);
+      setInputValue(multiple ? '' : fromValue[0].label);
+      return;
+    }
+
+    const ids = optionIds(value);
+    if (!ids) {
+      return;
+    }
+
+    pendingIds.current = ids;
+    const seed = seedLabel.trim();
+    if (!multiple && seed) {
+      setInputValue(seed);
+    } else if (multiple) {
+      setInputValue('');
+    }
+
+    if (!ids.length || !getOptionsByIdsFn) {
+      setSelectedOptions([]);
+      return;
+    }
+
+    let cancelled = false;
+    getOptionsByIdsFn(ids)
+      .then((options) => {
+        if (cancelled || JSON.stringify(pendingIds.current) !== JSON.stringify(ids)) {
+          return;
+        }
+        setSelectedOptions(options);
+        if (!multiple && options[0]) {
+          setInputValue(options[0].label);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setSelectedOptions([]);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [getOptionsByIdsFn, multiple, seedLabel, value]);
+
+  useEffect(() => {
+    return () => {
+      if (searchTimer.current) {
+        clearTimeout(searchTimer.current);
+      }
+    };
+  }, []);
+
+  const close = () => {
+    setOpen(false);
+    setActiveIndex(-1);
+  };
+
+  const openMenu = () => {
+    hostRef.current?.measureInWindow((x, y, width, height) => {
+      setTriggerBox({ x, y, width, height });
+      setOpen(true);
+    });
+  };
+
+  const search = (term: string) => {
+    if (searchTimer.current) {
+      clearTimeout(searchTimer.current);
+      searchTimer.current = null;
+    }
+
+    if (!term || term.length < MIN_QUERY || !searchFn) {
+      searchGeneration.current += 1;
+      setResults([]);
+      close();
+      return;
+    }
+
+    const generation = (searchGeneration.current += 1);
+    searchTimer.current = setTimeout(() => {
+      searchFn(term)
+        .then((next) => {
+          if (generation !== searchGeneration.current) {
+            return;
+          }
+          setResults(next);
+          setActiveIndex(-1);
+          if (next.length > 0) {
+            openMenu();
+          } else {
+            close();
+          }
+        })
+        .catch(() => {
+          if (generation !== searchGeneration.current) {
+            return;
+          }
+          setResults([]);
+          close();
+        });
+    }, SEARCH_DELAY);
+  };
+
+  const commit = (next: TypeaheadOption[]) => {
+    setSelectedOptions(next);
+    onValueChange?.(emitValue(next, multiple));
+  };
+
+  const selectOption = (option: TypeaheadOption) => {
+    if (multiple) {
+      if (!selectedOptions.some((item) => sameOption(item, option))) {
+        commit([...selectedOptions, option]);
+      }
+      setInputValue('');
+    } else {
+      commit([option]);
+      setInputValue(option.label);
+    }
+    setResults([]);
+    close();
+  };
+
+  const removeOption = (option: TypeaheadOption) => {
+    commit(selectedOptions.filter((item) => !sameOption(item, option)));
+  };
+
+  const onKeyPress = (event: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+    if (!open) {
+      return;
+    }
+
+    const key = event.nativeEvent.key;
+    if (key === 'ArrowDown') {
+      event.preventDefault?.();
+      setActiveIndex((current) => Math.min(current + 1, results.length - 1));
+      return;
+    }
+    if (key === 'ArrowUp') {
+      event.preventDefault?.();
+      setActiveIndex((current) => Math.max(current - 1, 0));
+      return;
+    }
+    if (key === 'Enter' && activeIndex >= 0 && results[activeIndex]) {
+      event.preventDefault?.();
+      selectOption(results[activeIndex]);
+      return;
+    }
+    if (key === 'Escape') {
+      close();
+    }
+  };
+
+  const fieldBox = fieldMenuBox(triggerBox, fullWidth);
+  const position = menuPosition(fieldBox, menuHeight);
+  const menuWidth = fieldBox.width;
+
+  return (
+    <View
+      ref={hostRef}
+      collapsable={false}
+      style={[styles.host, fullWidth ? styles.fullWidth : styles.fixedWidth, style]}>
+      <InputField
+        label={label}
+        required={required}
+        placeholder={placeholder}
+        hint={helpText}
+        error={error}
+        state={effectiveState}
+        disabled={disabled}
+        value={inputValue}
+        inputId={inputId}
+        fullWidth={fullWidth}
+        autoComplete="off"
+        accessibilityLabel={label || placeholder}
+        onValueChange={(next) => {
+          setInputValue(next);
+          search(next);
+        }}
+        onKeyPress={onKeyPress}
+      />
+
+      {multiple && selectedOptions.length > 0 ? (
+        <View style={styles.tags}>
+          {selectedOptions.map((option) => (
+            <View key={String(option.id)} style={styles.tag}>
+              <Text style={styles.tagLabel}>{option.label}</Text>
+              <Button
+                label=""
+                variant={ButtonVariant.TertiaryGray}
+                size={ButtonSize.Small}
+                iconPosition={IconPosition.Only}
+                iconName={IconName.Close}
+                iconDecorative
+                disabled={disabled}
+                accessibilityLabel={`Remove ${option.label}`}
+                onPress={() => removeOption(option)}
+                contentStyle={styles.tagClose}
+              />
+            </View>
+          ))}
+        </View>
+      ) : null}
+
+      <Modal visible={open && results.length > 0} transparent animationType="none" onRequestClose={close}>
+        <Pressable accessible={false} style={styles.backdrop} onPress={close}>
+          <Pressable
+            accessible={false}
+            accessibilityRole="menu"
+            onPress={(event) => {
+              if ('stopPropagation' in event && typeof event.stopPropagation === 'function') {
+                event.stopPropagation();
+              }
+            }}
+            onLayout={(event) => {
+              const nextHeight = event.nativeEvent.layout.height;
+              if (nextHeight !== menuHeight) {
+                setMenuHeight(nextHeight);
+              }
+            }}
+            style={[
+              styles.menu,
+              {
+                top: position.top,
+                left: position.left,
+                width: menuWidth,
+                maxWidth: menuWidth,
+                maxHeight: MENU_MAX_HEIGHT,
+              },
+              !isNative && webMenuShadow(),
+            ]}>
+            <ScrollView keyboardShouldPersistTaps="handled">
+              {results.map((option, index) => {
+                const active = index === activeIndex;
+                return (
+                  <Pressable
+                    key={String(option.id)}
+                    accessibilityRole="menuitem"
+                    accessibilityLabel={option.email ? `${option.label}, ${option.email}` : option.label}
+                    onHoverIn={() => setActiveIndex(index)}
+                    onPress={() => selectOption(option)}
+                    style={[styles.option, active && styles.optionActive]}>
+                    <Text style={styles.optionLabel} numberOfLines={1}>
+                      {option.label}
+                    </Text>
+                    {option.email ? (
+                      <Text style={styles.optionEmail} numberOfLines={1}>
+                        {option.email}
+                      </Text>
+                    ) : null}
+                  </Pressable>
+                );
+              })}
+            </ScrollView>
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  host: {
+    position: 'relative',
+    alignSelf: 'flex-start',
+    overflow: 'visible',
+    gap: spacing.xs,
+  },
+  fixedWidth: {
+    maxWidth: '100%',
+  },
+  fullWidth: {
+    width: '100%',
+    maxWidth: '100%',
+  },
+  backdrop: {
+    flex: 1,
+  },
+  menu: {
+    position: 'absolute',
+    backgroundColor: colors.white,
+    borderWidth: borders.width.thin,
+    borderColor: colors.input.border,
+    borderRadius: radius.md,
+    overflow: 'hidden',
+  },
+  option: {
+    width: '100%',
+    minHeight: spacing['4xl'],
+    justifyContent: 'center',
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.base,
+  },
+  optionActive: {
+    backgroundColor: colors.primary.background,
+  },
+  optionLabel: {
+    color: colors.input.text,
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.md,
+    lineHeight: typography.fontSize.md * typography.lineHeight.normal,
+  },
+  optionEmail: {
+    color: colors.text.muted,
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    lineHeight: typography.fontSize.sm * typography.lineHeight.normal,
+  },
+  tags: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: spacing.xs,
+  },
+  tag: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+    paddingVertical: spacing.xs,
+    paddingHorizontal: spacing.sm,
+    backgroundColor: colors.primary.background,
+    borderWidth: borders.width.thin,
+    borderColor: colors.input.border,
+    borderRadius: radius.pill,
+  },
+  tagLabel: {
+    color: colors.interactive.accent,
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    lineHeight: typography.fontSize.sm * typography.lineHeight.normal,
+  },
+  tagClose: {
+    width: spacing.xl,
+    height: spacing.xl,
+    minHeight: spacing.xl,
+    padding: spacing.none,
+  },
+});

package/src/components/Typeahead/index.ts

@@ -0,0 +1,2 @@
+export { Typeahead } from './Typeahead';
+export type { TypeaheadOption, TypeaheadProps, TypeaheadValue } from './Typeahead';