@lotics/ui 5.8.0 → 5.10.0

package/src/command_menu.tsx

@@ -1,205 +0,0 @@
-import { StyleSheet, View, ScrollView } from "react-native";
-import { useState, useCallback, useMemo, useRef, useId } from "react";
-import { colors } from "./colors";
-import { TextInputField } from "./text_input_field";
-import { MenuButton } from "./menu_button";
-import { Text } from "./text";
-import { useScreenSize } from "./use_screen_size";
-
-export interface CommandOption {
-  value: string;
-  label: string;
-  disabled?: boolean;
-}
-
-interface CommandMenuProps {
-  options: CommandOption[];
-  onSelect: (value: string) => void;
-  onRequestClose?: () => void;
-  enableSearch?: boolean;
-  /** Search input placeholder. Default: "Search...". Pass a translated string from the consumer. */
-  searchPlaceholder?: string;
-  /** Accessible name for the list. Default: "Options". Pass a translated string from the consumer. */
-  accessibilityLabel?: string;
-}
-
-export function CommandMenu(props: CommandMenuProps) {
-  const {
-    options,
-    onSelect,
-    onRequestClose,
-    enableSearch,
-    searchPlaceholder = "Search...",
-    accessibilityLabel,
-  } = props;
-  const scrollViewRef = useRef<ScrollView>(null);
-  const screenSize = useScreenSize();
-  const OPTION_HEIGHT = 40;
-
-  const baseId = useId();
-  const listboxId = `${baseId}-listbox`;
-  const optionId = (index: number) => `${baseId}-option-${index}`;
-
-  const [searchQuery, setSearchQuery] = useState("");
-
-  const filteredOptions = useMemo(() => {
-    if (!enableSearch || !searchQuery) return options;
-    const query = searchQuery.toLowerCase();
-    return options.filter((opt) => opt.label.toLowerCase().includes(query));
-  }, [options, enableSearch, searchQuery]);
-
-  const [focusedIndex, setFocusedIndex] = useState(0);
-
-  const handleSearchChange = useCallback((text: string) => {
-    setSearchQuery(text);
-    setFocusedIndex(0);
-  }, []);
-
-  const handleSelect = useCallback(
-    (value: string) => {
-      onSelect(value);
-    },
-    [onSelect],
-  );
-
-  const scrollToIndex = useCallback((index: number) => {
-    if (scrollViewRef.current && index >= 0) {
-      scrollViewRef.current.scrollTo({ y: index * OPTION_HEIGHT - 80, animated: false });
-    }
-  }, []);
-
-  const handleKeyNavigation = useCallback(
-    (key: string): boolean => {
-      switch (key) {
-        case "ArrowDown": {
-          let next = focusedIndex + 1;
-          while (next < filteredOptions.length) {
-            if (!filteredOptions[next].disabled) {
-              setFocusedIndex(next);
-              scrollToIndex(next);
-              break;
-            }
-            next++;
-          }
-          return true;
-        }
-        case "ArrowUp": {
-          let next = focusedIndex - 1;
-          while (next >= 0) {
-            if (!filteredOptions[next].disabled) {
-              setFocusedIndex(next);
-              scrollToIndex(next);
-              break;
-            }
-            next--;
-          }
-          return true;
-        }
-        case "Home":
-          setFocusedIndex(0);
-          scrollToIndex(0);
-          return true;
-        case "End": {
-          const last = filteredOptions.length - 1;
-          setFocusedIndex(last);
-          scrollToIndex(last);
-          return true;
-        }
-        case "Enter":
-          if (focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
-            const opt = filteredOptions[focusedIndex];
-            if (opt && !opt.disabled) handleSelect(opt.value);
-          }
-          return true;
-        case "Escape":
-          onRequestClose?.();
-          return true;
-        case "Tab":
-          onRequestClose?.();
-          return false;
-        default:
-          return false;
-      }
-    },
-    [focusedIndex, filteredOptions, handleSelect, onRequestClose, scrollToIndex],
-  );
-
-  const handleSearchKeyPress = useCallback(
-    (e: { nativeEvent: { key: string }; preventDefault: () => void }) => {
-      if (handleKeyNavigation(e.nativeEvent.key)) {
-        e.preventDefault();
-      }
-    },
-    [handleKeyNavigation],
-  );
-
-  const listLabel = accessibilityLabel ?? "Options";
-  const activeOptionId =
-    focusedIndex >= 0 && focusedIndex < filteredOptions.length ? optionId(focusedIndex) : undefined;
-
-  return (
-    <View style={[styles.container, screenSize.small ? { flex: 1 } : { maxHeight: 480 }]}>
-      {enableSearch && (
-        <TextInputField
-          autoFocus={!screenSize.small}
-          icon="search"
-          value={searchQuery}
-          onChangeText={handleSearchChange}
-          placeholder={searchPlaceholder}
-          placeholderTextColor={colors.zinc["400"]}
-          autoCapitalize="none"
-          autoCorrect={false}
-          onKeyPress={handleSearchKeyPress}
-          accessibilityLabel={listLabel}
-          role="combobox"
-          aria-expanded
-          aria-controls={listboxId}
-          aria-activedescendant={activeOptionId}
-          aria-autocomplete="list"
-        />
-      )}
-      <ScrollView
-        ref={scrollViewRef}
-        style={styles.optionsList}
-        nativeID={listboxId}
-        accessibilityLabel={listLabel}
-        // Boundary adapter: `listbox` is a valid ARIA role but missing from
-        // React Native's `Role` enum, so TypeScript cannot accept the literal
-        // here. `react-native-web` forwards the attribute verbatim, which is
-        // what assistive technology reads on web.
-        role={"listbox" as "list"}
-      >
-        {filteredOptions.map((item, index) => (
-          <MenuButton
-            key={item.value}
-            nativeID={optionId(index)}
-            testID={`command-option-${item.value}`}
-            title={
-              <Text userSelect="none" numberOfLines={1}>
-                {item.label}
-              </Text>
-            }
-            accessibilityLabel={item.label}
-            role="option"
-            right={undefined}
-            focused={index === focusedIndex}
-            selected={index === focusedIndex}
-            disabled={item.disabled}
-            onPress={() => handleSelect(item.value)}
-            onHoverIn={() => setFocusedIndex(index)}
-          />
-        ))}
-      </ScrollView>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    gap: 4,
-  },
-  optionsList: {
-    flex: 1,
-    gap: 4,
-  },
-});

