react-native-ui-lib 8.1.1 → 8.1.7-snapshot.7597

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

@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import { ModalProps as RNModalProps, GestureResponderEvent, KeyboardAvoidingViewProps } from 'react-native';
+import TopBar, { ModalTopBarProps } from './TopBar';
+export { ModalTopBarProps };
+export interface ModalProps extends RNModalProps {
+    /**
+     * Blurs the modal background when transparent (iOS only)
+     */
+    enableModalBlur?: boolean;
+    /**
+     * A custom view to use as a BlueView instead of the default one
+     */
+    blurView?: JSX.Element;
+    /**
+     * allow dismissing a modal when clicking on its background
+     */
+    onBackgroundPress?: (event: GestureResponderEvent) => void;
+    /**
+     * the background color of the overlay
+     */
+    overlayBackgroundColor?: string;
+    /**
+     * The modal's end-to-end test identifier
+     */
+    testID?: string;
+    /**
+     * Overrides the text that's read by the screen reader when the user interacts with the element. By default, the
+     * label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
+     */
+    accessibilityLabel?: string;
+    /**
+     * Should add a GestureHandlerRootView
+     */
+    useGestureHandlerRootView?: boolean;
+    /**
+     * Should add a KeyboardAvoidingView (iOS only)
+     */
+    useKeyboardAvoidingView?: boolean;
+    /**
+     * Send additional props to the KeyboardAvoidingView (iOS only)
+     */
+    keyboardAvoidingViewProps?: KeyboardAvoidingViewProps;
+    /**
+     * Fix RNModal's interaction with react-native-reanimated (Android only, default: true)
+     * See this https://github.com/software-mansion/react-native-reanimated/issues/6659#issuecomment-2704931585
+     */
+    fixReanimatedInteraction?: boolean;
+}
+/**
+ * @description: Component that present content on top of the invoking screen
+ * @extends: Modal
+ * @extendsLink: https://reactnative.dev/docs/modal
+ * @gif: https://media.giphy.com/media/3oFzmfSX8KgvctI4Ks/giphy.gif
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ModalScreen.tsx
+ */
+declare class Modal extends Component<ModalProps> {
+    static displayName: string;
+    static TopBar: typeof TopBar;
+    constructor(props: ModalProps);
+    renderTouchableOverlay(): React.JSX.Element | undefined;
+    render(): React.JSX.Element;
+}
+declare const _default: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<any>> & typeof Modal;
+export default _default;

package/src/components/numberInput/NumberInput.driver.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps } from '../../testkit/new/Component.driver';
+export declare const NumberInputDriver: (props: ComponentProps) => {
+    exists: () => boolean;
+    changeText: (text: string) => Promise<void>;
+    getValue: () => string | undefined;
+};

package/src/components/numberInput/Presenter.d.ts

@@ -0,0 +1,21 @@
+export type NumberInputData = {
+    type: 'valid';
+    userInput: string;
+    number: number;
+    formattedNumber: string;
+} | {
+    type: 'error';
+    userInput: string;
+};
+export interface LocaleOptions {
+    locale: string;
+    decimalSeparator: string;
+    thousandSeparator: string;
+}
+export interface Options {
+    localeOptions: LocaleOptions;
+    fractionDigits: number;
+}
+export declare function generateOptions(locale: string, fractionDigits: number): Options;
+export declare function getInitialNumber(propsInitialNumber: number | undefined, options: Options): number;
+export declare function parseInput(text: string, options: Options, initialNumber?: number): NumberInputData;

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { TextFieldProps } from '../textField';
+import { NumberInputData } from './Presenter';
+export { NumberInputData };
+type _TextFieldProps = Omit<TextFieldProps, 'leadingAccessory' | 'trailingAccessory' | 'value' | 'onChangeText' | 'placeholder' | 'placeholderTextColor' | 'floatingPlaceholder' | 'floatingPlaceholderColor' | 'floatingPlaceholderStyle' | 'contextMenuHidden'>;
+type _NumberInputProps = {
+    /**
+     * Pass additional props to the TextField
+     */
+    textFieldProps?: _TextFieldProps;
+    /**
+     * Callback that is called when the number value has changed (undefined in both if the user has deleted the number).
+     */
+    onChangeNumber: (data: NumberInputData) => void;
+    /**
+     * A valid number (in en locale, i.e. only digits and a decimal point).
+     */
+    initialNumber?: number;
+    /**
+     * Number of digits after the decimal point. Must be in the range 0 - 20, inclusive.
+     */
+    fractionDigits?: number;
+    /**
+     * The locale to show the number (default 'en')
+     * IMPORTANT: this might not work, depending on your intl\RN version\hermes configuration
+     */
+    /**
+     * A leading text
+     */
+    leadingText?: string;
+    /**
+     * The style of the leading text
+     */
+    leadingTextStyle?: StyleProp<TextStyle>;
+    /**
+     * A trailing text
+     */
+    trailingText?: string;
+    /**
+     * The style of the trailing text
+     */
+    trailingTextStyle?: StyleProp<TextStyle>;
+    /**
+     * Container style of the whole component
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * If true, context menu is hidden. The default value is true.
+     * Requires @react-native-community/clipboard to be installed.
+     */
+    contextMenuHidden?: boolean;
+    testID?: string;
+};
+export type NumberInputProps = React.PropsWithRef<_NumberInputProps>;
+declare const _default: React.ForwardRefExoticComponent<_NumberInputProps & React.RefAttributes<TextFieldProps>>;
+export default _default;

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

