@utilitywarehouse/hearth-react-native 0.27.2 → 0.28.0-testid-fix-1

package/src/components/Combobox/Combobox.stories.tsx

@@ -0,0 +1,233 @@
+import type { Meta } from '@storybook/react-vite';
+import { useEffect, useState } from 'react';
+import { BottomSheetFlatList } from '../BottomSheet';
+import { Box } from '../Box';
+import { ComboboxOptionItemProps } from './Combobox.props';
+import Combobox from './Combobox';
+import ComboboxOption from './ComboboxOption';
+
+const countries = [
+  { label: 'United Kingdom', value: 'uk', keywords: ['britain', 'england'] },
+  { label: 'United States', value: 'us', keywords: ['america', 'usa'] },
+  { label: 'Canada', value: 'ca' },
+  { label: 'Australia', value: 'au' },
+  { label: 'France', value: 'fr' },
+  { label: 'Germany', value: 'de' },
+  { label: 'Japan', value: 'jp' },
+  { label: 'Brazil', value: 'br' },
+  { label: 'India', value: 'in' },
+  { label: 'South Africa', value: 'za' },
+] satisfies ComboboxOptionItemProps[];
+
+const products = [
+  'Broadband',
+  'Energy',
+  'Mobile',
+  'Insurance',
+  'Cashback Card',
+  'Home Phone',
+  'TV',
+  'Boiler Cover',
+  'Life Insurance',
+  'Smart Home',
+].map((label, index) => ({
+  label,
+  value: `product-${index + 1}`,
+})) satisfies ComboboxOptionItemProps[];
+
+const cities = Array.from({ length: 150 }, (_, index) => ({
+  label: `City ${String(index + 1).padStart(3, '0')}`,
+  value: `city-${index + 1}`,
+}));
+
+const meta = {
+  title: 'Stories / Combobox',
+  component: Combobox,
+  parameters: {
+    status: {
+      type: 'stable',
+    },
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label for the combobox',
+      defaultValue: 'Combobox',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Trigger placeholder text',
+      defaultValue: 'Search for a country',
+    },
+    searchPlaceholder: {
+      control: 'text',
+      description: 'Bottom sheet input placeholder text',
+      defaultValue: 'Search for a country',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the combobox is disabled',
+      defaultValue: false,
+    },
+    readonly: {
+      control: 'boolean',
+      description: 'Whether the combobox is readonly',
+      defaultValue: false,
+    },
+    loading: {
+      control: 'boolean',
+      description: 'Whether to show a loading spinner',
+      defaultValue: false,
+    },
+    validationStatus: {
+      control: 'select',
+      options: ['initial', 'valid', 'invalid'],
+      description: 'Validation status',
+      defaultValue: 'initial',
+    },
+    noOptionsFoundText: {
+      control: 'text',
+      description: 'Empty state text',
+      defaultValue: 'No options found',
+    },
+  },
+  args: {
+    label: 'Combobox',
+    helperText: 'Helper text',
+    placeholder: 'Search for a country',
+    searchPlaceholder: 'Search for a country',
+    disabled: false,
+    readonly: false,
+    loading: false,
+    validationStatus: 'initial',
+    noOptionsFoundText: 'No options found',
+    options: countries,
+  },
+} satisfies Meta<typeof Combobox>;
+
+export default meta;
+
+export const Playground = ({ ...args }) => {
+  const [value, setValue] = useState<string | null>('uk');
+
+  return <Combobox value={value} onValueChange={setValue} {...args} />;
+};
+
+export const StaticSearchableList = () => {
+  const [value, setValue] = useState<string | null>(null);
+
+  return (
+    <Combobox
+      label="Country"
+      helperText="Search a fixed list of countries"
+      placeholder="Search for a country"
+      searchPlaceholder="Search for a country"
+      menuHeading="Choose a country"
+      options={countries}
+      value={value}
+      onValueChange={setValue}
+    />
+  );
+};
+
+export const DynamicItems = () => {
+  const [value, setValue] = useState<string | null>(null);
+  const [inputValue, setInputValue] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [options, setOptions] = useState<ComboboxOptionItemProps[]>(products);
+
+  useEffect(() => {
+    setLoading(true);
+
+    const timeout = setTimeout(() => {
+      const normalizedQuery = inputValue.trim().toLowerCase();
+      const nextOptions = products.filter(option => {
+        if (!normalizedQuery) {
+          return true;
+        }
+
+        return option.label.toLowerCase().includes(normalizedQuery);
+      });
+
+      setOptions(nextOptions);
+      setLoading(false);
+    }, 350);
+
+    return () => clearTimeout(timeout);
+  }, [inputValue]);
+
+  return (
+    <Combobox
+      label="Products"
+      helperText="Search results are updated asynchronously"
+      menuHeading="Search products"
+      placeholder="Search products"
+      searchPlaceholder="Search products"
+      inputValue={inputValue}
+      onInputValueChange={setInputValue}
+      loading={loading}
+      options={options}
+      value={value}
+      onValueChange={setValue}
+      getValueLabel={selectedValue =>
+        products.find(option => option.value === selectedValue)?.label ?? ''
+      }
+      noOptionsFoundText="No products match your search"
+    />
+  );
+};
+
+export const CustomFlatList = () => {
+  const [value, setValue] = useState<string | null>(null);
+
+  return (
+    <Combobox
+      label="Cities"
+      helperText="Custom bottom sheet content using BottomSheetFlatList"
+      placeholder="Search a city"
+      searchPlaceholder="Search a city"
+      menuHeading="Popular cities"
+      value={value}
+      onValueChange={setValue}
+      getValueLabel={selectedValue =>
+        cities.find(option => option.value === selectedValue)?.label ?? ''
+      }
+    >
+      {({ search }) => {
+        const normalizedQuery = search.trim().toLowerCase();
+        const filteredCities = normalizedQuery
+          ? cities.filter(option => option.label.toLowerCase().includes(normalizedQuery))
+          : cities;
+
+        return (
+          <BottomSheetFlatList
+            data={filteredCities}
+            keyExtractor={item => item.value}
+            renderItem={({ item }) => <ComboboxOption label={item.label} value={item.value} />}
+          />
+        );
+      }}
+    </Combobox>
+  );
+};
+
+export const InlineOptions = () => {
+  const [value, setValue] = useState<string | null>(null);
+
+  return (
+    <Combobox
+      label="Inline options"
+      helperText="Compose your own sheet content using ComboboxOption"
+      placeholder="Search a country"
+      searchPlaceholder="Search a country"
+      value={value}
+      onValueChange={setValue}
+    >
+      <Box>
+        {countries.map(option => (
+          <ComboboxOption key={option.value} label={option.label} value={option.value} />
+        ))}
+      </Box>
+    </Combobox>
+  );
+};

