react-native-ui-lib 7.46.3 → 8.0.0

package/src/components/picker/helpers/usePickerSelection.js

@@ -1,15 +1,12 @@
 import _xor from "lodash/xor";
-import _xorBy from "lodash/xorBy";
 import { useCallback, useState, useEffect, useMemo } from 'react';
 import { PickerModes } from "../types";
 const usePickerSelection = props => {
   const {
-    migrate,
     value,
     onChange,
     topBarProps,
     pickerExpandableRef,
-    getItemValue,
     setSearchValue,
     mode,
     items
@@ -29,15 +26,10 @@ const usePickerSelection = props => {
     onChange?.(item);
   }, [onChange]);
   const toggleItemSelection = useCallback(item => {
-    let newValue;
     const itemAsArray = [item];
-    if (!migrate) {
-      newValue = _xorBy(multiDraftValue, itemAsArray, getItemValue || 'value');
-    } else {
-      newValue = _xor(multiDraftValue, itemAsArray);
-    }
+    const newValue = _xor(multiDraftValue, itemAsArray);
     setMultiDraftValue(newValue);
-  }, [multiDraftValue, getItemValue]);
+  }, [multiDraftValue]);
   const cancelSelect = useCallback(() => {
     setSearchValue('');
     setMultiDraftValue(multiFinalValue);

package/src/components/picker/index.js

@@ -1,5 +1,4 @@
-import _map from "lodash/map";
-import _isArray from "lodash/isArray"; // TODO: deprecate all places where we check if _.isPlainObject
+import _map from "lodash/map"; // TODO: deprecate all places where we check if _.isPlainObject
 // TODO: Add initialValue prop
 // TODO: consider deprecating renderCustomModal prop
 import React, { useMemo, useState, useRef, useCallback, useEffect } from 'react';
@@ -45,13 +44,9 @@ const Picker = React.forwardRef((props, ref) => {
     listProps,
     value,
     getLabel,
-    getItemLabel,
-    getItemValue,
     renderItem,
     children,
     useSafeArea,
-    // TODO: Remove migrate props and migrate code
-    migrate = true,
     accessibilityLabel,
     accessibilityHint,
     items: propItems,
@@ -78,10 +73,6 @@ const Picker = React.forwardRef((props, ref) => {
   const [items, setItems] = useState(propItems || extractPickerItems(themeProps));
   const pickerExpandable = useRef(null);
   const pickerRef = useImperativePickerHandle(ref, pickerExpandable);
-
-  // TODO: Remove this when migration is completed, starting of v8
-  // usePickerMigrationWarnings({children, migrate, getItemLabel, getItemValue});
-
   useEffect(() => {
     if (propItems) {
       setItems(propItems);
@@ -94,7 +85,6 @@ const Picker = React.forwardRef((props, ref) => {
   } = usePickerSearch({
     showSearch,
     onSearchChange,
-    getItemLabel,
     children,
     items
   });
@@ -107,11 +97,9 @@ const Picker = React.forwardRef((props, ref) => {
     selectedCount,
     toggleAllItemsSelection
   } = usePickerSelection({
-    migrate,
     value,
     onChange,
     pickerExpandableRef: pickerExpandable,
-    getItemValue,
     topBarProps,
     setSearchValue,
     mode,
@@ -132,7 +120,6 @@ const Picker = React.forwardRef((props, ref) => {
   } = usePickerLabel({
     value,
     items,
-    getItemLabel,
     getLabel,
     accessibilityLabel,
     accessibilityHint,
@@ -157,15 +144,10 @@ const Picker = React.forwardRef((props, ref) => {
     setSelectedItemPosition(y);
   }, []);
   const contextValue = useMemo(() => {
-    // @ts-expect-error cleanup after removing migrate prop
-    const pickerValue = !migrate && typeof value === 'object' && !_isArray(value) ? value?.value : value;
     return {
-      migrate,
-      value: mode === PickerModes.MULTI ? multiDraftValue : pickerValue,
+      value: mode === PickerModes.MULTI ? multiDraftValue : value,
       onPress: mode === PickerModes.MULTI ? toggleItemSelection : onDoneSelecting,
       isMultiMode: mode === PickerModes.MULTI,
-      getItemValue,
-      getItemLabel,
       onSelectedLayout: onSelectedItemLayout,
       renderItem,
       selectionLimit,
@@ -173,7 +155,7 @@ const Picker = React.forwardRef((props, ref) => {
       selectedCount,
       toggleAllItemsSelection
     };
-  }, [migrate, mode, value, multiDraftValue, renderItem, getItemValue, getItemLabel, selectionLimit, onSelectedItemLayout, toggleItemSelection, onDoneSelecting, areAllItemsSelected, selectedCount, toggleAllItemsSelection]);
+  }, [mode, value, multiDraftValue, renderItem, selectionLimit, onSelectedItemLayout, toggleItemSelection, onDoneSelecting, areAllItemsSelected, selectedCount, toggleAllItemsSelection]);
   const renderPickerItem = useCallback((item, index) => {
     return <PickerItem key={`${index}-${item.value}`} {...item} />;
   }, []);
@@ -223,7 +205,7 @@ const Picker = React.forwardRef((props, ref) => {
       </PickerItemsList>;
   }, [testID, mode, useDialog, selectedItemPosition, topBarProps, cancelSelect, onDoneSelecting, multiDraftValue, showSearch, searchStyle, searchPlaceholder, _onSearchChange, renderCustomSearch, renderHeader, listProps, accessibleFilteredItems, useSafeArea, useWheelPicker, items, showLoader]);
   return <PickerContext.Provider value={contextValue}>
-      {<ExpandableOverlay ref={pickerExpandable} useDialog={useDialog || useWheelPicker} dialogProps={DEFAULT_DIALOG_PROPS} migrateDialog expandableContent={expandableModalContent} renderCustomOverlay={renderOverlay ? _renderOverlay : undefined} onPress={onPress} testID={testID} {...customPickerProps} disabled={themeProps.editable === false}>
+      {<ExpandableOverlay ref={pickerExpandable} useDialog={useDialog || useWheelPicker} dialogProps={DEFAULT_DIALOG_PROPS} expandableContent={expandableModalContent} renderCustomOverlay={renderOverlay ? _renderOverlay : undefined} onPress={onPress} testID={testID} {...customPickerProps} disabled={themeProps.editable === false}>
           {renderTextField()}
         </ExpandableOverlay>}
     </PickerContext.Provider>;

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

@@ -36,21 +36,6 @@ export interface PickerSearchStyle {
     selectionColor?: string;
 }
 type PickerPropsDeprecation = {
-    /**
-     * @deprecated
-     * Temporary prop required for migration to Picker's new API
-     */
-    migrate?: boolean;
-    /**
-     * @deprecated
-     * A function that extract the unique value out of the value prop in case value has a custom structure (e.g. {myValue, myLabel})
-     */
-    getItemValue?: (value: PickerValue) => any;
-    /**
-     * @deprecated
-     * A function that extract the label out of the value prop in case value has a custom structure (e.g. {myValue, myLabel})
-     */
-    getItemLabel?: (value: PickerValue) => string;
     /**
      * @deprecated
      * Callback for modal onShow event
@@ -290,14 +275,6 @@ export interface PickerItemProps extends Pick<TouchableOpacityProps, 'customValu
      * Item's label style
      */
     labelStyle?: StyleProp<TextStyle>;
-    /**
-     * Custom function for the item label (e.g (value) => customLabel)
-     */
-    getItemLabel?: (value: PickerValue) => string;
-    /**
-     * @deprecated Function to return the value out of the item value prop when value is custom shaped.
-     */
-    getItemValue?: PickerProps['getItemValue'];
     /**
      * Render custom item
      */
@@ -325,7 +302,7 @@ export interface PickerItemProps extends Pick<TouchableOpacityProps, 'customValu
      */
     testID?: string;
 }
-export interface PickerContextProps extends Pick<PickerProps, 'migrate' | 'value' | 'getItemValue' | 'getItemLabel' | 'renderItem' | 'selectionLimit'> {
+export interface PickerContextProps extends Pick<PickerProps, 'value' | 'renderItem' | 'selectionLimit'> {
     onPress: (value: PickerSingleValue) => void;
     isMultiMode: boolean;
     onSelectedLayout: (event: any) => any;

package/src/components/segmentedControl/index.js

@@ -20,7 +20,7 @@ export let SegmentedControlPreset = /*#__PURE__*/function (SegmentedControlPrese
   return SegmentedControlPreset;
 }({});
 export { SegmentedControlItemProps };
-const nonAreUndefined = array => {
+const noneAreUndefined = array => {
   'worklet';
 
   for (const item of array) {
@@ -99,7 +99,7 @@ const SegmentedControl = props => {
       x,
       width
     };
-    if (segmentsDimensions.current.length === segments.length && nonAreUndefined(segmentsDimensions.current)) {
+    if (segmentsDimensions.current.length === segments.length && noneAreUndefined(segmentsDimensions.current)) {
       segmentsStyle.value = [...segmentsDimensions.current];
       // shouldResetOnDimensionsOnNextLayout.current = true;// in case onLayout will be called again (orientation change etc.)
     }
@@ -122,7 +122,7 @@ const SegmentedControl = props => {
     const {
       value: height
     } = containerHeight;
-    if (height !== 0 && value.length === segments.length && nonAreUndefined(value)) {
+    if (height !== 0 && value.length === segments.length && noneAreUndefined(value)) {
       const isFirstElementSelected = animatedSelectedIndex.value === 0;
       const isLastElementSelected = animatedSelectedIndex.value === value.length - 1;
       const isMiddleSelected = !isFirstElementSelected && !isLastElementSelected;

package/src/components/slider/GradientSlider.d.ts

@@ -6,7 +6,7 @@ import { GradientSliderProps, GradientSliderTypes } from './types';
 type Props<T> = GradientSliderProps<T> & ForwardRefInjectedProps;
 declare const _default: React.ForwardRefExoticComponent<Omit<import("./types").SliderProps, "onValueChange"> & {
     color?: string | import("tinycolor2").ColorFormats.HSLA | undefined;
-    type?: "default" | "hue" | "lightness" | "saturation" | GradientSliderTypes | undefined;
+    type?: "default" | "hue" | "saturation" | "lightness" | GradientSliderTypes | undefined;
     gradientSteps?: number | undefined;
     onValueChange?: ((value: string, alfa: number) => void) | undefined;
     accessible?: boolean | undefined;

package/src/components/slider/index.js

@@ -117,7 +117,7 @@ class Slider extends PureComponent {
       maximumValue,
       value
     } = props;
-    if (minimumValue >= maximumValue) {
+    if (minimumValue > maximumValue) {
       console.warn('Slider minimumValue must be lower than maximumValue');
     }
     if (!useRange && (value < minimumValue || value > maximumValue)) {

package/src/components/sortableGridList/SortableItem.js

@@ -23,6 +23,8 @@ function SortableItem(props) {
   const currIndex = useSharedValue(initialIndex.value);
   const translateX = useSharedValue(0);
   const translateY = useSharedValue(0);
+  const zIndex = useSharedValue(0);
+  const scale = useSharedValue(1);
   const isDragging = useSharedValue(false);
   const tempItemsOrder = useSharedValue(itemsOrder.value);
   const tempTranslateX = useSharedValue(0);
@@ -85,6 +87,15 @@ function SortableItem(props) {
       translateY.value = withTiming(translation.y, animationConfig);
     }
   }, []);
+  useAnimatedReaction(() => isDragging.value, (isDragging, wasDragging) => {
+    if (isDragging && !wasDragging) {
+      zIndex.value = withTiming(100, animationConfig);
+      scale.value = withSpring(1.1);
+    } else if (!isDragging && wasDragging) {
+      zIndex.value = withTiming(0, animationConfig);
+      scale.value = withSpring(1);
+    }
+  }, []);
   const onLayout = useCallback(event => {
     'worklet';
 
@@ -148,16 +159,14 @@ function SortableItem(props) {
     }
   });
   const animatedStyle = useAnimatedStyle(() => {
-    const scale = withSpring(isDragging.value ? 1.1 : 1);
-    const zIndex = isDragging.value ? 100 : withTiming(0, animationConfig);
     return {
-      zIndex,
+      zIndex: Math.round(zIndex.value),
       transform: [{
         translateX: translateX.value
       }, {
         translateY: translateY.value
       }, {
-        scale
+        scale: scale.value
       }]
     };
   });

package/src/components/sortableList/SortableListItem.js

@@ -51,6 +51,8 @@ const SortableListItem = props => {
   });
   const currIndex = useSharedValue(initialIndex.value);
   const translation = useSharedValue(0);
+  const zIndex = useSharedValue(0);
+  const scale = useSharedValue(1);
   const isDragging = useSharedValue(false);
   const draggedItemShadow = useSharedValue(StyleUtils.unpackStyle({
     ...Shadows.sh30.bottom,
@@ -78,6 +80,15 @@ const SortableListItem = props => {
       translation.value = withTiming(_translation, animationConfig);
     }
   }, []);
+  useAnimatedReaction(() => isDragging.value, (isDragging, wasDragging) => {
+    if (isDragging && !wasDragging) {
+      zIndex.value = withTiming(100, animationConfig);
+      scale.value = withSpring(propsScale);
+    } else if (!isDragging && wasDragging) {
+      zIndex.value = withTiming(0, animationConfig);
+      scale.value = withSpring(1);
+    }
+  }, []);
   const dragOnLongPressGesture = Gesture.Pan().activateAfterLongPress(250).enabled(!locked).onStart(() => {
     isDragging.value = true;
     translation.value = getTranslationByIndexChange(currIndex.value, initialIndex.value, itemSize.value);
@@ -143,20 +154,18 @@ const SortableListItem = props => {
     }
   });
   const draggedAnimatedStyle = useAnimatedStyle(() => {
-    const scale = withSpring(isDragging.value ? propsScale : 1);
-    const zIndex = isDragging.value ? 100 : withTiming(0, animationConfig);
     const opacity = isDragging.value ? 0.95 : 1;
     const shadow = isDragging.value ? draggedItemShadow.value : defaultItemShadow.value;
     return {
       backgroundColor: itemProps?.backgroundColor ?? LIST_ITEM_BACKGROUND,
       // required for elevation to work in Android
-      zIndex,
+      zIndex: Math.round(zIndex.value),
       transform: [horizontal ? {
         translateX: translation.value
       } : {
         translateY: translation.value
       }, {
-        scale
+        scale: scale.value
       }],
       opacity,
       ...itemProps?.margins,

package/src/components/stackAggregator/index.js

@@ -27,6 +27,7 @@ const StackAggregator = props => {
     onItemPress,
     contentContainerStyle,
     itemBorderRadius = 0,
+    backgroundColor,
     onCollapseWillChange,
     onCollapseChanged
   } = props;
@@ -36,11 +37,11 @@ const StackAggregator = props => {
   useEffect(() => {
     setIsCollapsed(collapsed);
   }, [collapsed]);
-  useDidUpdate(() => {
+  useDidUpdate(async () => {
     onCollapseWillChange?.(isCollapsed);
-    animate();
+    await animate();
     onCollapseChanged?.(isCollapsed);
-  }, [isCollapsed, onCollapseWillChange, onCollapseChanged]);
+  }, [isCollapsed, itemsCount]);
 
   /** Animations */
 
@@ -52,10 +53,10 @@ const StackAggregator = props => {
   const easeOut = Easing.bezier(0, 0, 0.58, 1);
   const getItemScale = useCallback(index => {
     if (isCollapsed) {
-      if (index === itemsCount - 2) {
+      if (index === 1) {
         return 0.95;
       }
-      if (index === itemsCount - 1) {
+      if (index === 2) {
         return 0.9;
       }
     }
@@ -123,10 +124,10 @@ const StackAggregator = props => {
 
   const getTop = index => {
     let start = 0;
-    if (index === itemsCount - 2) {
+    if (index === 1) {
       start += PEEP;
     }
-    if (index === itemsCount - 1) {
+    if (index === 2) {
       start += PEEP * 2;
     }
     return start;
@@ -149,6 +150,11 @@ const StackAggregator = props => {
       zIndex: itemsCount
     }];
   }, [firstItemHeight, itemsCount]);
+  const cardStyle = useMemo(() => {
+    return backgroundColor ? [styles.card, {
+      backgroundColor
+    }] : styles.card;
+  }, [backgroundColor]);
 
   /** Events */
 
@@ -167,7 +173,7 @@ const StackAggregator = props => {
   /** Renders */
 
   const renderItem = (item, index) => {
-    return <Animated.View onLayout={index === 0 ? onLayout : undefined} style={[Constants.isIOS && styles.containerShadow, contentContainerStyle,
+    return <Animated.View onLayout={index === 0 ? onLayout : undefined} style={[Constants.isIOS && (index === 0 || index === 1 || index === 2 || !isCollapsed) && styles.containerShadow, contentContainerStyle,
     //@ts-expect-error 'position' doesn't match AnimatedInterpolation type
     getItemStyle(index), {
       borderRadius: Constants.isIOS ? itemBorderRadius : undefined,
@@ -179,7 +185,7 @@ const StackAggregator = props => {
       width: Constants.windowWidth - 40,
       height: isCollapsed ? firstItemHeight : undefined
     }]} collapsable={false}>
-        <Card style={styles.card} onPress={() => _onItemPress(index)} borderRadius={itemBorderRadius} elevation={5}>
+        <Card style={cardStyle} onPress={() => _onItemPress(index)} borderRadius={itemBorderRadius} elevation={5}>
           <Animated.View style={index !== 0 ? {
           opacity: animatedContentOpacity
         } : undefined} collapsable={false}>
@@ -231,8 +237,7 @@ const styles = StyleSheet.create({
   },
   card: {
     overflow: 'hidden',
-    flexShrink: 1,
-    backgroundColor: 'transparent'
+    flexShrink: 1
   },
   button: {
     zIndex: 100

package/src/components/tabController/TabPage.js

@@ -23,6 +23,9 @@ export default function TabPage({
     containerWidth
   } = useContext(TabBarContext);
   const [shouldLoad, setLoaded] = useState(!lazy);
+
+  // TODO: RN 77 hack - remove the state in future RN\reanimated release (ticket 4838 \ https://github.com/software-mansion/react-native-reanimated/issues/8517) when fixed we should revert to the original logic (see this PR: https://github.com/wix/react-native-ui-lib/pull/3829)
+  const [isActive, setIsActive] = useState(currentPage.value === index);
   // const [focused, setFocused] = useState(false);
 
   const lazyLoad = useCallback(() => {
@@ -36,6 +39,7 @@ export default function TabPage({
     return currentPage.value;
   }, (currentPage /* , previousPage */) => {
     const isActive = currentPage === index;
+    runOnJS(setIsActive)(isActive);
     // const wasActive = previousPage === index;
     // const nearActive = asCarousel && (currentPage - 1 === index || currentPage + 1 === index);
     // const wasNearActive =
@@ -52,23 +56,25 @@ export default function TabPage({
     // }
   }, [currentPage, lazyLoad]);
   const animatedPageStyle = useAnimatedStyle(() => {
+    if (!nestedInScrollView) {
+      return {};
+    }
     const isActive = Math.round(currentPage.value) === index;
-
-    // TODO: Fix to proper animated style once Reanimated export AnimatedStyleProp
-    const style = {
-      opacity: isActive || asCarousel ? 1 : 0,
-      zIndex: isActive || asCarousel ? 1 : 0
+    return {
+      position: isActive ? 'relative' : 'absolute'
     };
-    if (nestedInScrollView) {
-      style.position = isActive ? 'relative' : 'absolute';
-    }
-    return style;
   });
   const _style = useMemo(() => {
     return [!asCarousel && styles.page, animatedPageStyle, {
       width: asCarousel ? containerWidth : undefined
-    }, style];
-  }, [asCarousel, animatedPageStyle, containerWidth, style]);
+    }, style, !isActive && !asCarousel ? {
+      opacity: 0,
+      zIndex: 0
+    } : {
+      opacity: 1,
+      zIndex: 1
+    }];
+  }, [asCarousel, animatedPageStyle, containerWidth, style, isActive]);
   return <Reanimated.View style={_style} testID={testID}>
       {!shouldLoad && renderLoading?.()}
       {shouldLoad && props.children}
@@ -76,7 +82,5 @@ export default function TabPage({
     </Reanimated.View>;
 }
 const styles = StyleSheet.create({
-  page: {
-    ...StyleSheet.absoluteFillObject
-  }
+  page: StyleSheet.absoluteFillObject
 });

package/src/components/text/Text.driver.new.d.ts

@@ -1,6 +1,6 @@
 import { TextStyle } from 'react-native';
-import { ComponentProps } from '../../testkit/new/Component.driver';
-export declare const TextDriver: (props: ComponentProps) => {
+import { ComponentProps, ComponentDriverOptions } from '../../testkit/new/Component.driver';
+export declare const TextDriver: (props: ComponentProps, options?: ComponentDriverOptions) => {
     getText: () => string | (string | import("react-test-renderer").ReactTestInstance)[];
     getStyle: () => TextStyle;
     press: () => void;

package/src/components/text/Text.driver.new.js

@@ -1,8 +1,8 @@
 import { StyleSheet } from 'react-native';
 import { useComponentDriver } from "../../testkit/new/Component.driver";
 import { usePressableDriver } from "../../testkit/new/usePressable.driver";
-export const TextDriver = props => {
-  const driver = usePressableDriver(useComponentDriver(props));
+export const TextDriver = (props, options) => {
+  const driver = usePressableDriver(useComponentDriver(props, options));
   const getText = () => {
     const textChildren = driver.getElement().children;
     if (textChildren.length === 0) {

package/src/components/text/index.js

@@ -98,10 +98,9 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent',
     color: Colors.$textDefault,
     ...(Constants.isIOS ? {
+      textAlign: 'left',
       writingDirection: Constants.isRTL ? writingDirectionTypes.RTL : writingDirectionTypes.LTR
-    } : {
-      textAlign: 'left'
-    })
+    } : undefined)
   },
   centered: {
     textAlign: 'center'

package/src/components/textField/Input.js

@@ -81,7 +81,6 @@ const styles = StyleSheet.create({
     })
   },
   webStyle: {
-    // @ts-expect-error
     outlineWidth: 0
   }
 });

package/src/components/textField/TextField.driver.new.d.ts

@@ -1,5 +1,5 @@
-import { ComponentProps } from '../../testkit/new/Component.driver';
-export declare const TextFieldDriver: (props: ComponentProps) => {
+import { ComponentProps, ComponentDriverOptions } from '../../testkit/new/Component.driver';
+export declare const TextFieldDriver: (props: ComponentProps, options?: ComponentDriverOptions) => {
     getValue: () => string | undefined;
     changeText: (text: string) => void;
     focus: () => void;

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

@@ -7,8 +7,8 @@ import { TextDriver } from "../text/Text.driver.new";
 import { ImageDriver } from "../image/Image.driver.new";
 import { ButtonDriver } from "../button/Button.driver.new";
 import { ViewDriver } from "../view/View.driver.new";
-export const TextFieldDriver = props => {
-  const driver = usePressableDriver(useComponentDriver(props));
+export const TextFieldDriver = (props, options) => {
+  const driver = usePressableDriver(useComponentDriver(props, options));
   const floatingPlaceholderDriver = TextDriver({
     renderTree: props.renderTree,
     testID: `${props.testID}.floatingPlaceholder`