react-native-ui-lib 8.3.3 → 8.3.4-snapshot.7783

package/src/components/view/index.js

@@ -2,6 +2,7 @@ import { useModifiers, useThemeProps } from "../../hooks";
 import React, { useEffect, useMemo, useState } from 'react';
 import { View as RNView, SafeAreaView, Animated } from 'react-native';
 import { Constants } from "../../commons/new";
+import { SafeAreaContextPackage } from "../../optionalDependencies";
 
 /**
  * Extra props when using reanimated (only non experimental props)
@@ -65,7 +66,12 @@ function View(props, ref) {
     }
   }, []);
   const ViewContainer = useMemo(() => {
-    const container = useSafeArea && Constants.isIOS ? SafeAreaView : RNView;
+    let container = RNView;
+    if (useSafeArea && SafeAreaContextPackage?.SafeAreaView) {
+      container = SafeAreaContextPackage.SafeAreaView;
+    } else if (useSafeArea && Constants.isIOS) {
+      container = SafeAreaView;
+    }
     if (reanimated) {
       const {
         default: Reanimated
@@ -89,11 +95,8 @@ function View(props, ref) {
   if (!ready) {
     return null;
   }
-  return (
-    //@ts-expect-error
-    <ViewContainer accessibilityElementsHidden={inaccessible} importantForAccessibility={inaccessible ? 'no-hide-descendants' : undefined} fsTagName={recorderTag} {...others} style={_style} ref={ref}>
+  return <ViewContainer accessibilityElementsHidden={inaccessible} importantForAccessibility={inaccessible ? 'no-hide-descendants' : undefined} fsTagName={recorderTag} {...others} style={_style} ref={ref}>
       {children}
-    </ViewContainer>
-  );
+    </ViewContainer>;
 }
 export default React.forwardRef(View);

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

@@ -24,7 +24,7 @@ declare class Wizard extends Component<WizardProps, State> {
     componentWillUnmount(): void;
     onOrientationChange: () => void;
     getMaxWidth(): number;
-    renderChildren(): React.DetailedReactHTMLElement<any, HTMLElement>[] | null | undefined;
+    renderChildren(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>[] | null | undefined;
     render(): React.JSX.Element;
 }
 declare const _default: React.ForwardRefExoticComponent<WizardProps & React.RefAttributes<any>> & typeof Wizard;

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

@@ -73,7 +73,7 @@ export interface WizardProps {
      */
     activeIndex: number;
     /**
-     * The configuration of the active step (see Wizard.Step.propTypes)
+     * The configuration of the active step
      */
     activeConfig?: WizardStepProps;
     /**

package/src/components/wizard/wizard.api.json

@@ -17,7 +17,7 @@
     {
       "name": "activeConfig",
       "type": "WizardStepProps",
-      "description": "The configuration of the active step (see Wizard.Step.propTypes)"
+      "description": "The configuration of the active step"
     },
     {
       "name": "onActiveIndexChanged",

package/src/hooks/index.d.ts

@@ -6,6 +6,7 @@ export { default as useModifiers } from './useModifiers';
 export { default as useOrientation } from './useOrientation';
 export { default as useScrollEnabler } from './useScrollEnabler';
 export { default as useScrollReached } from './useScrollReached';
+export { default as useScrollToHide } from './useScrollToHide';
 export { default as useScrollToItem } from './useScrollToItem';
 export { default as useScrollTo } from './useScrollTo';
 export { default as useThemeProps } from './useThemeProps';

package/src/hooks/index.js

@@ -6,6 +6,7 @@ export { default as useModifiers } from "./useModifiers";
 export { default as useOrientation } from "./useOrientation";
 export { default as useScrollEnabler } from "./useScrollEnabler";
 export { default as useScrollReached } from "./useScrollReached";
+export { default as useScrollToHide } from "./useScrollToHide";
 export { default as useScrollToItem } from "./useScrollToItem";
 export { default as useScrollTo } from "./useScrollTo";
 export { default as useThemeProps } from "./useThemeProps";

package/src/hooks/useCombinedRefs/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 const useCombinedRefs = (...refs) => {
-  const targetRef = React.useRef();
+  const targetRef = React.useRef(undefined);
   React.useEffect(() => {
     refs.forEach(ref => {
       if (!ref) {
@@ -9,7 +9,6 @@ const useCombinedRefs = (...refs) => {
       if (typeof ref === 'function') {
         ref(targetRef.current);
       } else {
-        // @ts-expect-error
         ref.current = targetRef.current;
       }
     });

package/src/hooks/useDebounce/index.js

@@ -4,7 +4,7 @@ import { useCallback, useRef } from 'react';
  * This hook is used to debounce a function call
  */
 function useDebounce(func, timeout = 300) {
-  const handler = useRef();
+  const handler = useRef(undefined);
   const debouncedFunction = useCallback(args => {
     if (handler.current) {
       clearTimeout(handler.current);

package/src/hooks/useHiddenLocation/index.js

@@ -20,8 +20,8 @@ export default function useHiddenLocation() {
     };
   };
   const [hiddenLocation, setHiddenLocation] = useState(getHiddenLocation({}));
-  const ref = useRef();
-  const layoutData = useRef();
+  const ref = useRef(undefined);
+  const layoutData = useRef(undefined);
   const wasMeasured = useRef(wasMeasuredDefaultValue);
   const measure = useCallback(() => {
     if (ref.current && layoutData.current && layoutData.current.width > 0 && layoutData.current.height > 0) {

package/src/hooks/useHiddenLocation/index.web.js

@@ -16,8 +16,8 @@ export default function useHiddenLocation() {
     };
   };
   const [hiddenLocation, setHiddenLocation] = useState(getHiddenLocation({}));
-  const ref = useRef();
-  const layoutData = useRef();
+  const ref = useRef(undefined);
+  const layoutData = useRef(undefined);
   const wasMeasured = useRef(wasMeasuredDefaultValue);
   const measure = useCallback(() => {
     if (ref.current) {

package/src/hooks/useMeasure/index.d.ts

@@ -9,7 +9,7 @@ interface Measurements {
     pageY: number;
 }
 declare const _default: () => {
-    ref: import("react").MutableRefObject<RNView | undefined>;
+    ref: import("react").RefObject<RNView | undefined>;
     measurements: Measurements | undefined;
 };
 export default _default;

package/src/hooks/useMeasure/index.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 export default () => {
-  const ref = useRef();
+  const ref = useRef(undefined);
   const [measurements, setMeasurements] = useState();
   const onMeasure = (x, y, width, height, pageX, pageY) => {
     setMeasurements({

package/src/hooks/useScrollTo/index.d.ts

@@ -5,7 +5,7 @@ export type ScrollToProps<T extends ScrollToSupportedViews> = {
     /**
      * A reference to the ScrollView (or FlatList) which the items are in
      */
-    scrollViewRef?: RefObject<T>;
+    scrollViewRef?: RefObject<T | null>;
     /**
      * Is the scroll view horizontal (default is true)
      */
@@ -15,7 +15,7 @@ export type ScrollToResultProps<T extends ScrollToSupportedViews> = {
     /**
      * A reference to the ScrollView (or FlatList) which the items are in (from the props or a created one)
      */
-    scrollViewRef: RefObject<T>;
+    scrollViewRef: RefObject<T | null>;
     /**
      * scrollTo callback.
      * offset - the x or y to scroll to.

package/src/hooks/useScrollToHide/index.d.ts

@@ -0,0 +1,24 @@
+import { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
+export type ScrollToHideProps = {
+    /**
+     * The threshold (in pixels) to ignore small scroll movements before updating visibility.
+     * Defaults to 0 (immediate reaction).
+     */
+    scrollingThreshold?: number;
+};
+export type ScrollToHideResult = {
+    /**
+     * onScroll callback (should be passed to your ScrollView/FlatList onScroll prop).
+     */
+    onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    /**
+     * Whether the footer should be visible based on scroll direction.
+     */
+    visible: boolean;
+};
+/**
+ * @description: A hook that tracks scroll direction to toggle visibility (e.g., for hiding a footer on scroll).
+ * @example: const {onScroll, visible} = useScrollToHide();
+ */
+declare const useScrollToHide: (props?: ScrollToHideProps) => ScrollToHideResult;
+export default useScrollToHide;

package/src/hooks/useScrollToHide/index.js

@@ -0,0 +1,48 @@
+import { useState, useCallback, useRef } from 'react';
+/**
+ * @description: A hook that tracks scroll direction to toggle visibility (e.g., for hiding a footer on scroll).
+ * @example: const {onScroll, visible} = useScrollToHide();
+ */
+const useScrollToHide = (props = {}) => {
+  const {
+    scrollingThreshold = 0
+  } = props;
+  const [visible, setVisible] = useState(true);
+  const prevContentOffset = useRef(0);
+  const onScroll = useCallback(event => {
+    const {
+      nativeEvent: {
+        contentOffset: {
+          y: currentOffset
+        },
+        contentSize: {
+          height: contentHeight
+        },
+        layoutMeasurement: {
+          height: layoutHeight
+        }
+      }
+    } = event;
+
+    // Ignore bounces (iOS)
+    if (currentOffset < 0 || currentOffset > contentHeight - layoutHeight) {
+      return;
+    }
+    const diff = currentOffset - prevContentOffset.current;
+    if (Math.abs(diff) > scrollingThreshold) {
+      if (diff > 0 && visible) {
+        // Scrolling Down -> Hide
+        setVisible(false);
+      } else if (diff < 0 && !visible) {
+        // Scrolling Up -> Show
+        setVisible(true);
+      }
+      prevContentOffset.current = currentOffset;
+    }
+  }, [visible, scrollingThreshold]);
+  return {
+    onScroll,
+    visible
+  };
+};
+export default useScrollToHide;

package/src/incubator/calendar/index.js

@@ -42,7 +42,7 @@ function Calendar(props) {
     }
     return -1;
   }, [monthItems]);
-  const flashListRef = useRef();
+  const flashListRef = useRef(undefined);
   const current = useSharedValue(new Date(initialDate).setHours(0, 0, 0, 0));
   const initialMonthIndex = useRef(getItemIndex(current.value));
   const lastUpdateSource = useSharedValue(UpdateSource.INIT);

package/src/incubator/calendar/types.d.ts

@@ -111,8 +111,8 @@ export interface CalendarProps {
     showExtraDays?: boolean;
 }
 export interface AgendaProps {
-    renderEvent?: (event: Event) => React.ReactElement | null;
-    renderHeader?: (header: DateSectionHeader) => React.ReactElement | null;
+    renderEvent?: (event: Event) => React.ReactElement<any> | null;
+    renderHeader?: (header: DateSectionHeader) => React.ReactElement<any> | null;
     showLoader?: boolean;
     onEndReached?: (date: number) => void;
 }

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

@@ -14,7 +14,7 @@ export type ExpandableOverlayProps = TouchableOpacityProps & PropsWithChildren<{
     /**
      * The content to render inside the expandable modal/dialog
      */
-    expandableContent?: React.ReactElement;
+    expandableContent?: React.ReactElement<any>;
     /**
      * Whether to use a dialog as expandable container (by default the container will be a full screen modal)
      */
@@ -38,7 +38,7 @@ export type ExpandableOverlayProps = TouchableOpacityProps & PropsWithChildren<{
     /**
      * A custom overlay to render instead of Modal or Dialog components
      */
-    renderCustomOverlay?: (props: RenderCustomOverlayProps) => React.ReactElement | undefined | null;
+    renderCustomOverlay?: (props: RenderCustomOverlayProps) => React.ReactElement<any> | undefined | null;
     /**
      * Disabled opening expandable overlay
      */

package/src/incubator/expandableOverlay/index.js

@@ -33,11 +33,15 @@ const ExpandableOverlay = (props, ref) => {
     setExpandableVisible(true);
     onPress?.(props);
   }, [onPress, customValue]);
-  const closeExpandable = useCallback(() => {
+  const dismissOverlay = useCallback(() => {
     setExpandableVisible(false);
     focusAccessibility();
+  }, [focusAccessibility]);
+  const closeExpandable = useCallback(() => {
+    dismissOverlay();
     useDialog ? dialogProps?.onDismiss?.() : modalProps?.onDismiss?.();
-  }, [useDialog, dialogProps?.onDismiss, modalProps?.onDismiss, focusAccessibility]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dismissOverlay, dialogProps?.onDismiss, modalProps?.onDismiss]);
   const toggleExpandable = useCallback(() => visible ? closeExpandable() : openExpandable(), [visible, openExpandable, closeExpandable]);
   useImperativeHandle(ref, () => ({
     openExpandable,
@@ -45,7 +49,7 @@ const ExpandableOverlay = (props, ref) => {
     toggleExpandable
   }));
   const renderModal = () => {
-    return <Modal testID={`${testID}.overlay`} overlayBackgroundColor={Colors.$backgroundDefault} {...modalProps} visible={visible} onDismiss={closeExpandable} onRequestClose={closeExpandable} onBackgroundPress={closeExpandable}>
+    return <Modal testID={`${testID}.overlay`} overlayBackgroundColor={Colors.$backgroundDefault} {...modalProps} visible={visible} onDismiss={dismissOverlay} onRequestClose={closeExpandable} onBackgroundPress={closeExpandable}>
         {showTopBar && <Modal.TopBar onDone={closeExpandable} {...topBarProps} />}
         {expandableContent}
       </Modal>;

package/src/incubator/slider/Track.d.ts

@@ -6,7 +6,7 @@ export interface Props extends ViewProps {
     maximumTrackTintColor?: string;
     minimumTrackTintColor?: string;
     trackStyle?: StyleProp<ViewStyle>;
-    renderTrack?: () => ReactElement | ReactElement[];
+    renderTrack?: () => ReactElement<any> | ReactElement<any>[];
     onPress?: ((event: GestureResponderEvent) => void) | undefined;
 }
 declare const Track: (props: Props) => React.JSX.Element;

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

@@ -62,7 +62,7 @@ export interface SliderProps extends AccessibilityProps {
     /**
      * Custom render instead of rendering the track
      */
-    renderTrack?: () => ReactElement | ReactElement[];
+    renderTrack?: () => ReactElement<any> | ReactElement<any>[];
     /**
      * The thumb style
      */

package/src/incubator/toast/helpers/useToastTimer.js

@@ -3,7 +3,7 @@ export default ({
   autoDismiss,
   onDismiss
 }) => {
-  const timer = useRef();
+  const timer = useRef(undefined);
   const clearTimer = useCallback(() => {
     if (timer.current) {
       clearTimeout(timer.current);

package/src/incubator/toast/index.js

@@ -43,7 +43,7 @@ const Toast = props => {
     testID
   } = props;
   const directions = useRef([props.position === 'bottom' ? PanView.directions.DOWN : PanView.directions.UP, PanView.directions.LEFT, PanView.directions.RIGHT]);
-  const viewRef = useRef();
+  const viewRef = useRef(undefined);
   const [toastHeight, setToastHeight] = useState();
   const {
     clearTimer,

package/src/incubator/toast/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode, type JSX } from 'react';
 import { ImageSourcePropType, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import { ButtonProps } from '../../components/button';
 import { TextProps } from '../../components/text';
@@ -52,7 +52,7 @@ export interface ToastProps {
     /**
      * should show a loader
      */
-    loaderElement?: ReactElement;
+    loaderElement?: ReactElement<any>;
     /**
      * callback for dismiss action
      */

package/src/index.d.ts

@@ -38,6 +38,7 @@ export { default as ExpandableSection, ExpandableSectionProps } from './componen
 export { default as Fader, FaderProps, FaderPosition } from './components/fader';
 export { default as FeatureHighlight, FeatureHighlightProps } from './components/featureHighlight';
 export { default as FloatingButton, FloatingButtonProps, FloatingButtonLayouts } from './components/floatingButton';
+export { default as ScreenFooter, ScreenFooterProps, ScreenFooterLayouts, ScreenFooterBackgrounds, FooterAlignment, HorizontalItemsDistribution, ItemsFit, KeyboardBehavior, ScreenFooterShadow } from './components/screenFooter';
 export { default as Gradient, GradientProps, GradientTypes } from './components/gradient';
 export { default as Slider } from './components/slider';
 export { default as GradientSlider } from './components/slider/GradientSlider';

package/src/index.js

@@ -99,6 +99,15 @@ var _exportNames = {
   FloatingButton: true,
   FloatingButtonProps: true,
   FloatingButtonLayouts: true,
+  ScreenFooter: true,
+  ScreenFooterProps: true,
+  ScreenFooterLayouts: true,
+  ScreenFooterBackgrounds: true,
+  FooterAlignment: true,
+  HorizontalItemsDistribution: true,
+  ItemsFit: true,
+  KeyboardBehavior: true,
+  ScreenFooterShadow: true,
   Gradient: true,
   GradientProps: true,
   GradientTypes: true,
@@ -699,6 +708,12 @@ Object.defineProperty(exports, "FloatingButtonProps", {
     return _floatingButton().FloatingButtonProps;
   }
 });
+Object.defineProperty(exports, "FooterAlignment", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().FooterAlignment;
+  }
+});
 Object.defineProperty(exports, "ForwardRefInjectedProps", {
   enumerable: true,
   get: function () {
@@ -790,6 +805,12 @@ Object.defineProperty(exports, "HintProps", {
   }
 });
 exports.Hooks = void 0;
+Object.defineProperty(exports, "HorizontalItemsDistribution", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().HorizontalItemsDistribution;
+  }
+});
 Object.defineProperty(exports, "Icon", {
   enumerable: true,
   get: function () {
@@ -815,6 +836,12 @@ Object.defineProperty(exports, "ImageProps", {
   }
 });
 exports.Incubator = void 0;
+Object.defineProperty(exports, "ItemsFit", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().ItemsFit;
+  }
+});
 Object.defineProperty(exports, "KeyboardAwareFlatList", {
   enumerable: true,
   get: function () {
@@ -827,6 +854,12 @@ Object.defineProperty(exports, "KeyboardAwareScrollView", {
     return _KeyboardAwareScrollView().default;
   }
 });
+Object.defineProperty(exports, "KeyboardBehavior", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().KeyboardBehavior;
+  }
+});
 Object.defineProperty(exports, "ListItem", {
   enumerable: true,
   get: function () {
@@ -1146,6 +1179,36 @@ Object.defineProperty(exports, "RenderCustomModalProps", {
     return _picker().RenderCustomModalProps;
   }
 });
+Object.defineProperty(exports, "ScreenFooter", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().default;
+  }
+});
+Object.defineProperty(exports, "ScreenFooterBackgrounds", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().ScreenFooterBackgrounds;
+  }
+});
+Object.defineProperty(exports, "ScreenFooterLayouts", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().ScreenFooterLayouts;
+  }
+});
+Object.defineProperty(exports, "ScreenFooterProps", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().ScreenFooterProps;
+  }
+});
+Object.defineProperty(exports, "ScreenFooterShadow", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().ScreenFooterShadow;
+  }
+});
 Object.defineProperty(exports, "ScrollBar", {
   enumerable: true,
   get: function () {
@@ -1906,6 +1969,13 @@ function _floatingButton() {
   };
   return data;
 }
+function _screenFooter() {
+  const data = _interopRequireWildcard(require("./components/screenFooter"));
+  _screenFooter = function () {
+    return data;
+  };
+  return data;
+}
 function _gradient() {
   const data = _interopRequireWildcard(require("./components/gradient"));
   _gradient = function () {

package/src/testkit/Component.driver.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { JSX } from 'react';
 import { DragData, UniDriver, UniDriverClass } from './UniDriver';
 export type ComponentDriverArgs = {
     testID: string;

package/src/testkit/drivers/TestingLibraryDriver.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { JSX } from 'react';
 import { DragData, UniDriver } from '../UniDriver';
 import { ReactTestInstance } from 'react-test-renderer';
 export declare class TestingLibraryDriver<Props> implements UniDriver<Props> {

package/src/typings/module.d.ts

@@ -3,11 +3,20 @@ declare namespace globalThis {
   var _UILIB_TESTING: boolean;
 }
 
+declare global {
+  // eslint-disable-next-line no-var
+  var _UILIB_TESTING: boolean;
+}
+
 // This support importing png files, typing wise
 declare module '*.png';
 
-declare namespace JSX {
-  interface IntrinsicAttributes {
-    fsTagName?: string;
+import 'react';
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicAttributes {
+      fsTagName?: string;
+    }
   }
 }

package/ReactNativeUiLib.podspec

@@ -1,22 +0,0 @@
-require 'json'
-
-package = JSON.parse(File.read(File.join(__dir__, 'lib/package.json')))
-
-Pod::Spec.new do |s|
-  s.name         = "ReactNativeUiLib"
-  s.version      = package['version']
-  s.summary      = "React Native UI Library"
-
-  s.authors      = "Wix.com"
-  s.homepage     = package['homepage']
-  s.license      = package['license']
-  s.platforms    = { :ios => "9.0", :tvos => "9.2" }
-
-  s.module_name  = 'ReactNativeUiLib'
-
-  s.source       = { :git => "https://github.com/wix/react-native-ui-lib.git", :tag => "#{s.version}" }
-  s.source_files  = "lib/ios/**/*.{h,m}"
-
-  s.dependency 'React'
-  s.frameworks = 'UIKit'
-end

package/src/components/maskedInput/new.d.ts

@@ -1,22 +0,0 @@
-import React from 'react';
-import { TextInputProps, StyleProp, ViewStyle } from 'react-native';
-export interface MaskedInputProps extends Omit<TextInputProps, 'value'> {
-    /**
-     * Initial value to pass to masked input
-     */
-    initialValue?: string;
-    /**
-     * callback for rendering the custom input out of the value returns from the actual input
-     */
-    renderMaskedText?: (value?: string) => JSX.Element | undefined;
-    /**
-     * Custom formatter for the input value
-     */
-    formatter?: (value?: string) => string | undefined;
-    /**
-     * container style for the masked input container
-     */
-    containerStyle?: StyleProp<ViewStyle>;
-}
-declare const _default: React.ForwardRefExoticComponent<MaskedInputProps & React.RefAttributes<any>>;
-export default _default;