dhre-ui-kit 0.0.154 → 0.0.156

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import React$1, { ReactElement, ReactNode } from 'react';
+import React$1, { ReactElement, ReactNode, JSXElementConstructor } from 'react';
 import { TextStyle, TextProps, StyleProp, ViewStyle, TextInputProps, ImageStyle, GestureResponderEvent } from 'react-native';
 import { SvgProps } from 'react-native-svg';
 import { PdfProps } from 'react-native-pdf';
@@ -151,15 +151,18 @@ interface CustomTextInputProps extends TextInputProps {
 declare const CustomTextInput: React$1.FC<CustomTextInputProps>;
 
 interface CustomTooltipProps {
-    message: string;
-    children: React$1.ReactNode;
-    actionType?: 'press' | 'longPress';
-    testId?: string;
+    isVisible: boolean;
+    onClose: () => void;
+    content: ReactElement<string | JSXElementConstructor<string>>;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    displayInsets?: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
     backgroundColor?: string;
-    popoverContent?: React$1.ReactElement;
-    icon?: ReactElement;
-    iconStyle?: ViewStyle;
-    iconColor?: string;
+    triggerElement: React.ReactNode;
 }
 
 declare const CustomTooltip: React$1.FC<CustomTooltipProps>;

package/lib/index.js

@@ -7,7 +7,7 @@ var reactRedux = require('react-redux');
 var reactNative = require('react-native');
 var reactNativeGestureHandler = require('react-native-gesture-handler');
 var blur = require('@react-native-community/blur');
-var Tooltip = require('rn-tooltip');
+var Tooltip = require('react-native-walkthrough-tooltip');
 var Pdf = require('react-native-pdf');
 var Progress = require('react-native-progress');
 var reactNativeCalendars = require('react-native-calendars');
@@ -361,13 +361,13 @@ const CustomTypography = ({
     reactNative.Text,
     {
       testID,
-      style: [textStyle, styles$C.container, style],
+      style: [textStyle, styles$B.container, style],
       ...props
     },
     text
   );
 };
-const styles$C = reactNative.StyleSheet.create({
+const styles$B = reactNative.StyleSheet.create({
   container: { writingDirection: "auto", alignSelf: "flex-start" }
 });
 
@@ -578,7 +578,7 @@ const DHRE_COLORS_TEXT = {
   DH_LIGHTGREEN: "#00B578"
 };
 
-const styles$B = reactNative.StyleSheet.create({
+const styles$A = reactNative.StyleSheet.create({
   badge: {
     backgroundColor: DHRE_COLORS_ALERT.DH_SUCCESS_GREEN,
     borderRadius: 15,
@@ -605,16 +605,16 @@ const Badge = ({
   return /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
-      style: [styles$B.badge, commonStyles.centerRow, style],
+      style: [styles$A.badge, commonStyles.centerRow, style],
       testID: "BADGE",
       onPress: handleIconPress
     },
-    iconName && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$B.icon, iconStyle] }, React__default["default"].cloneElement(iconName)),
+    iconName && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$A.icon, iconStyle] }, React__default["default"].cloneElement(iconName)),
     text && /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "B3semiBold",
-        style: [styles$B.text, textStyle],
+        style: [styles$A.text, textStyle],
         text
       }
     )
@@ -622,7 +622,7 @@ const Badge = ({
 };
 var Badge$1 = withThemeProvider(Badge);
 
-const styles$A = reactNative.StyleSheet.create({
+const styles$z = reactNative.StyleSheet.create({
   mainContainer: {
     flex: 1,
     justifyContent: "flex-end"
@@ -702,29 +702,29 @@ const BottomDrawer = ({
         behavior: reactNative.Platform.OS === "ios" ? "padding" : "height",
         style: { flex: 1 }
       },
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$A.mainContainer, style], testID }, showBlurView ? /* @__PURE__ */ React__default["default"].createElement(
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$z.mainContainer, style], testID }, showBlurView ? /* @__PURE__ */ React__default["default"].createElement(
         blur.BlurView,
         {
-          style: [styles$A.blurView, blurViewStyle],
+          style: [styles$z.blurView, blurViewStyle],
           blurType,
           blurAmount
         }
-      ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$A.modalContainer, modalContainerStyle] }, showHeader && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$A.separator }), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$A.headerContainer }, showLeftIcon && leftIcon ? React__default["default"].cloneElement(leftIcon, {
+      ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$z.modalContainer, modalContainerStyle] }, showHeader && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$z.separator }), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$z.headerContainer }, showLeftIcon && leftIcon ? React__default["default"].cloneElement(leftIcon, {
         width: moderateScale(24),
         height: moderateScale(24),
-        style: styles$A.leftIconStyle,
+        style: styles$z.leftIconStyle,
         onPress: onLeftIconPress
       }) : null, /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
           variant: titleVariant,
           text: title,
