react-native-ui-lib 7.43.0 → 7.44.0-snapshot.7202

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.43.0",
+  "version": "7.44.0-snapshot.7202",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
@@ -66,7 +66,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.17.9",
     "@babel/preset-env": "^7.20.0",
     "@babel/preset-react": "^7.10.1",
-    "@babel/runtime": "^7.20.0",
+    "@babel/runtime": "^7.26.10",
     "@formatjs/intl-datetimeformat": "^6.0.3",
     "@formatjs/intl-getcanonicallocales": "^2.0.2",
     "@formatjs/intl-locale": "^3.0.3",

package/src/commons/Constants.d.ts

@@ -43,6 +43,7 @@ declare const constants: {
     addDimensionsEventListener: (callback: any) => import("react-native").EmitterSubscription;
     removeDimensionsEventListener: (callback: any) => void;
     readonly accessibility: {
+        isReduceMotionEnabled: boolean;
         isScreenReaderEnabled: boolean;
     };
     backspaceKey: string;

package/src/commons/Constants.js

@@ -44,16 +44,20 @@ export function updateConstants(dimensions) {
   setStatusBarHeight();
 }
 const accessibility = {
+  isReduceMotionEnabled: false,
   isScreenReaderEnabled: false
 };
+function handleReduceMotionChanged(isReduceMotionEnabled) {
+  accessibility.isReduceMotionEnabled = isReduceMotionEnabled;
+}
 function handleScreenReaderChanged(isScreenReaderEnabled) {
   accessibility.isScreenReaderEnabled = isScreenReaderEnabled;
 }
+AccessibilityInfo.addEventListener('reduceMotionChanged', handleReduceMotionChanged);
 AccessibilityInfo.addEventListener('screenReaderChanged', handleScreenReaderChanged);
-function setAccessibility() {
-  AccessibilityInfo.isScreenReaderEnabled().then(isScreenReaderEnabled => {
-    accessibility.isScreenReaderEnabled = isScreenReaderEnabled;
-  });
+async function setAccessibility() {
+  accessibility.isReduceMotionEnabled = await AccessibilityInfo.isReduceMotionEnabled();
+  accessibility.isScreenReaderEnabled = await AccessibilityInfo.isScreenReaderEnabled();
 }
 setAccessibility();
 const constants = {

package/src/components/checkbox/index.d.ts

@@ -120,7 +120,6 @@ declare class Checkbox extends Component<CheckboxProps, CheckboxState> {
     getLabelStyle: () => {
         color: string;
     };
-    getAccessibleHitSlop(size: number): number;
     renderCheckbox(): React.JSX.Element;
     render(): React.JSX.Element;
     validate: () => boolean;

package/src/components/checkbox/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { Animated, Easing, StyleSheet } from 'react-native';
 import { Colors, Spacings } from "../../style";
+import { StyleUtils } from "../../utils";
 //@ts-ignore
 import Assets from "../../assets";
 import { asBaseComponent } from "../../commons/new";
@@ -146,9 +147,6 @@ class Checkbox extends Component {
       color: this.props.disabled ? Colors.$textDisabled : this.state.showError ? Colors.$textDangerLight : Colors.$textDefault
     };
   };
-  getAccessibleHitSlop(size) {
-    return Math.max(0, (48 - size) / 2);
-  }
   renderCheckbox() {
     const {
       selectedIcon,
@@ -161,7 +159,7 @@ class Checkbox extends Component {
     } = this.props;
     return (
       //@ts-ignore
-      <TouchableOpacity {...this.getAccessibilityProps()} activeOpacity={1} testID={testID} {...others} style={[this.getBorderStyle(), style, !label && containerStyle]} onPress={this.onPress} hitSlop={this.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE)}>
+      <TouchableOpacity {...this.getAccessibilityProps()} activeOpacity={1} testID={testID} {...others} style={[this.getBorderStyle(), style, !label && containerStyle]} onPress={this.onPress} hitSlop={StyleUtils.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE)}>
         {<Animated.View style={[this.styles.container, {
           opacity: this.animationStyle.opacity
         }, {

package/src/components/chip/index.js

@@ -1,5 +1,4 @@
-import _get from "lodash/get";
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import Assets from "../../assets";
 import { asBaseComponent } from "../../commons/new";
@@ -57,8 +56,8 @@ const Chip = ({
   }, [badgeProps]);
   const renderOnDismiss = useCallback(() => {
     return <TouchableOpacity style={[getMargins('dismiss'), dismissContainerStyle]} onPress={onDismiss} hitSlop={{
-      top: 10,
-      bottom: 10,
+      top: 16,
+      bottom: 16,
       left: 10,
       right: 10
     }} testID={`${testID}.dismiss`}>
@@ -138,23 +137,47 @@ const Chip = ({
       }
     }
   }, [avatarProps, badgeProps, iconSource, rightIconSource, onDismiss]);
-  const getContainerSize = useCallback(() => {
-    const width = useSizeAsMinimum ? 'minWidth' : 'width';
-    const height = useSizeAsMinimum ? 'minHeight' : 'height';
-    return typeof size === 'object' ? {
-      [width]: _get(size, 'width'),
-      [height]: _get(size, 'height')
-    } : {
-      [width]: size,
-      [height]: size
+  const chipSize = useMemo(() => {
+    const width = typeof size === 'object' ? size.width : size;
+    const height = typeof size === 'object' ? size.height : size;
+    return {
+      width,
+      height
     };
   }, [size]);
+  const containerSizeStyle = useMemo(() => {
+    const {
+      width,
+      height
+    } = chipSize;
+    return useSizeAsMinimum ? {
+      minWidth: width,
+      minHeight: height
+    } : {
+      width,
+      height
+    };
+  }, [chipSize]);
   const Container = onPress ? TouchableOpacity : View;
+  const hitSlop = useMemo(() => {
+    const {
+      width = 48,
+      height = 48
+    } = chipSize;
+    const verticalHitSlop = Math.max(0, (48 - height) / 2);
+    const horizontalHitSlop = Math.max(0, (48 - width) / 2);
+    return {
+      top: verticalHitSlop,
+      bottom: verticalHitSlop,
+      left: horizontalHitSlop,
+      right: horizontalHitSlop
+    };
+  }, [chipSize]);
   return <Container activeOpacity={1} onPress={onPress} style={[styles.container, {
     backgroundColor
   }, {
     borderRadius
-  }, containerStyle, getContainerSize()]} testID={testID} {...others}>
+  }, containerStyle, containerSizeStyle]} testID={testID} hitSlop={hitSlop} {...others}>
       {avatarProps && renderAvatar()}
       {iconSource && renderIcon('left')}
       {leftElement}

package/src/components/expandableSection/index.js

@@ -58,12 +58,13 @@ function ExpandableSection(props) {
         </View>
       </View>;
   };
+  const Container = onPress ? TouchableOpacity : View;
   if (shouldShowSectionHeader) {
     return <View style={styles.hidden}>
         {top && renderChildren()}
-        <TouchableOpacity onPress={onPress} testID={testID} accessibilityState={accessibilityState}>
+        <Container onPress={onPress} testID={testID} accessibilityState={accessibilityState}>
           {sectionHeader}
-        </TouchableOpacity>
+        </Container>
         {!top && renderChildren()}
       </View>;
   } else {

package/src/components/pageControl/index.js

@@ -5,6 +5,7 @@ import React, { PureComponent } from 'react';
 import { StyleSheet, LayoutAnimation } from 'react-native';
 import { asBaseComponent } from "../../commons/new";
 import { Colors } from "../../style";
+import { StyleUtils } from "../../utils";
 import TouchableOpacity from "../touchableOpacity";
 import View from "../view";
 const MAX_SHOWN_PAGES = 7;
@@ -135,9 +136,13 @@ class PageControl extends PureComponent {
       onPagePress,
       spacing = PageControl.DEFAULT_SPACING
     } = this.props;
+    const hitSlopValue = StyleUtils.getAccessibleHitSlop(size);
     return <TouchableOpacity customValue={index} onPress={onPagePress && this.onPagePress} key={index} style={[styles.pageIndicator, {
       marginHorizontal: spacing / 2
-    }, getColorStyle(index === currentPage, color, inactiveColor), getSizeStyle(size, index, currentPage, enlargeActive)]} />;
+    }, getColorStyle(index === currentPage, color, inactiveColor), getSizeStyle(size, index, currentPage, enlargeActive)]} hitSlop={{
+      top: hitSlopValue,
+      bottom: hitSlopValue
+    }} />;
   }
   renderDifferentSizeIndicators() {
     const {

package/src/components/radioButton/index.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import { StyleSheet, Animated, Easing } from 'react-native';
 import { Colors } from "../../style";
+import { StyleUtils } from "../../utils";
 import { asBaseComponent, forwardRef } from "../../commons/new";
 import TouchableOpacity from "../touchableOpacity";
 import View from "../view";
@@ -179,13 +180,6 @@ class RadioButton extends PureComponent {
       }]} />
       </View>;
   }
-  getAccessibleHitSlop(size) {
-    const verticalPadding = Math.max(0, (48 - size) / 2);
-    return {
-      top: verticalPadding,
-      bottom: verticalPadding
-    };
-  }
   render() {
     const {
       onPress,
@@ -195,9 +189,13 @@ class RadioButton extends PureComponent {
       ...others
     } = this.props;
     const Container = onPress || onValueChange ? TouchableOpacity : View;
+    const hitSlopValue = StyleUtils.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE);
     return (
       // @ts-ignore
-      <Container row centerV activeOpacity={1} {...others} style={containerStyle} onPress={this.onPress} {...this.getAccessibilityProps()} hitSlop={this.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE)}>
+      <Container row centerV activeOpacity={1} {...others} style={containerStyle} onPress={this.onPress} {...this.getAccessibilityProps()} hitSlop={{
+        top: hitSlopValue,
+        bottom: hitSlopValue
+      }}>
         {!contentOnLeft && this.renderButton()}
         {this.props.iconOnRight ? this.renderLabel() : this.renderIcon()}
         {this.props.iconOnRight ? this.renderIcon() : this.renderLabel()}

package/src/incubator/dialog/index.js

@@ -183,7 +183,7 @@ const Dialog = (props, ref) => {
     dismiss: close
   }));
   const renderDialog = () => <GestureDetector gesture={panGesture}>
-      <View {...containerProps} reanimated style={style} onLayout={onLayout} ref={setRef} testID={testID}>
+      <View {...containerProps} reanimated={!Constants.accessibility.isReduceMotionEnabled} style={style} onLayout={onLayout} ref={setRef} testID={testID}>
         {renderDialogContent()}
       </View>
     </GestureDetector>;

package/src/style/colors.d.ts

@@ -253,14 +253,12 @@ declare const colorObject: Colors & {
     $iconDisabled: string;
     $outlineDefault: string;
     $outlineDisabled: string;
-    /**
-     * Load light and dark schemes based on generated design tokens
-     * @param color - palette color
-     */
     $outlineDisabledHeavy: string;
     $outlineNeutral: string;
     $outlineNeutralHeavy: string;
-    $outlinePrimary: string;
+    $outlinePrimary: string; /**
+     * Get app's current color scheme
+     */
     $outlinePrimaryMedium: string;
     $outlineGeneral: string;
     $outlineWarning: string;

package/src/style/designTokens.js

@@ -21,7 +21,8 @@ export default {
   $backgroundWarningLight: colorsPalette.yellow70,
   $backgroundMajorLight: colorsPalette.orange80,
   $backgroundMajorHeavy: colorsPalette.orange30,
-  $backgroundDangerHeavy: colorsPalette.red30,
+  //backgroundDangerHeavy should be changed to backgroundDanger
+  $backgroundDangerHeavy: colorsPalette.red10,
   $backgroundDangerLight: colorsPalette.red80,
   $backgroundDisabled: colorsPalette.grey50,
   $backgroundDark: colorsPalette.grey10,
@@ -41,7 +42,8 @@ export default {
   $textSuccessLight: colorsPalette.green30,
   $textMajor: colorsPalette.orange10,
   $textDanger: colorsPalette.red10,
-  $textDangerLight: colorsPalette.red30,
+  //textDangerLight should be deprecated
+  $textDangerLight: colorsPalette.red10,
   // ICON
   $iconDefault: colorsPalette.grey10,
   $iconNeutral: colorsPalette.grey20,
@@ -54,7 +56,8 @@ export default {
   $iconSuccessLight: colorsPalette.green30,
   $iconMajor: colorsPalette.orange10,
   $iconDanger: colorsPalette.red10,
-  $iconDangerLight: colorsPalette.red30,
+  //iconDangerLight should be deprecated
+  $iconDangerLight: colorsPalette.red10,
   $iconDisabled: colorsPalette.grey50,
   // OUTLINE
   $outlineDefault: colorsPalette.grey60,
@@ -66,7 +69,7 @@ export default {
   $outlinePrimaryMedium: colorsPalette.blue70,
   $outlineGeneral: colorsPalette.blue30,
   $outlineWarning: colorsPalette.yellow30,
-  $outlineDanger: colorsPalette.red30,
+  $outlineDanger: colorsPalette.red10,
   $outlineInverted: colorsPalette.white,
   // BLACK AND WHITE
   $black: colorsPalette.black,

package/src/utils/styleUtils.d.ts

@@ -3,4 +3,5 @@ interface UnpackStyleOptions {
     flatten?: boolean;
 }
 export declare function unpackStyle(style?: StyleProp<ViewStyle>, options?: UnpackStyleOptions): any;
+export declare function getAccessibleHitSlop(size: number): number;
 export {};

package/src/utils/styleUtils.js

@@ -3,4 +3,7 @@ export function unpackStyle(style, options = {}) {
   if (style) {
     return JSON.parse(JSON.stringify(options.flatten ? StyleSheet.flatten(style) : style));
   }
+}
+export function getAccessibleHitSlop(size) {
+  return Math.max(0, (48 - size) / 2);
 }