@@ -0,0 +1,68 @@
+import React, { PureComponent } from 'react';
+import { ImageProps, ImageSourcePropType } from 'react-native';
+declare const OVERLY_TYPES: {
+    VERTICAL: string;
+    TOP: string;
+    BOTTOM: string;
+    SOLID: string;
+};
+export declare enum OverlayIntensityType {
+    LOW = "low",
+    MEDIUM = "medium",
+    HIGH = "high"
+}
+export type OverlayTypeType = (typeof OVERLY_TYPES)[keyof typeof OVERLY_TYPES];
+export type OverlayTypes = Pick<ImageProps, 'borderRadius'> & {
+    /**
+     * The type of overlay to set on top of the image
+     */
+    type?: OverlayTypeType;
+    /**
+     * The intensity of the gradient, default is 'LOW'.
+     */
+    intensity?: OverlayIntensityType | `${OverlayIntensityType}`;
+    /**
+     * The overlay color
+     */
+    color?: string;
+    /**
+     * Custom overlay content to be rendered on top of the image
+     */
+    customContent?: React.ReactElement | React.ReactElement[];
+};
+/**
+ * @description: Overlay view with types (default, top, bottom, solid)
+ * @extends: Image
+ * @extendsLink: https://reactnative.dev/docs/image
+ */
+declare class Overlay extends PureComponent<OverlayTypes> {
+    static displayName: string;
+    static overlayTypes: {
+        VERTICAL: string;
+        TOP: string;
+        BOTTOM: string;
+        SOLID: string;
+    };
+    static intensityTypes: typeof OverlayIntensityType;
+    getStyleByType(type?: string | undefined): ("" | {
+        bottom: undefined;
+        height: "75%";
+    } | {
+        tintColor: string;
+    } | undefined)[] | ("" | {
+        top: undefined;
+        transform: {
+            scaleY: number;
+        }[];
+        height: "75%";
+    } | {
+        tintColor: string;
+    } | undefined)[] | {
+        backgroundColor: string | undefined;
+    } | undefined;
+    renderCustomContent: () => React.JSX.Element;
+    renderImage: (style: any, source: ImageSourcePropType) => React.JSX.Element;
+    getImageSource: (type?: OverlayTypeType, intensity?: OverlayTypes['intensity']) => any;
+    render(): React.JSX.Element;
+}
+export default Overlay;

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface PageControlProps {
+    /**
+     * Limit the number of page indicators shown.
+     * enlargeActive prop is disabled in this state,
+     * When set to true there will be maximum of 7 shown.
+     * Only relevant when numOfPages > 5.
+     */
+    limitShownPages?: boolean;
+    /**
+     * Additional styles for the top container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Total number of pages
+     */
+    numOfPages: number;
+    /**
+     * Zero-based index of the current page
+     */
+    currentPage: number;
+    /**
+     * Action handler for clicking on a page indicator
+     */
+    onPagePress?: (index: number) => void;
+    /**
+     * Color of the selected page dot and, if inactiveColor not passed, the border of the not selected pages
+     */
+    color?: string;
+    /**
+     * Color of the unselected page dots and the border of the not selected pages
+     */
+    inactiveColor?: string;
+    /**
+     * The size of the page indicator.
+     * When setting limitShownPages the medium sized will be 2/3 of size and the small will be 1/3 of size.
+     * An alternative is to send an array [smallSize, mediumSize, largeSize].
+     */
+    size?: number | [number, number, number];
+    /**
+     * Whether to enlarge the active page indicator
+     * Irrelevant when limitShownPages is in effect.
+     */
+    enlargeActive?: boolean;
+    /**
+     * The space between the siblings page indicators
+     */
+    spacing?: number;
+    /**
+     * Used to identify the pageControl in tests
+     */
+    testID?: string;
+}
+declare const _default: React.ForwardRefExoticComponent<PageControlProps & React.RefAttributes<any>>;
+export default _default;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { ViewProps } from '../view';
+import { PanningDirections, PanningDirectionsEnum } from './panningUtil';
+import { PanGestureProps, PanViewDirections, PanViewDirectionsEnum, PanViewDismissThreshold } from './usePanGesture';
+export { PanningDirections, PanningDirectionsEnum, PanViewDirections, PanViewDirectionsEnum, PanViewDismissThreshold };
+export interface PanViewProps extends Omit<PanGestureProps, 'hiddenLocation'>, ViewProps {
+    /**
+     * Add a style to the container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+}
+interface Props extends PanViewProps {
+    children?: React.ReactNode | React.ReactNode[];
+}
+declare const _default: React.ForwardRefExoticComponent<PanViewProps & React.RefAttributes<any>> & {
+    (props: Props): React.JSX.Element;
+    displayName: string;
+    directions: typeof PanningDirectionsEnum;
+};
+export default _default;

package/src/components/panView/panningUtil.d.ts

@@ -0,0 +1,38 @@
+import { PanGestureHandlerEventPayload } from 'react-native-gesture-handler';
+export declare enum PanningDirectionsEnum {
+    UP = "up",
+    DOWN = "down",
+    LEFT = "left",
+    RIGHT = "right"
+}
+export type PanningDirectionsUnion = `${PanningDirectionsEnum}`;
+export type PanningDirections = PanningDirectionsEnum | PanningDirectionsUnion;
+export interface PanningDismissThreshold {
+    /**
+     * The (positive) velocity of a drag\swipe past it the view will be dismissed.
+     */
+    velocity?: number;
+    /**
+     * The x translation from the start location past it the view will be dismissed.
+     */
+    x?: number;
+    /**
+     * The y translation from the start location past it the view will be dismissed.
+     */
+    y?: number;
+}
+export interface Frame {
+    x: number;
+    y: number;
+}
+export interface TranslationOptions {
+    directionLock?: boolean;
+    currentTranslation: Frame;
+}
+export declare function getTranslationDirectionClamp(translation: Frame, options: TranslationOptions): Frame;
+export declare function getTranslation(event: PanGestureHandlerEventPayload, initialTranslation: Frame, directions: PanningDirections[], options: TranslationOptions): Frame;
+export declare const DEFAULT_THRESHOLD: Required<PanningDismissThreshold>;
+/**
+ * Will return undefined if should not dismiss
+ */
+export declare function getDismissVelocity(event: PanGestureHandlerEventPayload, directions: PanningDirections[], options: TranslationOptions, threshold?: PanningDismissThreshold): Partial<Frame> | undefined;

