react-native-ui-lib 7.45.0-snapshot.7266 → 7.46.0

package/src/incubator/dialog/index.js

@@ -0,0 +1,218 @@
+import React, { useMemo, useCallback, useImperativeHandle, forwardRef, useEffect, useState } from 'react';
+import { StyleSheet } from 'react-native';
+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 useHiddenLocation from "../hooks/useHiddenLocation";
+import DialogHeader from "./DialogHeader";
+import useDialogContent from "./useDialogContent";
+import { DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps, DialogMigrationProps } from "./types";
+export { DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps, DialogMigrationProps };
+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,
+    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)
+
+  const {
+    setRef,
+    onLayout,
+    hiddenLocation: _hiddenLocation
+  } = useHiddenLocation();
+  const hiddenLocation = _hiddenLocation[direction];
+  const wasMeasured = _hiddenLocation.wasMeasured;
+  const isVertical = useMemo(() => {
+    'worklet';
+
+    return direction === DialogDirectionsEnum.DOWN || direction === DialogDirectionsEnum.UP;
+  }, [direction]);
+  const getTranslationInterpolation = useCallback(value => {
+    'worklet';
+
+    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';
+
+    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();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible, wasMeasured]);
+  useDidUpdate(() => {
+    if (wasMeasured) {
+      if (modalVisibility) {
+        open();
+      } else if (Constants.isAndroid) {
+        onDismiss?.();
+      }
+    }
+    // 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)
+        }]
+      };
+    }
+  });
+  const style = useMemo(() => {
+    return [styles.defaultDialogStyle, {
+      backgroundColor: Colors.$backgroundDefault
+    }, containerStyle, animatedStyle, width ? {
+      width
+    } : undefined, height ? {
+      height
+    } : undefined];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [containerStyle, width, height]);
+  const shouldClose = event => {
+    'worklet';
+
+    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;
+  };
+  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();
+    }
+  });
+  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 = 'Incubator.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/{components → incubator}/dialog/types.d.ts

@@ -1,6 +1,7 @@
 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';
@@ -129,3 +130,21 @@ 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/{components → incubator}/dialog/types.js

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

package/src/{components → incubator}/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/incubator/expandableOverlay/ExpandableOverlay.driver.js

@@ -1,5 +1,5 @@
 import { ModalDriver } from "../../components/modal/Modal.driver.new";
