react-native-ui-lib 8.4.0 → 8.4.1-snapshot.7901

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.0",
+  "version": "8.4.1-snapshot.7901",
   "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.d.ts

@@ -1,10 +1,11 @@
 import React, { PropsWithChildren } from 'react';
 import { ButtonProps } from '../button';
+import { ScreenFooterProps } from '../screenFooter';
 export declare enum FloatingButtonLayouts {
     VERTICAL = "Vertical",
     HORIZONTAL = "Horizontal"
 }
-export interface FloatingButtonProps {
+export interface FloatingButtonProps extends Pick<ScreenFooterProps, 'isAndroidEdgeToEdge'> {
     /**
      * Whether the button is visible
      */

package/src/components/floatingButton/index.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
-import { asBaseComponent } from "../../commons/new";
+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) {
@@ -27,23 +27,27 @@ const FloatingButton = props => {
     duration = 300,
     withoutAnimation,
     hideBackgroundOverlay,
-    hoisted = true,
+    hoisted = Constants.isAndroid,
+    isAndroidEdgeToEdge,
     testID
   } = props;
   useEffect(() => {
     // 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;
   }
@@ -66,7 +70,7 @@ const FloatingButton = props => {
     }] : undefined} enableShadow={false} />;
   };
   const children = isHorizontal ? [renderSecondaryButton(), renderPrimaryButton()] : [renderPrimaryButton(), renderSecondaryButton()];
-  return <ScreenFooter visible={visible} layout={isHorizontal ? ScreenFooterLayouts.HORIZONTAL : ScreenFooterLayouts.VERTICAL} backgroundType={hideBackgroundOverlay ? ScreenFooterBackgrounds.TRANSPARENT : ScreenFooterBackgrounds.FADING} keyboardBehavior={hoisted ? KeyboardBehavior.HOISTED : KeyboardBehavior.STICKY} animationDuration={withoutAnimation ? 0 : duration} itemsFit={fullWidth ? ItemsFit.STRETCH : undefined} contentContainerStyle={footerContentContainerStyle} testID={testID}>
+  return <ScreenFooter visible={visible} layout={isHorizontal ? ScreenFooterLayouts.HORIZONTAL : ScreenFooterLayouts.VERTICAL} backgroundType={hideBackgroundOverlay ? ScreenFooterBackgrounds.TRANSPARENT : ScreenFooterBackgrounds.FADING} keyboardBehavior={hoisted ? KeyboardBehavior.HOISTED : KeyboardBehavior.STICKY} isAndroidEdgeToEdge={isAndroidEdgeToEdge} animationDuration={withoutAnimation ? 0 : duration} itemsFit={fullWidth ? ItemsFit.STRETCH : undefined} contentContainerStyle={footerContentContainerStyle} testID={testID}>
       {children}
     </ScreenFooter>;
 };

package/src/components/screenFooter/index.js

@@ -11,6 +11,7 @@ import { asBaseComponent, Constants } from "../../commons/new";
 import { useKeyboardHeight } from "../../hooks";
 import { ScreenFooterProps, ScreenFooterLayouts, ScreenFooterBackgrounds, FooterAlignment, HorizontalItemsDistribution, ItemsFit, KeyboardBehavior, ScreenFooterShadow } from "./types";
 export { ScreenFooterProps, ScreenFooterLayouts, ScreenFooterBackgrounds, FooterAlignment, HorizontalItemsDistribution, ItemsFit, KeyboardBehavior, ScreenFooterShadow };
+const androidVersion = Constants.getAndroidVersion();
 const ScreenFooter = props => {
   const {
     testID,
@@ -27,9 +28,13 @@ const ScreenFooter = props => {
     animationDuration = 200,
     shadow = ScreenFooterShadow.SH20,
     hideDivider = false,
+    isAndroidEdgeToEdge = !!androidVersion && androidVersion >= 35 ? true : undefined,
     contentContainerStyle: contentContainerStyleOverride
   } = props;
-  const keyboard = useAnimatedKeyboard();
+  const keyboard = useAnimatedKeyboard({
+    isNavigationBarTranslucentAndroid: isAndroidEdgeToEdge,
+    isStatusBarTranslucentAndroid: isAndroidEdgeToEdge
+  });
   const [height, setHeight] = useState(0);
   const visibilityTranslateY = useSharedValue(0);
 

package/src/components/screenFooter/screenFooter.api.json

@@ -82,6 +82,11 @@
       "description": "If true, hides the top divider for solid background. Only applies when backgroundType is 'solid'",
       "default": "false"
     },
+    {
+      "name": "isAndroidEdgeToEdge",
+      "type": "boolean",
+      "description": "Indicates if the device is an Android device that supports edge-to-edge. Defaults to true for Android with version 35 and above, undefined for others."
+    },
     {
       "name": "contentContainerStyle",
       "type": "StyleProp<ViewStyle>",

package/src/components/screenFooter/types.d.ts

@@ -102,4 +102,9 @@ export interface ScreenFooterProps extends PropsWithChildren<{}> {
      * Can be used to override default padding, gap, or other layout properties.
      */
     contentContainerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Is this an Android device that supports edge-to-edge
+     * Defaults to true for Android with version 35 and above, undefined for others
+     */
+    isAndroidEdgeToEdge?: boolean;
 }

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> {