dhre-ui-kit 0.0.155 → 0.0.156

package/lib/index.mjs

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import { Dimensions, StyleSheet, Text, Pressable, View, Modal, KeyboardAvoidingView, Platform, TextInput, ScrollView, Animated, FlatList, ActivityIndicator, TouchableOpacity, Alert, Linking, PanResponder } from 'react-native';
 import { PanGestureHandler, GestureHandlerRootView, Swipeable } from 'react-native-gesture-handler';
 import { BlurView } from '@react-native-community/blur';
-import Tooltip from 'rn-tooltip';
+import Tooltip from 'react-native-walkthrough-tooltip';
 import Pdf from 'react-native-pdf';
 import * as Progress from 'react-native-progress';
 import { Calendar } from 'react-native-calendars';
@@ -328,13 +328,13 @@ const CustomTypography = ({
     Text,
     {
       testID,
-      style: [textStyle, styles$C.container, style],
+      style: [textStyle, styles$B.container, style],
       ...props
     },
     text
   );
 };
-const styles$C = StyleSheet.create({
+const styles$B = StyleSheet.create({
   container: { writingDirection: "auto", alignSelf: "flex-start" }
 });
 
@@ -545,7 +545,7 @@ const DHRE_COLORS_TEXT = {
   DH_LIGHTGREEN: "#00B578"
 };
 
-const styles$B = StyleSheet.create({
+const styles$A = StyleSheet.create({
   badge: {
     backgroundColor: DHRE_COLORS_ALERT.DH_SUCCESS_GREEN,
     borderRadius: 15,
@@ -572,16 +572,16 @@ const Badge = ({
   return /* @__PURE__ */ React.createElement(
     Pressable,
     {
-      style: [styles$B.badge, commonStyles.centerRow, style],
+      style: [styles$A.badge, commonStyles.centerRow, style],
       testID: "BADGE",
       onPress: handleIconPress
     },
-    iconName && /* @__PURE__ */ React.createElement(View, { style: [styles$B.icon, iconStyle] }, React.cloneElement(iconName)),
+    iconName && /* @__PURE__ */ React.createElement(View, { style: [styles$A.icon, iconStyle] }, React.cloneElement(iconName)),
     text && /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: "B3semiBold",
-        style: [styles$B.text, textStyle],
+        style: [styles$A.text, textStyle],
         text
       }
     )
@@ -589,7 +589,7 @@ const Badge = ({
 };
 var Badge$1 = withThemeProvider(Badge);
 
-const styles$A = StyleSheet.create({
+const styles$z = StyleSheet.create({
   mainContainer: {
     flex: 1,
     justifyContent: "flex-end"
@@ -669,29 +669,29 @@ const BottomDrawer = ({
         behavior: Platform.OS === "ios" ? "padding" : "height",
         style: { flex: 1 }
       },
-      /* @__PURE__ */ React.createElement(View, { style: [styles$A.mainContainer, style], testID }, showBlurView ? /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(View, { style: [styles$z.mainContainer, style], testID }, showBlurView ? /* @__PURE__ */ React.createElement(
         BlurView,
         {
-          style: [styles$A.blurView, blurViewStyle],
+          style: [styles$z.blurView, blurViewStyle],
           blurType,
           blurAmount
         }
-      ) : null, /* @__PURE__ */ React.createElement(View, { style: [styles$A.modalContainer, modalContainerStyle] }, showHeader && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: styles$A.separator }), /* @__PURE__ */ React.createElement(View, { style: styles$A.headerContainer }, showLeftIcon && leftIcon ? React.cloneElement(leftIcon, {
+      ) : null, /* @__PURE__ */ React.createElement(View, { style: [styles$z.modalContainer, modalContainerStyle] }, showHeader && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: styles$z.separator }), /* @__PURE__ */ React.createElement(View, { style: styles$z.headerContainer }, showLeftIcon && leftIcon ? React.cloneElement(leftIcon, {
         width: moderateScale(24),
         height: moderateScale(24),
-        style: styles$A.leftIconStyle,
+        style: styles$z.leftIconStyle,
         onPress: onLeftIconPress
       }) : null, /* @__PURE__ */ React.createElement(
         CustomTypography,
         {
           variant: titleVariant,
           text: title,
-          style: { ...styles$A.title, ...titleStyle }
+          style: { ...styles$z.title, ...titleStyle }
         }
       ), showRightIcon && rightIcon ? React.cloneElement(rightIcon, {
         width: moderateScale(24),
         height: moderateScale(24),
-        style: styles$A.rightIconStyle,
+        style: styles$z.rightIconStyle,
         onPress: toggleModal
       }) : null)), children))
     ))
@@ -720,7 +720,7 @@ const CustomButton = ({
     {
       testID,
       style: [
-        styles$z.buttonContainer,
+        styles$y.buttonContainer,
         containerStyle,
         disabled ? {
           backgroundColor: disabledColor ? disabledColor : theme.SURFACE_DISABLE
@@ -747,7 +747,7 @@ const CustomButton = ({
     imagePosition === "right" && rightIcon && /* @__PURE__ */ React.createElement(View, { style: iconStyle }, React.cloneElement(rightIcon, { width: 20, height: 20 }))
   );
 };
-const styles$z = StyleSheet.create({
+const styles$y = StyleSheet.create({
   buttonContainer: {
     flexDirection: "row",
     alignItems: "center",
@@ -759,7 +759,7 @@ const styles$z = StyleSheet.create({
 });
 var CustomButton$1 = withThemeProvider(CustomButton);
 
-const styles$y = StyleSheet.create({
+const styles$x = StyleSheet.create({
   container: {
     padding: horizontalScale(20),
     marginHorizontal: horizontalScale(16),
@@ -824,53 +824,53 @@ const Cards = ({
   testID,
   onButtonPress
 }) => {
-  return /* @__PURE__ */ React.createElement(View, { testID, style: styles$y.container }, topLeftTitle ? /* @__PURE__ */ React.createElement(View, { style: styles$y.topLeft }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(View, { testID, style: styles$x.container }, topLeftTitle ? /* @__PURE__ */ React.createElement(View, { style: styles$x.topLeft }, /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "P2regular",
-      style: styles$y.title,
+      style: styles$x.title,
       text: topLeftTitle
     }
   )) : null, title ? /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "H6bold",
-      style: styles$y.subTitleBelow,
+      style: styles$x.subTitleBelow,
       text: title
     }
   ) : null, subtitle ? /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "P3regular",
-      style: styles$y.subtitle,
+      style: styles$x.subtitle,
       text: subtitle
     }
-  ) : null, /* @__PURE__ */ React.createElement(View, { style: styles$y.leftBottomView }, iconSource ? iconSource : null, iconTitle ? /* @__PURE__ */ React.createElement(
+  ) : null, /* @__PURE__ */ React.createElement(View, { style: styles$x.leftBottomView }, iconSource ? iconSource : null, iconTitle ? /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "P3regular",
-      style: styles$y.subTitleLeftBelow,
+      style: styles$x.subTitleLeftBelow,
       text: iconTitle
     }
   ) : null), buttonShown ? /* @__PURE__ */ React.createElement(
     Pressable,
     {
       testID: "Button-Press",
-      style: styles$y.button,
+      style: styles$x.button,
       onPress: onButtonPress
     },
     /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: "B2semiBold",
-        style: styles$y.buttonText,
+        style: styles$x.buttonText,
         text: buttonText
       }
     )
   ) : null);
 };
 
-const styles$x = StyleSheet.create({
+const styles$w = StyleSheet.create({
   checkboxContainer: {
     alignItems: "center",
     justifyContent: "center"
@@ -926,9 +926,9 @@ const Checkbox = ({
       testID: "Checkbox-Press",
       onPress: handlePress,
       disabled: disable,
-      style: styles$x.directionStyle
+      style: styles$w.directionStyle
     },
-    /* @__PURE__ */ React.createElement(View, { style: styles$x.checkboxContainer }, React.cloneElement(checked ? checkedIcon : uncheckedIcon)),
+    /* @__PURE__ */ React.createElement(View, { style: styles$w.checkboxContainer }, React.cloneElement(checked ? checkedIcon : uncheckedIcon)),
     /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
@@ -940,7 +940,7 @@ const Checkbox = ({
   ));
 };
 
-const styles$w = StyleSheet.create({
+const styles$v = StyleSheet.create({
   labelStyle: {
     color: DHRE_COLORS_TEXT.DH_TEXTLIGHT
   },
@@ -994,26 +994,26 @@ const CustomDropdown$1 = ({
     CustomTypography,
     {
       variant: "P3regular",
-      style: styles$w.labelStyle,
+      style: styles$v.labelStyle,
       text: label
     }
   ), /* @__PURE__ */ React.createElement(
     Pressable,
     {
       testID: `${testId}-BTN`,
-      style: styles$w.dropDownStyle,
+      style: styles$v.dropDownStyle,
       onPress: () => setShowOptions(!showOptions)
     },
     iconName && /* @__PURE__ */ React.createElement(View, { style: iconStyle }, React.cloneElement(iconName, {
       width: moderateScale(24),
       height: moderateScale(24),
-      style: styles$w.iconStyle
+      style: styles$v.iconStyle
     })),
     /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: "P3regular",
-        style: styles$w.selectedValueStyle,
+        style: styles$v.selectedValueStyle,
         text: selectedValue ? selectedValue.label : placeholder
       }
     ),
@@ -1024,7 +1024,7 @@ const CustomDropdown$1 = ({
       width: moderateScale(24),
       height: moderateScale(24)
     }))
-  ), showOptions && /* @__PURE__ */ React.createElement(View, { style: styles$w.optionContainer }, options?.map(({ id, value, label: label2 }) => /* @__PURE__ */ React.createElement(
+  ), showOptions && /* @__PURE__ */ React.createElement(View, { style: styles$v.optionContainer }, options?.map(({ id, value, label: label2 }) => /* @__PURE__ */ React.createElement(
     Pressable,
     {
       key: id,
@@ -1034,7 +1034,7 @@ const CustomDropdown$1 = ({
         oneSelect({ id, value, label: label2 });
       },
       style: [
-        styles$w.item,
+        styles$v.item,
         {
           backgroundColor: id === selectedValue?.id ? DHRE_COLORS_BG.DH_GREY1 : DHRE_COLORS_TEXT.DH_WHITE
         }
@@ -1043,7 +1043,7 @@ const CustomDropdown$1 = ({
     iconName && /* @__PURE__ */ React.createElement(View, { style: iconStyle }, React.cloneElement(iconName, {
       width: moderateScale(24),
       height: moderateScale(24),
-      style: styles$w.iconStyle
+      style: styles$v.iconStyle
     })),
     /* @__PURE__ */ React.createElement(
       CustomTypography,
@@ -1058,7 +1058,7 @@ const CustomDropdown$1 = ({
   ))));
 };
 
-const styles$v = StyleSheet.create({
+const styles$u = StyleSheet.create({
   labelStyle: {
     color: DHRE_COLORS_TEXT.DH_TEXTDARK
   },
@@ -1140,18 +1140,18 @@ const CustomTextInput = ({
     CustomTypography,
     {
       variant: "P3medium",
-      style: [styles$v.labelStyle, disabled && styles$v.disableTextStyle],
+      style: [styles$u.labelStyle, disabled && styles$u.disableTextStyle],
       text: label
     }
   ), /* @__PURE__ */ React.createElement(
     View,
     {
       style: [
-        styles$v.inputContainer,
-        isFocused && styles$v.inputFocused,
-        error && styles$v.inputError,
-        disabled && styles$v.disableInputStyle,
-        successMessage ? styles$v.inputSucess : {},
+        styles$u.inputContainer,
+        isFocused && styles$u.inputFocused,
+        error && styles$u.inputError,
+        disabled && styles$u.disableInputStyle,
+        successMessage ? styles$u.inputSucess : {},
         {
           height: multiline ? 120 : 48,
           alignItems: multiline ? "flex-start" : "center"
@@ -1161,7 +1161,7 @@ const CustomTextInput = ({
     isSearchBar && searchIcon && React.cloneElement(searchIcon, {
       width: moderateScale(24),
       height: moderateScale(24),
-      style: styles$v.searchIconStyle
+      style: styles$u.searchIconStyle
     }),
     /* @__PURE__ */ React.createElement(
       TextInput,
@@ -1169,7 +1169,7 @@ const CustomTextInput = ({
         ...props,
         onFocus,
         onBlur,
-        style: styles$v.input,
+        style: styles$u.input,
         placeholderTextColor: DHRE_COLORS_TEXT.DH_TEXTLIGHTEST,
         editable: !disabled,
         value,
@@ -1202,52 +1202,26 @@ const CustomTextInput = ({
   ));
 };
 
-const styles$u = StyleSheet.create({
-  tooltipContainerStyle: {
-    flex: 1,
-    borderRadius: moderateScale(16),
-    padding: moderateScale(8)
-  },
-  mesageContainer: {
-    flex: 1,
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center"
-  },
-  messageStyle: {
-    flex: 1,
-    color: DHRE_COLORS_TEXT.DH_TEXTDARK
-  }
-});
-
 const CustomTooltip = ({
-  message,
-  children,
-  actionType = "press",
-  testId = "CUSTOM-TOOLTIP",
-  backgroundColor = DHRE_COLORS_TEXT.DH_WHITE,
-  popoverContent,
-  icon,
-  iconStyle,
-  iconColor = DHRE_COLORS_TEXT.DH_BLACK
+  isVisible,
+  onClose,
+  content,
+  placement = "bottom",
+  displayInsets = { top: 0, bottom: 20, left: 20, right: 0 },
+  backgroundColor,
+  triggerElement
 }) => {
-  const defaultPopoverContent = /* @__PURE__ */ React.createElement(View, { style: styles$u.mesageContainer, testID: testId }, /* @__PURE__ */ React.createElement(
-    CustomTypography,
-    {
-      variant: "P4regular",
-      style: styles$u.messageStyle,
-      text: message
-    }
-  ), icon && /* @__PURE__ */ React.createElement(View, { style: iconStyle }, React.cloneElement(icon, { fill: iconColor })));
   return /* @__PURE__ */ React.createElement(
     Tooltip,
     {
-      containerStyle: styles$u.tooltipContainerStyle,
-      backgroundColor,
-      popover: popoverContent || defaultPopoverContent,
-      actionType
+      isVisible,
+      content,
+      placement,
+      onClose,
+      displayInsets,
+      backgroundColor
     },
-    children
+    triggerElement
   );
 };