@oxyhq/bloom 0.6.24 → 0.7.1

package/src/combobox/Combobox.tsx

@@ -0,0 +1,274 @@
+import React, { useCallback, useMemo, useRef } from 'react';
+import {
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  type TextInput,
+  View,
+} from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { useControllableState } from '../hooks/useControllableState';
+import { Text } from '../typography';
+import { Item } from '../item';
+import { SearchInput } from '../search-input';
+import { borderRadius, fontSize, space } from '../styles/tokens';
+import {
+  ChevronTopBottom_Stroke2_Corner0_Rounded as ChevronUpDownIcon,
+} from '../icons/Chevron';
+import { Check_Stroke2_Corner0_Rounded as CheckIcon } from '../icons/Check';
+import type {
+  PopoverContentProps,
+  PopoverRootProps,
+  PopoverTriggerProps,
+} from '../popover/types';
+import type { usePopoverContext as usePopoverContextType } from '../popover/context';
+import type { ComboboxOption, ComboboxProps } from './types';
+
+/**
+ * Structural shape of the `Popover` module, satisfied by both the native and
+ * web platform forks. Defined explicitly (rather than `typeof import(...)`) so
+ * the slightly different render-return types between forks (web `Content` may
+ * return `null`) don't make the modules mutually unassignable.
+ */
+interface PopoverModule {
+  Root: (props: PopoverRootProps) => React.ReactElement;
+  Trigger: (props: PopoverTriggerProps) => React.ReactElement;
+  Content: (props: PopoverContentProps) => React.ReactElement | null;
+  usePopoverContext: typeof usePopoverContextType;
+}
+
+function defaultFilter<T>(option: ComboboxOption<T>, query: string): boolean {
+  const q = query.trim().toLowerCase();
+  if (!q) return true;
+  return (
+    option.label.toLowerCase().includes(q) ||
+    (option.description?.toLowerCase().includes(q) ?? false)
+  );
+}
+
+/**
+ * Build the `Combobox` bound to a platform `Popover` module. The platform
+ * entry files (`index.ts` / `index.web.ts`) inject the correct one (native
+ * bottom sheet vs web anchored panel) — this repo never relies on implicit
+ * `.web` resolution. The combobox logic is single-source.
+ *
+ * `Combobox` is a filterable autocomplete select that delegates its overlay to
+ * Bloom's `Popover` and composes `SearchInput` + `Item`. The trigger + panel
+ * read the overlay control from `Popover` context (via an inner component) so
+ * selecting an option reliably closes the overlay on every platform.
+ */
+export function createCombobox(Popover: PopoverModule) {
+  function ComboboxInner<T>({
+    options,
+    value,
+    onValueChange,
+    placeholder,
+    label,
+    emptyText,
+    filter,
+    query: queryProp,
+    onQueryChange,
+    disabled,
+    maxListHeight,
+  }: Required<
+    Pick<
+      ComboboxProps<T>,
+      'options' | 'value' | 'onValueChange' | 'placeholder' | 'emptyText' | 'filter' | 'maxListHeight'
+    >
+  > &
+    Pick<ComboboxProps<T>, 'label' | 'query' | 'onQueryChange' | 'disabled'>) {
+    const theme = useTheme();
+    const { control } = Popover.usePopoverContext();
+    const searchRef = useRef<TextInput>(null);
+
+    const [query, setQuery] = useControllableState<string>({
+      value: queryProp,
+      defaultValue: '',
+      onChange: onQueryChange,
+    });
+
+    const selectedOption = useMemo(
+      () => options.find((o) => o.value === value) ?? null,
+      [options, value],
+    );
+
+    const filtered = useMemo(
+      () => options.filter((o) => filter(o, query)),
+      [options, filter, query],
+    );
+
+    const handleSelect = useCallback(
+      (option: ComboboxOption<T>) => {
+        if (option.disabled) return;
+        onValueChange(option.value);
+        setQuery('');
+        control.close();
+      },
+      [onValueChange, setQuery, control],
+    );
+
+    const accessibleLabel = label ?? placeholder;
+
+    return (
+      <>
+        <Popover.Trigger label={accessibleLabel}>
+          {({ props }) => (
+            <Pressable
+              {...props}
+              disabled={disabled}
+              onPress={() => {
+                if (disabled) return;
+                props.onPress();
+                if (Platform.OS === 'web') {
+                  requestAnimationFrame(() => searchRef.current?.focus());
+                }
+              }}
+              accessibilityState={{ disabled: disabled ?? false }}
+              style={[
+                styles.trigger,
+                {
+                  backgroundColor: theme.colors.contrast50,
+                  borderColor: theme.colors.borderLight,
+                },
+                disabled && styles.disabled,
+              ]}>
+              <Text
+                numberOfLines={1}
+                style={[
+                  styles.triggerText,
+                  {
+                    color: selectedOption
+                      ? theme.colors.text
+                      : theme.colors.textSecondary,
+                  },
+                ]}>
+                {selectedOption ? selectedOption.label : placeholder}
+              </Text>
+              <ChevronUpDownIcon size="xs" fill={theme.colors.textSecondary} />
+            </Pressable>
+          )}
+        </Popover.Trigger>
+
+        <Popover.Content label={accessibleLabel} placement="bottom-start" minWidth={240}>
+          <View style={styles.searchWrap}>
+            <SearchInput
+              ref={searchRef}
+              label={label ?? 'Search'}
+              value={query}
+              onChangeText={setQuery}
+              onClearText={() => setQuery('')}
+              autoFocus={Platform.OS !== 'web'}
+            />
+          </View>
+
+          {filtered.length === 0 ? (
+            <View style={styles.empty}>
+              <Text style={{ color: theme.colors.textSecondary, fontSize: fontSize.sm }}>
+                {emptyText}
+              </Text>
+            </View>
+          ) : (
+            <ScrollView
+              style={{ maxHeight: maxListHeight }}
+              keyboardShouldPersistTaps="handled"
+              showsVerticalScrollIndicator={false}>
+              {filtered.map((option) => {
+                const isSelected = option.value === value;
+                return (
+                  <Item
+                    key={String(option.value)}
+                    title={option.label}
+                    subtitle={option.description}
+                    density="compact"
+                    disabled={option.disabled}
+                    selected={isSelected}
+                    role="option"
+                    onPress={() => handleSelect(option)}
+                    trailing={
+                      isSelected ? (
+                        <CheckIcon size="sm" fill={theme.colors.primary} />
+                      ) : null
+                    }
+                  />
+                );
+              })}
+            </ScrollView>
+          )}
+        </Popover.Content>
+      </>
+    );
+  }
+
+  function Combobox<T = string>({
+    options,
+    value,
+    onValueChange,
+    placeholder = 'Select…',
+    label,
+    emptyText = 'No results',
+    filter = defaultFilter,
+    query,
+    onQueryChange,
+    disabled = false,
+    maxListHeight = 280,
+    style,
+    testID,
+  }: ComboboxProps<T>) {
+    return (
+      <Popover.Root>
+        <View style={style} testID={testID}>
+          <ComboboxInner<T>
+            options={options}
+            value={value}
+            onValueChange={onValueChange}
+            placeholder={placeholder}
+            label={label}
+            emptyText={emptyText}
+            filter={filter}
+            query={query}
+            onQueryChange={onQueryChange}
+            disabled={disabled}
+            maxListHeight={maxListHeight}
+          />
+        </View>
+      </Popover.Root>
+    );
+  }
+
+  Combobox.displayName = 'Combobox';
+  return Combobox;
+}
+
+const styles = StyleSheet.create({
+  trigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: space.sm,
+    paddingVertical: space.sm,
+    paddingHorizontal: space.md,
+    borderRadius: borderRadius.sm,
+    borderWidth: 1,
+    minHeight: 44,
+    width: '100%',
+  },
+  triggerText: {
+    flex: 1,
+    fontSize: fontSize.md,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  searchWrap: {
+    paddingHorizontal: space.sm,
+    paddingTop: space.sm,
+    paddingBottom: space.xs,
+  },
+  empty: {
+    paddingHorizontal: space.lg,
+    paddingVertical: space.lg,
+    alignItems: 'center',
+  },
+});