package/src/components/panView/usePanGesture.d.ts

@@ -0,0 +1,49 @@
+import { PanningDirections, PanningDirectionsEnum, PanningDismissThreshold } from './panningUtil';
+import type { HiddenLocation } from '../../hooks/useHiddenLocation';
+export type PanViewDirections = PanningDirections;
+export declare const PanViewDirectionsEnum: typeof PanningDirectionsEnum;
+export type PanViewDismissThreshold = PanningDismissThreshold;
+export declare const DEFAULT_DIRECTIONS: PanningDirectionsEnum[];
+export interface PanGestureProps {
+    /**
+     * The directions of the allowed pan (default is all)
+     * Types: UP, DOWN, LEFT and RIGHT (using PanView.directions.###)
+     */
+    directions?: PanViewDirections[];
+    /**
+     * Dismiss the view if over the threshold (translation or velocity).
+     */
+    dismissible?: boolean;
+    /**
+     * Animate to start if not dismissed.
+     */
+    animateToOrigin?: boolean;
+    /**
+     * Callback to the dismiss animation end
+     */
+    onDismiss?: () => void;
+    /**
+     * Should the direction of dragging be locked once a drag has started.
+     */
+    directionLock?: boolean;
+    /**
+     * Object to adjust the dismiss threshold limits (eg {x, y, velocity}).
+     */
+    threshold?: PanViewDismissThreshold;
+    hiddenLocation: HiddenLocation;
+}
+export declare const DEFAULT_ANIMATION_CONFIG: {
+    velocity: number;
+    damping: number;
+    stiffness: number;
+    mass: number;
+};
+declare const usePanGesture: (props: PanGestureProps) => {
+    translation: {
+        x: import("react-native-reanimated").SharedValue<number>;
+        y: import("react-native-reanimated").SharedValue<number>;
+    };
+    gesture: import("react-native-gesture-handler/lib/typescript/handlers/gestures/panGesture").PanGesture;
+    reset: () => void;
+};
+export default usePanGesture;

