react-native-ui-lib 7.46.3 → 8.0.0

package/src/components/dialog/index.js

@@ -1,226 +1,219 @@
-import _isEmpty from "lodash/isEmpty";
-import React, { Component } from 'react';
+import React, { useMemo, useCallback, useImperativeHandle, forwardRef, useEffect, useState } from 'react';
 import { StyleSheet } from 'react-native';
-import { Colors } from "../../style";
+import hoistStatics from 'hoist-non-react-statics';
+import { Extrapolation, interpolate, runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { Spacings, Colors, BorderRadiuses } from "../../style";
+import { useDidUpdate } from "../../hooks";
+import { asBaseComponent, Constants } from "../../commons/new";
+import View from "../../components/view";
+import Modal from "../../components/modal";
 import { extractAlignmentsValues } from "../../commons/modifiers";
-import { Constants, asBaseComponent } from "../../commons/new";
-import Modal from "../modal";
-import View from "../view";
-import PanListenerView from "../panningViews/panListenerView";
-import DialogDismissibleView from "./DialogDismissibleView";
-import OverlayFadingBackground from "./OverlayFadingBackground";
-import PanningProvider, { PanningDirections, PanningDirectionsEnum } from "../panningViews/panningProvider";
-export { PanningDirections as DialogDirections, PanningDirectionsEnum as DialogDirectionsEnum };
+import useHiddenLocation from "../../hooks/useHiddenLocation";
+import DialogHeader from "./DialogHeader";
+import useDialogContent from "./useDialogContent";
+import { DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps } from "./types";
+export { DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps };
+const THRESHOLD_VELOCITY = 750;
+const Dialog = (props, ref) => {
+  const {
+    visible = false,
+    headerProps,
+    showCloseButton,
+    closeButtonProps,
+    containerStyle: propsContainerStyle,
+    containerProps: propsContainerProps,
+    width,
+    height,
+    onDismiss,
+    direction = DialogDirectionsEnum.DOWN,
+    ignoreBackgroundPress,
+    modalProps = {},
+    useSafeArea,
+    disableAnimation = false,
+    testID,
+    children
+  } = props;
+  const {
+    overlayBackgroundColor = Colors.rgba(Colors.grey10, 0.65),
+    ...otherModalProps
+  } = modalProps;
+  const visibility = useSharedValue(0); // value between 0 (closed) and 1 (open)
+  const initialTranslation = useSharedValue(0);
+  const [modalVisibility, setModalVisibility] = useState(visible); // unfortunately this is needed when changing visibility by the user (clicking on an option etc)
 
-// TODO: KNOWN ISSUES
-// 1. iOS pressing on the background while enter animation is happening will not call onDismiss
-//    Touch events are not registered?
-// 2. SafeArea is transparent
-// 3. Check why we need the state change in DialogDismissibleView -> onLayout -> animateTo
+  const {
+    setRef,
+    onLayout,
+    hiddenLocation: _hiddenLocation
+  } = useHiddenLocation();
+  const hiddenLocation = _hiddenLocation[direction];
+  const wasMeasured = _hiddenLocation.wasMeasured;
+  const isVertical = useMemo(() => {
+    'worklet';
 
-const DEFAULT_OVERLAY_BACKGROUND_COLOR = Colors.rgba(Colors.$backgroundInverted, 0.3);
+    return direction === DialogDirectionsEnum.DOWN || direction === DialogDirectionsEnum.UP;
+  }, [direction]);
+  const getTranslationInterpolation = useCallback(value => {
+    'worklet';
 
-/**
- * @description: Dialog component for displaying custom content inside a popup dialog
- * @notes: Use alignment modifiers to control the dialog position
- * (top, bottom, centerV, centerH, etc... by default the dialog is aligned to center)
- * @modifiers: alignment
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DialogScreen.js
- * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Dialog/Dialog.gif?raw=true
- */
-class Dialog extends Component {
-  static displayName = 'Dialog';
-  static directions = PanningDirectionsEnum;
-  static defaultProps = {
-    overlayBackgroundColor: DEFAULT_OVERLAY_BACKGROUND_COLOR
-  };
-  constructor(props) {
-    super(props);
-    this.state = {
-      alignments: extractAlignmentsValues(props),
-      modalVisibility: props.visible,
-      dialogVisibility: props.visible
-    };
-    this.styles = createStyles(this.props);
-    this.setAlignment();
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      visible: nexVisible
-    } = nextProps;
-    const {
-      visible
-    } = this.props;
-    if (nexVisible && !visible) {
-      this.setState({
-        modalVisibility: true,
-        dialogVisibility: true
-      });
-    } else if (visible && !nexVisible) {
-      this.hideDialogView();
-    }
-  }
-  setAlignment() {
-    const {
-      alignments
-    } = this.state;
-    if (_isEmpty(alignments)) {
-      this.styles.alignments = this.styles.centerContent;
-    } else {
-      this.styles.alignments = alignments;
-    }
-  }
+    return interpolate(value, [0, 1], [hiddenLocation, 0], Extrapolation.CLAMP);
+  }, [hiddenLocation]);
+  const getTranslationReverseInterpolation = useCallback(value => {
+    'worklet';
+
+    return interpolate(value, [hiddenLocation, 0], [0, 1]);
+  }, [hiddenLocation]);
+  const _onDismiss = useCallback(() => {
+    'worklet';
+
+    runOnJS(setModalVisibility)(false);
+  }, []);
+  const close = useCallback(() => {
+    'worklet';
+
+    visibility.value = withTiming(0, undefined, _onDismiss);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [_onDismiss]);
+  const open = useCallback(() => {
+    'worklet';
 
-  // TODO: revert adding this workaround once RN fixes https://github.com/facebook/react-native/issues/29455
-  onFadeDone = () => {
-    if (!this.state.modalVisibility) {
-      setTimeout(() => {
-        // unfortunately this is needed if a modal needs to open on iOS
-        this.props.onDialogDismissed?.(this.props);
-      }, 100);
+    visibility.value = withSpring(1);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(() => {
+    if (visible) {
+      setModalVisibility(true);
+    } else if (wasMeasured && modalVisibility) {
+      // Close when sending visible = false
+      close();
     }
-  };
-  _onDismiss = () => {
-    this.setState({
-      modalVisibility: false,
-      fadeOut: false
-    }, () => {
-      const props = this.props;
-      if (props.visible) {
-        props.onDismiss?.(props);
-      }
-      // Parity with iOS Modal's onDismiss
-      if (Constants.isAndroid) {
-        props.onDialogDismissed?.(props);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible, wasMeasured]);
+  useDidUpdate(() => {
+    if (wasMeasured) {
+      if (modalVisibility) {
+        open();
+      } else if (Constants.isAndroid) {
+        onDismiss?.();
       }
-    });
-  };
-  onDismiss = () => {
-    const fadeOut = Constants.isIOS && this.props.visible;
-    if (fadeOut) {
-      this.setState({
-        fadeOut
-      }, this._onDismiss);
-    } else {
-      this._onDismiss();
     }
-  };
-  hideDialogView = () => {
-    this.setState({
-      dialogVisibility: false
-    });
-  };
-  renderPannableHeader = directions => {
-    const {
-      renderPannableHeader,
-      pannableHeaderProps
-    } = this.props;
-    if (renderPannableHeader) {
-      return <PanListenerView directions={directions}>{renderPannableHeader(pannableHeaderProps)}</PanListenerView>;
-    }
-  };
-  getContainerType = () => {
-    const {
-      panDirection,
-      renderPannableHeader
-    } = this.props;
-    if (!panDirection || renderPannableHeader) {
-      return View;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [modalVisibility, wasMeasured]);
+  const alignmentStyle = useMemo(() => {
+    return {
+      flex: 1,
+      alignItems: 'center',
+      ...extractAlignmentsValues(props)
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const {
+    renderDialogContent,
+    containerProps,
+    containerStyle
+  } = useDialogContent({
+    showCloseButton,
+    close,
+    closeButtonProps,
+    containerStyle: propsContainerStyle,
+    containerProps: propsContainerProps,
+    headerProps,
+    children
+  });
+  const animatedStyle = useAnimatedStyle(() => {
+    if (isVertical) {
+      return {
+        transform: [{
+          translateY: getTranslationInterpolation(visibility.value)
+        }]
+      };
+    } else {
+      return {
+        transform: [{
+          translateX: getTranslationInterpolation(visibility.value)
+        }]
+      };
     }
-    return PanListenerView;
-  };
-  renderDialogView = () => {
-    const {
-      children,
-      panDirection = PanningProvider.Directions.DOWN,
-      containerStyle,
-      testID
-    } = this.props;
-    const {
-      dialogVisibility
-    } = this.state;
-    const Container = this.getContainerType();
-    return <View testID={testID} style={[this.styles.dialogViewSize]} pointerEvents="box-none">
-        <PanningProvider>
-          <DialogDismissibleView direction={panDirection} visible={dialogVisibility} onDismiss={this.onDismiss} containerStyle={this.styles.flexType} style={this.styles.flexType}>
-            <Container directions={[panDirection]} style={[this.styles.overflow, !Constants.isWeb && this.styles.flexType, containerStyle]}>
-              {this.renderPannableHeader([panDirection])}
-              {children}
-            </Container>
-          </DialogDismissibleView>
-        </PanningProvider>
-      </View>;
-  };
+  });
+  const style = useMemo(() => {
+    return [styles.defaultDialogStyle, {
+      backgroundColor: Colors.$backgroundDefault
+    }, containerStyle, disableAnimation ? undefined : animatedStyle, width ? {
+      width
+    } : undefined, height ? {
+      height
+    } : undefined];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [containerStyle, width, height]);
+  const shouldClose = event => {
+    'worklet';
 
-  // TODO: renderOverlay {_.invoke(this.props, 'renderOverlay')}
-  renderDialogContainer = () => {
-    const {
-      modalVisibility,
-      dialogVisibility,
-      fadeOut
-    } = this.state;
-    const {
-      useSafeArea,
-      bottom,
-      overlayBackgroundColor,
-      testID
-    } = this.props;
-    const addBottomSafeArea = Constants.isIphoneX && useSafeArea && bottom;
-    const bottomInsets = Constants.getSafeAreaInsets().bottom - 8; // TODO: should this be here or in the input style?
-    const onFadeDone = Constants.isIOS ? this.onFadeDone : undefined;
-    return <View useSafeArea={useSafeArea} style={[this.styles.centerHorizontal, this.styles.alignments, this.styles.container]} pointerEvents="box-none">
-        <OverlayFadingBackground testID={`${testID}.overlayFadingBackground`} modalVisibility={modalVisibility} dialogVisibility={dialogVisibility} overlayBackgroundColor={overlayBackgroundColor} onFadeDone={onFadeDone} fadeOut={fadeOut} />
-        {this.renderDialogView()}
-        {addBottomSafeArea && <View style={{
-        marginTop: bottomInsets
-      }} />}
-      </View>;
-  };
-  render = () => {
-    const {
-      modalVisibility
-    } = this.state;
-    const {
-      testID,
-      supportedOrientations,
-      accessibilityLabel,
-      ignoreBackgroundPress,
-      modalProps
-    } = this.props;
-    const onBackgroundPress = !ignoreBackgroundPress ? this.hideDialogView : undefined;
-    return <Modal testID={`${testID}.modal`} transparent visible={modalVisibility} animationType={'none'} onBackgroundPress={onBackgroundPress} onRequestClose={onBackgroundPress} supportedOrientations={supportedOrientations} accessibilityLabel={accessibilityLabel} {...modalProps}>
-        {this.renderDialogContainer()}
-      </Modal>;
-  };
-}
-function createStyles(props) {
-  const {
-    width = '90%',
-    height
-  } = props;
-  const flexType = height ? {
-    flex: 1
-  } : {
-    flex: 0
+    const wasPannedOverThreshold = Math.abs(getTranslationInterpolation(visibility.value)) >= Math.abs(hiddenLocation / 3);
+    let velocity;
+    switch (direction) {
+      case DialogDirectionsEnum.DOWN:
+      default:
+        velocity = event.velocityY;
+        break;
+      case DialogDirectionsEnum.UP:
+        velocity = -event.velocityY;
+        break;
+      case DialogDirectionsEnum.LEFT:
+        velocity = -event.velocityX;
+        break;
+      case DialogDirectionsEnum.RIGHT:
+        velocity = event.velocityX;
+        break;
+    }
+    const wasFlung = velocity >= THRESHOLD_VELOCITY;
+    return wasPannedOverThreshold || wasFlung;
   };
-  return StyleSheet.create({
-    dialogViewSize: {
-      width,
-      height: height ?? undefined
-    },
-    flexType,
-    container: {
-      flex: 1
-    },
-    centerHorizontal: {
-      alignItems: 'center'
-    },
-    centerContent: {
-      justifyContent: 'center'
-    },
-    overflow: {
-      overflow: 'hidden'
+  const panGesture = Gesture.Pan().onStart(event => {
+    initialTranslation.value = getTranslationReverseInterpolation(isVertical ? event.translationY : event.translationX) - visibility.value;
+  }).onUpdate(event => {
+    visibility.value = getTranslationReverseInterpolation(isVertical ? event.translationY : event.translationX) - initialTranslation.value;
+  }).onEnd(event => {
+    if (shouldClose(event)) {
+      close();
+    } else {
+      open();
     }
   });
-}
-export default asBaseComponent(Dialog);
+  useImperativeHandle(ref, () => ({
+    dismiss: close
+  }));
+  const renderDialog = () => <GestureDetector gesture={panGesture}>
+      <View {...containerProps} reanimated={!Constants.accessibility.isReduceMotionEnabled} style={style} onLayout={onLayout} ref={setRef} testID={testID}>
+        {renderDialogContent()}
+      </View>
+    </GestureDetector>;
+  const overlayStyle = useAnimatedStyle(() => {
+    return {
+      opacity: visibility.value,
+      backgroundColor: overlayBackgroundColor
+    };
+  }, [overlayBackgroundColor]);
+  const renderOverlayView = () => <View testID={`${testID}.overlayFadingBackground`} absF reanimated style={overlayStyle} pointerEvents="none" />;
+  return <Modal transparent animationType={'none'} {...otherModalProps} testID={`${testID}.modal`} useGestureHandlerRootView visible={modalVisibility} onBackgroundPress={ignoreBackgroundPress ? undefined : close} onRequestClose={ignoreBackgroundPress ? undefined : close} onDismiss={onDismiss}>
+      {renderOverlayView()}
+      <View useSafeArea={useSafeArea} pointerEvents={'box-none'} style={alignmentStyle}>
+        {renderDialog()}
+      </View>
+    </Modal>;
+};
+Dialog.displayName = 'Dialog';
+Dialog.directions = DialogDirectionsEnum;
+Dialog.Header = DialogHeader;
+const _Dialog = forwardRef(Dialog);
+hoistStatics(_Dialog, Dialog);
+export default asBaseComponent(_Dialog);
+const styles = StyleSheet.create({
+  defaultDialogStyle: {
+    marginBottom: Spacings.s5,
+    maxHeight: '60%',
+    width: 250,
+    borderRadius: BorderRadiuses.br20,
+    overflow: 'hidden'
+  }
+});

package/src/{incubator → components}/dialog/types.d.ts

@@ -1,7 +1,6 @@
 import { PropsWithChildren, ReactElement } from 'react';
 import { type DimensionValue, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
 import { AlignmentModifiers } from '../../commons/modifiers';
-import { DialogProps as DialogPropsOld } from '../../components/dialog';
 import { ButtonProps } from '../../components/button';
 import { ModalProps } from '../../components/modal';
 import { PanningDirections, PanningDirectionsEnum } from '../panView';
@@ -119,6 +118,13 @@ export interface _DialogProps extends AlignmentModifiers, Pick<ViewProps, 'useSa
      * Additional props for the modal.
      */
     modalProps?: ModalProps;
+    /**
+     * Disable animation (default is false)
+     * In some cases you might want to disable the animation (probably for Android only), this is when the dialog is scrollable and has touchable items in the scrollable area.
+     * This is a temporary solution for a reanimated + RN77\8 bug.
+     * See https://github.com/software-mansion/react-native-reanimated/issues/6659 and https://github.com/facebook/react-native/issues/49694
+     */
+    disableAnimation?: boolean;
     /**
      * Used to locate this view in end-to-end tests
      * The container has the unchanged id.
@@ -130,21 +136,3 @@ export interface _DialogProps extends AlignmentModifiers, Pick<ViewProps, 'useSa
     testID?: string;
 }
 export type DialogProps = PropsWithChildren<_DialogProps>;
-export interface _DialogPropsOld {
-    /**
-     * The props to pass to the dialog expandable container
-     */
-    dialogProps?: DialogPropsOld;
-    migrateDialog?: false;
-}
-export interface _DialogPropsNew {
-    /**
-     * The props to pass to the dialog expandable container
-     */
-    dialogProps?: DialogProps;
-    /**
-     * Migrate the Dialog to DialogNew (make sure you use only new props in dialogProps)
-     */
-    migrateDialog: true;
-}
-export type DialogMigrationProps = _DialogPropsOld | _DialogPropsNew;

package/src/{incubator → components}/dialog/types.js

@@ -1,5 +1,3 @@
 import { PanningDirectionsEnum } from "../panView";
 const DialogDirectionsEnum = PanningDirectionsEnum;
-export { DialogDirectionsEnum };
-
-// For migration purposes
+export { DialogDirectionsEnum };

package/src/{incubator → components}/dialog/useDialogContent.d.ts

@@ -5,7 +5,7 @@ interface InternalDialogCloseButtonProps extends PropsWithChildren<DialogCloseBu
 }
 declare const useDialogContent: (props: InternalDialogCloseButtonProps) => {
     renderDialogContent: () => React.JSX.Element;
-    containerStyle: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<import("react-native").ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<import("react-native").ViewStyle>> | (import("react-native").StyleProp<import("react-native").ViewStyle> | {
+    containerStyle: false | "" | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<import("react-native").ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<import("react-native").ViewStyle>> | (import("react-native").StyleProp<import("react-native").ViewStyle> | {
         backgroundColor: string;
     })[] | null | undefined;
     containerProps: Omit<import("../../components/view").ViewProps, "style" | "testID" | "ref" | "onLayout" | "animated" | "reanimated"> | undefined;

package/src/components/drawer/Swipeable.js

@@ -26,8 +26,7 @@ class Swipeable extends Component {
   static defaultProps = {
     friction: 1,
     overshootFriction: 1,
-    useNativeAnimations: false,
-    // issue in iPhone5
+    useNativeAnimations: true,
     fullLeftThreshold: 0.45,
     fullRightThreshold: 0.45
   };

package/src/components/drawer/index.js

@@ -220,30 +220,33 @@ class Drawer extends PureComponent {
       outputRange,
       extrapolate: 'clamp'
     });
-    return <RectButton key={index} testID={item.testID} style={[styles.action, item.style, {
-      backgroundColor: item.background || DEFAULT_BG,
-      width: item.width,
-      minWidth: itemsMinWidth
-    }]} onPress={() => this.onActionPress(item)}>
-        {item.customElement}
-        {!item.customElement && item.icon && <Animated.Image source={item.icon} style={[styles.actionIcon, {
-        width: itemsIconSize,
-        height: itemsIconSize,
-        tintColor: item.iconColor || itemsTintColor,
-        opacity,
-        transform: [{
-          scale
-        }]
-      }]} />}
-        {!item.customElement && item.text && <Animated.Text style={[styles.actionText, {
-        color: item.textColor || itemsTintColor,
-        opacity,
-        transform: [{
-          scale
-        }]
-      }, itemsTextStyle]} accessibilityElementsHidden importantForAccessibility="no-hide-descendants" accessible={false}>
-            {item.text}
-          </Animated.Text>}
+    return <RectButton key={index} testID={item.testID} onPress={() => this.onActionPress(item)}>
+        <View style={[styles.action, item.style, {
+        backgroundColor: item.background || DEFAULT_BG,
+        height: '100%',
+        width: item.width,
+        minWidth: itemsMinWidth
+      }]}>
+          {item.customElement}
+          {!item.customElement && item.icon && <Animated.Image source={item.icon} style={[styles.actionIcon, {
+          width: itemsIconSize,
+          height: itemsIconSize,
+          tintColor: item.iconColor || itemsTintColor,
+          opacity,
+          transform: [{
+            scale
+          }]
+        }]} />}
+          {!item.customElement && item.text && <Animated.Text style={[styles.actionText, {
+          color: item.textColor || itemsTintColor,
+          opacity,
+          transform: [{
+            scale
+          }]
+        }, itemsTextStyle]} accessibilityElementsHidden importantForAccessibility="no-hide-descendants" accessible={false}>
+              {item.text}
+            </Animated.Text>}
+        </View>
       </RectButton>;
   };
   render() {
@@ -255,7 +258,7 @@ class Drawer extends PureComponent {
       onToggleSwipeLeft,
       ...others
     } = this.props;
-    return <GestureHandlerRootView>
+    return <GestureHandlerRootView style={styles.container}>
         <Swipeable {...others} ref={this._swipeableRow} friction={1} containerStyle={style} animationOptions={this.animationOptions} renderLeftActions={this.leftRender} renderRightActions={this.rightRender} rightActionsContainerStyle={this.getRightActionsContainerStyle(rightItems, leftItem)} leftActionsContainerStyle={this.getLeftActionsContainerStyle(leftItem, rightItems)} onSwipeableWillOpen={this.onSwipeableWillOpen} onSwipeableWillClose={this.onSwipeableWillClose} onToggleSwipeLeft={onToggleSwipeLeft && this.onToggleSwipeLeft}>
           <View accessible accessibilityActions={this.getAccessibilityActions()} onAccessibilityAction={this.onAccessibilityAction} {...extractAccessibilityProps(this.props)}>
             {children}
@@ -266,6 +269,9 @@ class Drawer extends PureComponent {
 }
 export default asBaseComponent(Drawer);
 const styles = StyleSheet.create({
+  container: {
+    flex: 0
+  },
   leftAction: {
     flex: 1,
     justifyContent: 'center',

package/src/components/fadedScrollView/index.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useImperativeHandle } from 'react';
-import { ScrollView as RNScrollView } from 'react-native';
+import { ScrollView as RNScrollView, StyleSheet } from 'react-native';
 import { ScrollView as GestureScrollView, GestureHandlerRootView } from 'react-native-gesture-handler';
 import Fader from "../fader";
 import useScrollEnabler from "../../hooks/useScrollEnabler";
@@ -60,7 +60,7 @@ const FadedScrollView = props => {
     isScrollEnabled
   }));
   if (children) {
-    return <GestureHandlerRootView>
+    return <GestureHandlerRootView style={styles.container}>
         <ScrollView scrollEventThrottle={16} decelerationRate={'fast'} {...others} horizontal={horizontal} scrollEnabled={scrollEnabled} onContentSizeChange={_onContentSizeChange} onLayout={_onLayout} onScroll={onScroll}
       // @ts-expect-error
       ref={scrollViewRef}>
@@ -72,5 +72,10 @@ const FadedScrollView = props => {
   }
   return null;
 };
+const styles = StyleSheet.create({
+  container: {
+    flex: 0
+  }
+});
 FadedScrollView.displayName = 'IGNORE';
 export default forwardRef(FadedScrollView);

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

@@ -100,7 +100,7 @@ export type FeatureHighlightProps = {
 interface State {
     fadeAnim: Animated.Value;
     contentTopPosition?: number;
-    node?: number | null;
+    node?: number;
     getTarget?: () => any;
 }
 /**

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

@@ -3,20 +3,12 @@ import { HintPositions, HintProps } from './types';
 declare const Hint: {
     (props: HintProps): string | number | true | React.JSX.Element | Iterable<React.ReactNode> | null;
     displayName: string;
-    defaultProps: {
-        position: HintPositions;
-        useModal: boolean;
-    };
     positions: typeof HintPositions;
 };
 export { HintProps, Hint };
 declare const _default: React.ForwardRefExoticComponent<HintProps & React.RefAttributes<any>> & {
     (props: HintProps): string | number | true | React.JSX.Element | Iterable<React.ReactNode> | null;
     displayName: string;
-    defaultProps: {
-        position: HintPositions;
-        useModal: boolean;
-    };
     positions: typeof HintPositions;
 };
 export default _default;