react-native-ui-lib 8.4.1 → 8.4.2-snapshot.7918

package/lib/package.json

@@ -10,7 +10,7 @@
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "lodash": "^4.17.21",
+    "lodash": "4.18.1",
     "prop-types": "^15.5.10"
   },
   "devDependencies": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "8.4.1",
+  "version": "8.4.2-snapshot.7918",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
@@ -34,7 +34,7 @@
     "date-fns": "^2.29.3",
     "deprecated-react-native-prop-types": "^2.3.0",
     "hoist-non-react-statics": "^3.0.0",
-    "lodash": "^4.17.21",
+    "lodash": "4.18.1",
     "memoize-one": "^5.0.5",
     "prop-types": "^15.5.10",
     "react-freeze": "^1.0.0",
@@ -66,7 +66,7 @@
     "@react-native/metro-config": "0.77.3",
     "@react-native/typescript-config": "0.77.3",
     "@shopify/flash-list": "1.7.6",
-    "@testing-library/react-native": "^11.5.1",
+    "@testing-library/react-native": "12.9.0",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/jest": "^29.5.13",
     "@types/lodash": "^4.0.0",
@@ -82,7 +82,7 @@
     "light-date": "^1.2.0",
     "moment": "^2.24.0",
     "object-hash": "^3.0.0",
-    "postcss": "^8.4.21",
+    "postcss": "^8.5.8",
     "postcss-js": "^4.0.0",
     "prettier": "^3.2.5",
     "react": "18.3.1",
@@ -112,7 +112,6 @@
     "react-native": ">=0.77.3",
     "react-native-gesture-handler": ">=2.24.0",
     "react-native-reanimated": ">=3.17.5",
-    "react-native-safe-area-context": ">=5.6.2",
     "uilib-native": "^5.0.1"
   },
   "jest": {

package/src/components/WheelPicker/usePresenter.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { WheelPickerItemValue } from './types';
 import { WheelPickerItemProps } from './Item';
 type PropTypes<T> = {

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

@@ -5,6 +5,8 @@ export declare enum ChipsInputChangeReason {
     Added = "added",
     Removed = "removed"
 }
+type ChipsInputChangeReasonUnion = `${ChipsInputChangeReason}`;
+export type ChipsInputChangeReasonProps = ChipsInputChangeReasonUnion | ChipsInputChangeReason;
 export type ChipsInputChipProps = ChipProps & {
     invalid?: boolean;
 };

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

@@ -12,5 +12,5 @@ export declare function getValidColorString(text?: string): {
     valid: boolean;
     hex?: undefined;
 };
-export declare function getHexString(color: HSLColor): string;
+export declare function getHexString(color: HSLColor): Uppercase<string>;
 export declare function getTextColor(color: string): string;

package/src/components/floatingButton/index.js

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { asBaseComponent, Constants } from "../../commons/new";
 import { LogService } from "../../services";
-import { Colors, Shadows } from "../../style";
+import { Colors, Shadows, Spacings } from "../../style";
 import Button from "../button";
 import ScreenFooter, { ScreenFooterLayouts, ScreenFooterBackgrounds, KeyboardBehavior, ItemsFit } from "../screenFooter";
 export let FloatingButtonLayouts = /*#__PURE__*/function (FloatingButtonLayouts) {
@@ -35,16 +35,19 @@ const FloatingButton = props => {
     // eslint-disable-next-line max-len
     LogService.warn('RNUILib FloatingButton now uses ScreenFooter internally, which requires a SafeAreaProvider. If you experience safe area issues, please wrap your app (or the relevant screen) with <SafeAreaProvider>.');
   }, []);
+  const isSecondaryOnly = !!secondaryButton && !button;
+  const isHorizontal = buttonLayout === FloatingButtonLayouts.HORIZONTAL || isSecondaryOnly;
   const footerContentContainerStyle = useMemo(() => {
     if (bottomMargin !== undefined) {
       return {
         paddingBottom: bottomMargin
       };
     }
-    return undefined;
-  }, [bottomMargin]);
-  const isSecondaryOnly = !!secondaryButton && !button;
-  const isHorizontal = buttonLayout === FloatingButtonLayouts.HORIZONTAL || isSecondaryOnly;
+    const isSecondaryAtBottom = !!secondaryButton && (isSecondaryOnly || !isHorizontal);
+    return {
+      paddingBottom: isSecondaryAtBottom ? Spacings.s7 : Spacings.s8
+    };
+  }, [bottomMargin, secondaryButton, isSecondaryOnly, isHorizontal]);
   if (!button && !secondaryButton) {
     return null;
   }