-import { DialogDriver } from "../../components/dialog/Dialog.driver.new";
+import { DialogDriver } from "../dialog/Dialog.driver.new";
 import { useComponentDriver } from "../../testkit/new/Component.driver";
 import { usePressableDriver } from "../../testkit/new/usePressable.driver";
 export const ExpandableOverlayDriver = (props, useDialog) => {

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

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import { TouchableOpacityProps } from '../../components/touchableOpacity';
 import { ModalProps, ModalTopBarProps } from '../../components/modal';
-import { DialogProps } from '../../components/dialog';
+import { DialogMigrationProps } from '../dialog';
 export interface ExpandableOverlayMethods {
     openExpandable: () => void;
     closeExpandable: () => void;
@@ -10,7 +10,7 @@ export interface ExpandableOverlayMethods {
 export interface RenderCustomOverlayProps extends ExpandableOverlayMethods {
     visible: boolean;
 }
-export type ExpandableOverlayProps = TouchableOpacityProps & PropsWithChildren<{
+export type ExpandableOverlayProps = TouchableOpacityProps & DialogMigrationProps & PropsWithChildren<{
     /**
      * The content to render inside the expandable modal/dialog
      */
@@ -19,10 +19,6 @@ export type ExpandableOverlayProps = TouchableOpacityProps & PropsWithChildren<{
      * Whether to use a dialog as expandable container (by default the container will be a full screen modal)
      */
     useDialog?: boolean;
-    /**
-     *  The props to pass to the dialog expandable container
-     */
-    dialogProps?: DialogProps;
     /**
      * The props to pass to the modal expandable container
      */
@@ -44,40 +40,5 @@ export type ExpandableOverlayProps = TouchableOpacityProps & PropsWithChildren<{
      */
     disabled?: boolean;
 }>;
-declare const _default: React.ForwardRefExoticComponent<TouchableOpacityProps & {
-    /**
-     * The content to render inside the expandable modal/dialog
-     */
-    expandableContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-    /**
-     * Whether to use a dialog as expandable container (by default the container will be a full screen modal)
-     */
-    useDialog?: boolean | undefined;
-    /**
-     *  The props to pass to the dialog expandable container
-     */
-    dialogProps?: DialogProps | undefined;
-    /**
-     * The props to pass to the modal expandable container
-     */
-    modalProps?: ModalProps | undefined;
-    /**
-     * Whether to render a modal top bar (relevant only for modal)
-     */
-    showTopBar?: boolean | undefined;
-    /**
-     * The modal top bar props to pass on
-     */
-    topBarProps?: ModalTopBarProps | undefined;
-    /**
-     * A custom overlay to render instead of Modal or Dialog components
-     */
-    renderCustomOverlay?: ((props: RenderCustomOverlayProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined) | undefined;
-    /**
-     * Disabled opening expandable overlay
-     */
-    disabled?: boolean | undefined;
-} & {
-    children?: React.ReactNode;
-} & React.RefAttributes<ExpandableOverlayMethods>>;
+declare const _default: React.ForwardRefExoticComponent<ExpandableOverlayProps & React.RefAttributes<ExpandableOverlayMethods>>;
 export default _default;

package/src/incubator/expandableOverlay/index.js

@@ -3,7 +3,8 @@ import { AccessibilityInfo, findNodeHandle } from 'react-native';
 import TouchableOpacity from "../../components/touchableOpacity";
 import View from "../../components/view";
 import Modal from "../../components/modal";
-import Dialog from "../../components/dialog";
+import DialogOld from "../../components/dialog";
+import DialogNew from "../dialog";
 import { Colors } from "../../style";
 const ExpandableOverlay = (props, ref) => {
   const {
@@ -12,6 +13,7 @@ const ExpandableOverlay = (props, ref) => {
     useDialog,
     modalProps,
     dialogProps,
+    migrateDialog,
     showTopBar,
     topBarProps,
     renderCustomOverlay,
@@ -51,6 +53,7 @@ const ExpandableOverlay = (props, ref) => {
       </Modal>;
   };
   const renderDialog = () => {
+    const Dialog = migrateDialog ? DialogNew : DialogOld;
     return <Dialog testID={`${testID}.overlay`} {...dialogProps} visible={visible} onDismiss={closeExpandable}>
         {expandableContent}
       </Dialog>;

package/src/{hooks/useHiddenLocation/index.d.ts → incubator/hooks/useHiddenLocation.d.ts}

@@ -1,6 +1,6 @@
 import { RefCallback } from 'react';
 import { View, LayoutChangeEvent } from 'react-native';
-import { PanningDirectionsEnum } from '../../components/panView';
+import { PanningDirectionsEnum } from '../panView';
 type HiddenLocationRecord = Record<PanningDirectionsEnum, number>;
 export interface HiddenLocation extends HiddenLocationRecord {
     wasMeasured: boolean;

package/src/{hooks/useHiddenLocation/index.web.d.ts → incubator/hooks/useHiddenLocation.web.d.ts}

@@ -1,6 +1,6 @@
 import { RefCallback } from 'react';
 import { View, LayoutChangeEvent } from 'react-native';
-import { PanningDirectionsEnum } from '../../components/panView';
+import { PanningDirectionsEnum } from '../panView';
 type HiddenLocationRecord = Record<PanningDirectionsEnum, number>;
 export interface HiddenLocation extends HiddenLocationRecord {
     wasMeasured: boolean;

package/src/incubator/index.d.ts

@@ -3,6 +3,8 @@ export { default as ExpandableOverlay, ExpandableOverlayProps, ExpandableOverlay
 export { default as TextField, TextFieldProps, FieldContextType, TextFieldMethods, TextFieldRef, TextFieldValidationMessagePosition, TextFieldValidator } from '../components/textField';
 export { default as Toast, ToastProps, ToastPresets } from './toast';
 export { default as TouchableOpacity, TouchableOpacityProps } from './TouchableOpacity';
+export { default as PanView, PanViewProps, PanViewDirections, PanViewDismissThreshold } from './panView';
 export { default as Slider, SliderRef, SliderProps } from './slider';
+export { default as Dialog, DialogProps, DialogHeaderProps, DialogStatics, DialogImperativeMethods } from './dialog';
 export { default as ChipsInput, ChipsInputProps, ChipsInputChangeReason, ChipsInputChipProps } from '../components/chipsInput';
 export { default as WheelPicker, WheelPickerProps, WheelPickerItemProps, WheelPickerAlign, WheelPickerItemValue } from '../components/WheelPicker';

package/src/incubator/index.js

@@ -4,7 +4,9 @@ export { default as ExpandableOverlay, ExpandableOverlayProps, ExpandableOverlay
 export { default as TextField, TextFieldProps, FieldContextType, TextFieldMethods, TextFieldRef, TextFieldValidationMessagePosition, TextFieldValidator } from "../components/textField";
 export { default as Toast, ToastProps, ToastPresets } from "./toast";
 export { default as TouchableOpacity, TouchableOpacityProps } from "./TouchableOpacity";
+export { default as PanView, PanViewProps, PanViewDirections, PanViewDismissThreshold } from "./panView";
 export { default as Slider, SliderRef, SliderProps } from "./slider";
+export { default as Dialog, DialogProps, DialogHeaderProps, DialogStatics, DialogImperativeMethods } from "./dialog";
 // TODO: delete exports after fully removing from private
 export { default as ChipsInput, ChipsInputProps, ChipsInputChangeReason, ChipsInputChipProps } from "../components/chipsInput";
 export { default as WheelPicker, WheelPickerProps, WheelPickerItemProps, WheelPickerAlign, WheelPickerItemValue } from "../components/WheelPicker";

package/src/{components → incubator}/panView/index.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import { ViewProps } from '../view';
+import { ViewProps } from '../../components/view';
 import { PanningDirections, PanningDirectionsEnum } from './panningUtil';
-import { PanGestureProps, PanViewDirections, PanViewDirectionsEnum, PanViewDismissThreshold } from './usePanGesture';
-export { PanningDirections, PanningDirectionsEnum, PanViewDirections, PanViewDirectionsEnum, PanViewDismissThreshold };
+import { PanGestureProps, PanViewDirections, PanViewDirectionsEnum, PanViewDismissThreshold, DEFAULT_DIRECTIONS, DEFAULT_ANIMATION_CONFIG } from './usePanGesture';
+export { PanningDirections, PanningDirectionsEnum, PanViewDirections, PanViewDirectionsEnum, PanViewDismissThreshold, DEFAULT_DIRECTIONS, DEFAULT_ANIMATION_CONFIG };
 export interface PanViewProps extends Omit<PanGestureProps, 'hiddenLocation'>, ViewProps {
     /**
      * Add a style to the container

package/src/{components → incubator}/panView/index.js

@@ -2,11 +2,11 @@ import React from 'react';
 import { useAnimatedStyle } from 'react-native-reanimated';
 import { GestureDetector, gestureHandlerRootHOC } from 'react-native-gesture-handler';
 import { asBaseComponent } from "../../commons/new";
-import View from "../view";
-import useHiddenLocation from "../../hooks/useHiddenLocation";
+import View from "../../components/view";
+import useHiddenLocation from "../hooks/useHiddenLocation";
 import { PanningDirections, PanningDirectionsEnum } from "./panningUtil";
-import usePanGesture, { PanViewDirections, PanViewDirectionsEnum, PanViewDismissThreshold, DEFAULT_DIRECTIONS } from "./usePanGesture";
-export { PanningDirections, PanningDirectionsEnum, PanViewDirections, PanViewDirectionsEnum, PanViewDismissThreshold };
+import usePanGesture, { PanViewDirections, PanViewDirectionsEnum, PanViewDismissThreshold, DEFAULT_DIRECTIONS, DEFAULT_ANIMATION_CONFIG } from "./usePanGesture";
+export { PanningDirections, PanningDirectionsEnum, PanViewDirections, PanViewDirectionsEnum, PanViewDismissThreshold, DEFAULT_DIRECTIONS, DEFAULT_ANIMATION_CONFIG };
 const PanView = props => {
   const {
     directions = DEFAULT_DIRECTIONS,

package/src/{components → incubator}/panView/usePanGesture.d.ts

@@ -1,5 +1,5 @@
 import { PanningDirections, PanningDirectionsEnum, PanningDismissThreshold } from './panningUtil';
-import type { HiddenLocation } from '../../hooks/useHiddenLocation';
+import type { HiddenLocation } from '../hooks/useHiddenLocation';
 export type PanViewDirections = PanningDirections;
 export declare const PanViewDirectionsEnum: typeof PanningDirectionsEnum;
 export type PanViewDismissThreshold = PanningDismissThreshold;

package/src/incubator/toast/Toast.driver.new.d.ts

@@ -46,6 +46,7 @@ export declare const ToastDriver: (props: ComponentProps) => {
         getLabelStyle: () => import("react-native/types").TextStyle;
         getIconStyle: () => any;
         getIcon: () => import("../../testkit/new/Component.driver").ComponentDriverResult;
+        isDisabled: () => boolean;
     };
     getElement: () => import("react-test-renderer").ReactTestInstance;
     queryElement: () => import("react-test-renderer").ReactTestInstance | undefined;

package/src/incubator/toast/index.js

@@ -7,7 +7,7 @@ import View from "../../components/view";
 import Text from "../../components/text";
 import Icon from "../../components/icon";
 import Button from "../../components/button";
-import PanView from "../../components/panView";
+import PanView from "../panView";
 import { ToastProps, ToastPresets } from "./types";
 import useToastTimer from "./helpers/useToastTimer";
 import useToastPresets from "./helpers/useToastPresets";

package/src/index.d.ts

@@ -6,7 +6,7 @@ export * from 'uilib-native';
 export { asBaseComponent, Config, Constants, forwardRef, withScrollEnabler, WithScrollEnablerProps, withScrollReached, WithScrollReachedProps, UIComponent, BaseComponentInjectedProps, ForwardRefInjectedProps, ContainerModifiers, MarginModifiers, PaddingModifiers, TypographyModifiers, ColorsModifiers, BackgroundColorModifier } from './commons/new';
 export { BaseComponent, PureBaseComponent } from './commons';
 import * as Incubator from './incubator';
-export { ExpandableOverlayProps, ExpandableOverlayMethods, ToastProps, ToastPresets } from './incubator';
+export { ExpandableOverlayProps, ExpandableOverlayMethods, ToastProps, ToastPresets, PanViewProps, PanViewDirections, PanViewDismissThreshold } from './incubator';
 import * as Hooks from './hooks';
 import * as Modifiers from './commons/modifiers';
 export { default as LogService } from './services/LogService';
@@ -32,7 +32,7 @@ export { default as ColorSwatch, ColorSwatchProps, ColorInfo } from './component
 export { default as ConnectionStatusBar, ConnectionStatusBarProps } from './components/connectionStatusBar';
 export { default as Dash, DashProps } from './components/dash';
 export { default as DateTimePicker, DateTimePickerProps, DateTimePickerMode } from './components/dateTimePicker';
-export { default as Dialog, DialogProps, DialogHeaderProps, DialogStatics, DialogImperativeMethods, DialogDirections, DialogDirectionsEnum } from './components/dialog';
+export { default as Dialog, DialogProps, DialogDirections, DialogDirectionsEnum } from './components/dialog';
 export { default as Drawer, DrawerProps, DrawerItemProps } from './components/drawer';
 export { default as ExpandableSection, ExpandableSectionProps } from './components/expandableSection';
 export { default as Fader, FaderProps, FaderPosition } from './components/fader';
@@ -60,8 +60,14 @@ export { default as Modal, ModalProps, ModalTopBarProps } from './components/mod
 export { default as NumberInput, NumberInputProps, NumberInputData } from './components/numberInput';
 export { default as Overlay, OverlayTypes } from './components/overlay';
 export { default as PageControl, PageControlProps } from './components/pageControl';
+export { default as PanDismissibleView, PanDismissibleViewProps, DismissibleAnimationProps } from './components/panningViews/panDismissibleView';
+export { default as PanGestureView, PanGestureViewProps } from './components/panningViews/panGestureView';
+export { default as PanListenerView, PanListenerViewProps } from './components/panningViews/panListenerView';
+export { default as PanningContext } from './components/panningViews/panningContext';
+export { default as PanningProvider, PanningDirections, PanLocationProps, PanAmountsProps, PanDirectionsProps } from './components/panningViews/panningProvider';
+export { default as PanResponderView, PanResponderViewProps } from './components/panningViews/panResponderView';
+export { default as asPanViewConsumer } from './components/panningViews/asPanViewConsumer';
 export { default as Picker, PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods, PickerSelectionStatusProps } from './components/picker';
-export { default as PanView, PanViewProps, PanningDirections, PanningDirectionsEnum, PanViewDirections, PanViewDirectionsEnum, PanViewDismissThreshold } from './components/panView';
 export { default as PieChart, type PieChartProps, PieChartSegmentProps } from './components/pieChart';
 export { default as ProgressBar, ProgressBarProps } from './components/progressBar';
 export { default as ProgressiveImage, ProgressiveImageProps } from './components/progressiveImage';
@@ -73,6 +79,7 @@ export { default as ScrollBar, ScrollBarProps } from './components/scrollBar';
 export { default as SearchInput, SearchInputProps, SearchInputRef } from './components/searchInput';
 export { default as SectionsWheelPicker, SectionsWheelPickerProps } from './components/sectionsWheelPicker';
 export { default as SegmentedControl, SegmentedControlProps, SegmentedControlItemProps, SegmentedControlPreset } from './components/segmentedControl';
+export { default as SharedTransition } from './components/sharedTransition';
 export { default as SkeletonView, SkeletonViewProps } from './components/skeletonView';
 export { default as SortableGridList, SortableGridListProps } from './components/sortableGridList';
 export { default as SortableList, SortableListProps, SortableListItemProps } from './components/sortableList';