-          style: { ...styles$A.title, ...titleStyle }
+          style: { ...styles$z.title, ...titleStyle }
         }
       ), showRightIcon && rightIcon ? React__default["default"].cloneElement(rightIcon, {
         width: moderateScale(24),
         height: moderateScale(24),
-        style: styles$A.rightIconStyle,
+        style: styles$z.rightIconStyle,
         onPress: toggleModal
       }) : null)), children))
     ))
@@ -753,7 +753,7 @@ const CustomButton = ({
     {
       testID,
       style: [
-        styles$z.buttonContainer,
+        styles$y.buttonContainer,
         containerStyle,
         disabled ? {
           backgroundColor: disabledColor ? disabledColor : theme.SURFACE_DISABLE
@@ -780,7 +780,7 @@ const CustomButton = ({
     imagePosition === "right" && rightIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: iconStyle }, React__default["default"].cloneElement(rightIcon, { width: 20, height: 20 }))
   );
 };
-const styles$z = reactNative.StyleSheet.create({
+const styles$y = reactNative.StyleSheet.create({
   buttonContainer: {
     flexDirection: "row",
     alignItems: "center",
@@ -792,7 +792,7 @@ const styles$z = reactNative.StyleSheet.create({
 });
 var CustomButton$1 = withThemeProvider(CustomButton);
 
-const styles$y = reactNative.StyleSheet.create({
+const styles$x = reactNative.StyleSheet.create({
   container: {
     padding: horizontalScale(20),
     marginHorizontal: horizontalScale(16),
@@ -857,53 +857,53 @@ const Cards = ({
   testID,
   onButtonPress
 }) => {
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID, style: styles$y.container }, topLeftTitle ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$y.topLeft }, /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID, style: styles$x.container }, topLeftTitle ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$x.topLeft }, /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "P2regular",
-      style: styles$y.title,
+      style: styles$x.title,
       text: topLeftTitle
     }
   )) : null, title ? /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "H6bold",
-      style: styles$y.subTitleBelow,
+      style: styles$x.subTitleBelow,
       text: title
     }
   ) : null, subtitle ? /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "P3regular",
-      style: styles$y.subtitle,
+      style: styles$x.subtitle,
       text: subtitle
     }
-  ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$y.leftBottomView }, iconSource ? iconSource : null, iconTitle ? /* @__PURE__ */ React__default["default"].createElement(
+  ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$x.leftBottomView }, iconSource ? iconSource : null, iconTitle ? /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "P3regular",
-      style: styles$y.subTitleLeftBelow,
+      style: styles$x.subTitleLeftBelow,
       text: iconTitle
     }
   ) : null), buttonShown ? /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
       testID: "Button-Press",
-      style: styles$y.button,
+      style: styles$x.button,
       onPress: onButtonPress
     },
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "B2semiBold",
-        style: styles$y.buttonText,
+        style: styles$x.buttonText,
         text: buttonText
       }
     )
   ) : null);
 };
 