package/src/components/Combobox/Combobox.tsx

@@ -0,0 +1,446 @@
+import { CloseSmallIcon, SearchMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { GestureResponderEvent, Pressable, TextInput, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
+import { BodyText } from '../BodyText';
+import { BottomSheetFlatList, BottomSheetModal, BottomSheetView } from '../BottomSheet';
+import { DetailText } from '../DetailText';
+import { FormField, useFormFieldContext } from '../FormField';
+import { Icon } from '../Icon';
+import { Input } from '../Input';
+import { Spinner } from '../Spinner';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+import { ComboboxContext } from './Combobox.context';
+import { ComboboxSelection } from './Combobox.context';
+import ComboboxProps, {
+  ComboboxOptionItemProps,
+  ComboboxRenderContentProps,
+} from './Combobox.props';
+import { SafeAreaView } from '../SafeAreaView';
+import ComboboxOption from './ComboboxOption';
+
+const DEFAULT_SNAP_POINTS = ['25%', '40%', '80%'];
+
+const Combobox = ({
+  options = [],
+  value,
+  onValueChange,
+  inputValue,
+  onInputValueChange,
+  label,
+  labelVariant = 'body',
+  placeholder = 'Search',
+  searchPlaceholder = 'Search',
+  disabled = false,
+  validationStatus = 'initial',
+  helperText,
+  helperIcon,
+  invalidText,
+  validText,
+  required = true,
+  children,
+  bottomSheetProps,
+  menuHeading,
+  noOptionsFoundText = 'No options found',
+  listProps,
+  loading = false,
+  readonly = false,
+  getValueLabel,
+  filterOption,
+  ...rest
+}: ComboboxProps) => {
+  const formFieldContext = useFormFieldContext();
+  const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
+  const isRequired = formFieldContext?.required ?? required;
+  const isDisabled = formFieldContext?.disabled ?? disabled;
+  const isReadonly = formFieldContext?.readonly ?? readonly;
+  const { color } = useTheme();
+
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const searchInputRef = useRef<TextInput>(null);
+  const focusTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedChildLabel, setSelectedChildLabel] = useState<string | undefined>(undefined);
+  const [uncontrolledInputValue, setUncontrolledInputValue] = useState('');
+  const isInputControlled = inputValue !== undefined;
+
+  const selectedOption = options.find(option => option.value === value);
+
+  useEffect(() => {
+    if (typeof children === 'function' || !children || selectedOption || !value || getValueLabel) {
+      setSelectedChildLabel(undefined);
+      return;
+    }
+
+    let nextLabel: string | undefined;
+
+    React.Children.forEach(children, child => {
+      if (!React.isValidElement(child) || nextLabel) {
+        return;
+      }
+
+      if ((child.props as any).value === value) {
+        nextLabel = (child.props as any).label;
+      }
+    });
+
+    setSelectedChildLabel(nextLabel);
+  }, [children, getValueLabel, selectedOption, value]);
+
+  const selectedLabel = useMemo(() => {
+    return getValueLabel?.(value) || selectedOption?.label || selectedChildLabel || '';
+  }, [getValueLabel, selectedChildLabel, selectedOption?.label, value]);
+
+  useEffect(() => {
+    if (isInputControlled) {
+      return;
+    }
+
+    setUncontrolledInputValue(selectedLabel);
+  }, [isInputControlled, selectedLabel]);
+
+  useEffect(() => {
+    return () => {
+      if (focusTimeoutRef.current) {
+        clearTimeout(focusTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const search = isInputControlled ? (inputValue ?? '') : uncontrolledInputValue;
+
+  const accessibilityLabel = useMemo(() => {
+    if (!label) {
+      return undefined;
+    }
+
+    return isRequired ? `${label}, required` : label;
+  }, [isRequired, label]);
+
+  const accessibilityHint = useMemo(() => {
+    const hints: string[] = [];
+
+    if (helperText) {
+      hints.push(helperText);
+    }
+
+    if (validationStatusFromContext === 'invalid' && invalidText) {
+      hints.push(invalidText);
+    }
+
+    if (validationStatusFromContext === 'valid' && validText) {
+      hints.push(validText);
+    }
+
+    return hints.length > 0 ? hints.join(', ') : undefined;
+  }, [helperText, invalidText, validText, validationStatusFromContext]);
+
+  styles.useVariants({
+    disabled: isDisabled,
+    hasValue: search.length > 0,
+    readonly: isReadonly,
+    validationStatus: validationStatusFromContext,
+  });
+
+  const setSearch = useCallback(
+    (nextValue: string) => {
+      if (!isInputControlled) {
+        setUncontrolledInputValue(nextValue);
+      }
+
+      onInputValueChange?.(nextValue);
+    },
+    [isInputControlled, onInputValueChange]
+  );
+
+  const handleClose = useCallback(
+    (index: number) => {
+      if (index === -1) {
+        setIsOpen(false);
+        setSearch('');
+      }
+    },
+    [setSearch]
+  );
+
+  const focusSearchInput = useCallback(() => {
+    if (focusTimeoutRef.current) {
+      clearTimeout(focusTimeoutRef.current);
+    }
+
+    focusTimeoutRef.current = setTimeout(() => {
+      searchInputRef.current?.focus();
+    }, 300);
+  }, []);
+
+  const openBottomSheet = useCallback(() => {
+    if (isDisabled || isReadonly) {
+      return;
+    }
+
+    bottomSheetModalRef.current?.present();
+    setIsOpen(true);
+    focusSearchInput();
+  }, [focusSearchInput, isDisabled, isReadonly]);
+
+  const closeBottomSheet = useCallback(() => {
+    bottomSheetModalRef.current?.dismiss();
+    setIsOpen(false);
+  }, []);
+
+  const selectOption = useCallback(
+    ({ label: optionLabel, value: optionValue }: ComboboxSelection) => {
+      setSearch(optionLabel);
+      onValueChange?.(optionValue);
+      closeBottomSheet();
+    },
+    [closeBottomSheet, onValueChange, setSearch]
+  );
+
+  const handleClear = useCallback(() => {
+    setSearch('');
+    onValueChange?.(null);
+  }, [onValueChange, setSearch]);
+
+  const handleClearPress = useCallback(
+    (event: GestureResponderEvent) => {
+      event.stopPropagation();
+      handleClear();
+    },
+    [handleClear]
+  );
+
+  const defaultFilterOption = useCallback((option: ComboboxOptionItemProps, query: string) => {
+    const normalizedQuery = query.trim().toLowerCase();
+
+    if (!normalizedQuery) {
+      return true;
+    }
+
+    const haystack = [option.label, ...(option.keywords ?? [])].map(term => term.toLowerCase());
+
+    return haystack.some(term => term.includes(normalizedQuery));
+  }, []);
+
+  const filteredOptions = useMemo(() => {
+    const optionFilter = filterOption ?? defaultFilterOption;
+
+    return options.filter(option => optionFilter(option, search));
+  }, [defaultFilterOption, filterOption, options, search]);
+
+  const renderSelectOption = useCallback(
+    ({ item }: { item: ComboboxOptionItemProps }) => (
+      <ComboboxOption
+        label={item.label}
+        value={item.value}
+        disabled={item.disabled}
+        leadingIcon={item.leadingIcon}
+        trailingIcon={item.trailingIcon}
+      />
+    ),
+    []
+  );
+
+  const renderEmptyComponent = useCallback(
+    () => (
+      <BottomSheetView style={styles.emptyContainer}>
+        <DetailText>{noOptionsFoundText}</DetailText>
+      </BottomSheetView>
+    ),
+    [noOptionsFoundText]
+  );
+
+  const renderContentProps = useMemo<ComboboxRenderContentProps>(
+    () => ({
+      close: closeBottomSheet,
+      search,
+      selectedValue: value,
+      selectOption,
+      setSearch,
+    }),
+    [closeBottomSheet, search, selectOption, setSearch, value]
+  );
+
+  const customContent = typeof children === 'function' ? children(renderContentProps) : children;
+
+  return (
+    <View {...rest} style={[styles.container, rest.style]}>
+      <FormField
+        label={label}
+        labelVariant={labelVariant}
+        helperText={helperText}
+        helperIcon={helperIcon}
+        validationStatus={validationStatusFromContext}
+        required={isRequired}
+        disabled={isDisabled}
+        readonly={isReadonly}
+        invalidText={invalidText}
+        validText={validText}
+        accessibilityHandledByChildren
+      >
+        <Pressable
+          onPress={openBottomSheet}
+          disabled={isDisabled || isReadonly}
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabel}
+          accessibilityHint={accessibilityHint}
+          accessibilityState={{ expanded: isOpen, disabled: isDisabled || isReadonly }}
+          style={({ pressed }) => [styles.trigger, (pressed || isOpen) && styles.triggerFocused]}
+        >
+          <View style={styles.leadingIconContainer}>
+            <Icon as={SearchMediumIcon} style={styles.icon} />
+          </View>
+
+          <View style={styles.valueContainer}>
+            <BodyText numberOfLines={1} style={styles.valueText}>
+              {search || placeholder}
+            </BodyText>
+          </View>
+
+          {loading && <Spinner size="xs" color={color.icon.primary} />}
+
+          {!!search && (
+            <UnstyledIconButton
+              accessibilityLabel="Clear search"
+              onPress={handleClearPress}
+              icon={CloseSmallIcon}
+            />
+          )}
+        </Pressable>
+      </FormField>
+
+      <BottomSheetModal
+        ref={bottomSheetModalRef}
+        snapPoints={DEFAULT_SNAP_POINTS}
+        onChange={handleClose}
+        enableDynamicSizing={false}
+        {...bottomSheetProps}
+      >
+        <ComboboxContext.Provider
+          value={{
+            close: closeBottomSheet,
+            search,
+            selectedValue: value,
+            selectOption,
+            setSearch,
+          }}
+        >
+          <SafeAreaView edges={['top']}>
+            {menuHeading && (
+              <View style={styles.headingContainer}>
+                <DetailText size="lg">{menuHeading}</DetailText>
+              </View>
+            )}
+            <View style={styles.searchContainer}>
+              <Input
+                ref={searchInputRef}
+                placeholder={searchPlaceholder}
+                value={search}
+                inBottomSheet
+                onChangeText={setSearch}
+                type="search"
+                clearable
+                onClear={handleClear}
+                loading={loading}
+              />
+            </View>
+          </SafeAreaView>
+
+          {customContent || (
+            <BottomSheetFlatList
+              data={filteredOptions}
+              keyExtractor={(option: ComboboxOptionItemProps) => option.value}
+              renderItem={renderSelectOption}
+              ListEmptyComponent={renderEmptyComponent}
+              {...listProps}
+            />
+          )}
+        </ComboboxContext.Provider>
+      </BottomSheetModal>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    gap: theme.components.select.gap,
+  },
+  trigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minHeight: theme.components.input.height,
+    backgroundColor: theme.color.surface.neutral.strong,
+    borderWidth: theme.components.input.borderWidth,
+    borderColor: theme.color.border.strong,
+    borderRadius: theme.components.input.borderRadius,
+    paddingHorizontal: theme.components.input.paddingHorizontal,
+    gap: theme.components.input.gap,
+    outlineStyle: 'solid',
+    outlineWidth: theme.components.input.borderWidth,
+    outlineColor: theme.color.border.strong,
+    variants: {
+      disabled: {
+        true: {
+          opacity: theme.opacity.disabled,
+        },
+      },
+      readonly: {
+        true: {
+          borderColor: theme.color.border.subtle,
+        },
+      },
+      validationStatus: {
+        initial: {},
+        valid: {
+          borderColor: theme.color.feedback.positive.border,
+          outlineColor: theme.color.feedback.positive.border,
+        },
+        invalid: {
+          borderColor: theme.color.feedback.danger.border,
+          outlineColor: theme.color.feedback.danger.border,
+        },
+      },
+    },
+  },
+  triggerFocused: {
+    outlineWidth: theme.components.input.borderWidthFocused,
+  },
+  leadingIconContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  valueContainer: {
+    flex: 1,
+  },
+  valueText: {
+    variants: {
+      hasValue: {
+        false: {
+          color: theme.color.text.secondary,
+        },
+      },
+    },
+  },
+  icon: {
+    color: theme.color.icon.primary,
+  },
+  headingContainer: {
+    paddingHorizontal: theme.components.bottomSheet.padding,
+    marginBottom: theme.components.select.gap,
+  },
+  searchContainer: {
+    paddingTop: 1,
+    paddingHorizontal: theme.components.bottomSheet.padding,
+    paddingBottom: theme.components.select.gap,
+  },
+  emptyContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: theme.space.md,
+  },
+}));
+
+Combobox.displayName = 'Combobox';
+
+export default Combobox;