react-native-ui-lib 8.3.4-snapshot.7813 → 8.3.4-snapshot.7824

package/src/components/screenFooter/screenFooter.api.json

@@ -81,6 +81,11 @@
       "type": "boolean",
       "description": "If true, hides the top divider for solid background. Only applies when backgroundType is 'solid'",
       "default": "false"
+    },
+    {
+      "name": "contentContainerStyle",
+      "type": "StyleProp<ViewStyle>",
+      "description": "Custom style for the content container that wraps the footer's children. Can be used to override default padding, gap, or other layout properties."
     }
   ],
   "snippet": [
@@ -118,11 +123,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Layout Type",
-              "Use Case",
-              "Example"
-            ],
+            "columns": ["Layout Type", "Use Case", "Example"],
             "items": [
               {
                 "title": "Horizontal - Spread",
@@ -157,11 +158,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Layout Type",
-              "Use Case",
-              "Example"
-            ],
+            "columns": ["Layout Type", "Use Case", "Example"],
             "items": [
               {
                 "title": "Vertical - Fit",
@@ -187,11 +184,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Background Type",
-              "Visual",
-              "When to Use"
-            ],
+            "columns": ["Background Type", "Visual", "When to Use"],
             "items": [
               {
                 "title": "Solid",
@@ -226,11 +219,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Behavior",
-              "Description",
-              "Example"
-            ],
+            "columns": ["Behavior", "Description", "Example"],
             "items": [
               {
                 "title": "Sticky",
@@ -259,4 +248,3 @@
     ]
   }
 }
-

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

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { DimensionValue } from 'react-native';
+import { DimensionValue, StyleProp, ViewStyle } from 'react-native';
 export declare enum ScreenFooterLayouts {
     HORIZONTAL = "horizontal",
     VERTICAL = "vertical"
@@ -97,4 +97,9 @@ export interface ScreenFooterProps extends PropsWithChildren<{}> {
      * Only applies when backgroundType is 'solid'
      */
     hideDivider?: boolean;
+    /**
+     * Custom style for the content container that wraps the footer's children.
+     * Can be used to override default padding, gap, or other layout properties.
+     */
+    contentContainerStyle?: StyleProp<ViewStyle>;
 }

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

@@ -1,19 +1,12 @@
 import React, { Component } from 'react';
-import { Animated, FlatListProps, ScrollViewProps, ImageSourcePropType, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent } from 'react-native';
+import { Animated, FlatListProps, ImageSourcePropType, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent } from 'react-native';
 import { ForwardRefInjectedProps } from '../../commons/new';
 import { ComponentStatics } from '../../typings/common';
-export type ListProps = (FlatListProps<any> & {
+export interface ScrollBarProps extends FlatListProps<any> {
     /**
      * Whether to use a FlatList. NOTE: you must pass 'data' and 'renderItem' props as well
      */
-    useList: true;
-}) | (ScrollViewProps & {
-    /**
-     * Whether to use a ScrollView. NOTE: you must pass 'contentContainerStyle' prop as well
-     */
-    useList?: false;
-});
-export type ScrollBarProps = ListProps & {
+    useList?: boolean;
     /**
      * The element to use as a container, instead of a View
      */
@@ -51,7 +44,7 @@ export type ScrollBarProps = ListProps & {
      * The index to currently focus on
      */
     focusIndex?: number;
-};
+}
 type Props = ScrollBarProps & ForwardRefInjectedProps;
 type State = {
     gradientOpacity: Animated.Value;

package/src/components/searchInput/index.js

@@ -32,7 +32,7 @@ const SearchInput = forwardRef((props, ref) => {
     style,
     inaccessible
   } = props;
-  const currentAnimatedValue = useRef(undefined);
+  const currentAnimatedValue = useRef();
   const searchInputRef = useRef(null);
   const [hasValue, setHasValue] = useState(Boolean(controlledValue));
   const [value, setValue] = useState(controlledValue);

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

@@ -26,7 +26,7 @@ export type SearchInputProps = TextInputProps & {
     /**
      * Custom right element
      */
-    customRightElement?: React.ReactElement<any>;
+    customRightElement?: React.ReactElement;
     /**
      * Whether to show a loader instead of the left search icon
      */
@@ -38,7 +38,7 @@ export type SearchInputProps = TextInputProps & {
     /**
      * custom loader element
      */
-    customLoader?: React.ReactElement<any>;
+    customLoader?: React.ReactElement;
     /**
      * converts the colors of the search's input elements, icons and button to white
      */

package/src/components/sectionsWheelPicker/SectionsWheelPicker.driver.d.ts

@@ -7,11 +7,11 @@ export declare const SectionsWheelPickerDriver: (props: ComponentProps) => {
         moveToItem: (index: number, itemHeight?: number, numberOfRows?: number) => void;
         getLabel: () => string | (string | ReactTestInstance)[];
         scroll: (contentOffset: Partial<import("react-native/types").NativeScrollPoint>, options?: {
+            contentInset: import("react-native/types").NativeScrollRectangle;
+            zoomScale: number;
             layoutMeasurement: import("react-native/types").NativeScrollSize;
             contentSize: import("react-native/types").NativeScrollSize;
             velocity?: import("react-native/types").NativeScrollVelocity | undefined;
-            contentInset: import("react-native/types").NativeScrollRectangle;
-            zoomScale: number;
             targetContentOffset?: import("react-native/types").NativeScrollPoint | undefined;
         } | undefined) => void;
         triggerEvent: (eventName?: string | undefined, event?: Partial<import("react-native/types").NativeScrollEvent> | undefined) => void;

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

@@ -35,7 +35,7 @@ export interface SkeletonListProps {
     /**
      * Extra content to be rendered on the end of the list item
      */
-    renderEndContent?: () => React.ReactElement<any> | undefined;
+    renderEndContent?: () => React.ReactElement | undefined;
 }
 export interface SkeletonViewProps extends AccessibilityProps, AlignmentModifiers, PaddingModifiers, MarginModifiers {
     /**
@@ -155,9 +155,9 @@ declare class SkeletonView extends Component<SkeletonViewProps, SkeletonState> {
     renderTextContentTemplate: () => React.JSX.Element;
     renderTemplate: () => React.JSX.Element;
     renderAdvanced: () => React.JSX.Element;
-    renderWithFading: (skeleton: any) => string | number | bigint | boolean | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
-    renderSkeleton(): string | number | bigint | boolean | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+    renderWithFading: (skeleton: any) => string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
+    renderSkeleton(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
     renderNothing: () => null;
-    render(): string | number | bigint | boolean | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+    render(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
 }
 export default SkeletonView;

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

@@ -26,7 +26,7 @@ export interface ThumbProps extends ViewProps {
      */
     disabled?: boolean;
     /** ref to thumb component */
-    ref?: React.RefObject<RNView | null>;
+    ref?: React.RefObject<RNView>;
 }
 declare const Thumb: React.ForwardRefExoticComponent<Omit<ThumbProps, "ref"> & React.RefAttributes<unknown>>;
 export default Thumb;

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

@@ -44,7 +44,7 @@ export type SliderProps = Omit<ThumbProps, 'ref'> & {
     /**
      * Custom render instead of rendering the track
      */
-    renderTrack?: () => ReactElement<any> | ReactElement<any>[];
+    renderTrack?: () => ReactElement | ReactElement[];
     /**
      * Callback for onValueChange
      */

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

@@ -1,4 +1,4 @@
-import React, { type JSX } from 'react';
+import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { ViewProps } from '../view';
 import { ButtonProps } from '../button';

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

@@ -47,11 +47,11 @@ export interface TabControllerItemProps extends Pick<TabControllerBarProps, 'spr
     /**
      * Pass to render a leading element
      */
-    leadingAccessory?: ReactElement<any>;
+    leadingAccessory?: ReactElement;
     /**
      * Pass to render a trailing element
      */
-    trailingAccessory?: ReactElement<any>;
+    trailingAccessory?: ReactElement;
     /**
      * A fixed width for the item
      */

package/src/components/tabController/TabBarItem.js

@@ -46,7 +46,7 @@ export default function TabBarItem({
     currentPage,
     setCurrentIndex
   } = useContext(TabBarContext);
-  const itemRef = useRef(undefined);
+  const itemRef = useRef();
   const itemWidth = useRef(props.width);
   const isPressed = useSharedValue(false);
   // JSON.parse(JSON.stringify is due to an issue with reanimated

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

@@ -1,4 +1,4 @@
-import { PropsWithChildren, type JSX } from 'react';
+import React, { PropsWithChildren } from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
 export interface TabControllerPageProps {
     /**
@@ -30,4 +30,4 @@ export interface TabControllerPageProps {
  * @description: TabController's TabPage
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx
  */
-export default function TabPage({ testID, index, lazy, renderLoading, style, lazyLoadTime, ...props }: PropsWithChildren<TabControllerPageProps>): JSX.Element;
+export default function TabPage({ testID, index, lazy, renderLoading, style, lazyLoadTime, ...props }: PropsWithChildren<TabControllerPageProps>): React.JSX.Element;

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

@@ -8,7 +8,7 @@ export declare enum OffsetType {
     RIGHT = "RIGHT"
 }
 export type ScrollToItemProps<T extends ScrollToSupportedViews> = {
-    scrollViewRef?: RefObject<T | null>;
+    scrollViewRef?: RefObject<T>;
     /**
      * The number of items
      */

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

@@ -2,6 +2,6 @@
 import { TextProps } from './index';
 import { ComponentDriver } from '../../testkit/Component.driver';
 export declare class TextDriver extends ComponentDriver<TextProps> {
-    getTextContent: () => Promise<string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined>;
+    getTextContent: () => Promise<import("react").ReactNode>;
     isPressable: () => Promise<boolean | null>;
 }

package/src/components/textArea/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {View, TextInput as RNTextInput, StyleSheet} from 'react-native';
+import {TextInputPropTypes} from 'deprecated-react-native-prop-types';
 import BaseInput from '../baseInput';
 import {Colors} from '../../style';
 
@@ -14,6 +15,11 @@ import {Colors} from '../../style';
 export default class TextArea extends BaseInput {
   static displayName = 'TextArea';
 
+  static propTypes = {
+    ...TextInputPropTypes,
+    ...BaseInput.propTypes
+  };
+
   generateStyles() {
     this.styles = createStyles(this.props);
   }

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

@@ -9,6 +9,10 @@ import { ButtonDriver } from "../button/Button.driver.new";
 import { ViewDriver } from "../view/View.driver.new";
 export const TextFieldDriver = (props, options) => {
   const driver = usePressableDriver(useComponentDriver(props, options));
+  const inputDriver = useComponentDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.input`
+  }, options);
   const floatingPlaceholderDriver = TextDriver({
     renderTree: props.renderTree,
     testID: `${props.testID}.floatingPlaceholder`
@@ -41,30 +45,31 @@ export const TextFieldDriver = (props, options) => {
     renderTree: props.renderTree,
     testID: `${props.testID}.clearButton.container`
   });
+  const getInputElement = () => inputDriver.queryElement() ?? driver.getElement();
   const getValue = () => {
-    return driver.getElement().props.value ?? driver.getElement().props.defaultValue;
+    return getInputElement().props.value ?? getInputElement().props.defaultValue;
   };
   const changeText = text => {
-    fireEvent.changeText(driver.getElement(), text);
+    fireEvent.changeText(getInputElement(), text);
   };
   const focus = () => {
-    fireEvent(driver.getElement(), 'focus');
+    fireEvent(getInputElement(), 'focus');
   };
   const blur = () => {
-    fireEvent(driver.getElement(), 'blur');
+    fireEvent(getInputElement(), 'blur');
   };
   const isEnabled = () => {
-    return !driver.getElement().props.accessibilityState?.disabled;
+    return !getInputElement().props.accessibilityState?.disabled;
   };
   const getPlaceholder = () => {
     const exists = () => {
-      const hasPlaceholder = !!driver.getElement().props.placeholder;
+      const hasPlaceholder = !!getInputElement().props.placeholder;
       const hasText = !!getValue();
       return hasPlaceholder && (!hasText || hasText && floatingPlaceholderDriver.exists());
     };
     const getText = () => {
       if (exists()) {
-        return driver.getElement().props.placeholder;
+        return getInputElement().props.placeholder;
       }
     };
     return {

package/src/components/textField/index.js

@@ -78,6 +78,8 @@ const TextField = props => {
     readonly = false,
     showMandatoryIndication,
     clearButtonStyle,
+    testID,
+    accessibilityLabel: accessibilityLabelProp,
     ...others
   } = usePreset(props);
   const {
@@ -135,11 +137,31 @@ const TextField = props => {
   const hasValue = fieldState.value !== undefined; // NOTE: not pressable if centered without a value (so can't center placeholder)
   const inputStyle = useMemo(() => [typographyStyle, colorStyle, others.style, hasValue && centeredTextStyle], [typographyStyle, colorStyle, others.style, centeredTextStyle, hasValue]);
   const dummyPlaceholderStyle = useMemo(() => [inputStyle, styles.dummyPlaceholder], [inputStyle]);
+  const defaultAccessibilityLabel = useMemo(() => {
+    const parts = [];
+    if (label) {
+      parts.push(label);
+    }
+    if (context.isMandatory) {
+      parts.push('required');
+    }
+    parts.push('textField');
+    if (helperText) {
+      parts.push(helperText);
+    } else if (placeholder) {
+      parts.push(placeholder);
+    }
+    if (showCharCounter && others.maxLength) {
+      parts.push(`you can enter up to ${others.maxLength} characters`);
+    }
+    return parts.join(', ');
+  }, [label, context.isMandatory, helperText, placeholder, showCharCounter, others.maxLength]);
+  const accessibilityLabel = accessibilityLabelProp ?? defaultAccessibilityLabel;
   return <FieldContext.Provider value={context}>
-      <View {...containerProps} style={[margins, positionStyle, containerStyle, centeredContainerStyle]}>
+      <View {...containerProps} testID={testID} accessible accessibilityLabel={accessibilityLabel} style={[margins, positionStyle, containerStyle, centeredContainerStyle]}>
         <View row spread style={centeredContainerStyle}>
-          <Label label={label} labelColor={labelColor} labelStyle={_labelStyle} labelProps={labelProps} floatingPlaceholder={floatingPlaceholder} validationMessagePosition={validationMessagePosition} testID={`${props.testID}.label`} showMandatoryIndication={showMandatoryIndication} enableErrors={enableErrors} />
-          {validationMessagePosition === ValidationMessagePosition.TOP && <ValidationMessage enableErrors={enableErrors} validate={others.validate} validationMessage={others.validationMessage} validationMessageStyle={_validationMessageStyle} retainValidationSpace={retainValidationSpace && retainTopMessageSpace} testID={`${props.testID}.validationMessage`} />}
+          <Label label={label} labelColor={labelColor} labelStyle={_labelStyle} labelProps={labelProps} floatingPlaceholder={floatingPlaceholder} validationMessagePosition={validationMessagePosition} testID={`${testID}.label`} showMandatoryIndication={showMandatoryIndication} enableErrors={enableErrors} />
+          {validationMessagePosition === ValidationMessagePosition.TOP && <ValidationMessage enableErrors={enableErrors} validate={others.validate} validationMessage={others.validationMessage} validationMessageStyle={_validationMessageStyle} retainValidationSpace={retainValidationSpace && retainTopMessageSpace} testID={`${testID}.validationMessage`} />}
           {topTrailingAccessory && <View>{topTrailingAccessory}</View>}
         </View>
         <View style={[paddings, fieldStyle]} row centerV centerH={centered}>
@@ -158,26 +180,26 @@ const TextField = props => {
               {Constants.isAndroid && centered && <Text marginR-s1 style={dummyPlaceholderStyle}>
                   {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} />}
+              {floatingPlaceholder && <FloatingPlaceholder defaultValue={others.defaultValue} placeholder={placeholder} floatingPlaceholderStyle={_floatingPlaceholderStyle} floatingPlaceholderColor={floatingPlaceholderColor} floatOnFocus={floatOnFocus} validationMessagePosition={validationMessagePosition} extraOffset={leadingAccessoryMeasurements?.width} testID={`${testID}.floatingPlaceholder`} showMandatoryIndication={showMandatoryIndication} />}
               <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} />
+          }} placeholderTextColor={hidePlaceholder ? 'transparent' : placeholderTextColor} value={fieldState.value} {...others} testID={`${testID}.input`} 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} />}
+          {showClearButton && <ClearButton onClear={onClear} testID={`${testID}.clearButton`} onChangeText={onChangeText} clearButtonStyle={clearButtonStyle} />}
           {trailingAccessory}
           {/* </View> */}
         </View>
         <View row spread center={centered}>
           <View flex={!centered} flexG={centered} marginR-s4={showCharCounter}>
-            {validationMessagePosition === ValidationMessagePosition.BOTTOM && <ValidationMessage enableErrors={enableErrors} validate={others.validate} validationMessage={others.validationMessage} validationIcon={validationIcon} validationMessageStyle={_validationMessageStyle} retainValidationSpace={retainValidationSpace} testID={`${props.testID}.validationMessage`} />}
-            {helperText && <Text $textNeutralHeavy subtext marginT-s1 testID={`${props.testID}.helperText`}>
+            {validationMessagePosition === ValidationMessagePosition.BOTTOM && <ValidationMessage enableErrors={enableErrors} validate={others.validate} validationMessage={others.validationMessage} validationIcon={validationIcon} validationMessageStyle={_validationMessageStyle} retainValidationSpace={retainValidationSpace} testID={`${testID}.validationMessage`} />}
+            {helperText && <Text $textNeutralHeavy subtext marginT-s1 testID={`${testID}.helperText`}>
                 {helperText}
               </Text>}
             {bottomAccessory}
           </View>
           <View>
-            {showCharCounter && <CharCounter maxLength={others.maxLength} charCounterStyle={charCounterStyle} testID={`${props.testID}.charCounter`} />}
+            {showCharCounter && <CharCounter maxLength={others.maxLength} charCounterStyle={charCounterStyle} testID={`${testID}.charCounter`} />}
           </View>
         </View>
       </View>

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

@@ -171,19 +171,19 @@ export type TextFieldProps = MarginModifiers & PaddingModifiers & TypographyModi
     /**
      * Pass to render a leading element
      */
-    leadingAccessory?: ReactElement<any>;
+    leadingAccessory?: ReactElement;
     /**
      * Pass to render a trailing element
      */
-    trailingAccessory?: ReactElement<any>;
+    trailingAccessory?: ReactElement;
     /**
      * Pass to render a top trailing element
      */
-    topTrailingAccessory?: ReactElement<any>;
+    topTrailingAccessory?: ReactElement;
     /**
      * Pass to render a bottom element below the input
      */
-    bottomAccessory?: ReactElement<any>;
+    bottomAccessory?: ReactElement;
     /**
      * Should show a clear button when there is a value
      */

package/src/components/textField/useImperativeInputHandle.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { TextInput, TextInputProps } from 'react-native';
-declare const useImperativeInputHandle: (ref: React.Ref<any>, props: Pick<TextInputProps, 'onChangeText'>) => React.RefObject<TextInput | undefined>;
+declare const useImperativeInputHandle: (ref: React.Ref<any>, props: Pick<TextInputProps, 'onChangeText'>) => React.MutableRefObject<TextInput | undefined>;
 export default useImperativeInputHandle;

package/src/components/textField/useImperativeInputHandle.js

@@ -2,7 +2,7 @@ import { useContext, useImperativeHandle, useRef } from 'react';
 import { findNodeHandle } from 'react-native';
 import FieldContext from "./FieldContext";
 const useImperativeInputHandle = (ref, props) => {
-  const inputRef = useRef(undefined);
+  const inputRef = useRef();
   const context = useContext(FieldContext);
   useImperativeHandle(ref, () => {
     return {