-const styles$x = reactNative.StyleSheet.create({
+const styles$w = reactNative.StyleSheet.create({
   checkboxContainer: {
     alignItems: "center",
     justifyContent: "center"
@@ -959,9 +959,9 @@ const Checkbox = ({
       testID: "Checkbox-Press",
       onPress: handlePress,
       disabled: disable,
-      style: styles$x.directionStyle
+      style: styles$w.directionStyle
     },
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$x.checkboxContainer }, React__default["default"].cloneElement(checked ? checkedIcon : uncheckedIcon)),
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$w.checkboxContainer }, React__default["default"].cloneElement(checked ? checkedIcon : uncheckedIcon)),
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
@@ -973,7 +973,7 @@ const Checkbox = ({
   ));
 };
 
-const styles$w = reactNative.StyleSheet.create({
+const styles$v = reactNative.StyleSheet.create({
   labelStyle: {
     color: DHRE_COLORS_TEXT.DH_TEXTLIGHT
   },
@@ -1027,26 +1027,26 @@ const CustomDropdown$1 = ({
     CustomTypography,
     {
       variant: "P3regular",
-      style: styles$w.labelStyle,
+      style: styles$v.labelStyle,
       text: label
     }
   ), /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
       testID: `${testId}-BTN`,
-      style: styles$w.dropDownStyle,
+      style: styles$v.dropDownStyle,
       onPress: () => setShowOptions(!showOptions)
     },
     iconName && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: iconStyle }, React__default["default"].cloneElement(iconName, {
       width: moderateScale(24),
       height: moderateScale(24),
-      style: styles$w.iconStyle
+      style: styles$v.iconStyle
     })),
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "P3regular",
-        style: styles$w.selectedValueStyle,
+        style: styles$v.selectedValueStyle,
         text: selectedValue ? selectedValue.label : placeholder
       }
     ),
@@ -1057,7 +1057,7 @@ const CustomDropdown$1 = ({
       width: moderateScale(24),
       height: moderateScale(24)
     }))
-  ), showOptions && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$w.optionContainer }, options?.map(({ id, value, label: label2 }) => /* @__PURE__ */ React__default["default"].createElement(
+  ), showOptions && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$v.optionContainer }, options?.map(({ id, value, label: label2 }) => /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
       key: id,
@@ -1067,7 +1067,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
         }
@@ -1076,7 +1076,7 @@ const CustomDropdown$1 = ({
     iconName && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: iconStyle }, React__default["default"].cloneElement(iconName, {
       width: moderateScale(24),
       height: moderateScale(24),
-      style: styles$w.iconStyle
+      style: styles$v.iconStyle
     })),
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
@@ -1091,7 +1091,7 @@ const CustomDropdown$1 = ({
   ))));
 };
 
-const styles$v = reactNative.StyleSheet.create({
+const styles$u = reactNative.StyleSheet.create({
   labelStyle: {
     color: DHRE_COLORS_TEXT.DH_TEXTDARK
   },
@@ -1173,18 +1173,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__default["default"].createElement(
     reactNative.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"
@@ -1194,7 +1194,7 @@ const CustomTextInput = ({
     isSearchBar && searchIcon && React__default["default"].cloneElement(searchIcon, {
       width: moderateScale(24),
       height: moderateScale(24),
-      style: styles$v.searchIconStyle
+      style: styles$u.searchIconStyle
     }),
     /* @__PURE__ */ React__default["default"].createElement(
       reactNative.TextInput,
@@ -1202,7 +1202,7 @@ const CustomTextInput = ({
         ...props,
         onFocus,
         onBlur,
-        style: styles$v.input,
+        style: styles$u.input,
         placeholderTextColor: DHRE_COLORS_TEXT.DH_TEXTLIGHTEST,
         editable: !disabled,
         value,
@@ -1235,52 +1235,26 @@ const CustomTextInput = ({
   ));
 };
 
-const styles$u = reactNative.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__default["default"].createElement(reactNative.View, { style: styles$u.mesageContainer, testID: testId }, /* @__PURE__ */ React__default["default"].createElement(
-    CustomTypography,
-    {
-      variant: "P4regular",
-      style: styles$u.messageStyle,
-      text: message
-    }
-  ), icon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: iconStyle }, React__default["default"].cloneElement(icon, { fill: iconColor })));
   return /* @__PURE__ */ React__default["default"].createElement(
     Tooltip__default["default"],
     {
-      containerStyle: styles$u.tooltipContainerStyle,
-      backgroundColor,
-      popover: popoverContent || defaultPopoverContent,
-      actionType
+      isVisible,
+      content,
+      placement,
+      onClose,
+      displayInsets,
+      backgroundColor
     },
-    children
+    triggerElement
   );
 };
 
@@ -4283,7 +4257,8 @@ const styles$1 = reactNative.StyleSheet.create({
   viewText: {
     flex: 1,
     textDecorationLine: "underline",
-    alignSelf: "center"
+    alignSelf: "center",
+    textAlign: "left"
   },
   actionIcons: {
     flexDirection: "row",