@lotics/ui 5.9.0 → 5.10.0

package/src/picker_menu.tsx

@@ -1,355 +0,0 @@
-import { StyleSheet, View, ScrollView, TextInput } from "react-native";
-import { useState, useCallback, useMemo, useRef } from "react";
-import { colors } from "./colors";
-import { Text } from "./text";
-import { Icon } from "./icon";
-import { Checkbox } from "./checkbox";
-import { MenuButton } from "./menu_button";
-import { LinkButton } from "./link_button";
-import { ActivityIndicator } from "./activity_indicator";
-import { PickerOption, PickerValue, PickerOnValueChange, PickerOnClose } from "./picker";
-import { useScreenSize } from "./use_screen_size";
-
-export interface PickerMenuProps<T extends string = string, MULTI extends boolean = false> {
-  testID?: string;
-  options: (PickerOption<T> | undefined | false)[];
-  multi?: MULTI;
-  value?: PickerValue<T, MULTI> | null;
-  onValueChange?: PickerOnValueChange<T, MULTI>;
-  onClose?: PickerOnClose<T, MULTI>;
-  onRequestClose?: () => void;
-  renderOptionContent?: (option: PickerOption<T>) => React.ReactNode;
-  enableSelectAll?: boolean;
-  includeEmptyOption?: boolean;
-  /** Show a loading indicator (e.g. while async results are in flight — the
-   *  parent owns fetching and passes the resulting `options`). */
-  loading?: boolean;
-  /** Shown when there are no options and not loading. Default: "No results". */
-  emptyText?: string;
-  /** Label for the "select all" link in multi-select mode. Default: "Select all" */
-  selectAllLabel?: string;
-  /** Label for the "deselect all" link in multi-select mode. Default: "Deselect all" */
-  deselectAllLabel?: string;
-}
-
-/**
- * The option list for a Picker — a keyboard-navigable list with native-`<select>`
- * typeahead (type to jump focus). It has NO search box: filtering a long/async
- * list is the job of `Combobox`, whose input drives the search and passes the
- * already-filtered `options` to render. Use standalone inside a Popover, or via
- * the `Picker` component.
- */
-export function PickerMenu<T extends string, MULTI extends boolean = false>(
-  props: PickerMenuProps<T, MULTI>,
-) {
-  const {
-    testID,
-    options,
-    multi = false as MULTI,
-    value,
-    renderOptionContent,
-    onValueChange,
-    onClose,
-    onRequestClose,
-    enableSelectAll,
-    includeEmptyOption,
-    loading,
-    emptyText = "No results",
-    selectAllLabel = "Select all",
-    deselectAllLabel = "Deselect all",
-  } = props;
-  const scrollViewRef = useRef<ScrollView>(null);
-  const OPTION_HEIGHT = 40;
-  const screenSize = useScreenSize();
-
-  const { multiValue, singleValue } = useMemo((): {
-    multiValue: T[];
-    singleValue: T | undefined | null;
-  } => {
-    if (multi) {
-      return {
-        multiValue: Array.isArray(value) ? (value as T[]) : [],
-        singleValue: undefined,
-      };
-    }
-    return {
-      multiValue: [],
-      singleValue: Array.isArray(value) ? (value as T[])[0] : (value as T | undefined | null),
-    };
-  }, [multi, value]);
-
-  const displayOptions = useMemo(() => {
-    if (includeEmptyOption) {
-      const emptyOption: PickerOption<T> = { label: "", value: "" as T };
-      return [emptyOption, ...options];
-    }
-    return options;
-  }, [options, includeEmptyOption]);
-
-  const [focusedIndex, setFocusedIndex] = useState<number>(() => {
-    const selectedIndex = displayOptions.findIndex((opt) => {
-      if (!opt || opt.disabled) return false;
-      if (multi && Array.isArray(multiValue)) {
-        return multiValue.includes(opt.value);
-      }
-      return opt.value === singleValue;
-    });
-    if (selectedIndex >= 0) return selectedIndex;
-    const firstValid = displayOptions.findIndex((opt) => opt && !opt.disabled);
-    return firstValid >= 0 ? firstValid : 0;
-  });
-
-  const handleClose = useCallback(() => {
-    onRequestClose?.();
-    if (onClose) {
-      if (multi) {
-        (onClose as (value: T[]) => void)((multiValue ?? []) as T[]);
-      } else {
-        (onClose as (value: T) => void)((singleValue ?? "") as T);
-      }
-    }
-  }, [multi, multiValue, singleValue, onClose, onRequestClose]);
-
-  const handleMultiSelect = useCallback(
-    (itemValue: T) => {
-      if (!multi || !onValueChange) return;
-      const currentValues = multiValue ?? [];
-      const newValue = currentValues.includes(itemValue)
-        ? currentValues.filter((v) => v !== itemValue)
-        : [...currentValues, itemValue];
-      (onValueChange as (value: T[]) => void)(newValue);
-    },
-    [multi, multiValue, onValueChange],
-  );
-
-  const handleSingleSelect = useCallback(
-    (itemValue: T) => {
-      if (multi) return;
-      if (onValueChange) {
-        (onValueChange as (value: T) => void)(itemValue);
-      }
-      handleClose();
-    },
-    [multi, onValueChange, handleClose],
-  );
-
-  const handleSelectAll = useCallback(() => {
-    if (!multi || !onValueChange) return;
-    const allValues = options
-      .filter((opt): opt is PickerOption<T> => !!opt && !opt.disabled)
-      .map((opt) => opt.value);
-    (onValueChange as (value: T[]) => void)(allValues);
-  }, [multi, onValueChange, options]);
-
-  const handleDeselectAll = useCallback(() => {
-    if (!multi || !onValueChange) return;
-    (onValueChange as (value: T[]) => void)([]);
-  }, [multi, onValueChange]);
-
-  const scrollToIndex = useCallback((index: number) => {
-    if (scrollViewRef.current && index >= 0) {
-      const scrollY = index * OPTION_HEIGHT;
-      scrollViewRef.current.scrollTo({ y: scrollY - 80, animated: false });
-    }
-  }, []);
-
-  const handleKeyNavigation = useCallback(
-    (key: string): boolean => {
-      switch (key) {
-        case "ArrowDown": {
-          let next = focusedIndex + 1;
-          while (next < displayOptions.length) {
-            const opt = displayOptions[next];
-            if (opt && !opt.disabled) {
-              setFocusedIndex(next);
-              scrollToIndex(next);
-              break;
-            }
-            next++;
-          }
-          return true;
-        }
-        case "ArrowUp": {
-          let next = focusedIndex - 1;
-          while (next >= 0) {
-            const opt = displayOptions[next];
-            if (opt && !opt.disabled) {
-              setFocusedIndex(next);
-              scrollToIndex(next);
-              break;
-            }
-            next--;
-          }
-          return true;
-        }
-        case "Enter":
-          if (focusedIndex >= 0 && focusedIndex < displayOptions.length) {
-            const focusedOption = displayOptions[focusedIndex];
-            if (focusedOption && !focusedOption.disabled) {
-              if (multi) handleMultiSelect(focusedOption.value);
-              else handleSingleSelect(focusedOption.value);
-            }
-          }
-          return true;
-        case "Escape":
-          handleClose();
-          return true;
-        case "Tab":
-          handleClose();
-          return false;
-        default:
-          return false;
-      }
-    },
-    [focusedIndex, displayOptions, multi, handleMultiSelect, handleSingleSelect, handleClose, scrollToIndex],
-  );
-
-  // Native-select typeahead: accumulate printable keys into a short-lived buffer
-  // and jump focus to the first option whose label starts with it.
-  const typeaheadBufferRef = useRef("");
-  const typeaheadTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const handleTypeahead = useCallback(
-    (char: string) => {
-      if (typeaheadTimerRef.current) clearTimeout(typeaheadTimerRef.current);
-      typeaheadBufferRef.current += char.toLowerCase();
-      const buffer = typeaheadBufferRef.current;
-      const match = displayOptions.findIndex(
-        (opt) => opt && !opt.disabled && (opt.label ?? "").toLowerCase().startsWith(buffer),
-      );
-      if (match >= 0) {
-        setFocusedIndex(match);
-        scrollToIndex(match);
-      }
-      typeaheadTimerRef.current = setTimeout(() => {
-        typeaheadBufferRef.current = "";
-      }, 600);
-    },
-    [displayOptions, scrollToIndex],
-  );
-
-  const handleKeyPress = useCallback(
-    (e: { nativeEvent: { key: string }; preventDefault: () => void }) => {
-      const key = e.nativeEvent.key;
-      if (handleKeyNavigation(key)) {
-        e.preventDefault();
-        return;
-      }
-      if (key.length === 1) handleTypeahead(key);
-    },
-    [handleKeyNavigation, handleTypeahead],
-  );
-
-  const hasOptions = displayOptions.some((opt) => opt && !opt.disabled);
-  const hasSelectedOptions = multi && Array.isArray(multiValue) && multiValue.length > 0;
-  const showSelectAllLink = multi && hasOptions && enableSelectAll;
-  const showDeselectAllLink = multi && hasOptions && hasSelectedOptions && enableSelectAll;
-  const showLinks = showSelectAllLink || showDeselectAllLink;
-
-  return (
-    <View
-      testID={testID}
-      style={[styles.container, screenSize.small ? { flex: 1 } : { maxHeight: 480 }]}
-    >
-      {/* Visually hidden but focusable: captures typeahead + arrow/enter keys
-          while the popover is open, giving native-<select> behavior. */}
-      <TextInput
-        autoFocus={!screenSize.small}
-        value=""
-        onChangeText={() => {}}
-        onKeyPress={handleKeyPress}
-        style={styles.typeaheadCapture}
-      />
-      <ScrollView ref={scrollViewRef} style={styles.optionsList}>
-        {loading && (
-          <View style={styles.statusRow}>
-            <ActivityIndicator />
-          </View>
-        )}
-        {!loading && displayOptions.length === 0 && (
-          <View style={styles.statusRow}>
-            <Text color="zinc-500" size="sm">
-              {emptyText}
-            </Text>
-          </View>
-        )}
-        {displayOptions.map((item, index) => {
-          if (!item) return null;
-
-          const isSelected = multi
-            ? Array.isArray(multiValue) && multiValue.includes(item.value)
-            : item.value === singleValue;
-          const isFocused = index === focusedIndex;
-
-          return (
-            <MenuButton
-              key={item.value}
-              testID={item.testID || `picker-option-${item.value}`}
-              icon={multi ? <Checkbox checked={isSelected} /> : undefined}
-              title={
-                renderOptionContent ? (
-                  renderOptionContent(item)
-                ) : (
-                  <Text userSelect="none" numberOfLines={1}>
-                    {item.label}
-                  </Text>
-                )
-              }
-              right={
-                !multi && isSelected ? (
-                  <Icon name="check" size={18} color={colors.zinc["950"]} />
-                ) : undefined
-              }
-              focused={isFocused}
-              disabled={item.disabled}
-              onPress={() => (multi ? handleMultiSelect(item.value) : handleSingleSelect(item.value))}
-              onHoverIn={() => setFocusedIndex(index)}
-              style={styles.option}
-            />
-          );
-        })}
-      </ScrollView>
-      {showLinks && (
-        <View style={styles.selectAllContainer}>
-          {showSelectAllLink && <LinkButton title={selectAllLabel} onPress={handleSelectAll} />}
-          {showDeselectAllLink && <LinkButton title={deselectAllLabel} onPress={handleDeselectAll} />}
-        </View>
-      )}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    gap: 4,
-  },
-  optionsList: {
-    flex: 1,
-    gap: 4,
-  },
-  selectAllContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 16,
-    paddingVertical: 4,
-    // Matches a MenuButton option's 8px text inset, so the bleeding-wash
-    // LinkButtons line up under the option labels above.
-    paddingHorizontal: 8,
-    borderTopWidth: 1,
-    borderTopColor: colors.border,
-  },
-  option: {
-    marginHorizontal: 0,
-  },
-  statusRow: {
-    alignItems: "center",
-    justifyContent: "center",
-    paddingVertical: 16,
-  },
-  typeaheadCapture: {
-    position: "absolute",
-    width: 1,
-    height: 1,
-    opacity: 0,
-  },
-});