package/src/combobox/index.ts

@@ -0,0 +1,6 @@
+import * as Popover from '../popover/index';
+import { createCombobox } from './Combobox';
+
+export const Combobox = createCombobox(Popover);
+
+export type { ComboboxProps, ComboboxOption } from './types';

package/src/combobox/index.web.ts

@@ -0,0 +1,6 @@
+import * as Popover from '../popover/index.web';
+import { createCombobox } from './Combobox';
+
+export const Combobox = createCombobox(Popover);
+
+export type { ComboboxProps, ComboboxOption } from './types';

package/src/combobox/types.ts

@@ -0,0 +1,41 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface ComboboxOption<T = string> {
+  /** Stable value used for selection + comparison. */
+  value: T;
+  /** Display label. */
+  label: string;
+  /** Optional secondary text shown beneath the label. */
+  description?: string;
+  /** Disable selecting this option. */
+  disabled?: boolean;
+}
+
+export interface ComboboxProps<T = string> {
+  /** All selectable options. */
+  options: ComboboxOption<T>[];
+  /** Currently selected value (controlled). `null` = nothing selected. */
+  value: T | null;
+  /** Fired when the user picks an option. */
+  onValueChange: (value: T) => void;
+  /** Placeholder shown in the input when nothing is selected. */
+  placeholder?: string;
+  /** Accessible label for the input. Defaults to `placeholder` or `'Search'`. */
+  label?: string;
+  /** Text shown when the filtered list is empty. Defaults to `'No results'`. */
+  emptyText?: string;
+  /**
+   * Custom filter predicate. Defaults to a case-insensitive substring match
+   * against `label` and `description`.
+   */
+  filter?: (option: ComboboxOption<T>, query: string) => boolean;
+  /** Controlled query text. When omitted the combobox owns the query. */
+  query?: string;
+  /** Notified on query changes (works controlled or uncontrolled). */
+  onQueryChange?: (query: string) => void;
+  disabled?: boolean;
+  /** Max height of the option list in px. Defaults to `280`. */
+  maxListHeight?: number;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/command/Command.stories.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Command } from './index';
+import type { CommandItem } from './types';
+import { Button } from '../button';
+import { Person_Stroke2_Corner0_Rounded as PersonIcon } from '../icons/Person';
+import { SettingsGear2_Stroke2_Corner0_Rounded as GearIcon } from '../icons/SettingsGear2';
+
+const meta: Meta = {
+  title: 'Overlays/Command',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Basic: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const items: CommandItem[] = [
+      {
+        id: 'profile',
+        label: 'Go to profile',
+        icon: PersonIcon,
+        group: 'Navigation',
+        shortcut: 'G P',
+        onSelect: () => {},
+      },
+      {
+        id: 'settings',
+        label: 'Open settings',
+        icon: GearIcon,
+        group: 'Navigation',
+        onSelect: () => {},
+      },
+      {
+        id: 'new-app',
+        label: 'Create application',
+        description: 'Register a new OAuth client',
+        group: 'Actions',
+        keywords: ['oauth', 'client'],
+        onSelect: () => {},
+      },
+      {
+        id: 'signout',
+        label: 'Sign out',
+        group: 'Actions',
+        onSelect: () => {},
+      },
+    ];
+    return (
+      <View style={{ padding: 40 }}>
+        <Button onPress={() => setOpen(true)}>Open command palette (⌘K)</Button>
+        <Command visible={open} onClose={() => setOpen(false)} items={items} />
+      </View>
+    );
+  },
+};

