@widergy/mobile-ui 1.32.16 → 1.33.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.33.1](https://github.com/widergy/mobile-ui/compare/v1.33.0...v1.33.1) (2025-01-10)
+
+
+### Bug Fixes
+
+* [UGEE-72] nps surveys ([#402](https://github.com/widergy/mobile-ui/issues/402)) ([15d6993](https://github.com/widergy/mobile-ui/commit/15d69934f0d222c1698dc6175b4170894a5754a5))
+
+# [1.33.0](https://github.com/widergy/mobile-ui/compare/v1.32.16...v1.33.0) (2025-01-07)
+
+
+### Features
+
+* [UGENSA-973] tooltip adornment ([#403](https://github.com/widergy/mobile-ui/issues/403)) ([bf3ac33](https://github.com/widergy/mobile-ui/commit/bf3ac3381aafae7e04197878d3e872d284ebb89b))
+
 ## [1.32.16](https://github.com/widergy/mobile-ui/compare/v1.32.15...v1.32.16) (2025-01-03)
 
 

package/lib/components/UTBaseInputField/components/TooltipAdornment/index.js

@@ -1,19 +1,29 @@
 import React from 'react';
-import { string } from 'prop-types';
+import { object, shape, string } from 'prop-types';
 
 import UTTooltip from '../../../UTTooltip';
 import UTIcon from '../../../UTIcon';
 import UTLabel from '../../../UTLabel';
 
-const TooltipAdornment = ({ tooltip }) =>
-  tooltip ? (
-    <UTTooltip content={<UTLabel>{tooltip}</UTLabel>}>
+const TooltipAdornment = ({ tooltip, tooltipProps }) => {
+  const { tooltip: tooltipStyles, arrowTouchable, labelProps } = tooltipProps || {};
+  return tooltip ? (
+    <UTTooltip
+      styles={{ tooltip: tooltipStyles, arrow: arrowTouchable }}
+      content={<UTLabel {...labelProps}>{tooltip}</UTLabel>}
+    >
       <UTIcon name="IconInfoCircle" colorTheme="gray" />
     </UTTooltip>
   ) : undefined;
+};
 
 TooltipAdornment.propTypes = {
-  tooltip: string
+  tooltip: string,
+  tooltipProps: shape({
+    tooltip: object,
+    arrowTouchable: object,
+    labelProps: object
+  })
 };
 
 export default TooltipAdornment;

package/lib/components/UTBottomSheet/README.md

@@ -6,26 +6,28 @@
 
 ## Props
 
-| Name                      | Type     | Default     | Description                                                                  |
-| ------------------------- | -------- | ----------- | ---------------------------------------------------------------------------  |
-| `buttonText`               | `string` |             | Text for the button that appears in the top right corner of the header.     |
-| `description`              | `string` |             | Description that appears below the title in the header.                     |
-| `onClose`                  | `func`   |             | Function called when the bottom sheet is closed.                            |
-| `required`                 | `bool`   |             | Indicates if the field is required, showing an asterisk in the title.       |
-| `title`                    | `string` |             | Title that appears in the bottom sheet header.                              |
-| `visible`                  | `bool`   |             | Controls the visibility of the bottom sheet.                                |
-| `scrolleable`              | `bool`   | `false`     | Determines if the content inside the bottom sheet should be scrollable.     |
-| `actionAlignment`          | `string` |             | Aligns the actions.                                                         |
-| `onCloseProps`             | `object` |             | Additional props passed to the `onClose` function (optional).               |
-| `primaryAction`            | `func`   |             | Callback for the primary action button.                                     |
-| `primaryActionProps`       | `object` |             | Props for the primary action button.                                        |
-| `primaryActionText`        | `string` |             | Text for the primary action button.                                         |
-| `secondaryAction`          | `func`   |             | Callback for the secondary action button.                                   |
-| `secondaryActionProps`     | `object` |             | Props for the secondary action button.                                      |
-| `secondaryActionText`      | `string` |             | Text for the secondary action button.                                       |
-| `tertiaryAction`           | `func`   |             | Callback for the tertiary action button.                                    |
-| `tertiaryActionProps`      | `object` |             | Props for the tertiary action button .                                      |
-| `tertiaryActionText`       | `string` |             | Text for the tertiary action button.                                        |
+| Name                      | Type     | Default     | Description                                                                 |
+| ------------------------- | -------- | ----------- | --------------------------------------------------------------------------- |
+| `adjustableHeight`         | `bool`   | `false`     | If true the height of the component adjusts to the content.                 |
+| `buttonText`              | `string` |             | Text for the button that appears in the top right corner of the header.     |
+| `description`             | `string` |             | Description that appears below the title in the header.                     |
+| `onClose`                 | `func`   |             | Function called when the bottom sheet is closed.                            |
+| `required`                | `bool`   |             | Indicates if the field is required, showing an asterisk in the title.       |
+| `title`                   | `string` |             | Title that appears in the bottom sheet header.                              |
+| `titleProps`              | `object` |             | Props for the title label                                                   |
+| `visible`                 | `bool`   |             | Controls the visibility of the bottom sheet.                                |
+| `scrolleable`             | `bool`   | `false`     | Determines if the content inside the bottom sheet should be scrollable.     |
+| `actionAlignment`         | `string` |             | Aligns the actions.                                                         |
+| `onCloseProps`            | `object` |             | Additional props passed to the `onClose` function (optional).               |
+| `primaryAction`           | `func`   |             | Callback for the primary action button.                                     |
+| `primaryActionProps`      | `object` |             | Props for the primary action button.                                        |
+| `primaryActionText`       | `string` |             | Text for the primary action button.                                         |
+| `secondaryAction`         | `func`   |             | Callback for the secondary action button.                                   |
+| `secondaryActionProps`    | `object` |             | Props for the secondary action button.                                      |
+| `secondaryActionText`     | `string` |             | Text for the secondary action button.                                       |
+| `tertiaryAction`          | `func`   |             | Callback for the tertiary action button.                                    |
+| `tertiaryActionProps`     | `object` |             | Props for the tertiary action button .                                      |
+| `tertiaryActionText`      | `string` |             | Text for the tertiary action button.                                        |
 
 ### actionAlignment
 

package/lib/components/UTBottomSheet/index.js

@@ -1,5 +1,5 @@
-import React, { useRef, useState, useEffect, useCallback, useMemo } from 'react';
-import { SafeAreaView, View, PanResponder, Animated, Dimensions, ScrollView, Keyboard } from 'react-native';
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+import { SafeAreaView, View, Animated, Dimensions, ScrollView, Keyboard } from 'react-native';
 import Modal from 'react-native-modal';
 import { bool, func, object, string } from 'prop-types';
 
@@ -14,6 +14,7 @@ import { ACTION_ALIGNMENTS } from './constants';
 const screenHeight = Dimensions.get('window').height;
 
 const UTBottomSheet = ({
+  adjustableHeight = false,
   actionAlignment: actionAlignment_,
   buttonText,
   children,
@@ -32,45 +33,22 @@ const UTBottomSheet = ({
   tertiaryActionProps = {},
   tertiaryActionText,
   title,
+  titleProps = {},
   visible
 }) => {
-  const [isFullScreen, setIsFullScreen] = useState(false);
-  const [modalHeight, setModalHeight] = useState('70%');
+  const [height, setHeight] = useState('70%');
+  const [modalHeight, setModalHeight] = useState(height);
   const pan = useRef(new Animated.ValueXY()).current;
 
   const theme = useTheme();
 
-  const panResponder = useMemo(
-    () =>
-      PanResponder.create({
-        onMoveShouldSetPanResponder: (_, gestureState) => gestureState.dy > 0,
-        onPanResponderMove: (_, gestureState) => {
-          if (gestureState.dy > 0) {
-            pan.setValue({ x: 0, y: gestureState.dy });
-          }
-        },
-        onPanResponderRelease: (_, gestureState) => {
-          if (gestureState.dy > 50) {
-            setIsFullScreen(true);
-            pan.flattenOffset();
-          } else {
-            Animated.spring(pan, {
-              toValue: { x: 0, y: 0 },
-              useNativeDriver: false
-            }).start();
-          }
-        }
-      }),
-    [pan]
-  );
-
   const handleKeyboardDidShow = useCallback(e => {
     setModalHeight(screenHeight - e.endCoordinates.height);
   }, []);
 
   const handleKeyboardDidHide = useCallback(() => {
-    setModalHeight(isFullScreen ? screenHeight : '70%');
-  }, [isFullScreen]);
+    setModalHeight(height);
+  }, [height]);
 
   useEffect(() => {
     const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', handleKeyboardDidShow);
@@ -82,9 +60,14 @@ const UTBottomSheet = ({
     };
   }, [handleKeyboardDidShow, handleKeyboardDidHide]);
 
+  const onLayout = useCallback(event => {
+    const { height: layoutHeight } = event.nativeEvent.layout;
+    if (adjustableHeight) setHeight(layoutHeight);
+  }, []);
+
   useEffect(() => {
-    setModalHeight(isFullScreen ? screenHeight : '70%');
-  }, [isFullScreen]);
+    setModalHeight(height);
+  }, [height]);
 
   const ChildrenContainer = scrolleable ? ScrollView : View;
 
@@ -107,14 +90,20 @@ const UTBottomSheet = ({
       swipeDirection="down"
     >
       <Animated.View style={[styles.animatedContainer, { height: modalHeight }, pan.getLayout()]}>
-        <SafeAreaView style={styles.safeArea}>
-          <View style={styles.dragHandle} {...panResponder.panHandlers}>
+        <SafeAreaView onLayout={onLayout}>
+          <View style={styles.dragHandle}>
             <View style={styles.handleIndicator(theme)} />
           </View>
           <View style={styles.content}>
             <View style={styles.header}>
               <View style={styles.headerTopRow}>
-                <UTFieldLabel required={required} variant="subtitle1" weight="medium" style={styles.title}>
+                <UTFieldLabel
+                  required={required}
+                  style={styles.title}
+                  variant="subtitle1"
+                  weight="medium"
+                  {...titleProps}
+                >
                   {title}
                 </UTFieldLabel>
                 {buttonText && (
@@ -186,6 +175,7 @@ UTBottomSheet.defaultProps = {
 };
 
 UTBottomSheet.propTypes = {
+  adjustableHeight: bool,
   actionAlignment: string,
   buttonText: string,
   description: string,
@@ -203,6 +193,7 @@ UTBottomSheet.propTypes = {
   tertiaryActionProps: object,
   tertiaryActionText: string,
   title: string,
+  titleProps: object,
   visible: bool
 };
 

package/lib/components/UTBottomSheet/styles.js

@@ -13,7 +13,6 @@ const styles = StyleSheet.create({
     flexShrink: 1
   },
   content: {
-    flex: 1,
     padding: 16,
     rowGap: 16
   },
@@ -41,9 +40,6 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end',
     margin: 0
   },
-  safeArea: {
-    flex: 1
-  },
   title: {
     flex: 1
   },

package/lib/components/UTFieldLabel/index.js

@@ -9,7 +9,7 @@ import styles from './styles';
 
 const UTFieldLabel = ({ children, colorTheme, required, style, variant, weight, withMarkdown }) => (
   <View style={[styles.label, style]}>
-    <UTLabel colorTheme={colorTheme} variant={variant} withMarkdown={withMarkdown}>
+    <UTLabel colorTheme={colorTheme} variant={variant} weight={weight} withMarkdown={withMarkdown}>
       {children}
     </UTLabel>
     {required && (

package/lib/components/UTRating/styles.js

@@ -26,7 +26,7 @@ export default StyleSheet.create({
     return {
       alignContent: 'center',
       display: 'flex',
-      flexBasis: breakOptions ? (containerWidth - (topItems - 1) * 4) / topItems : 0,
+      flexBasis: breakOptions ? (containerWidth - topItems * 4) / topItems : 0,
       flexDirection: 'row',
       flexGrow: breakOptions ? 0 : 1,
       flexShrink: 0,

package/lib/components/UTTextInput/versions/V1/components/TextInputField/index.js

@@ -30,6 +30,7 @@ const TextInputField = ({
   style,
   suffix,
   tooltip,
+  tooltipProps,
   type,
   value
 }) => {
@@ -42,7 +43,7 @@ const TextInputField = ({
     { name: COMPONENT_KEYS.SUFFIX, props: { text: suffix } },
     { name: COMPONENT_KEYS.ICON, props: { Icon: RightIcon, changeOnError: true } },
     { name: COMPONENT_KEYS.ACTION, props: { action } },
-    { name: COMPONENT_KEYS.TOOLTIP, props: { tooltip } }
+    { name: COMPONENT_KEYS.TOOLTIP, props: { tooltip, tooltipProps } }
   ];
 
   return (
@@ -106,6 +107,11 @@ TextInputField.propTypes = {
   }),
   suffix: string,
   tooltip: string,
+  tooltipProps: shape({
+    tooltip: object,
+    arrowTouchable: object,
+    labelProps: object
+  }),
   type: string,
   value: string
 };

package/lib/components/UTTextInput/versions/V1/index.js

@@ -41,6 +41,7 @@ const UTTextInput = ({
   title,
   titleVariant = 'large',
   tooltip,
+  tooltipProps,
   type,
   validations,
   value = null
@@ -85,6 +86,7 @@ const UTTextInput = ({
         style={style}
         suffix={suffix}
         tooltip={tooltip}
+        tooltipProps={tooltipProps}
         type={type}
         value={value}
       />
@@ -136,6 +138,11 @@ export const propTypes = {
   suffix: string,
   title: string,
   titleVariant: string,
+  tooltipProps: shape({
+    tooltip: object,
+    arrowTouchable: object,
+    labelProps: object
+  }),
   tooltip: string,
   type: string,
   validations: validationDataProptypes,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.32.16",
+  "version": "1.33.1",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [