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

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
 
-> @utilitywarehouse/hearth-react-native@0.27.2-testid-fix-1 build /Users/filmondaniels/Projects/Work/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.27.2-testid-fix-3 build /Users/filmondaniels/Projects/Work/hearth/packages/react-native
 > tsc
 

package/build/components/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import SelectProps from './Select.props';
 declare const Select: {
-    ({ options, value, onValueChange, label, labelVariant, placeholder, disabled, leadingIcon: LeadingIcon, validationStatus, helperText, helperIcon, invalidText, validText, required, children, bottomSheetProps, menuHeading, readonly, emptyText, listProps, searchable, searchPlaceholder, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;
+    ({ options, value, onValueChange, label, labelVariant, placeholder, disabled, leadingIcon: LeadingIcon, validationStatus, helperText, helperIcon, invalidText, validText, required, children, bottomSheetProps, menuHeading, readonly, emptyText, listProps, searchable, searchPlaceholder, testID, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Select;

package/build/components/Select/Select.js

@@ -11,7 +11,7 @@ import { Icon } from '../Icon';
 import { Input } from '../Input';
 import { SelectContext } from './Select.context';
 import SelectOption from './SelectOption';
-const Select = ({ options = [], value, onValueChange, label, labelVariant = 'body', placeholder = 'Select an option', disabled = false, leadingIcon: LeadingIcon, validationStatus = 'initial', helperText, helperIcon, invalidText, validText, required = true, children, bottomSheetProps, menuHeading, readonly = false, emptyText = 'No options available', listProps, searchable = false, searchPlaceholder = 'Search', ...rest }) => {
+const Select = ({ options = [], value, onValueChange, label, labelVariant = 'body', placeholder = 'Select an option', disabled = false, leadingIcon: LeadingIcon, validationStatus = 'initial', helperText, helperIcon, invalidText, validText, required = true, children, bottomSheetProps, menuHeading, readonly = false, emptyText = 'No options available', listProps, searchable = false, searchPlaceholder = 'Search', testID, ...rest }) => {
     const formFieldContext = useFormFieldContext();
     const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
     const isRequired = formFieldContext?.required ?? required;
@@ -64,9 +64,10 @@ const Select = ({ options = [], value, onValueChange, label, labelVariant = 'bod
         setIsOpen(false);
         setSearch('');
     }, []);
-    const renderSelectOption = useCallback(({ item }) => (_jsx(SelectOption, { label: item.label, value: item.value, disabled: item.disabled, leadingIcon: item.leadingIcon, trailingIcon: item.trailingIcon })), []);
+    const renderSelectOption = useCallback(({ item }) => (_jsx(SelectOption, { label: item.label, value: item.value, disabled: item.disabled, leadingIcon: item.leadingIcon, trailingIcon: item.trailingIcon, testID: testID ? `${testID}-option-${item.label}` : undefined })), [testID] // ← added testID dependency
+    );
     const renderEmptyComponent = useCallback(() => (_jsx(BottomSheetView, { style: styles.emptyContainer, children: _jsx(DetailText, { children: emptyText }) })), [emptyText]);
-    return (_jsxs(View, { ...rest, style: [styles.container, rest.style], children: [_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatusFromContext, required: isRequired, disabled: isDisabled, readonly: isReadonly, invalidText: invalidText, validText: validText, children: _jsxs(Pressable, { onPress: openBottomSheet, disabled: isDisabled || isReadonly, style: ({ pressed }) => [
+    return (_jsxs(View, { ...rest, style: [styles.container, rest.style], children: [_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatusFromContext, required: isRequired, disabled: isDisabled, readonly: isReadonly, invalidText: invalidText, validText: validText, children: _jsxs(Pressable, { onPress: openBottomSheet, disabled: isDisabled || isReadonly, testID: testID, style: ({ pressed }) => [
                         styles.selectContainer,
                         styles.pressedContainer(pressed || isOpen),
                     ], children: [!!LeadingIcon && (_jsx(View, { children: (() => {
@@ -76,7 +77,7 @@ const Select = ({ options = [], value, onValueChange, label, labelVariant = 'bod
                         selectedValue: value,
                         onValueChange,
                         close: closeBottomSheet,
-                    }, children: [menuHeading && (_jsx(View, { style: styles.headingContainer, children: _jsx(DetailText, { size: "lg", children: menuHeading }) })), searchable && (_jsx(View, { style: styles.searchContainer, children: _jsx(Input, { placeholder: searchPlaceholder, value: search, inBottomSheet: true, onChangeText: setSearch, type: "search" }) })), children ? (_jsx(BottomSheetScrollView, { children: children })) : (_jsx(BottomSheetFlatList, { data: filteredOptions, keyExtractor: (option) => option.value, renderItem: renderSelectOption, ListEmptyComponent: renderEmptyComponent, ...listProps }))] }) })] }));
+                    }, children: [menuHeading && (_jsx(View, { style: styles.headingContainer, children: _jsx(DetailText, { size: "lg", children: menuHeading }) })), searchable && (_jsx(View, { style: styles.searchContainer, children: _jsx(Input, { placeholder: searchPlaceholder, value: search, inBottomSheet: true, onChangeText: setSearch, type: "search", testID: testID ? `${testID}-search` : undefined }) })), children ? (_jsx(BottomSheetScrollView, { children: children })) : (_jsx(BottomSheetFlatList, { data: filteredOptions, keyExtractor: (option) => option.value, renderItem: renderSelectOption, ListEmptyComponent: renderEmptyComponent, testID: testID ? `${testID}-options` : undefined, ...listProps }))] }) })] }));
 };
 const styles = StyleSheet.create(theme => ({
     container: {

package/build/components/Select/Select.props.d.ts

@@ -148,5 +148,9 @@ export interface SelectOptionProps {
      * Callback when this option is selected
      */
     onPress?: (value: string) => void;
+    /**
+     * Test ID for testing
+     */
+    testID?: string;
 }
 export default SelectProps;

package/build/components/Select/SelectOption.d.ts

@@ -1,6 +1,6 @@
 import { SelectOptionProps } from './Select.props';
 declare const SelectOption: {
-    ({ label, value, leadingIcon: LeftIcon, trailingIcon: RightIcon, selected, disabled, onPress, }: SelectOptionProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, value, leadingIcon: LeftIcon, trailingIcon: RightIcon, selected, disabled, onPress, testID, }: SelectOptionProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default SelectOption;

package/build/components/Select/SelectOption.js

@@ -5,7 +5,7 @@ import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { Icon } from '../Icon';
 import { useSelectContext } from './Select.context';
-const SelectOption = ({ label, value, leadingIcon: LeftIcon, trailingIcon: RightIcon, selected, disabled, onPress, }) => {
+const SelectOption = ({ label, value, leadingIcon: LeftIcon, trailingIcon: RightIcon, selected, disabled, onPress, testID, }) => {
     const { selectedValue, onValueChange, close } = useSelectContext();
     const isSelected = selected !== undefined ? selected : selectedValue === value;
     styles.useVariants({ disabled });
@@ -22,7 +22,7 @@ const SelectOption = ({ label, value, leadingIcon: LeftIcon, trailingIcon: Right
             close();
         }
     };
-    return (_jsxs(Pressable, { onPress: handlePress, disabled: disabled, style: ({ pressed }) => [styles.container, pressed && styles.pressed], children: [!!LeftIcon && (_jsx(View, { children: _jsx(Icon, { as: LeftIcon, style: styles.icon }) })), _jsx(View, { style: styles.labelContainer, children: _jsx(BodyText, { children: label }) }), isSelected && (_jsx(View, { children: _jsx(Icon, { as: TickSmallIcon, style: styles.icon }) })), !!RightIcon && !isSelected && (_jsx(View, { children: _jsx(Icon, { as: RightIcon, style: styles.icon }) }))] }));
+    return (_jsxs(Pressable, { onPress: handlePress, disabled: disabled, testID: testID, style: ({ pressed }) => [styles.container, pressed && styles.pressed], children: [!!LeftIcon && (_jsx(View, { children: _jsx(Icon, { as: LeftIcon, style: styles.icon }) })), _jsx(View, { style: styles.labelContainer, children: _jsx(BodyText, { children: label }) }), isSelected && (_jsx(View, { children: _jsx(Icon, { as: TickSmallIcon, style: styles.icon }) })), !!RightIcon && !isSelected && (_jsx(View, { children: _jsx(Icon, { as: RightIcon, style: styles.icon }) }))] }));
 };
 const styles = StyleSheet.create(theme => ({
     container: {

package/build/components/VerificationInput/VerificationInput.js

@@ -168,7 +168,7 @@ const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVa
                             pendingFocusIndexRef.current = index;
                             inputRef.current?.focus();
                             setSelectionIndex(index);
-                        } }, index));
+                        }, testID: testID ? `${testID}-${index}` : undefined }, index));
                 })] }) }));
 });
 const styles = StyleSheet.create(theme => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.27.2-testid-fix-1",
+  "version": "0.27.2-testid-fix-3",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -56,11 +56,11 @@
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
     "@utilitywarehouse/hearth-tokens": "^0.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-react-icons": "^0.8.0",
-    "@utilitywarehouse/hearth-svg-assets": "^0.5.0"
+    "@utilitywarehouse/hearth-svg-assets": "^0.5.0",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.8.0"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",

package/src/components/Select/Select.props.ts

@@ -152,6 +152,10 @@ export interface SelectOptionProps {
    * Callback when this option is selected
    */
   onPress?: (value: string) => void;
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
 }
 
 export default SelectProps;

package/src/components/Select/Select.tsx

@@ -40,6 +40,7 @@ const Select = ({
   listProps,
   searchable = false,
   searchPlaceholder = 'Search',
+  testID,
   ...rest
 }: SelectProps) => {
   const formFieldContext = useFormFieldContext();
@@ -109,9 +110,10 @@ const Select = ({
         disabled={item.disabled}
         leadingIcon={item.leadingIcon}
         trailingIcon={item.trailingIcon}
+        testID={testID ? `${testID}-option-${item.label}` : undefined} // ← restored
       />
     ),
-    []
+    [testID] // ← added testID dependency
   );
 
   const renderEmptyComponent = useCallback(
@@ -140,6 +142,7 @@ const Select = ({
         <Pressable
           onPress={openBottomSheet}
           disabled={isDisabled || isReadonly}
+          testID={testID}
           style={({ pressed }) => [
             styles.selectContainer,
             styles.pressedContainer(pressed || isOpen),
@@ -192,6 +195,7 @@ const Select = ({
                 inBottomSheet
                 onChangeText={setSearch}
                 type="search"
+                testID={testID ? `${testID}-search` : undefined}
               />
             </View>
           )}
@@ -204,6 +208,7 @@ const Select = ({
               keyExtractor={(option: any) => option.value}
               renderItem={renderSelectOption}
               ListEmptyComponent={renderEmptyComponent}
+              testID={testID ? `${testID}-options` : undefined}
               {...listProps}
             />
           )}

package/src/components/Select/SelectOption.tsx

@@ -14,6 +14,7 @@ const SelectOption = ({
   selected,
   disabled,
   onPress,
+  testID,
 }: SelectOptionProps) => {
   const { selectedValue, onValueChange, close } = useSelectContext();
   const isSelected = selected !== undefined ? selected : selectedValue === value;
@@ -38,6 +39,7 @@ const SelectOption = ({
     <Pressable
       onPress={handlePress}
       disabled={disabled}
+      testID={testID}
       style={({ pressed }) => [styles.container, pressed && styles.pressed]}
     >
       {!!LeftIcon && (

package/src/components/VerificationInput/VerificationInput.tsx

@@ -262,6 +262,7 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
                   inputRef.current?.focus();
                   setSelectionIndex(index);
                 }}
+                testID={testID ? `${testID}-${index}` : undefined}
               />
             );
           })}