package/src/command/Command.tsx

@@ -0,0 +1,276 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import {
+  Platform,
+  ScrollView,
+  StyleSheet,
+  type TextInput,
+  View,
+} from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { useControllableState } from '../hooks/useControllableState';
+import { Text } from '../typography';
+import { Item } from '../item';
+import { Kbd } from '../kbd';
+import { SearchInput } from '../search-input';
+import { fontSize, space } from '../styles/tokens';
+import type { CenteredDialogProps } from '../dialog';
+import type { CommandItem, CommandProps } from './types';
+
+type CenteredDialogComponent = React.ComponentType<CenteredDialogProps>;
+
+function defaultFilter(item: CommandItem, query: string): boolean {
+  const q = query.trim().toLowerCase();
+  if (!q) return true;
+  if (item.label.toLowerCase().includes(q)) return true;
+  if (item.description?.toLowerCase().includes(q)) return true;
+  return (item.keywords ?? []).some((k) => k.toLowerCase().includes(q));
+}
+
+interface FlatEntry {
+  type: 'header' | 'item';
+  group?: string;
+  item?: CommandItem;
+  /** Index into the flat list of selectable items (only for `type === 'item'`). */
+  selectableIndex?: number;
+}
+
+/**
+ * Build the `Command` palette bound to a platform `CenteredDialog`. The
+ * platform entry files (`index.ts` / `index.web.ts`) inject the correct one
+ * (native RN `Modal` vs pure-DOM web overlay) — this repo never relies on
+ * implicit `.web` resolution. The body is single-source.
+ *
+ * `Command` is a ⌘K command palette built on Bloom's `CenteredDialog`,
+ * `SearchInput`, an `Item` results list and `Kbd` shortcut hints. Items group
+ * by their `group` field (ungrouped first). On web the list is
+ * keyboard-navigable (Up/Down/Enter); on native, tap to select.
+ */
+export function createCommand(CenteredDialog: CenteredDialogComponent) {
+  const Command = function Command({
+    visible,
+    onClose,
+    items,
+    placeholder = 'Type a command or search…',
+    emptyText = 'No results found.',
+    query: queryProp,
+    onQueryChange,
+    filter = defaultFilter,
+    maxListHeight = 360,
+    style,
+    testID,
+  }: CommandProps) {
+    const theme = useTheme();
+    const searchRef = useRef<TextInput>(null);
+    const [activeIndex, setActiveIndex] = useState(0);
+
+  const [query, setQuery] = useControllableState<string>({
+    value: queryProp,
+    defaultValue: '',
+    onChange: onQueryChange,
+  });
+
+  const filtered = useMemo(
+    () => items.filter((it) => filter(it, query)),
+    [items, filter, query],
+  );
+
+  // Build a flattened render list with group headers, and a parallel list of
+  // just the selectable items for keyboard navigation.
+  const { entries, selectable } = useMemo(() => {
+    const groups = new Map<string, CommandItem[]>();
+    const ungrouped: CommandItem[] = [];
+    for (const it of filtered) {
+      if (it.group) {
+        const arr = groups.get(it.group) ?? [];
+        arr.push(it);
+        groups.set(it.group, arr);
+      } else {
+        ungrouped.push(it);
+      }
+    }
+
+    const flat: FlatEntry[] = [];
+    const sel: CommandItem[] = [];
+    const pushItem = (it: CommandItem) => {
+      flat.push({ type: 'item', item: it, selectableIndex: sel.length });
+      sel.push(it);
+    };
+
+    for (const it of ungrouped) pushItem(it);
+    for (const [group, arr] of groups) {
+      flat.push({ type: 'header', group });
+      for (const it of arr) pushItem(it);
+    }
+    return { entries: flat, selectable: sel };
+  }, [filtered]);
+
+  // Keep the active index in range as the filtered set changes. Reset to the
+  // first selectable item whenever the query changes (derive, no effect).
+  const prevQueryRef = useRef(query);
+  if (prevQueryRef.current !== query) {
+    prevQueryRef.current = query;
+    if (activeIndex !== 0) setActiveIndex(0);
+  }
+
+  // Reset the active index and focus the search field on the closed→open
+  // transition, derived from the `visible` prop (no effect). Focusing happens
+  // on the next frame so the dialog has mounted.
+  const prevVisibleRef = useRef(visible);
+  if (prevVisibleRef.current !== visible) {
+    prevVisibleRef.current = visible;
+    if (visible) {
+      if (activeIndex !== 0) setActiveIndex(0);
+      if (Platform.OS === 'web') {
+        requestAnimationFrame(() => searchRef.current?.focus());
+      }
+    }
+  }
+
+  const clampedActive = Math.min(activeIndex, Math.max(0, selectable.length - 1));
+
+  const select = useCallback(
+    (item: CommandItem | undefined) => {
+      if (!item || item.disabled) return;
+      item.onSelect();
+      setQuery('');
+      onClose();
+    },
+    [setQuery, onClose],
+  );
+
+  // Web keyboard navigation on the search input.
+  const webKeyHandler: Record<string, unknown> =
+    Platform.OS === 'web'
+      ? {
+          onKeyDown: (e: { key: string; preventDefault: () => void }) => {
+            if (selectable.length === 0) return;
+            switch (e.key) {
+              case 'ArrowDown':
+                e.preventDefault();
+                setActiveIndex((i) => (i + 1) % selectable.length);
+                break;
+              case 'ArrowUp':
+                e.preventDefault();
+                setActiveIndex(
+                  (i) => (i - 1 + selectable.length) % selectable.length,
+                );
+                break;
+              case 'Enter':
+                e.preventDefault();
+                select(selectable[clampedActive]);
+                break;
+              default:
+                break;
+            }
+          },
+        }
+      : {};
+
+  return (
+    <CenteredDialog
+      visible={visible}
+      onClose={onClose}
+      dismissible
+      showClose={false}
+      maxWidth={560}
+      accessibilityLabel="Command palette"
+      cardStyle={style}
+      contentStyle={styles.content}
+      testID={testID}>
+      <View {...webKeyHandler}>
+        <View style={[styles.searchWrap, { borderBottomColor: theme.colors.borderLight }]}>
+          <SearchInput
+            ref={searchRef}
+            label={placeholder}
+            placeholder={placeholder}
+            value={query}
+            onChangeText={setQuery}
+            onClearText={() => setQuery('')}
+            autoFocus={Platform.OS !== 'web'}
+          />
+        </View>
+
+        {selectable.length === 0 ? (
+          <View style={styles.empty}>
+            <Text style={{ color: theme.colors.textSecondary, fontSize: fontSize.sm }}>
+              {emptyText}
+            </Text>
+          </View>
+        ) : (
+          <ScrollView
+            style={{ maxHeight: maxListHeight }}
+            keyboardShouldPersistTaps="handled"
+            showsVerticalScrollIndicator={false}>
+            {entries.map((entry, i) => {
+              if (entry.type === 'header') {
+                return (
+                  <Text
+                    key={`h-${entry.group}-${i}`}
+                    style={[styles.groupHeader, { color: theme.colors.textTertiary }]}>
+                    {entry.group}
+                  </Text>
+                );
+              }
+              const item = entry.item;
+              if (!item) return null;
+              const Icon = item.icon;
+              const isActive = entry.selectableIndex === clampedActive;
+              return (
+                <Item
+                  key={item.id}
+                  title={item.label}
+                  subtitle={item.description}
+                  density="compact"
+                  disabled={item.disabled}
+                  active={isActive}
+                  role="option"
+                  onPress={() => select(item)}
+                  leading={
+                    Icon ? (
+                      <Icon size="sm" fill={theme.colors.textSecondary} />
+                    ) : null
+                  }
+                  trailing={item.shortcut ? <Kbd size="sm">{item.shortcut}</Kbd> : null}
+                />
+              );
+            })}
+          </ScrollView>
+        )}
+      </View>
+    </CenteredDialog>
+    );
+  };
+
+  Command.displayName = 'Command';
+  return Command;
+}
+
+export type CommandType = ReturnType<typeof createCommand>;
+
+const styles = StyleSheet.create({
+  content: {
+    paddingHorizontal: 0,
+    paddingTop: 0,
+    paddingBottom: space.xs,
+  },
+  searchWrap: {
+    paddingHorizontal: space.md,
+    paddingTop: space.sm,
+    paddingBottom: space.sm,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  groupHeader: {
+    fontSize: fontSize.xs,
+    fontWeight: '600',
+    textTransform: 'uppercase',
+    letterSpacing: 0.6,
+    paddingHorizontal: space.lg,
+    paddingTop: space.sm,
+    paddingBottom: space.xs,
+  },
+  empty: {
+    paddingVertical: space._2xl,
+    alignItems: 'center',
+  },
+});

package/src/command/index.ts

@@ -0,0 +1,6 @@
+import { CenteredDialog } from '../dialog/index';
+import { createCommand } from './Command';
+
+export const Command = createCommand(CenteredDialog);
+
+export type { CommandProps, CommandItem } from './types';

package/src/command/index.web.ts

@@ -0,0 +1,6 @@
+import { CenteredDialog } from '../dialog/index.web';
+import { createCommand } from './Command';
+
+export const Command = createCommand(CenteredDialog);
+
+export type { CommandProps, CommandItem } from './types';