package/src/components/screenFooter/index.js

@@ -31,6 +31,7 @@ const ScreenFooter = props => {
     isAndroidEdgeToEdge = !!androidVersion && androidVersion >= 35 ? true : undefined,
     contentContainerStyle: contentContainerStyleOverride
   } = props;
+  const withoutAnimation = animationDuration === 0;
   const keyboard = useAnimatedKeyboard({
     isNavigationBarTranslucentAndroid: isAndroidEdgeToEdge,
     isStatusBarTranslucentAndroid: isAndroidEdgeToEdge
@@ -181,10 +182,17 @@ const ScreenFooter = props => {
         </View>
       </>;
   }, [renderBackground, testID, contentContainerStyle, childrenArray]);
+  const Container = useMemo(() => {
+    return withoutAnimation ? View : Animated.View;
+  }, [withoutAnimation]);
+  const containerStyle = useMemo(() => {
+    return withoutAnimation ? styles.container : [styles.container, hoistedAnimatedStyle];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [withoutAnimation]);
   if (keyboardBehavior === KeyboardBehavior.HOISTED) {
-    return <Animated.View style={[styles.container, hoistedAnimatedStyle]} pointerEvents={visible ? 'box-none' : 'none'}>
+    return <Container style={containerStyle} pointerEvents={visible ? 'box-none' : 'none'}>
         <Keyboard.KeyboardAccessoryView renderContent={renderFooterContent} kbInputRef={undefined} scrollBehavior={Keyboard.KeyboardAccessoryView.scrollBehaviors.FIXED_OFFSET} useSafeArea={false} manageScrollView={false} revealKeyboardInteractive onHeightChanged={setHeight} />
-      </Animated.View>;
+      </Container>;
   }
   return <Animated.View testID={testID} onLayout={onLayout} style={[styles.container, stickyAnimatedStyle]}>
       {renderFooterContent()}

package/src/components/textField/TextField.driver.new.js

@@ -9,10 +9,6 @@ import { ButtonDriver } from "../button/Button.driver.new";
 import { ViewDriver } from "../view/View.driver.new";
 export const TextFieldDriver = (props, options) => {
   const driver = usePressableDriver(useComponentDriver(props, options));
-  const inputDriver = useComponentDriver({
-    renderTree: props.renderTree,
-    testID: `${props.testID}.input`
-  }, options);
   const floatingPlaceholderDriver = TextDriver({
     renderTree: props.renderTree,
     testID: `${props.testID}.floatingPlaceholder`
@@ -45,31 +41,30 @@ export const TextFieldDriver = (props, options) => {
     renderTree: props.renderTree,
     testID: `${props.testID}.clearButton.container`
   });
-  const getInputElement = () => inputDriver.queryElement() ?? driver.getElement();
   const getValue = () => {
-    return getInputElement().props.value ?? getInputElement().props.defaultValue;
+    return driver.getElement().props.value ?? driver.getElement().props.defaultValue;
   };
   const changeText = text => {
-    fireEvent.changeText(getInputElement(), text);
+    fireEvent.changeText(driver.getElement(), text);
   };
   const focus = () => {
-    fireEvent(getInputElement(), 'focus');
+    fireEvent(driver.getElement(), 'focus');
   };
   const blur = () => {
-    fireEvent(getInputElement(), 'blur');
+    fireEvent(driver.getElement(), 'blur');
   };
   const isEnabled = () => {
-    return !getInputElement().props.accessibilityState?.disabled;
+    return !driver.getElement().props.accessibilityState?.disabled;
   };
   const getPlaceholder = () => {
     const exists = () => {
-      const hasPlaceholder = !!getInputElement().props.placeholder;
+      const hasPlaceholder = !!driver.getElement().props.placeholder;
       const hasText = !!getValue();
       return hasPlaceholder && (!hasText || hasText && floatingPlaceholderDriver.exists());
     };
     const getText = () => {
       if (exists()) {
-        return getInputElement().props.placeholder;
+        return driver.getElement().props.placeholder;
       }
     };
     return {

package/src/components/textField/index.js

@@ -78,8 +78,6 @@ const TextField = props => {
     readonly = false,
     showMandatoryIndication,
     clearButtonStyle,
-    testID,
-    accessibilityLabel: accessibilityLabelProp,
     ...others
   } = usePreset(props);
   const {
@@ -137,31 +135,11 @@ const TextField = props => {
   const hasValue = fieldState.value !== undefined; // NOTE: not pressable if centered without a value (so can't center placeholder)
   const inputStyle = useMemo(() => [typographyStyle, colorStyle, others.style, hasValue && centeredTextStyle], [typographyStyle, colorStyle, others.style, centeredTextStyle, hasValue]);
   const dummyPlaceholderStyle = useMemo(() => [inputStyle, styles.dummyPlaceholder], [inputStyle]);
-  const defaultAccessibilityLabel = useMemo(() => {
-    const parts = [];
-    if (label) {
-      parts.push(label);
-    }
-    if (context.isMandatory) {
-      parts.push('required');
-    }
-    parts.push('textField');
-    if (helperText) {
-      parts.push(helperText);
-    } else if (placeholder) {
-      parts.push(placeholder);
-    }
-    if (showCharCounter && others.maxLength) {
-      parts.push(`you can enter up to ${others.maxLength} characters`);
-    }
-    return parts.join(', ');
-  }, [label, context.isMandatory, helperText, placeholder, showCharCounter, others.maxLength]);
-  const accessibilityLabel = accessibilityLabelProp ?? defaultAccessibilityLabel;
   return <FieldContext.Provider value={context}>
-      <View {...containerProps} testID={testID} accessible accessibilityLabel={accessibilityLabel} style={[margins, positionStyle, containerStyle, centeredContainerStyle]}>
+      <View {...containerProps} style={[margins, positionStyle, containerStyle, centeredContainerStyle]}>
         <View row spread style={centeredContainerStyle}>
-          <Label label={label} labelColor={labelColor} labelStyle={_labelStyle} labelProps={labelProps} floatingPlaceholder={floatingPlaceholder} validationMessagePosition={validationMessagePosition} testID={`${testID}.label`} showMandatoryIndication={showMandatoryIndication} enableErrors={enableErrors} />
-          {validationMessagePosition === ValidationMessagePosition.TOP && <ValidationMessage enableErrors={enableErrors} validate={others.validate} validationMessage={others.validationMessage} validationMessageStyle={_validationMessageStyle} retainValidationSpace={retainValidationSpace && retainTopMessageSpace} testID={`${testID}.validationMessage`} />}
+          <Label label={label} labelColor={labelColor} labelStyle={_labelStyle} labelProps={labelProps} floatingPlaceholder={floatingPlaceholder} validationMessagePosition={validationMessagePosition} testID={`${props.testID}.label`} showMandatoryIndication={showMandatoryIndication} enableErrors={enableErrors} />
+          {validationMessagePosition === ValidationMessagePosition.TOP && <ValidationMessage enableErrors={enableErrors} validate={others.validate} validationMessage={others.validationMessage} validationMessageStyle={_validationMessageStyle} retainValidationSpace={retainValidationSpace && retainTopMessageSpace} testID={`${props.testID}.validationMessage`} />}
           {topTrailingAccessory && <View>{topTrailingAccessory}</View>}
         </View>
         <View style={[paddings, fieldStyle]} row centerV centerH={centered}>
@@ -180,26 +158,26 @@ const TextField = props => {
               {Constants.isAndroid && centered && <Text marginR-s1 style={dummyPlaceholderStyle}>
                   {placeholder}
                 </Text>}
-              {floatingPlaceholder && <FloatingPlaceholder defaultValue={others.defaultValue} placeholder={placeholder} floatingPlaceholderStyle={_floatingPlaceholderStyle} floatingPlaceholderColor={floatingPlaceholderColor} floatOnFocus={floatOnFocus} validationMessagePosition={validationMessagePosition} extraOffset={leadingAccessoryMeasurements?.width} testID={`${testID}.floatingPlaceholder`} showMandatoryIndication={showMandatoryIndication} />}
+              {floatingPlaceholder && <FloatingPlaceholder defaultValue={others.defaultValue} placeholder={placeholder} floatingPlaceholderStyle={_floatingPlaceholderStyle} floatingPlaceholderColor={floatingPlaceholderColor} floatOnFocus={floatOnFocus} validationMessagePosition={validationMessagePosition} extraOffset={leadingAccessoryMeasurements?.width} testID={`${props.testID}.floatingPlaceholder`} showMandatoryIndication={showMandatoryIndication} />}
               <Input hitSlop={{
             top: 20,
             bottom: 20
-          }} placeholderTextColor={hidePlaceholder ? 'transparent' : placeholderTextColor} value={fieldState.value} {...others} testID={`${testID}.input`} readonly={readonly} style={inputStyle} onFocus={onFocus} onBlur={onBlur} onChangeText={onChangeText} placeholder={placeholder} hint={hint} showMandatoryIndication={showMandatoryIndication && !label} />
+          }} placeholderTextColor={hidePlaceholder ? 'transparent' : placeholderTextColor} value={fieldState.value} {...others} readonly={readonly} style={inputStyle} onFocus={onFocus} onBlur={onBlur} onChangeText={onChangeText} placeholder={placeholder} hint={hint} showMandatoryIndication={showMandatoryIndication && !label} />
             </View>}
-          {showClearButton && <ClearButton onClear={onClear} testID={`${testID}.clearButton`} onChangeText={onChangeText} clearButtonStyle={clearButtonStyle} />}
+          {showClearButton && <ClearButton onClear={onClear} testID={`${props.testID}.clearButton`} onChangeText={onChangeText} clearButtonStyle={clearButtonStyle} />}
           {trailingAccessory}
           {/* </View> */}
         </View>
         <View row spread center={centered}>
           <View flex={!centered} flexG={centered} marginR-s4={showCharCounter}>
-            {validationMessagePosition === ValidationMessagePosition.BOTTOM && <ValidationMessage enableErrors={enableErrors} validate={others.validate} validationMessage={others.validationMessage} validationIcon={validationIcon} validationMessageStyle={_validationMessageStyle} retainValidationSpace={retainValidationSpace} testID={`${testID}.validationMessage`} />}
-            {helperText && <Text $textNeutralHeavy subtext marginT-s1 testID={`${testID}.helperText`}>
+            {validationMessagePosition === ValidationMessagePosition.BOTTOM && <ValidationMessage enableErrors={enableErrors} validate={others.validate} validationMessage={others.validationMessage} validationIcon={validationIcon} validationMessageStyle={_validationMessageStyle} retainValidationSpace={retainValidationSpace} testID={`${props.testID}.validationMessage`} />}
+            {helperText && <Text $textNeutralHeavy subtext marginT-s1 testID={`${props.testID}.helperText`}>
                 {helperText}
               </Text>}
             {bottomAccessory}
           </View>
           <View>
-            {showCharCounter && <CharCounter maxLength={others.maxLength} charCounterStyle={charCounterStyle} testID={`${testID}.charCounter`} />}
+            {showCharCounter && <CharCounter maxLength={others.maxLength} charCounterStyle={charCounterStyle} testID={`${props.testID}.charCounter`} />}
           </View>
         </View>
       </View>

package/src/helpers/AvatarHelper.d.ts

@@ -2,7 +2,7 @@ export declare function getInitialsTypography(size: number): import("react-nativ
 export declare function hashStringToNumber(str?: string): number;
 export declare function getAvatarColors(): string[];
 export declare function getColorById(id: string, avatarColors?: string[]): string;
-export declare function getInitials(name?: string, limit?: number): string;
+export declare function getInitials(name?: string, limit?: number): Uppercase<string>;
 export declare function getBackgroundColor(name?: string, avatarColors?: string[], hashFunction?: (name?: string) => number, defaultColor?: string): string | undefined;
 export declare function isGravatarUrl(url: string): boolean;
 export declare function isBlankGravatarUrl(url: string): boolean;

package/src/incubator/slider/Thumb.js

@@ -40,7 +40,7 @@ const Thumb = props => {
     height: THUMB_SIZE
   });
   const lastOffset = useSharedValue(0);
-  const gesture = Gesture.Pan().onBegin(() => {
+  const gesture = Gesture.Pan().hitSlop(hitSlop).onBegin(() => {
     onSeekStart?.();
     isPressed.value = true;
     lastOffset.value = offset.value;

package/src/index.d.ts

@@ -23,7 +23,7 @@ export { default as Button, ButtonProps, ButtonSize, ButtonAnimationDirection }
 export { default as Card, CardProps, CardSectionProps, CardSelectionOptions } from './components/card';
 export { default as Carousel, CarouselProps, PageControlPosition } from './components/carousel';
 export { default as Checkbox, CheckboxProps, CheckboxRef } from './components/checkbox';
-export { default as ChipsInput, ChipsInputProps, ChipsInputChipProps } from './components/chipsInput';
+export { default as ChipsInput, ChipsInputProps, ChipsInputChipProps, ChipsInputChangeReason, ChipsInputChangeReasonProps } from './components/chipsInput';
 export { default as Chip, ChipProps } from './components/chip';
 export { default as ColorPicker, ColorPickerProps } from './components/colorPicker';
 export { default as ColorPalette, ColorPaletteProps } from './components/colorPalette';

package/src/index.js

@@ -61,6 +61,8 @@ var _exportNames = {
   ChipsInput: true,
   ChipsInputProps: true,
   ChipsInputChipProps: true,
+  ChipsInputChangeReason: true,
+  ChipsInputChangeReasonProps: true,
   Chip: true,
   ChipProps: true,
   ColorPicker: true,
@@ -432,6 +434,18 @@ Object.defineProperty(exports, "ChipsInput", {
     return _chipsInput().default;
   }
 });
+Object.defineProperty(exports, "ChipsInputChangeReason", {
+  enumerable: true,
+  get: function () {
+    return _chipsInput().ChipsInputChangeReason;
+  }
+});
+Object.defineProperty(exports, "ChipsInputChangeReasonProps", {
+  enumerable: true,
+  get: function () {
+    return _chipsInput().ChipsInputChangeReasonProps;
+  }
+});
 Object.defineProperty(exports, "ChipsInputChipProps", {
   enumerable: true,
   get: function () {

package/src/testkit/Component.driver.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DragData, UniDriver, UniDriverClass } from './UniDriver';
 export type ComponentDriverArgs = {
     testID: string;

package/src/testkit/drivers/TestingLibraryDriver.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DragData, UniDriver } from '../UniDriver';
 import { ReactTestInstance } from 'react-test-renderer';
 export declare class TestingLibraryDriver<Props> implements UniDriver<Props> {