react-native-ui-lib 7.36.0 → 7.37.0-snapshot.6102

package/src/components/hint/types.d.ts

@@ -0,0 +1,106 @@
+import type { ReactElement } from 'react';
+import type { GestureResponderEvent, ImageSourcePropType, ImageStyle, LayoutRectangle, StyleProp, TextStyle, ViewStyle } from 'react-native';
+export type PositionStyle = Pick<ViewStyle, 'top' | 'bottom' | 'left' | 'right'>;
+export type LayoutStyle = PositionStyle & Pick<ViewStyle, 'alignItems'>;
+export type PaddingsStyle = Pick<ViewStyle, 'paddingLeft' | 'paddingRight' | 'paddingVertical' | 'paddingHorizontal'>;
+export type ContentType = string | ReactElement;
+export declare enum TargetAlignments {
+    LEFT = "left",
+    RIGHT = "right",
+    CENTER = "center"
+}
+export declare enum HintPositions {
+    TOP = "top",
+    BOTTOM = "bottom"
+}
+export interface HintProps {
+    /**
+     * Control the visibility of the hint
+     */
+    visible?: boolean;
+    /**
+     * The hint background color
+     */
+    color?: string;
+    /**
+     * The hint message
+     */
+    message?: ContentType | ContentType[];
+    /**
+     * The hint message custom style
+     */
+    messageStyle?: StyleProp<TextStyle>;
+    /**
+     * Icon to show next to the hint's message
+     */
+    icon?: ImageSourcePropType;
+    /**
+     * The icon's style
+     */
+    iconStyle?: StyleProp<ImageStyle>;
+    /**
+     * The hint's position
+     */
+    position?: HintPositions;
+    /**
+     * Provide custom target position instead of wrapping a child
+     */
+    targetFrame?: LayoutRectangle;
+    /**
+     * Open the hint using a Modal component
+     */
+    useModal?: boolean;
+    /**
+     * Show side tips instead of the middle tip
+     */
+    useSideTip?: boolean;
+    /**
+     * The hint's border radius
+     */
+    borderRadius?: number;
+    /**
+     * Hint margins from screen edges
+     */
+    edgeMargins?: number;
+    /**
+     * Hint offset from target
+     */
+    offset?: number;
+    /**
+     * Callback for Hint press
+     */
+    onPress?: () => void;
+    /**
+     * Callback for the background press
+     */
+    onBackgroundPress?: (event: GestureResponderEvent) => void;
+    /**
+     * Color for background overlay (require onBackgroundPress)
+     */
+    backdropColor?: string;
+    /**
+     * The hint container width
+     */
+    containerWidth?: number;
+    /**
+     * Custom content element to render inside the hint container
+     */
+    customContent?: JSX.Element;
+    /**
+     * Remove all hint's paddings
+     */
+    removePaddings?: boolean;
+    /**
+     * Enable shadow (for hint with white background only)
+     */
+    enableShadow?: boolean;
+    /**
+     * The hint's test identifier
+     */
+    testID?: string;
+    /**
+     * Additional styling
+     */
+    style?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+}

package/src/components/hint/types.js

@@ -0,0 +1,11 @@
+export let TargetAlignments = /*#__PURE__*/function (TargetAlignments) {
+  TargetAlignments["LEFT"] = "left";
+  TargetAlignments["RIGHT"] = "right";
+  TargetAlignments["CENTER"] = "center";
+  return TargetAlignments;
+}({});
+export let HintPositions = /*#__PURE__*/function (HintPositions) {
+  HintPositions["TOP"] = "top";
+  HintPositions["BOTTOM"] = "bottom";
+  return HintPositions;
+}({});

package/src/components/picker/PickerItemsList.js

@@ -1,7 +1,7 @@
 import _times from "lodash/times";
 import _throttle from "lodash/throttle";
 import _isFunction from "lodash/isFunction";
-import React, { useCallback, useContext, useState } from 'react';
+import React, { useCallback, useContext, useMemo, useState } from 'react';
 import { StyleSheet, FlatList, TextInput, ActivityIndicator } from 'react-native';
 import { Typography, Colors } from "../../style";
 import Assets from "../../assets";
