react-native-ui-lib 7.37.2-snapshot.6147 → 7.37.2-snapshot.6172

package/package.json

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

package/src/components/colorSwatch/index.js

@@ -10,7 +10,6 @@ const transparentImage = require("./assets/transparentSwatch/TransparentSwatch.p
 const DEFAULT_SIZE = Constants.isTablet ? 44 : 36;
 export const SWATCH_MARGIN = 12;
 export const SWATCH_SIZE = DEFAULT_SIZE;
-const DEFAULT_COLOR = Colors.grey30;
 
 /**
  * @description: A color swatch component
@@ -84,8 +83,9 @@ class ColorSwatch extends PureComponent {
       value,
       index
     } = this.props;
+    const color = this.color ?? '';
     const tintColor = this.getTintColor(value);
-    const result = value || this.color || '';
+    const result = value || color;
     const hexString = Colors.getHexString(result);
     this.props.onPress?.(result, {
       tintColor,
@@ -102,14 +102,10 @@ class ColorSwatch extends PureComponent {
     }
   }
   getAccessibilityInfo() {
-    const color = this.color || DEFAULT_COLOR;
-    const defaultText = !this.color ? 'default' : '';
+    const color = this.color;
     return {
-      accessible: true,
-      accessibilityLabel: `${defaultText} color ${Colors.getColorName(color)}`,
-      accessibilityState: {
-        selected: this.props.selected
-      }
+      accessibilityLabel: color && Colors.getColorName(color),
+      accessibilityStates: this.props.selected ? ['selected'] : []
     };
   }
   getLayout() {
@@ -126,11 +122,13 @@ class ColorSwatch extends PureComponent {
       size = DEFAULT_SIZE,
       ...others
     } = this.props;
+    const color = this.color;
     const {
       isSelected
     } = this.state;
     const Container = onPress ? TouchableOpacity : View;
-    const tintColor = this.getTintColor(this.color);
+    const tintColor = this.getTintColor(color);
+    const accessibilityInfo = Constants.accessibility.isScreenReaderEnabled && this.getAccessibilityInfo();
     return <Container {...others} center activeOpacity={1} throttleTime={0} hitSlop={{
       top: 10,
       bottom: 10,
@@ -140,8 +138,8 @@ class ColorSwatch extends PureComponent {
       width: size,
       height: size,
       borderRadius: size / 2
-    }, style]} onLayout={this.onLayout} {...this.getAccessibilityInfo()}>
-        {Colors.isTransparent(this.color) && <Image source={transparentImage} style={this.styles.transparentImage} resizeMode={'cover'} />}
+    }, style]} onLayout={this.onLayout} {...accessibilityInfo}>
+        {Colors.isTransparent(color) && <Image source={transparentImage} style={this.styles.transparentImage} resizeMode={'cover'} />}
         {unavailable ? <View style={[this.styles.unavailable, {
         backgroundColor: tintColor
       }]} /> : <Animated.Image source={Assets.icons.check} style={{
@@ -183,12 +181,12 @@ class ColorSwatch extends PureComponent {
 }
 export default asBaseComponent(ColorSwatch);
 function createStyles({
-  color = DEFAULT_COLOR
+  color = Colors.grey30
 }) {
   return StyleSheet.create({
     container: {
       backgroundColor: color,
-      borderWidth: Colors.isTransparent(color) ? undefined : 1,
+      borderWidth: color === 'transparent' ? undefined : 1,
       borderColor: Colors.rgba(Colors.$outlineDisabledHeavy, 0.2),
       margin: SWATCH_MARGIN,
       overflow: 'hidden'

package/src/components/switch/index.js

@@ -36,7 +36,10 @@ class Switch extends Component {
       accessibilityRole: 'switch',
       accessibilityState: {
         disabled,
-        checked: value
+        checked: value ? 'checked' : 'unchecked'
+      },
+      accessibilityValue: {
+        text: value ? '1' : '0'
       }
     };
   }

package/src/components/switch/switch.driver.d.ts

@@ -2,8 +2,9 @@ import { ViewStyle } from 'react-native';
 import { ComponentProps } from '../../testkit/new/Component.driver';
 export declare const SwitchDriver: (props: ComponentProps) => {
     getStyle: () => ViewStyle;
+    getAccessibilityValue: () => boolean;
     isDisabled: () => boolean;
-    isChecked: () => any;
+    isChecked: () => boolean;
     press: () => void;
     hasOnPress: () => boolean;
     onPressIn: () => void;

package/src/components/switch/switch.driver.js

@@ -3,11 +3,13 @@ import { usePressableDriver } from "../../testkit/new/usePressable.driver";
 export const SwitchDriver = props => {
   const driver = usePressableDriver(useComponentDriver(props));
   const getStyle = () => driver.getElement().props.style;
+  const getAccessibilityValue = () => driver.getElement().props.accessibilityValue?.text === '1';
   const isDisabled = () => driver.getElement().props.accessibilityState?.disabled === true;
-  const isChecked = () => driver.getElement().props.accessibilityState?.checked;
+  const isChecked = () => driver.getElement().props.accessibilityValue?.text === '1';
   return {
     ...driver,
     getStyle,
+    getAccessibilityValue,
     isDisabled,
     isChecked
   };

package/src/components/textField/index.js

@@ -159,7 +159,10 @@ const TextField = props => {
                   {placeholder}
                 </Text>}
               {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 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} />
+              <Input hitSlop={{
+            top: 20,
+            bottom: 20
+          }} 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={`${props.testID}.clearButton`} onChangeText={onChangeText} clearButtonStyle={clearButtonStyle} />}
           {trailingAccessory}

package/src/incubator/expandableOverlay/index.js

@@ -1,5 +1,4 @@
-import React, { useCallback, useState, forwardRef, useImperativeHandle, useRef } from 'react';
-import { AccessibilityInfo, findNodeHandle } from 'react-native';
+import React, { useCallback, useState, forwardRef, useImperativeHandle } from 'react';
 import TouchableOpacity from "../../components/touchableOpacity";
 import View from "../../components/view";
 import Modal from "../../components/modal";
@@ -24,22 +23,14 @@ const ExpandableOverlay = (props, ref) => {
     ...others
   } = props;
   const [visible, setExpandableVisible] = useState(false);
-  const containerRef = useRef(null);
-  const focusAccessibility = useCallback(() => {
-    const reactTag = findNodeHandle(containerRef.current);
-    if (reactTag) {
-      AccessibilityInfo.setAccessibilityFocus(reactTag);
-    }
-  }, []);
   const openExpandable = useCallback(() => {
     setExpandableVisible(true);
     onPress?.(props);
   }, [onPress, customValue]);
   const closeExpandable = useCallback(() => {
     setExpandableVisible(false);
-    focusAccessibility();
     useDialog ? dialogProps?.onDismiss?.() : modalProps?.onDismiss?.();
-  }, [useDialog, dialogProps?.onDismiss, modalProps?.onDismiss, focusAccessibility]);
+  }, [useDialog, dialogProps?.onDismiss, modalProps?.onDismiss]);
   const toggleExpandable = useCallback(() => visible ? closeExpandable() : openExpandable(), [visible, openExpandable, closeExpandable]);
   useImperativeHandle(ref, () => ({
     openExpandable,
@@ -70,7 +61,7 @@ const ExpandableOverlay = (props, ref) => {
       return useDialog ? renderDialog() : renderModal();
     }
   };
-  return <TouchableOpacity ref={containerRef} {...others} onPress={openExpandable} disabled={disabled} testID={testID}>
+  return <TouchableOpacity {...others} onPress={openExpandable} disabled={disabled} testID={testID}>
       <View pointerEvents="none">{children}</View>
       {renderOverlay()}
     </TouchableOpacity>;

package/src/incubator/toast/index.js

@@ -57,9 +57,11 @@ const Toast = props => {
   });
   const playAccessibilityFeatures = () => {
     if (visible) {
-      if (viewRef.current && (action || message)) {
+      if (viewRef.current && action) {
         const reactTag = findNodeHandle(viewRef.current);
         AccessibilityInfo.setAccessibilityFocus(reactTag);
+      } else if (message) {
+        AccessibilityInfo.announceForAccessibility?.(toastPreset.accessibilityMessage);
       }
     }
   };

package/src/index.d.ts

@@ -68,7 +68,7 @@ export { default as PanningProvider, PanningDirections, PanLocationProps, PanAmo
 export { default as PanResponderView, PanResponderViewProps } from './components/panningViews/panResponderView';
 export { default as asPanViewConsumer } from './components/panningViews/asPanViewConsumer';
 export { default as Picker, PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods } from './components/picker';
-export { default as PieChart, type PieChartProps, PieChartSegmentProps } from './components/pieChart';
+export { default as PieChart, PieChartSegmentProps } from './components/pieChart';
 export { default as ProgressBar, ProgressBarProps } from './components/progressBar';
 export { default as ProgressiveImage, ProgressiveImageProps } from './components/progressiveImage';
 export { default as RadioButton, RadioButtonProps } from './components/radioButton';

package/src/style/colors.js

@@ -145,9 +145,6 @@ export class Colors {
     return Scheme.getScheme(schemeType)[colorKey];
   }
   getColorName(colorValue) {
-    if (this.isTransparent(colorValue)) {
-      return 'transparent';
-    }
     const color = colorStringValue(colorValue);
     return ColorName.name(color)[1];
   }