package/src/components/picker/Picker.driver.new.d.ts

@@ -0,0 +1,44 @@
+import { ComponentDriverOptions, ComponentProps } from '../../testkit/new/Component.driver';
+export declare const PickerDriver: (props: ComponentProps, useDialog: boolean, options?: ComponentDriverOptions) => {
+    exists: () => boolean;
+    getValue: () => string | undefined;
+    open: () => void;
+    cancel: () => void;
+    done: () => void;
+    isOpen: () => boolean;
+    dismissDialog: () => void;
+    itemDriver: (testID: string) => {
+        press: () => void;
+        hasOnPress: () => boolean;
+        onPressIn: () => void;
+        hasOnPressIn: () => boolean;
+        onPressOut: () => void;
+        hasOnPressOut: () => boolean;
+        onLongPress: () => void;
+        hasOnLongPress: () => boolean;
+        getElement: () => import("react-test-renderer").ReactTestInstance;
+        queryElement: () => import("react-test-renderer").ReactTestInstance | undefined;
+        exists: () => boolean;
+        getStyle: () => any;
+        getLabel: () => {
+            getText: () => string | (string | import("react-test-renderer").ReactTestInstance)[];
+            getStyle: () => import("react-native/types").TextStyle;
+            press: () => void;
+            hasOnPress: () => boolean;
+            onPressIn: () => void;
+            hasOnPressIn: () => boolean;
+            onPressOut: () => void;
+            hasOnPressOut: () => boolean;
+            onLongPress: () => void;
+            hasOnLongPress: () => boolean;
+            getElement: () => import("react-test-renderer").ReactTestInstance;
+            queryElement: () => import("react-test-renderer").ReactTestInstance | undefined;
+            exists: () => boolean;
+        };
+        getLabelStyle: () => import("react-native/types").TextStyle;
+        getIconStyle: () => any;
+        getIcon: () => import("../../testkit/new/Component.driver").ComponentDriverResult;
+        isDisabled: () => boolean;
+    };
+    selectItem: (testID: string) => void;
+};

package/src/components/picker/PickerContext.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PickerContextProps } from './types';
+declare const _default: React.Context<PickerContextProps>;
+export default _default;

package/src/components/picker/PickerItem.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { PickerItemProps } from './types';
+/**
+ * @description: Picker.Item, for configuring the Picker's selectable options
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PickerScreen.tsx
+ */
+declare const PickerItem: {
+    (props: PickerItemProps): React.JSX.Element;
+    displayName: string;
+};
+export default PickerItem;

package/src/components/picker/PickerItemsList.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PickerItemsListProps } from './types';
+declare const PickerItemsList: (props: PickerItemsListProps) => React.JSX.Element;
+export default PickerItemsList;

package/src/components/picker/PickerPresenter.d.ts

@@ -0,0 +1,7 @@
+import { PickerProps, PickerSingleValue, PickerValue } from './types';
+export declare function extractPickerItems(props: PickerProps): {
+    value: any;
+    label: any;
+}[];
+export declare function isItemSelected(childValue: PickerSingleValue, selectedValue?: PickerValue): boolean;
+export declare function shouldFilterOut(searchValue: string, itemLabel?: string): boolean;

package/src/components/picker/PickerSelectionStatusBar.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PickerSelectionStatusProps } from './types';
+export default function PickerSelectionStatusBar(props: PickerSelectionStatusProps): React.JSX.Element;