@@ -66,13 +66,19 @@ const PickerItemsList = props => {
   }) => {
     return <PickerItem {...item} />;
   }, []);
+  const _listProps = useMemo(() => {
+    return {
+      ...listProps,
+      style: [styles.list, listProps?.style]
+    };
+  }, [listProps]);
   const renderList = () => {
     if (items) {
-      return <FlatList testID={`${testID}.list`} data={items} renderItem={renderPropItems} keyExtractor={keyExtractor} {...listProps} />;
+      return <FlatList testID={`${testID}.list`} data={items} renderItem={renderPropItems} keyExtractor={keyExtractor} {..._listProps} />;
     }
     return <FlatList data={_times(React.Children.count(children))}
     // @ts-expect-error
-    renderItem={renderItem} keyExtractor={keyExtractor} testID={`${testID}.list`} {...listProps} />;
+    renderItem={renderItem} keyExtractor={keyExtractor} testID={`${testID}.list`} {..._listProps} />;
   };
   const renderCancel = () => {
     const {
@@ -158,6 +164,9 @@ const styles = StyleSheet.create({
     paddingRight: 16,
     flex: 1,
     ...Typography.text70
+  },
+  list: {
+    height: '100%'
   }
 });
 export default PickerItemsList;

package/src/components/view/View.driver.new.js

@@ -1,8 +1,9 @@
+import { StyleSheet } from 'react-native';
 import { useComponentDriver } from "../../testkit/new/Component.driver";
 export const ViewDriver = props => {
   const driver = useComponentDriver(props);
   const getStyle = () => {
-    return driver.getElement().props.style;
+    return StyleSheet.flatten(driver.getElement().props.style);
   };
   return {
     ...driver,

package/src/incubator/expandableOverlay/index.d.ts

@@ -6,6 +6,7 @@ export interface ExpandableOverlayMethods {
     openExpandable: () => void;
     closeExpandable: () => void;
     toggleExpandable: () => void;
+    focusAccessibility: () => void;
 }
 export interface RenderCustomOverlayProps extends ExpandableOverlayMethods {
     visible: boolean;

package/src/incubator/expandableOverlay/index.js

@@ -1,10 +1,11 @@
-import React, { useCallback, useState, forwardRef, useImperativeHandle } from 'react';
+import React, { useCallback, useState, forwardRef, useImperativeHandle, useRef } from 'react';
 import TouchableOpacity from "../../components/touchableOpacity";
 import View from "../../components/view";
 import Modal from "../../components/modal";
 import DialogOld from "../../components/dialog";
 import DialogNew from "../dialog";
 import { Colors } from "../../style";
+import { AccessibilityInfo, findNodeHandle } from 'react-native';
 const ExpandableOverlay = (props, ref) => {
   const {
     children,
@@ -23,19 +24,29 @@ const ExpandableOverlay = (props, ref) => {
     ...others
   } = props;
   const [visible, setExpandableVisible] = useState(false);
+  const containerRef = useRef(null);
+  const focusAccessibility = useCallback(() => {
+    const reactTag = findNodeHandle(containerRef.current);
+    console.log(`Nitzan - focs reac`, reactTag);
+    if (reactTag) {
+      AccessibilityInfo.setAccessibilityFocus(reactTag);
+    }
+  }, [containerRef]);
   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,
     closeExpandable,
-    toggleExpandable
+    toggleExpandable,
+    focusAccessibility
   }));
   const renderModal = () => {
     return <Modal testID={`${testID}.overlay`} overlayBackgroundColor={Colors.$backgroundDefault} {...modalProps} visible={visible} onDismiss={closeExpandable} onRequestClose={closeExpandable} onBackgroundPress={closeExpandable}>
@@ -55,13 +66,14 @@ const ExpandableOverlay = (props, ref) => {
         visible,
         openExpandable,
         closeExpandable,
-        toggleExpandable
+        toggleExpandable,
+        focusAccessibility
       });
     } else {
       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>;