react-native-ui-lib 7.43.0-snapshot.7149 → 7.43.0-snapshot.7172

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.43.0-snapshot.7149",
+  "version": "7.43.0-snapshot.7172",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
@@ -66,7 +66,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.17.9",
     "@babel/preset-env": "^7.20.0",
     "@babel/preset-react": "^7.10.1",
-    "@babel/runtime": "^7.20.0",
+    "@babel/runtime": "^7.26.10",
     "@formatjs/intl-datetimeformat": "^6.0.3",
     "@formatjs/intl-getcanonicallocales": "^2.0.2",
     "@formatjs/intl-locale": "^3.0.3",

package/panningViews.d.ts

@@ -0,0 +1,2 @@
+import {PanningViews} from './src';
+export default PanningViews;

package/panningViews.js

@@ -0,0 +1 @@
+module.exports = require('./src/components/panningViews').default;

package/src/commons/Constants.d.ts

@@ -43,6 +43,7 @@ declare const constants: {
     addDimensionsEventListener: (callback: any) => import("react-native").EmitterSubscription;
     removeDimensionsEventListener: (callback: any) => void;
     readonly accessibility: {
+        isReduceMotionEnabled: boolean;
         isScreenReaderEnabled: boolean;
     };
     backspaceKey: string;

package/src/commons/Constants.js

@@ -44,16 +44,20 @@ export function updateConstants(dimensions) {
   setStatusBarHeight();
 }
 const accessibility = {
+  isReduceMotionEnabled: false,
   isScreenReaderEnabled: false
 };
+function handleReduceMotionChanged(isReduceMotionEnabled) {
+  accessibility.isReduceMotionEnabled = isReduceMotionEnabled;
+}
 function handleScreenReaderChanged(isScreenReaderEnabled) {
   accessibility.isScreenReaderEnabled = isScreenReaderEnabled;
 }
+AccessibilityInfo.addEventListener('reduceMotionChanged', handleReduceMotionChanged);
 AccessibilityInfo.addEventListener('screenReaderChanged', handleScreenReaderChanged);
-function setAccessibility() {
-  AccessibilityInfo.isScreenReaderEnabled().then(isScreenReaderEnabled => {
-    accessibility.isScreenReaderEnabled = isScreenReaderEnabled;
-  });
+async function setAccessibility() {
+  accessibility.isReduceMotionEnabled = await AccessibilityInfo.isReduceMotionEnabled();
+  accessibility.isScreenReaderEnabled = await AccessibilityInfo.isScreenReaderEnabled();
 }
 setAccessibility();
 const constants = {

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

@@ -1,9 +1,14 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
+import { DialogProps } from '../dialog';
 import { ButtonProps } from '../button';
-import { type DialogProps } from '../dialog';
+import { DialogProps as IncubatorDialogProps } from '../../incubator';
 type ActionSheetOnOptionPress = (index: number) => void;
 type ActionSheetProps = {
+    /**
+     * Migrate to the Incubator.Dialog component
+     */
+    migrateDialog?: boolean;
     /**
      * Whether to show the action sheet or not
      */
@@ -63,6 +68,11 @@ type ActionSheetProps = {
      * Note: you will need to call onOptionPress so the option's onPress will be called
      */
     renderAction?: (option: ButtonProps, index: number, onOptionPress: ActionSheetOnOptionPress) => JSX.Element;
+    /**
+     * @deprecated
+     * Called once the modal has been dismissed completely
+     */
+    onModalDismissed?: DialogProps['onDialogDismissed'];
     /**
      * Whether or not to handle SafeArea
      */
@@ -70,7 +80,7 @@ type ActionSheetProps = {
     /**
      * Additional props to send to the Dialog
      */
-    dialogProps?: Omit<DialogProps, 'useSafeArea' | 'testID' | 'containerStyle' | 'visible' | 'onDismiss' | 'onDialogDismissed'> | DialogProps;
+    dialogProps?: Omit<DialogProps, 'useSafeArea' | 'testID' | 'containerStyle' | 'visible' | 'onDismiss' | 'onDialogDismissed'> | IncubatorDialogProps;
     /**
      * testID for e2e tests
      */

package/src/components/actionSheet/index.js

@@ -6,12 +6,15 @@ import React, { Component } from 'react';
 import { ActionSheetIOS, StyleSheet } from 'react-native';
 import { Colors } from "../../style";
 import { asBaseComponent, Constants } from "../../commons/new";
+import Dialog from "../dialog";
 import View from "../view";
 import Text from "../text";
 import Image from "../image";
 //@ts-ignore
 import ListItem from "../listItem";
-import Dialog from "../dialog";
+import PanningProvider from "../panningViews/panningProvider";
+import { Dialog as IncubatorDialog } from "../../incubator";
+import { LogService } from "../../services";
 const VERTICAL_PADDING = 8;
 /**
  * @description: Cross platform Action Sheet, with a support for native iOS solution
@@ -127,19 +130,55 @@ class ActionSheet extends Component {
         {this.renderActions()}
       </View>;
   }
-  render() {
+  renderOldDialog() {
     const {
+      useNativeIOS,
       visible,
       onDismiss,
       dialogStyle,
+      onModalDismissed,
       testID,
       useSafeArea,
       dialogProps
     } = this.props;
-    return <Dialog bottom centerH width="100%" direction={Dialog.directions.DOWN} {...dialogProps} useSafeArea={useSafeArea} testID={testID} containerStyle={[styles.incubatorDialog, dialogStyle]} visible={visible} onDismiss={onDismiss}>
+    if (Constants.isIOS && useNativeIOS) {
+      return null;
+    }
+    return <Dialog bottom centerH width="100%" panDirection={PanningProvider.Directions.DOWN} {...dialogProps} useSafeArea={useSafeArea} testID={testID} containerStyle={[styles.dialog, dialogStyle]} visible={visible} onDismiss={onDismiss} onDialogDismissed={onModalDismissed}>
         {this.renderSheet()}
       </Dialog>;
   }
+  renderNewDialog() {
+    const {
+      visible,
+      onDismiss,
+      dialogStyle,
+      onModalDismissed,
+      testID,
+      useSafeArea,
+      dialogProps
+    } = this.props;
+    if (onModalDismissed) {
+      LogService.deprecationWarn({
+        component: 'ActionSheet',
+        oldProp: 'onModalDismissed',
+        newProp: 'onDismiss'
+      });
+    }
+    return <IncubatorDialog bottom centerH width="100%" direction={PanningProvider.Directions.DOWN} {...dialogProps} useSafeArea={useSafeArea} testID={testID} containerStyle={[styles.incubatorDialog, dialogStyle]} visible={visible} onDismiss={onDismiss}>
+        {this.renderSheet()}
+      </IncubatorDialog>;
+  }
+  render() {
+    const {
+      migrateDialog
+    } = this.props;
+    if (migrateDialog) {
+      return this.renderNewDialog();
+    } else {
+      return this.renderOldDialog();
+    }
+  }
 }
 export default asBaseComponent(ActionSheet);
 const styles = StyleSheet.create({

package/src/components/chip/index.js

@@ -1,5 +1,4 @@
-import _get from "lodash/get";
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import Assets from "../../assets";
 import { asBaseComponent } from "../../commons/new";
@@ -57,8 +56,8 @@ const Chip = ({
   }, [badgeProps]);
   const renderOnDismiss = useCallback(() => {
     return <TouchableOpacity style={[getMargins('dismiss'), dismissContainerStyle]} onPress={onDismiss} hitSlop={{
-      top: 10,
-      bottom: 10,
+      top: 16,
+      bottom: 16,
       left: 10,
       right: 10
     }} testID={`${testID}.dismiss`}>
@@ -138,23 +137,47 @@ const Chip = ({
       }
     }
   }, [avatarProps, badgeProps, iconSource, rightIconSource, onDismiss]);
-  const getContainerSize = useCallback(() => {
-    const width = useSizeAsMinimum ? 'minWidth' : 'width';
-    const height = useSizeAsMinimum ? 'minHeight' : 'height';
-    return typeof size === 'object' ? {
-      [width]: _get(size, 'width'),
-      [height]: _get(size, 'height')
-    } : {
-      [width]: size,
-      [height]: size
+  const chipSize = useMemo(() => {
+    const width = typeof size === 'object' ? size.width : size;
+    const height = typeof size === 'object' ? size.height : size;
+    return {
+      width,
+      height
     };
   }, [size]);
+  const containerSizeStyle = useMemo(() => {
+    const {
+      width,
+      height
+    } = chipSize;
+    return useSizeAsMinimum ? {
+      minWidth: width,
+      minHeight: height
+    } : {
+      width,
+      height
+    };
+  }, [chipSize]);
   const Container = onPress ? TouchableOpacity : View;
+  const hitSlop = useMemo(() => {
+    const {
+      width = 48,
+      height = 48
+    } = chipSize;
+    const verticalHitSlop = Math.max(0, (48 - height) / 2);
+    const horizontalHitSlop = Math.max(0, (48 - width) / 2);
+    return {
+      top: verticalHitSlop,
+      bottom: verticalHitSlop,
+      left: horizontalHitSlop,
+      right: horizontalHitSlop
+    };
+  }, [chipSize]);
   return <Container activeOpacity={1} onPress={onPress} style={[styles.container, {
     backgroundColor
   }, {
     borderRadius
-  }, containerStyle, getContainerSize()]} testID={testID} {...others}>
+  }, containerStyle, containerSizeStyle]} testID={testID} hitSlop={hitSlop} {...others}>
       {avatarProps && renderAvatar()}
       {iconSource && renderIcon('left')}
       {leftElement}

package/src/components/colorPicker/ColorPickerDialog.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import { DialogProps } from '../dialog';
+import { DialogProps } from '../../incubator/dialog';
 export interface ColorPickerDialogProps extends DialogProps {
     /**
      * The initial color to pass the picker dialog

package/src/components/colorPicker/ColorPickerDialog.js

@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { LayoutAnimation, StyleSheet, Keyboard } from 'react-native';
 import { Constants, asBaseComponent } from "../../commons/new";
 import { Colors } from "../../style";
-import Dialog from "../dialog";
+import Dialog from "../../incubator/dialog";
 import { getColorValue, getValidColorString, getTextColor, BORDER_RADIUS } from "./ColorPickerPresenter";
 import ColorPickerDialogHeader from "./ColorPickerDialogHeader";
 import ColorPickerPreview from "./ColorPickerPreview";

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

@@ -2,11 +2,11 @@ import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { BaseComponentInjectedProps } from '../../commons/new';
 import { TextFieldProps } from '../textField';
-import type { DialogProps } from '../dialog';
+import type { DialogMigrationProps } from '../../incubator/dialog';
 import { ButtonProps } from '../button';
 import { OldApiProps } from './useOldApi';
 export type DateTimePickerMode = 'date' | 'time';
-export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | 'onChange'> & {
+export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | 'onChange'> & DialogMigrationProps & {
     /**
      * The type of picker to display ('date' or 'time')
      */
@@ -15,10 +15,6 @@ export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | '
      * The initial value to set the picker to. Defaults to device's date / time
      */
     value?: Date;
-    /**
-     *  The props to pass to the dialog expandable container
-     */
-    dialogProps?: DialogProps;
     /**
      * The onChange callback
      */
@@ -96,6 +92,7 @@ export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | '
      */
     cancelButtonProps?: ButtonProps;
 };
+type DateTimePickerPropsInternal = DateTimePickerProps & BaseComponentInjectedProps;
 /**
  * @description: Date and Time Picker Component that wraps RNDateTimePicker for date and time modes.
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DateTimePickerScreen.tsx
@@ -104,185 +101,7 @@ export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | '
  * @extendsLink: https://github.com/react-native-community/react-native-datetimepicker#react-native-datetimepicker
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_iOS.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_Android.gif?raw=true
  */
-declare const DateTimePicker: React.ForwardRefExoticComponent<OldApiProps & Omit<TextFieldProps, "value" | "onChange"> & {
-    /**
-     * The type of picker to display ('date' or 'time')
-     */
-    mode?: DateTimePickerMode | undefined;
-    /**
-     * The initial value to set the picker to. Defaults to device's date / time
-     */
-    value?: Date | undefined;
-    /**
-     *  The props to pass to the dialog expandable container
-     */
-    dialogProps?: DialogProps | undefined;
-    /**
-     * The onChange callback
-     */
-    onChange?: ((date: Date) => void) | undefined;
-    /**
-     * Should this input be editable or disabled
-     */
-    editable?: boolean | undefined;
-    /**
-     * The minimum date or time value to use
-     */
-    minimumDate?: Date | undefined;
-    /**
-     * The maximum date or time value to use
-     */
-    maximumDate?: Date | undefined;
-    /**
-     * A callback function to format the time or date
-     * @param mode the type of the picker ('date' or 'time')
-     * @returns the formatted string to display
-     */
-    dateTimeFormatter?: ((value: Date, mode: DateTimePickerMode) => string) | undefined;
-    /**
-     * Allows changing of the locale of the component (iOS only)
-     */
-    locale?: string | undefined;
-    /**
-     * Allows changing of the time picker to a 24 hour format (Android only)
-     */
-    is24Hour?: boolean | undefined;
-    /**
-     * The interval at which minutes can be selected. Possible values are: 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30 (iOS only)
-     */
-    minuteInterval?: number | undefined;
-    /**
-     * Allows changing of the timeZone of the date picker. By default it uses the device's time zone (iOS only)
-     */
-    timeZoneOffsetInMinutes?: number | undefined;
-    /**
-     * style to apply to the iOS dialog header
-     */
-    headerStyle?: StyleProp<ViewStyle>;
-    /**
-     * Render custom input
-     */
-    renderInput?: ((props: Omit<DateTimePickerProps, 'value'> & {
-        value?: string;
-    }) => React.ReactElement) | undefined;
-    /**
-     * Override system theme variant (dark or light mode) used by the date picker.
-     */
-    themeVariant?: "light" | "dark" | undefined;
-    /**
-     * The component testID
-     */
-    testID?: string | undefined;
-    /**
-     * Allows changing the visual display of the picker
-     */
-    display?: string | undefined;
-    /**
-     * Text color of the wheel picker items
-     */
-    textColor?: string | undefined;
-    /**
-     * Background color of the wheel picker
-     */
-    backgroundColor?: string | undefined;
-    /**
-     * Confirm button props
-     */
-    confirmButtonProps?: ButtonProps | undefined;
-    /**
-     * Cancel button props
-     */
-    cancelButtonProps?: ButtonProps | undefined;
-} & BaseComponentInjectedProps & React.RefAttributes<any>>;
+declare const DateTimePicker: React.ForwardRefExoticComponent<DateTimePickerPropsInternal & React.RefAttributes<any>>;
 export { DateTimePicker };
-declare const _default: React.ForwardRefExoticComponent<OldApiProps & Omit<TextFieldProps, "value" | "onChange"> & {
-    /**
-     * The type of picker to display ('date' or 'time')
-     */
-    mode?: DateTimePickerMode | undefined;
-    /**
-     * The initial value to set the picker to. Defaults to device's date / time
-     */
-    value?: Date | undefined;
-    /**
-     *  The props to pass to the dialog expandable container
-     */
-    dialogProps?: DialogProps | undefined;
-    /**
-     * The onChange callback
-     */
-    onChange?: ((date: Date) => void) | undefined;
-    /**
-     * Should this input be editable or disabled
-     */
-    editable?: boolean | undefined;
-    /**
-     * The minimum date or time value to use
-     */
-    minimumDate?: Date | undefined;
-    /**
-     * The maximum date or time value to use
-     */
-    maximumDate?: Date | undefined;
-    /**
-     * A callback function to format the time or date
-     * @param mode the type of the picker ('date' or 'time')
-     * @returns the formatted string to display
-     */
-    dateTimeFormatter?: ((value: Date, mode: DateTimePickerMode) => string) | undefined;
-    /**
-     * Allows changing of the locale of the component (iOS only)
-     */
-    locale?: string | undefined;
-    /**
-     * Allows changing of the time picker to a 24 hour format (Android only)
-     */
-    is24Hour?: boolean | undefined;
-    /**
-     * The interval at which minutes can be selected. Possible values are: 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30 (iOS only)
-     */
-    minuteInterval?: number | undefined;
-    /**
-     * Allows changing of the timeZone of the date picker. By default it uses the device's time zone (iOS only)
-     */
-    timeZoneOffsetInMinutes?: number | undefined;
-    /**
-     * style to apply to the iOS dialog header
-     */
-    headerStyle?: StyleProp<ViewStyle>;
-    /**
-     * Render custom input
-     */
-    renderInput?: ((props: Omit<DateTimePickerProps, "value"> & {
-        value?: string | undefined;
-    }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined;
-    /**
-     * Override system theme variant (dark or light mode) used by the date picker.
-     */
-    themeVariant?: "light" | "dark" | undefined;
-    /**
-     * The component testID
-     */
-    testID?: string | undefined;
-    /**
-     * Allows changing the visual display of the picker
-     */
-    display?: string | undefined;
-    /**
-     * Text color of the wheel picker items
-     */
-    textColor?: string | undefined;
-    /**
-     * Background color of the wheel picker
-     */
-    backgroundColor?: string | undefined;
-    /**
-     * Confirm button props
-     */
-    confirmButtonProps?: ButtonProps | undefined;
-    /**
-     * Cancel button props
-     */
-    cancelButtonProps?: ButtonProps | undefined;
-} & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<any>>;
 export default _default;

package/src/components/dateTimePicker/index.js

@@ -42,6 +42,7 @@ const DateTimePicker = forwardRef((props, ref) => {
     themeVariant = Colors.getScheme(),
     onChange,
     dialogProps,
+    migrateDialog,
     textColor = Colors.$textDefault,
     backgroundColor = Colors.$backgroundDefault,
     headerStyle,
@@ -164,7 +165,7 @@ const DateTimePicker = forwardRef((props, ref) => {
   return <>
       <ExpandableOverlay
     // @ts-expect-error
-    ref={expandable} expandableContent={Constants.isIOS ? renderIOSExpandableOverlay() : undefined} useDialog dialogProps={_dialogProps} disabled={editable === false}
+    ref={expandable} expandableContent={Constants.isIOS ? renderIOSExpandableOverlay() : undefined} useDialog dialogProps={_dialogProps} migrateDialog={migrateDialog} disabled={editable === false}
     // NOTE: Android picker comes with its own overlay built-in therefor we're not using ExpandableOverlay for it
     renderCustomOverlay={Constants.isAndroid ? renderAndroidDateTimePicker : undefined} testID={`${testID}.overlay`}>
         {renderInput ? renderInput({

package/src/components/dialog/DialogDismissibleView.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { PanningDirections } from '../panningViews/panningProvider';
+interface DialogDismissibleProps {
+    /**
+     * Additional styling
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * The direction of the allowed pan (default is DOWN)
+     * Types: UP, DOWN, LEFT and RIGHT (using PanningProvider.Directions.###)
+     */
+    direction?: PanningDirections;
+    /**
+     * onDismiss callback
+     */
+    onDismiss?: () => void;
+    /**
+     * The dialog`s container style
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Whether to show the dialog or not
+     */
+    visible?: boolean;
+}
+interface Props extends DialogDismissibleProps {
+    children?: React.ReactNode | React.ReactNode[];
+}
+declare const DialogDismissibleView: {
+    (props: Props): React.JSX.Element;
+    displayName: string;
+};
+export default DialogDismissibleView;