react-native-ui-lib 8.4.1-snapshot.7915 → 8.4.2-snapshot.7918

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "8.4.1-snapshot.7915",
+  "version": "8.4.2-snapshot.7918",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/src/components/textField/TextField.driver.new.js

@@ -9,10 +9,6 @@ import { ButtonDriver } from "../button/Button.driver.new";
 import { ViewDriver } from "../view/View.driver.new";
 export const TextFieldDriver = (props, options) => {
   const driver = usePressableDriver(useComponentDriver(props, options));
-  const inputDriver = useComponentDriver({
-    renderTree: props.renderTree,
-    testID: `${props.testID}.input`
-  }, options);
   const floatingPlaceholderDriver = TextDriver({
     renderTree: props.renderTree,
     testID: `${props.testID}.floatingPlaceholder`
@@ -45,31 +41,30 @@ export const TextFieldDriver = (props, options) => {
     renderTree: props.renderTree,
     testID: `${props.testID}.clearButton.container`
   });
-  const getInputElement = () => inputDriver.queryElement() ?? driver.getElement();
   const getValue = () => {
-    return getInputElement().props.value ?? getInputElement().props.defaultValue;
+    return driver.getElement().props.value ?? driver.getElement().props.defaultValue;
   };
   const changeText = text => {
-    fireEvent.changeText(getInputElement(), text);
+    fireEvent.changeText(driver.getElement(), text);
   };
   const focus = () => {
-    fireEvent(getInputElement(), 'focus');
+    fireEvent(driver.getElement(), 'focus');
   };
   const blur = () => {
-    fireEvent(getInputElement(), 'blur');
+    fireEvent(driver.getElement(), 'blur');
   };
   const isEnabled = () => {
-    return !getInputElement().props.accessibilityState?.disabled;
+    return !driver.getElement().props.accessibilityState?.disabled;
   };
   const getPlaceholder = () => {
     const exists = () => {
-      const hasPlaceholder = !!getInputElement().props.placeholder;
+      const hasPlaceholder = !!driver.getElement().props.placeholder;
       const hasText = !!getValue();
       return hasPlaceholder && (!hasText || hasText && floatingPlaceholderDriver.exists());
     };
     const getText = () => {
       if (exists()) {
-        return getInputElement().props.placeholder;
+        return driver.getElement().props.placeholder;
       }
     };
     return {

package/src/components/textField/index.js

@@ -78,8 +78,6 @@ const TextField = props => {
     readonly = false,
     showMandatoryIndication,
     clearButtonStyle,
-    testID,
-    accessibilityLabel: accessibilityLabelProp,
     ...others
   } = usePreset(props);
   const {
@@ -137,31 +135,11 @@ const TextField = props => {
   const hasValue = fieldState.value !== undefined; // NOTE: not pressable if centered without a value (so can't center placeholder)
   const inputStyle = useMemo(() => [typographyStyle, colorStyle, others.style, hasValue && centeredTextStyle], [typographyStyle, colorStyle, others.style, centeredTextStyle, hasValue]);
   const dummyPlaceholderStyle = useMemo(() => [inputStyle, styles.dummyPlaceholder], [inputStyle]);
-  const defaultAccessibilityLabel = useMemo(() => {
-    const parts = [];
-    if (label) {
-      parts.push(label);
-    }
-    if (context.isMandatory) {
-      parts.push('required');
-    }
-    parts.push('textField');
-    if (helperText) {
-      parts.push(helperText);
-    } else if (placeholder) {
-      parts.push(placeholder);
-    }
-    if (showCharCounter && others.maxLength) {
-      parts.push(`you can enter up to ${others.maxLength} characters`);
-    }
-    return parts.join(', ');
-  }, [label, context.isMandatory, helperText, placeholder, showCharCounter, others.maxLength]);
-  const accessibilityLabel = accessibilityLabelProp ?? defaultAccessibilityLabel;
   return <FieldContext.Provider value={context}>
-      <View {...containerProps} testID={testID} accessible accessibilityLabel={accessibilityLabel} style={[margins, positionStyle, containerStyle, centeredContainerStyle]}>
+      <View {...containerProps} style={[margins, positionStyle, containerStyle, centeredContainerStyle]}>
         <View row spread style={centeredContainerStyle}>
-          <Label label={label} labelColor={labelColor} labelStyle={_labelStyle} labelProps={labelProps} floatingPlaceholder={floatingPlaceholder} validationMessagePosition={validationMessagePosition} testID={`${testID}.label`} showMandatoryIndication={showMandatoryIndication} enableErrors={enableErrors} />
-          {validationMessagePosition === ValidationMessagePosition.TOP && <ValidationMessage enableErrors={enableErrors} validate={others.validate} validationMessage={others.validationMessage} validationMessageStyle={_validationMessageStyle} retainValidationSpace={retainValidationSpace && retainTopMessageSpace} testID={`${testID}.validationMessage`} />}
+          <Label label={label} labelColor={labelColor} labelStyle={_labelStyle} labelProps={labelProps} floatingPlaceholder={floatingPlaceholder} validationMessagePosition={validationMessagePosition} testID={`${props.testID}.label`} showMandatoryIndication={showMandatoryIndication} enableErrors={enableErrors} />
+          {validationMessagePosition === ValidationMessagePosition.TOP && <ValidationMessage enableErrors={enableErrors} validate={others.validate} validationMessage={others.validationMessage} validationMessageStyle={_validationMessageStyle} retainValidationSpace={retainValidationSpace && retainTopMessageSpace} testID={`${props.testID}.validationMessage`} />}
           {topTrailingAccessory && <View>{topTrailingAccessory}</View>}
         </View>
         <View style={[paddings, fieldStyle]} row centerV centerH={centered}>
@@ -180,26 +158,26 @@ const TextField = props => {
               {Constants.isAndroid && centered && <Text marginR-s1 style={dummyPlaceholderStyle}>
                   {placeholder}
                 </Text>}
-              {floatingPlaceholder && <FloatingPlaceholder defaultValue={others.defaultValue} placeholder={placeholder} floatingPlaceholderStyle={_floatingPlaceholderStyle} floatingPlaceholderColor={floatingPlaceholderColor} floatOnFocus={floatOnFocus} validationMessagePosition={validationMessagePosition} extraOffset={leadingAccessoryMeasurements?.width} testID={`${testID}.floatingPlaceholder`} showMandatoryIndication={showMandatoryIndication} />}
+              {floatingPlaceholder && <FloatingPlaceholder defaultValue={others.defaultValue} placeholder={placeholder} floatingPlaceholderStyle={_floatingPlaceholderStyle} floatingPlaceholderColor={floatingPlaceholderColor} floatOnFocus={floatOnFocus} validationMessagePosition={validationMessagePosition} extraOffset={leadingAccessoryMeasurements?.width} testID={`${props.testID}.floatingPlaceholder`} showMandatoryIndication={showMandatoryIndication} />}
               <Input hitSlop={{
             top: 20,
             bottom: 20
-          }} placeholderTextColor={hidePlaceholder ? 'transparent' : placeholderTextColor} value={fieldState.value} {...others} testID={`${testID}.input`} readonly={readonly} style={inputStyle} onFocus={onFocus} onBlur={onBlur} onChangeText={onChangeText} placeholder={placeholder} hint={hint} showMandatoryIndication={showMandatoryIndication && !label} />
+          }} placeholderTextColor={hidePlaceholder ? 'transparent' : placeholderTextColor} value={fieldState.value} {...others} readonly={readonly} style={inputStyle} onFocus={onFocus} onBlur={onBlur} onChangeText={onChangeText} placeholder={placeholder} hint={hint} showMandatoryIndication={showMandatoryIndication && !label} />
             </View>}
-          {showClearButton && <ClearButton onClear={onClear} testID={`${testID}.clearButton`} onChangeText={onChangeText} clearButtonStyle={clearButtonStyle} />}
+          {showClearButton && <ClearButton onClear={onClear} testID={`${props.testID}.clearButton`} onChangeText={onChangeText} clearButtonStyle={clearButtonStyle} />}
           {trailingAccessory}
           {/* </View> */}
         </View>
         <View row spread center={centered}>
           <View flex={!centered} flexG={centered} marginR-s4={showCharCounter}>
-            {validationMessagePosition === ValidationMessagePosition.BOTTOM && <ValidationMessage enableErrors={enableErrors} validate={others.validate} validationMessage={others.validationMessage} validationIcon={validationIcon} validationMessageStyle={_validationMessageStyle} retainValidationSpace={retainValidationSpace} testID={`${testID}.validationMessage`} />}
-            {helperText && <Text $textNeutralHeavy subtext marginT-s1 testID={`${testID}.helperText`}>
+            {validationMessagePosition === ValidationMessagePosition.BOTTOM && <ValidationMessage enableErrors={enableErrors} validate={others.validate} validationMessage={others.validationMessage} validationIcon={validationIcon} validationMessageStyle={_validationMessageStyle} retainValidationSpace={retainValidationSpace} testID={`${props.testID}.validationMessage`} />}
+            {helperText && <Text $textNeutralHeavy subtext marginT-s1 testID={`${props.testID}.helperText`}>
                 {helperText}
               </Text>}
             {bottomAccessory}
           </View>
           <View>
-            {showCharCounter && <CharCounter maxLength={others.maxLength} charCounterStyle={charCounterStyle} testID={`${testID}.charCounter`} />}
+            {showCharCounter && <CharCounter maxLength={others.maxLength} charCounterStyle={charCounterStyle} testID={`${props.testID}.charCounter`} />}
           </View>
         </View>
       </View>