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

package/package.json

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

package/src/components/colorSwatch/index.js

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

package/src/components/tabController/TabBar.js

@@ -149,7 +149,7 @@ const TabBar = props => {
   }, [labelColor, selectedLabelColor]);
   return <View style={_containerStyle} key={key} bg-$backgroundElevated>
       <FadedScrollView ref={tabBar} horizontal showsHorizontalScrollIndicator={false} showStartFader startFaderProps={faderProps} showEndFader endFaderProps={faderProps} contentContainerStyle={scrollViewContainerStyle} testID={testID} onContentSizeChange={onContentSizeChange} onLayout={onLayout}>
-        <View style={tabBarContainerStyle} accessibilityRole="tablist">{tabBarItems}</View>
+        <View style={tabBarContainerStyle}>{tabBarItems}</View>
         {itemsCount > 1 && <Reanimated.View style={[styles.selectedIndicator, indicatorStyle, _indicatorTransitionStyle]} />}
       </FadedScrollView>
     </View>;

package/src/components/tabController/TabBarContext.d.ts

@@ -13,7 +13,6 @@ interface TabControllerContext {
     /** transition page index (can be a fraction when transitioning between pages) */
     targetPage: Reanimated.SharedValue<number>;
     setCurrentIndex: (index: number) => void;
-    selectedIndex: number;
 }
 declare const TabBarContext: React.Context<TabControllerContext>;
 export default TabBarContext;

package/src/components/tabController/TabBarItem.js

@@ -44,8 +44,7 @@ export default function TabBarItem({
 }) {
   const {
     currentPage,
-    setCurrentIndex,
-    selectedIndex
+    setCurrentIndex
   } = useContext(TabBarContext);
   const itemRef = useRef();
   const itemWidth = useRef(props.width);
@@ -134,9 +133,7 @@ export default function TabBarItem({
   return <GestureDetector gesture={gesture}>
       <View reanimated
     // @ts-expect-error
-    ref={itemRef} style={_style} onLayout={onLayout} testID={testID} accessible accessibilityRole="tab" accessibilityState={{
-      selected: selectedIndex === index
-    }}>
+    ref={itemRef} style={_style} onLayout={onLayout} testID={testID}>
         {leadingAccessory}
         {icon && <Reanimated.Image source={icon} style={[!_isUndefined(label) && styles.tabItemIconWithLabel, animatedIconStyle]} />}
         {!_isEmpty(label) && <Reanimated.Text {...labelProps} fsTagName={'unmask'} style={[styles.tabItemLabel, labelStyle, animatedLabelStyle, animatedLabelColorStyle]}>

package/src/components/tabController/index.js

@@ -38,7 +38,6 @@ const TabController = React.forwardRef((props, ref) => {
     children
   } = themeProps;
   const [screenWidth, setScreenWidth] = useState(getScreenWidth(useSafeArea));
-  const [selectedIndex, setSelectedIndex] = useState(initialIndex);
   if (items?.length < 2) {
     console.warn('TabController component expect a minimum of 2 items');
   }
@@ -62,7 +61,6 @@ const TabController = React.forwardRef((props, ref) => {
     'worklet';
 
     currentPage.value = index;
-    runOnJS(setSelectedIndex)(index);
   }, []);
   useEffect(() => {
     setCurrentIndex(initialIndex);
@@ -90,13 +88,12 @@ const TabController = React.forwardRef((props, ref) => {
       /* Animated Values */
       targetPage,
       currentPage,
-      selectedIndex,
       containerWidth: screenWidth,
       /* Callbacks */
       onChangeIndex,
       setCurrentIndex
     };
-  }, [initialIndex, asCarousel, items, onChangeIndex, screenWidth, nestedInScrollView, selectedIndex]);
+  }, [initialIndex, asCarousel, items, onChangeIndex, screenWidth, nestedInScrollView]);
   return <TabBarContext.Provider value={context}>{children}</TabBarContext.Provider>;
 });
 

package/src/incubator/expandableOverlay/index.js

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

package/src/incubator/toast/index.js

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

package/src/style/colors.js

@@ -145,6 +145,9 @@ 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];
   }