package/src/hover_action.tsx

@@ -1,54 +0,0 @@
-import { View, ViewStyle } from "react-native";
-import { ReactNode, useState, useCallback } from "react";
-import { useScreenSize } from "./use_screen_size";
-
-interface HoverActionProps {
-  children: ReactNode;
-  /** Content to show on hover (e.g., IconButton with Popover) */
-  action: ReactNode;
-  /** Additional condition for showing the action (combined with hover state) */
-  visible?: boolean;
-  hover?: boolean;
-
-  /** Style for the outer wrapper */
-  style?: ViewStyle;
-}
-
-export function HoverAction(props: HoverActionProps) {
-  const { children, action, visible = true, hover = true, style } = props;
-  const [hovered, setHovered] = useState(false);
-  const screenSize = useScreenSize();
-
-  // Disable hover on small screens (mobile) to prevent tap issues
-  const enableHover = hover && !screenSize.small;
-
-  const handleMouseEnter = useCallback(() => setHovered(true), []);
-  const handleMouseLeave = useCallback(() => setHovered(false), []);
-
-  return (
-    <View
-      style={[{ position: "relative" }, style]}
-      {...(enableHover
-        ? {
-            onMouseEnter: handleMouseEnter,
-            onMouseLeave: handleMouseLeave,
-          }
-        : {})}
-    >
-      {children}
-      {(hovered || !enableHover) && visible && (
-        <View
-          style={{
-            position: "absolute",
-            zIndex: 1,
-            top: "50%",
-            transform: [{ translateY: "-50%" }],
-            right: 8,
-          }}
-        >
-          {action}
-        </View>
-      )}
-    </View>
-  );
-}

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,
-  },
-});