react-native-ui-lib 7.44.0-snapshot.7216 → 7.44.0-snapshot.7228

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-native",
-  "version": "5.0.0-snapshot.7216",
+  "version": "5.0.0-snapshot.7228",
   "homepage": "https://github.com/wix/react-native-ui-lib",
   "description": "uilib native components (separated from js components)",
   "main": "components/index",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.44.0-snapshot.7216",
+  "version": "7.44.0-snapshot.7228",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
@@ -56,7 +56,7 @@
     "react-native-redash": "^12.0.3",
     "semver": "^5.5.0",
     "tinycolor2": "^1.4.2",
-    "uilib-native": "5.0.0-snapshot.7212",
+    "uilib-native": "5.0.0-snapshot.7216",
     "url-parse": "^1.2.0",
     "wix-react-native-text-size": "1.0.9"
   },

package/panView.d.ts

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

package/panView.js

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

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

@@ -1,14 +1,9 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import { DialogProps } from '../dialog';
 import { ButtonProps } from '../button';
-import { DialogProps as IncubatorDialogProps } from '../../incubator';
+import { type DialogProps } from '../dialog';
 type ActionSheetOnOptionPress = (index: number) => void;
 type ActionSheetProps = {
-    /**
-     * Migrate to the Incubator.Dialog component
-     */
-    migrateDialog?: boolean;
     /**
      * Whether to show the action sheet or not
      */
@@ -68,11 +63,6 @@ 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
      */
@@ -80,7 +70,7 @@ type ActionSheetProps = {
     /**
      * Additional props to send to the Dialog
      */
-    dialogProps?: Omit<DialogProps, 'useSafeArea' | 'testID' | 'containerStyle' | 'visible' | 'onDismiss' | 'onDialogDismissed'> | IncubatorDialogProps;
+    dialogProps?: Omit<DialogProps, 'useSafeArea' | 'testID' | 'containerStyle' | 'visible' | 'onDismiss' | 'onDialogDismissed'> | DialogProps;
     /**
      * testID for e2e tests
      */

package/src/components/actionSheet/index.js

@@ -6,15 +6,12 @@ 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 PanningProvider from "../panningViews/panningProvider";
-import { Dialog as IncubatorDialog } from "../../incubator";
-import { LogService } from "../../services";
+import Dialog from "../dialog";
 const VERTICAL_PADDING = 8;
 /**
  * @description: Cross platform Action Sheet, with a support for native iOS solution
@@ -130,55 +127,19 @@ class ActionSheet extends Component {
         {this.renderActions()}
       </View>;
   }
-  renderOldDialog() {
+  render() {
     const {
-      useNativeIOS,
       visible,
       onDismiss,
       dialogStyle,
-      onModalDismissed,
       testID,
       useSafeArea,
       dialogProps
     } = this.props;
-    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}>
+    return <Dialog bottom centerH width="100%" direction={Dialog.directions.DOWN} {...dialogProps} useSafeArea={useSafeArea} testID={testID} containerStyle={[styles.incubatorDialog, dialogStyle]} visible={visible} onDismiss={onDismiss}>
         {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/checkbox/index.d.ts

@@ -120,7 +120,6 @@ declare class Checkbox extends Component<CheckboxProps, CheckboxState> {
     getLabelStyle: () => {
         color: string;
     };
-    getAccessibleHitSlop(size: number): number;
     renderCheckbox(): React.JSX.Element;
     render(): React.JSX.Element;
     validate: () => boolean;

package/src/components/checkbox/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { Animated, Easing, StyleSheet } from 'react-native';
 import { Colors, Spacings } from "../../style";
+import { StyleUtils } from "../../utils";
 //@ts-ignore
 import Assets from "../../assets";
 import { asBaseComponent } from "../../commons/new";
@@ -146,9 +147,6 @@ class Checkbox extends Component {
       color: this.props.disabled ? Colors.$textDisabled : this.state.showError ? Colors.$textDangerLight : Colors.$textDefault
     };
   };
-  getAccessibleHitSlop(size) {
-    return Math.max(0, (48 - size) / 2);
-  }
   renderCheckbox() {
     const {
       selectedIcon,
@@ -161,7 +159,7 @@ class Checkbox extends Component {
     } = this.props;
     return (
       //@ts-ignore
-      <TouchableOpacity {...this.getAccessibilityProps()} activeOpacity={1} testID={testID} {...others} style={[this.getBorderStyle(), style, !label && containerStyle]} onPress={this.onPress} hitSlop={this.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE)}>
+      <TouchableOpacity {...this.getAccessibilityProps()} activeOpacity={1} testID={testID} {...others} style={[this.getBorderStyle(), style, !label && containerStyle]} onPress={this.onPress} hitSlop={StyleUtils.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE)}>
         {<Animated.View style={[this.styles.container, {
           opacity: this.animationStyle.opacity
         }, {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import { DialogProps } from '../../incubator/dialog';
+import { DialogProps } from '../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 "../../incubator/dialog";
+import Dialog from "../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 { DialogMigrationProps } from '../../incubator/dialog';
+import type { DialogProps } from '../dialog';
 import { ButtonProps } from '../button';
 import { OldApiProps } from './useOldApi';
 export type DateTimePickerMode = 'date' | 'time';
-export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | 'onChange'> & DialogMigrationProps & {
+export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | 'onChange'> & {
     /**
      * The type of picker to display ('date' or 'time')
      */
@@ -15,6 +15,10 @@ 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
      */
@@ -92,7 +96,6 @@ 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
@@ -101,7 +104,185 @@ type DateTimePickerPropsInternal = DateTimePickerProps & BaseComponentInjectedPr
  * @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<DateTimePickerPropsInternal & React.RefAttributes<any>>;
+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>>;
 export { DateTimePicker };
-declare const _default: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<any>>;
+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>>;
 export default _default;

package/src/components/dateTimePicker/index.js

@@ -42,7 +42,6 @@ const DateTimePicker = forwardRef((props, ref) => {
     themeVariant = Colors.getScheme(),
     onChange,
     dialogProps,
-    migrateDialog,
     textColor = Colors.$textDefault,
     backgroundColor = Colors.$backgroundDefault,
     headerStyle,
@@ -165,7 +164,7 @@ const DateTimePicker = forwardRef((props, ref) => {
   return <>
       <ExpandableOverlay
     // @ts-expect-error
-    ref={expandable} expandableContent={Constants.isIOS ? renderIOSExpandableOverlay() : undefined} useDialog dialogProps={_dialogProps} migrateDialog={migrateDialog} disabled={editable === false}
+    ref={expandable} expandableContent={Constants.isIOS ? renderIOSExpandableOverlay() : undefined} useDialog dialogProps={_dialogProps} 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/dialog.api.json

@@ -2,59 +2,53 @@
   "name": "Dialog",
   "category": "overlays",
   "description": "Component for displaying custom content inside a popup dialog",
-  "note": "Use alignment modifiers to control the dialog position (top, bottom, centerV, centerH, etc... by default the dialog is aligned to center)",
+  "note": "Use alignment modifiers to control the dialog position (top, bottom, centerV, centerH, etc... by default the dialog is aligned to center).  \nWhen adding a `FlatList` \\ `ScrollView` to the content be sure to use one from `react-native-gesture-handler` (see [this link](https://github.com/software-mansion/react-native-gesture-handler/issues/1380) for `SectionList`).",
   "modifiers": ["alignment"],
-  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DialogScreen.js",
-  "images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Dialog/Dialog.gif?raw=true"],
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DialogScreen.tsx",
   "props": [
-    {"name": "visible", "type": "boolean", "description": "Control visibility of the component"},
-    {"name": "ignoreBackgroundPress", "type": "boolean", "description": "Whether or not to ignore background press"},
+    {"name": "visible", "type": "boolean", "description": "The visibility of the dialog"},
+    {"name": "headerProps", "type": "DialogHeaderProps", "description": "The Dialog's header (title, subtitle etc)"},
     {
-      "name": "overlayBackgroundColor",
-      "type": "string",
-      "description": "The color of the overlay background",
-      "default": "Colors.rgba(Colors.grey10, 0.6)"
-    },
-    {"name": "width", "type": "string | number", "description": "Width", "default": "90%"},
-    {"name": "height", "type": "string | number", "description": "Height", "default": "undefined"},
-    {
-      "name": "panDirection",
-      "type": "UP | DOWN | LEFT | RIGHT",
-      "description": "The direction of the allowed pan",
-      "default": "PanningProvider.Directions.DOWN"
+      "name": "containerStyle",
+      "type": "ViewStyle",
+      "description": "The Dialog`s container style (it is set to {position: 'absolute'})"
     },
-    {"name": "onDismiss", "type": "(props?: any) => void", "description": "Called when clicking on the background"},
     {
-      "name": "onDialogDismissed",
-      "type": "(props: any) => void",
-      "description": "Called once the dialog has been dismissed completely"
+      "name": "containerProps",
+      "type": "ViewProps",
+      "description": "Extra props for the container"
     },
     {
-      "name": "renderPannableHeader",
-      "type": "(props: any) => JSX.Element",
-      "description": "For scrollable content (the children of the dialog)",
-      "note": "If this is added only the header will be pannable. Props are transferred to the 'renderPannableHeader'"
+      "name": "onDismiss",
+      "type": "(props?: DialogProps) => void",
+      "description": "Callback that is called after the dialog's dismiss (after the animation has ended)."
     },
     {
-      "name": "pannableHeaderProps",
-      "type": "any",
-      "description": "The props that will be passed to the pannable header"
+      "name": "direction",
+      "type": "up | down | left | right",
+      "description": "The direction from which and to which the dialog is animating \\ panning (default down).",
+      "default": "down"
     },
     {
-      "name": "useSafeArea",
+      "name": "showClose",
       "type": "boolean",
-      "description": "In iOS, use safe area, in case component attached to the bottom"
+      "description": "Show the close button"
     },
-    {"name": "containerStyle", "type": "ViewStyle", "description": "Component's container style"},
-    {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
+    {"name": "ignoreBackgroundPress", "type": "boolean", "description": "Whether or not to ignore background press."},
+    {"name": "modalProps", "type": "ModalProps", "description": "Pass props to the dialog modal"},
+    {
+      "name": "testID",
+      "type": "string",
+      "description": "Used to locate this view in end-to-end tests.  \nThe container has the original id.  \nSupported inner elements IDs:  \n`${TestID}.modal` - the Modal's id.  \n`${TestID}.overlayFadingBackground` - the fading background id."
+    }
   ],
   "snippet": [
-    "<Dialog", 
-    " visible={isVisible$1}",
-    " onDismiss={() => console.log('dismissed')$2}",
-    " panDirection={PanningProvider.Directions.DOWN$3}",
+    "<Dialog",
+    "  visible={isVisible$1}",
+    "  onDismiss={() => console.log('dismissed')$2}",
+    "  direction={Dialog.directions.DOWN$3}",
     ">",
-    " <Text text60>Content</Text>$4",
+    "  <Text text60>Content</Text>$4",
     "</Dialog>"
   ]
 }

package/src/{incubator → components}/dialog/dialogHeader.api.json

@@ -1,8 +1,8 @@
 {
   "name": "Dialog.Header",
-  "category": "incubator",
+  "category": "overlays",
   "description": "Component for displaying the header of a popup dialog",
-  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/incubatorScreens/IncubatorDialogScreen.tsx",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DialogScreen.tsx",
   "props": [
     {"name": "title", "type": "string", "description": "Title"},
     {"name": "titleStyle", "type": "StyleProp<TextStyle>", "description": "Title text style"},