package/src/tag_input.tsx

@@ -1,203 +0,0 @@
-import { useMemo, useRef, useState } from "react";
-import { Pressable, ScrollView, StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
-import { colors } from "./colors";
-import { CONTROL_RADIUS } from "./control_surface";
-import { Text } from "./text";
-import { Icon } from "./icon";
-import { TextInputField } from "./text_input_field";
-import { MenuButton } from "./menu_button";
-import { Popover, PopoverContent } from "./popover";
-
-export interface TagOption {
-  value: string;
-  label: string;
-}
-
-export interface TagInputProps {
-  /** Selected tags. */
-  value: TagOption[];
-  /** The suggestible set. */
-  options: TagOption[];
-  onChange: (next: TagOption[]) => void;
-  /** Offer a "Create …" row when the query matches no option. Default false. */
-  allowCreate?: boolean;
-  placeholder?: string;
-  accessibilityLabel?: string;
-  style?: StyleProp<ViewStyle>;
-}
-
-/**
- * Multi-select tag field. The CONTROL is a bordered box of removable chips plus
- * an Add affordance; the typing/searching/creating happens in a POPOVER (a
- * searchable, checkable list + an optional create row) — never an inline token
- * input squeezed among the chips. So the field always reads as a clean container
- * that matches its border, instead of a text box fighting the chips. Distinct
- * from `Combobox multi` (a search field whose selection renders as in-input chips):
- * reach for `TagInput` when the field's resting state should be a tidy chip box.
- */
-export function TagInput(props: TagInputProps) {
-  const { value, options, onChange, allowCreate = false, placeholder = "Add tags", accessibilityLabel, style } = props;
-  const [open, setOpen] = useState(false);
-  const [query, setQuery] = useState("");
-  const anchorRef = useRef<View>(null);
-
-  const selected = useMemo(() => new Set(value.map((t) => t.value)), [value]);
-
-  const filtered = useMemo(() => {
-    const q = query.trim().toLowerCase();
-    return q ? options.filter((o) => o.label.toLowerCase().includes(q)) : options;
-  }, [options, query]);
-
-  const exact = useMemo(() => {
-    const q = query.trim().toLowerCase();
-    return q.length > 0 && [...options, ...value].some((o) => o.label.toLowerCase() === q);
-  }, [options, value, query]);
-
-  const showCreate = allowCreate && query.trim().length > 0 && !exact;
-
-  const toggle = (o: TagOption) =>
-    onChange(selected.has(o.value) ? value.filter((t) => t.value !== o.value) : [...value, o]);
-
-  const create = () => {
-    const label = query.trim();
-    if (!label) return;
-    const v = label.toLowerCase().replaceAll(" ", "_");
-    if (!selected.has(v)) onChange([...value, { value: v, label }]);
-    setQuery("");
-  };
-
-  return (
-    <>
-      <View ref={anchorRef} style={[styles.box, style]} accessibilityLabel={accessibilityLabel}>
-        {value.map((t) => (
-          <View key={t.value} style={styles.chip}>
-            <Text size="sm">{t.label}</Text>
-            <Pressable
-              onPress={() => onChange(value.filter((x) => x.value !== t.value))}
-              accessibilityRole="button"
-              accessibilityLabel={`Remove ${t.label}`}
-              style={styles.chipRemove}
-              hitSlop={6}
-            >
-              <Icon name="x" size={12} color={colors.zinc[500]} />
-            </Pressable>
-          </View>
-        ))}
-        <Pressable
-          onPress={() => setOpen(true)}
-          accessibilityRole="button"
-          accessibilityLabel={accessibilityLabel ?? "Add tag"}
-          style={styles.add}
-        >
-          <Icon name="plus" size={14} color={colors.zinc[500]} />
-          <Text size="sm" color="muted">
-            {value.length === 0 ? placeholder : "Add"}
-          </Text>
-        </Pressable>
-      </View>
-
-      <Popover
-        open={open}
-        onOpenChange={(o) => {
-          setOpen(o);
-          if (!o) setQuery("");
-        }}
-        triggerRef={anchorRef}
-        side="bottom"
-        align="start"
-        offset={4}
-        inheritTriggerWidth
-      >
-        <PopoverContent>
-          <View style={styles.menu}>
-            <TextInputField
-              value={query}
-              onChangeText={setQuery}
-              icon="search"
-              placeholder={allowCreate ? "Search or create…" : "Search…"}
-              autoFocus
-              autoCapitalize="none"
-              autoCorrect={false}
-              onKeyPress={(e: { nativeEvent: { key: string }; preventDefault: () => void }) => {
-                if (e.nativeEvent.key === "Enter") {
-                  e.preventDefault();
-                  if (showCreate) create();
-                  else if (filtered.length === 1) toggle(filtered[0]);
-                }
-              }}
-            />
-            <ScrollView style={styles.list} keyboardShouldPersistTaps="handled">
-              {filtered.map((o) => (
-                <MenuButton
-                  key={o.value}
-                  title={o.label}
-                  right={selected.has(o.value) ? <Icon name="check" size={16} color={colors.zinc[900]} /> : undefined}
-                  onPress={() => toggle(o)}
-                />
-              ))}
-              {showCreate ? <MenuButton title={`Create “${query.trim()}”`} icon="plus" onPress={create} /> : null}
-              {filtered.length === 0 && !showCreate ? (
-                <View style={styles.empty}>
-                  <Text size="sm" color="muted">
-                    No tags found
-                  </Text>
-                </View>
-              ) : null}
-            </ScrollView>
-          </View>
-        </PopoverContent>
-      </Popover>
-    </>
-  );
-}
-
-const styles = StyleSheet.create({
-  box: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    alignItems: "center",
-    gap: 6,
-    minHeight: 40,
-    paddingHorizontal: 6,
-    paddingVertical: 5,
-    borderWidth: 1,
-    borderColor: colors.border,
-    borderRadius: CONTROL_RADIUS,
-    backgroundColor: colors.background,
-  },
-  chip: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    paddingLeft: 8,
-    paddingRight: 4,
-    paddingVertical: 3,
-    borderRadius: 6,
-    backgroundColor: colors.zinc[100],
-  },
-  chipRemove: {
-    padding: 2,
-    borderRadius: 4,
-    cursor: "pointer",
-  },
-  add: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    paddingHorizontal: 6,
-    paddingVertical: 4,
-    cursor: "pointer",
-  },
-  menu: {
-    gap: 6,
-    padding: 6,
-    minWidth: 240,
-  },
-  list: {
-    maxHeight: 240,
-  },
-  empty: {
-    paddingVertical: 12,
-    alignItems: "center",
-  },
-});